Rishabh UI Presentation - Meril.pdf

MasteringE-commerce
Conversions:CheckoutFlow
Enhancement
EnhancingUserExperiencesforSeamlessOnlineShopping
.
PresentedBy:
RishabhTiwari
1

Problem Discovery
Problem Statement
The task was to improve the checkout flow of an e-commerce website.The current checkout process
has been experiencing a high cart abandonment rate, and the company wants to optimize the flow to
increase conversions.

Your goal is to design an improved checkout flow that is intuitive, user-friendly, and encourages users to
complete their purchases.
3

Problem Discovery
Requirements
Analyse the existing checkout flow and identify pain points or areas that may contribute to cart abandonment
Design a new checkout flow that addresses the identified issues and streamlines the process
Consider the following elements in your design
User registration and guest checkout option
Clear and concise form field
Payment options and security consideration
Shipping and billing address entr
Order summary and revie
Progress indicators and clear calls to actio
Create wireframes or prototypes to visualize your proposed checkout flow
Explain your design decisions, highlighting how they address the pain points and improve the user experience
Consider responsive design principles to ensure a seamless checkout experience across different devices.
4

Problem Discovery
Data and Insights
In order to gain a deeper understanding of these issues, I conducted a thorough analysis of the pertinent data and
insights regarding user needs and the checkout process as a whole. Based on this research, I have identified the
following pain points that contribute to the high cart abandonment rates during checkout.
User Experience Related Insignts.
55%
user abandonment cart due to
Unexpected Costs
Hidden fees, high shipping costs, or
additional charges that are only
revealed during the checkout
process can deter users from
completing their purchase.
Source: Baymard Institute, VWO
21%
Complicated Checkout
Process
If the checkout process is too
complex or requires too many steps,
users may get frustrated and
abandon their carts.
15% to 30%
Poor Mobile Experience
With the increasing use of mobile
devices for online shopping, a
checkout process that is not
optimized for mobile screens can
result in high abandonment rates.
18%
Lack of Trust in Payment
Securit
If users have doubts about the
security of their personal information
or payment details, they may
abandon their carts.
5

Problem Discovery
Data and Insights
In order to gain a deeper understanding of these issues, I conducted a thorough analysis of the pertinent data and
insights regarding user needs and the checkout process as a whole. Based on this research, I have identified the
following pain points that contribute to the high cart abandonment rates during checkout.
User Experience Related Insignts.
34%
Lack of Guest Checkout
Option
Requiring users to create an account
before completing their purchase
can be a barrier.
8%
Limited Payment Options
Restricting payment options or not
offering popular and trusted payment
methods can lead to cart
abandonment.
25% to 30%
Lack of Clear Progress
Indicators
Users appreciate knowing where
they are in the checkout process and
how much is left to complete.
15% to 25%
Simplified Form Input
Mobile users may find it challenging
to input information on smaller
screens.
6

Problem Discovery
Data and Insights: Heuristic Evaluation
After conducting a comprehensive analysis of the user needs and the entire checkout process, I performed a heuristic
evaluation to assess the usability and identify potential issues.

This evaluation involved applying a set of predefined usability principles and guidelines to the checkout flow. I was able
to pinpoint specific pain points that contribute to the high cart abandonment rates. This evaluation serves as a
foundation for designing an improved and user-friendly checkout experience.
7

Problem Discovery
Data and Insights: Heuristic Evaluation
Let’s briefly breakdown the top 9 reasons.
1. Unexpected Additional Costs: 60% to 80% (Baymard Institute, VWO)

2. Complicated Checkout Process: 35% to 50% (Baymard Institute, VWO)

3. Lack of Trust in Payment Security: 15% to 25% (Baymard Institute, VWO)

4. Limited Payment Options: 10% to 20% (Baymard Institute, VWO)

5. Poor Mobile Experience: 15% to 30% (Barilliance, Statista)

6. Lengthy or Complex Forms: 15% to 20% (Baymard Institute, VWO)

7. Lack of Clear Progress Indicators: 25% to 30% (Baymard Institute, VWO)

