Design the Shopping Cart page for e-GMAT.com, the fastest growing GMAT Prep website.

http://www.e-gmat.com

e-GMAT is one of the top online test prep company. We started about
two years ago and today have more than 120,000 users in 50 countries.
We are the top rated company for non-natives on GMAT Club – the
world’s largest community of GMAT aspirants. Things that separate us
from the competition:

1. Focus on non-natives: Our courses are designed for students who
have not done their schooling (K12) in USA, UK, and Australia.

2. Personalized learning: Our courses are personalized to the learner.

3. Audio visual aspect: We believe you learn best when you see, read
and hear at the same time. Hence, all our courses are fantastically
audio visual. Click here for a sample of one of our concepts.

4. People: We hire the best and make sure that they work full time.
This is very different from other test prep companies that hire
average teachers on part time basis.

TARGET AUDIENCE

Broad target consumer will be between 21 and 35 whilst the core target
will be between 25 and 32. The target audience is internet savvy and
spends a considerable amount of time on the internet.

http://www.e-gmat.com

We are designing a new Shopping Cart page for our website. The buying mechanism on the e-GMAT website functions typically like an ecommerce website where the user can add course(s) to his cart and then check out by paying for those course(s).
In the current situation, the cart is from the earlier version of the e-GMAT website and looks very different from the rest of the website. Hence when a user moves from the buy page to the shopping cart, the experience is not very friendly and is alienating. Also the process to purchase is very long and cumbersome and involves a few redundant steps.
We are trying to solve this problem by designing a new cart structure both in terms of design and functionality.
The main criteria which we want the focus on are:
1. Covers the essential workflow of a shopping cart
a. Makes the purchase process easy for the user
b. Builds trust and gives push to the user to pay out of his pocket.
c. The look and feel of the cart should be such that it gives an impression that it is a part of the e-GMAT website.
2. Is user-friendly
a. Simple, Clean and easily Navigable Interface
b. Minimal number of steps
c. 1. Covers the essential workflow of a shopping cart
a. Makes the purchase process easy for the user
b. Builds trust and gives push to the user to pay out of his pocket.
c. The look and feel of the cart should be such that it gives an impression that it is a part of the e-GMAT website.
2. Is user-friendly
a. Simple, Clean and easily Navigable Interface
b. Minimal number of steps
c. The design/layout is as per the standard web 2.0.

Description of the page

On the top of the page there will be a logo of EGMAT in the left corner. On the right corner there will be Static images for Secure Payment and Risk free guarantee.
The cart page comprises of 3 expandable/collapsible sections as shown below:
1. Login Details Section
2. Product details section
3. Payment details section

The 3 sections will function in a top to down fashion (Refer to the attached presentation). Initially (when a user lands on the shopping cart) only the first section (Login details) is expanded and visible. The other two sections would be minimized.
Clicking on the call to action button (of the first section) would minimize the first section and expand the second section.
Similarly, clicking on the call to action button of the second section will minimize the second section and expand the third section.
Any of the sections can be revisited by clicking on the corresponding tab, please see slide 3 of the attached presentation.
The courses which the user is buying are bought from this page http://www.e-gmat.com/buy
Section details:
1. Login Details Section:
• The first section of the page is the “Login Details” section. Here there will be two radio buttons for the user to select stacked horizontally (whether he is already registered or not).
By default the radio button (E-GMAT User) will be selected. Based on the user selection (e-GMAT User or I am a new user) there will be either 2 fields or 3 fields to enter the details.(Refer to slides 1 and 2).
• There will also be a password recovery link (Forgot Password?) for existing users.
When a user clicks on forgot password, a new message window will appear stating that your password has been reset and mailed to your Inbox.
• Once the user fills the pertinent fields, he will click on “Continue” to proceed to the Product Details section.