8. Inconvenient Return Process: 10% to 15% (Baymard Institute, VWO)

9. Limited Shipping Options: 5% to 10% (Baymard Institute, VWO)
8

Problem Discovery
Pain Points for current UI design
Let’s briefly breakdown some issue in his UI.
The UI design has potential for improvement, with some areas that could benefit from further refinement
The typography used in the design can be enhanced to create a more visually appealing and cohesive look
The color scheme could be reconsidered to ensure better harmony and balance between different
elements
The use of whitespace and layout can be optimized to improve overall readability and visual hierarchy
The inclusion of microinteractions and subtle animations can add a touch of interactivity and engagement
to the user experience
It would be beneficial to conduct user testing and gather feedback to identify specific pain points and
areas that require improvement
The UI design should aim for consistency across different screen sizes and devices to provide a seamless
experience for all users
Exploring alternative design solutions and gathering inspiration from industry best practices can lead to
innovative and effective improvements.
9

Problem Defination
User Stories
01
As a customer, I want to have a clear
understanding of the total cost
upfront, including any additional
costs, so that I can make an
informed decision before proceeding
with the purchase.
02
As a customer, I want a simplified
and streamlined checkout process,
with minimal steps, to ensure a
smooth and hassle-free experience.
03
As a customer, I want to feel
confident about the security of my
payment information, with clear trust
signals and secure payment
gateways.
04
As a customer, I prefer having
multiple payment options available,
allowing me to choose the most
convenient method for my purchase.
05
As a customer, I want information
about the return process to be easily
accessible and convenient, ensuring
a hassle-free return experience if
needed.
02
As a customer, I prefer having
multiple shipping options available,
giving me the flexibility to choose the
most suitable option for my needs.
11

Problem Defination
Success Measurement
01
Monitor the decrease in cart
abandonment rates attributed to
unexpected additional costs. Aim for
a 30% to 40% reduction in cart
abandonment related to this issue.
02
Track the reduction in cart
abandonment rates resulting from a
complicated checkout process.
Target a 25% to 35% decrease in
abandonment related to checkout
complexity.
03
Evaluate the decrease in cart
abandonment rates attributed to a
lack of trust in payment security.
Strive for a 20% to 30% reduction in
abandonment related to payment
security concerns.
04
Measure the decrease in cart
abandonment rates caused by
limited payment options. Aim for a
15% to 25% reduction in
abandonment due to this factor.
05
Assess the decrease in cart
abandonment rates related to
inconvenient return processes. Strive
for a 10% to 15% reduction in
abandonment due to this issue.
02
Monitor the decrease in cart
abandonment rates caused by
limited shipping options. Aim for a
5% to 10% reduction in abandonment
related to this factor.
12

Ideation
In the ideation stage, it's important to brainstorm and generate potential solutions that address the pain points
identified in the user stories. Here are some pain points to consider:
Cart Review and
Summary
Description
Implement a prominent and concise cart summary
that clearly displays the total cost, including item
prices, taxes, and shipping fees.
Provide a breakdown of costs, allowing users to
understand the details of each item and any
additional charges.
Include a prominent notice about any potential
additional costs (such as taxes or fees) early in the
checkout process to avoid surprises later.
User Information and
Payment
Description
Simplify the checkout process by eliminating
unnecessary form fields and steps, making it easier
and quicker for users to input their information.
Display trust signals, such as SSL certificates or
security badges, to enhance users' confidence in the
payment security.
Offer a range of payment options, including popular
methods like credit cards, digital wallets, and
payment gateways, to cater to various user
preferences.
Order Confirmation
and Completion
Description
Provide clear and concise information about the
return process, including return policies, procedures,
and timelines, to instill trust and ease concerns
about inconvenient returns.
Offer multiple shipping options, such as standard,
express, or pick-up points, allowing users to choose
the most convenient and suitable method for their
needs.
Consider implementing order tracking and delivery
notifications to keep users informed about the
status of their purchases.
14

Ideation
Typography System
Typography System: Mobile
Heading 1: Font Family: Roboto, Font Size: 24px, Line Height: 32px, Font Weight: Bol
Body Text: Font Family: Roboto, Font Size: 16px, Line Height: 24px, Font Weight: Regula
Caption: Font Family: Roboto, Font Size: 12px, Line Height: 18px, Font Weight: Regular

Desktop
Body Text: Font Family: Roboto, Font Size: 18px, Line Height: 26px, Font Weight: Regula
Caption: Font Family: Roboto, Font Size: 14px, Line Height: 20px, Font Weight: Regular
Mobile Typography
H1- This is a H1 Heading in
mobile
H2 - This is a h2 Heading in mobile
Body Text- This is a body text in mobile
Caption Text-This is a caption text in mobile
Desktop Typography
H1- This is a H1
Heading in desktop.
H2- This is a H2 Heading
in desktop
Body Text- This is a body in desktop.
Caption Text- This is a caption in desktop
15

Ideation
Color System
Color System for Mobile & Desktop.  
HEX Value.
Primary Color: Hex value - #9C27B
Secondary Color 1: Hex value - #673AB
Secondary Color 2: Hex value - #3F51B
Secondary Color 3: Hex value - #2196F
Background Color: Hex value - #F5F5F
Accent Color: Hex value - #FFC10
Text Color: Hex value - #333333
Color System for Mobile & Desktop.  
RGB Value.
Primary Color: RGB value - rgb(156, 39, 176
Secondary Color 1: RGB value - rgb(103, 58, 183
Background Color: RGB value - rgb(245, 245, 245
Accent Color: RGB value - rgb(255, 193, 7
Text Color: RGB value - rgb(51, 51, 51)
Color System
Primary Color
#9C27B0
rgb(156,39,176)
Secondary Color 1
#673AB7
rgb(103, 58, 183)
Secondary Color 2
#3F51B5
rgb(63, 81, 181)
Secondary Color 3
#2196F3
rgb(245, 245, 245)
Background Color
#F5F5F5
rgb(245, 245, 245)
Accent Color
#FFC107
rgb(255,193,7)
Text Color
#333333
rgb(51,51,51)
16

Ideation
Form System
Form Elements: Mobile and Desktop
Button Styles: Font Family: Roboto, Font Size: 16px, Height: 48px, Padding: 16px, Border Radius: 4p
Input Fields: Font Family: Roboto, Font Size: 16px, Height: 40px, Border Radius: 4p
Select Fields: Font Family: Roboto, Font Size: 16px, Height: 40px, Border Radius: 4p
Checkbox and Radio Buttons: Font Family: Roboto, Font Size: 16px, Height: 20px, Width: 20px, Border Radius: 4p
Card Components: Box Shadow, Border Radius, Padding: 16px
Form Elements Default state
Input Feild
Drop Down
Checkbox Normal
Radio Button Normal
Button Solid
Button Outline
Button
Form Elements Select state
Input Feild
Drop Down
Checkbox Selected
Radio Button Selected
Button
Button Outline
Button
17

Ideation
Layout System
A 4-point grid system is a layout system that provides a framework for organizing and aligning elements on a user
interface using a consistent grid of 4-pixel increments. Each element, such as text, images, buttons, and containers, is
positioned and sized based on this grid, resulting in a visually balanced and harmonious layout.

The key advantages of using a 4-point grid system include:
By utilizing a 4-point grid system, we can achieve visual harmony, consistency, and efficiency in their UI layouts. It provides a
structured framework that streamlines the design process and helps create a visually pleasing and user-friendly interface.
Consistent Spacing
Description
Elements are spaced at regular
intervals of 4 pixels, both horizontally
and vertically. This ensures a
consistent and pleasing visual
rhythm throughout the interface.
Alignment
Description
Elements are aligned to the grid,
allowing for precise positioning and
alignment. This creates a sense of
order and helps establish visual
hierarchy.
Modular Design
Description
The 4-point grid system encourages
a modular approach to design, where
UI components and elements can be
easily scaled and rearranged within
the grid. This flexibility allows for
efficient design iterations and
responsiveness across different
screen sizes.
Scalability
Description
The grid system enables scalability,
allowing the design to adapt to
different device sizes and resolutions
while maintaining the integrity of the
layout and alignment.
18

Design Solution
Steps involve in Checkout Process
Designing the checkout flow of an e-commerce website involves several important considerations. Here is a step-by-
step guide to help you design an effective and user-friendly checkout flow:
Cart Review
Description
1. Display the products added to the cart,
including names, quantities, prices, and
any applicable discounts.

2. Provide options to remove items or
update quantities directly from the cart.

3. Include a prominent call to action to
proceed to the next step.
Customer
Information
Description
1. Request customer information, such
as name, email address, and phone
number.

2. Provide an option for guest checkout
or user registration.

3. Include a checkbox for newsletter
subscription, if applicable.

4. Offer autofill functionality to expedite
form completion.
Shipping Details
Description
1. Prompt users to enter the shipping
address.

2. Provide address validation or
suggestion functionality.

3. Include options for different shipping
methods, such as standard or expedited
shipping.

4. Clearly indicate any shipping costs or
limitations.
Payment Options
Description
Display available payment methods,
such as credit/debit cards, PayPal, or
other payment gateways
Collect payment information,
including card details or account
credentials
Implement security measures and
display trust symbols to assure users
of secure transactions
Offer options for saved payment
methods or one-click checkout, if
applicable.
23

Design Solution
Steps involve in Checkout Process
Designing the checkout flow of an e-commerce website involves several important considerations. Here is a step-by-
step guide to help you design an effective and user-friendly checkout flow:
Order Review
Description
1. Present an order summary, including
the selected products, quantities, prices,
and any discounts or promotions.

2. Provide the ability to edit the cart or
modify quantities directly from the order
summary.

3. Display any applicable taxes, shipping
costs, or additional fees.

4. Include a prominent call to action to
review the order details before
proceeding.
Order Confirmation
Description
1. Display a final confirmation screen
summarizing the order details, shipping
address, and payment information.

2. Include an estimated delivery date and
any applicable terms and conditions.

3. Provide a clear "Place Order" button to
finalize the purchase.

4. Send an order confirmation email to
the customer.
24

Design Solution
Solution 1 : 4 steps process for optimization
Designing an Optimal Flow of Smooth Check-Out Process in 4 Screens.
Screen 1
Cart Review and Customer Information
1. Display the products added to the cart with clear
information on names, quantities, prices, and any
applicable discounts.

2. Request customer information, such as name, email
address, and phone number.

3. Offer options for guest checkout or user registration.

4. Provide autofill functionality to expedite form
completion.

5. Include a "Continue to Shipping" button.
Screen 2
Shipping Details and Payment Options
1. Prompt users to enter the shipping address.

2. Provide address validation or suggestion
functionality.

3. Display available shipping methods, with clear
information on costs and estimated delivery dates.

4. Offer options for different payment methods, such as
credit/debit cards, PayPal, or other payment gateways.

5. Include a "Continue to Review" button.
Screen 3
Order Review
1. Present an order summary with a clear breakdown of
the selected products, quantities, prices, and any
discounts or promotions.

2. Provide the ability to edit the cart or modify quantities
directly from the order summary.

3. Display any applicable taxes, shipping costs, or
additional fees.

4. Request payment information, such as card details or
account credentials, if not provided earlier.

5. Implement security measures and display trust
symbols to assure users of secure transactions.

6. Include a "Place Order" button to finalize the
purchase.
25

Design Solution
Suggested steps to optimize the Checkout Process
Screen 4
Order Confirmation
1. Display a final confirmation screen summarizing the
order details, shipping address, and payment
information.

2. Include an estimated delivery date and any applicable
terms and conditions.

3. Provide a clear "Confirm Order" or "Place Order"
button to confirm the purchase.

4. Optionally, offer order tracking information or an
order confirmation number.
26

Design Solution
Screen 1
Cart Review and Customer Information



completion.

5. Include a "Continue to Review" button.
Screen 2
Shipping Details and Payment Options
1. Prompt users to enter the shipping address.

2. Provide address validation or suggestion
functionality.

3. Offer options for different shipping methods, with
clear information on costs and estimated delivery
dates.

4. Request payment information, such as card details or
account credentials.


6. Include a "Continue to Confirm" button.
Screen 3
Order Confirmation
1. Display an order summary with a clear breakdown of

2. Allow users to review and modify their shipping and
payment information if needed.

3. Display any applicable taxes, shipping costs, or
additional fees.

4. Include a final confirmation message and a
prominent "Place Order" button to finalize the purchase.
27

Design Solution
Screen 1
Order Review and Customer Information



completion.

5. Include a "Continue to Confirm" button.
Screen 2
Payment and Order Confirmation
1. Prompt users to select a payment method, such as
credit/debit cards, PayPal, or other payment gateways.

2. Collect payment information, such as card details or
account credentials.


4. Display an order summary with a clear breakdown of

5. Allow users to review and modify their customer
information and payment details if needed.

6. Include a final confirmation message and a
prominent "Place Order" button to finalize the purchase.
28

Design Solution
We have used Solution 2 for UI design
Flow Diagram
Product Detail Page My Cart Checkout Page
Payment Page Order Confimation
Regual Checkout
Address Without Personal Detail

and Saved Address
Guest Checkout
Address With Personal Detail

and without Saved Address
29

Step 6
High Fidelity Design
30

Product Detail Page
Ui Desig
31

Guest Check Out Flow
My Cart Sign In Page
Step 1: 
Add Personal details and
Address details of the
user for guest check out
32

Regular Check Out Flow
My Cart Sign In Page
Step 1: 
Add only Address details
of the user for guest
check out.  

OR 

User can select the saved
Address.
33

Remaining steps Check Out Flow
Step 2: Payment Page
Step 3: Order Confirmation Page
34

Measuring the Success of UI Implementation
Based on the 3-step checkout flow, let's assess how much improvement or mitigation each step provides for the
reasons of high cart abandonment rates. Please note that the following percentage breakdown is estimated or
assumed and may vary.
Screen 1: Cart Review and
Summary.
Unexpected Additional Costs
Estimated improvement of 30% to 40%:
By providing a clear cart summary with transparent
pricing, users can evaluate the total cost upfront,
reducing the likelihood of encountering unexpected
costs later in the checkout process.
35

Screen 2: User Information and
Payment.
Complicated Checkout Process:
Estimated improvement of 25% to 35%.
The simplified and streamlined 3-step flow reduces
complexity and eliminates unnecessary steps,
making it easier for users to proceed through the
checkout process.
Lack of Trust in Payment Security
Displaying trust signals, security icons, and using
secure payment gateways during the user
information and payment step helps build trust and
confidence in the payment security.
Limited Payment Options
By offering a variety of payment options, users have
more flexibility and can choose their preferred
method, reducing the chances of abandonment due
to limited payment options.
36

Screen 3: Order Confirmation and
Completion.
Inconvenient Return Process
While not directly addressed in the 3-step flow,
providing clear information about the return process
during the order confirmation stage helps mitigate
concerns and reduce abandonment related to
inconvenient returns.
Limited Shipping Options
Similarly, while not directly tackled in the 3-step flow,
providing multiple shipping options and related details
during the order confirmation stage helps address
concerns about limited shipping options.
37

Disclaimer.
Please note that the UI design presented here is the result of the first iteration and may
have limitations due to time constraints. While extensive research and suggested
solutions have been taken into consideration, there is still room for improvement. It is
possible that certain points may have been missed or that some UI elements could be
slightly misaligned. We kindly request you to review the provided design and
presentation while keeping these limitations in mind. Your understanding and feedback
are greatly appreciated as we work towards refining and enhancing the overall user
experience.
38

Rishabh UI Presentation - Meril.pdf

Recommended

Recommended

More Related Content

Similar to Rishabh UI Presentation - Meril.pdf

Similar to Rishabh UI Presentation - Meril.pdf (20)

Recently uploaded

Recently uploaded (20)

Rishabh UI Presentation - Meril.pdf