2. Product Details Section:
• In the product details section, the selected course name and the course validity will be highlighted in an enclosed space (which we portray to the user as “Your Cart”). The course name field and Course Validity will be dynamic fields depending upon the course and the duration user opts for. The curse name may appear in some Fancy highlighted font so that it catches the attention of the user.
• Below it there will be a field to enter Discount Code and a button to validate the discount code.
• If there is no discount code for the product, then it will display a standard discount code and show the discounted price. Below the discount code field, we can show a “Dummy Price”, strike it off and a “Discounted Price”.
• On the right side of “Your Cart” space there will be an Image for the Best Price Guarantee (we need an attractive and a striking logo so that it draws user’s attention and assures that this is the best deal available).
• Below the Best Price Guarantee image, we have a strong one-line message (10-15 words) with a small photograph and score.
• “Proceed to Payment” is the call to action button in this section and once the user clicks on it, it takes him to the next section “Payment Details

3. Payment Details Section:
• This section contains the standard information that is there in the current shopping cart’s Payment area.
• On the right side, we have the trust symbols(Statitc) – “Risk Free Purchase- 7 Day Money back Guarantee” Logo and another logo which indicates that the payment method/gateway is secure. We want these images/symbols to stand out and attract users attention as soon as the user lands on this section.
• “Submit your Order” will be the call to action button in this section and is the final call to action button.

Description of the page

On the top of the page there will be a logo of EGMAT in the left corner. On the right corner there will be Static images for Secure Payment and Risk free guarantee.
The cart page comprises of 3 expandable/collapsible sections as shown below:
1. Login Details Section
2. Product details section
3. Payment details section

The 3 sections will function in a top to down fashion (Refer to the attached presentation). Initially (when a user lands on the shopping cart) only the first section (Login details) is expanded and visible. The other two sections would be minimized.
Clicking on the call to action button (of the first section) would minimize the first section and expand the second section.
Similarly, clicking on the call to action button of the second section will minimize the second section and expand the third section.
Any of the sections can be revisited by clicking on the corresponding tab, please see slide 3 of the attached presentation.
The courses which the user is buying are bought from this page http://www.e-gmat.com/buy
Section details:
1. Login Details Section:
• The first section of the page is the “Login Details” section. Here there will be two radio buttons for the user to select stacked horizontally (whether he is already registered or not).
By default the radio button (E-GMAT User) will be selected. Based on the user selection (e-GMAT User or I am a new user) there will be either 2 fields or 3 fields to enter the details. Refer to the attached PDF for details.
• There will also be a password recovery link (Forgot Password?) for existing users.
When a user clicks on forgot password, a new message window will prompting the user to enter the registered email address to send the new password.
• If an existing user tries to sign up as a new user, a message appears telling him that he is already registered.
• Once the user fills the pertinent fields, he will click on “Continue” to proceed to the Product Details section.

2. Product Details Section:
• In the product details section, the selected course name and the course validity will be highlighted in an enclosed space (which we portray to the user as “Your Cart”). The course name field and Course Validity will be dynamic fields depending upon the course and the duration user opts for. The course name may appear in some Fancy highlighted font so that it catches the attention of the user.
• Below it there will be a field for Discount Code. This field will be non editable
• If there is no discount code for the product, then it will display a standard discount code and show the discounted price. Below the discount code field, we can show a “Dummy Price”, strike it off and a “Discounted Price”.
• On the right side of “Your Cart” space there will be an Image for the Best Price Guarantee (we need an attractive and a striking logo so that it draws user’s attention and assures that this is the best deal available).
• Below the Best Price Guarantee image, we have a strong one-line testimonial (10-15 words) with a small photograph and GMAT score.
• “Proceed to Payment” is the call to action button in this section and once the user clicks on it, it takes him to the next section “Payment Details

3. Payment Details Section:
• This section contains the standard information that is there in the current shopping cart’s Payment area.
• On the right side, we have the trust symbols (Static) – “Risk Free Purchase- 7 Day Money back Guarantee” Logo and another logo which indicates that the payment method/gateway is secure. We want these images/symbols to stand out and attract users attention as soon as the user lands on this section.
• “Submit your Order” will be the call to action button in this section and is the final call to action button