top of page
AJIO Business
Primary Checkout Flow - Redesign
What is the primary checkout flow?
"Any traditional e-commerce site has a set of steps to enable users to checkout. AJIO Business being a B2B e-commerce provider considers the concepts of predefined packs "
AJIO Business Checkout Flow
Initial Ideation
Scope & Design Goals
Home Page and Other Landing Pages : To be taken up the visual design team in collaboration with the marketing team.
Product List Page (PLP) : Understand what drives users to move to the next step by examining what they are looking for, their questions that need answering and how to structure the information in a logical manner.
Product Details Page (PDP) : Understand how users buying intent can be propagated from the PLP to the PDP. How to structure relevant information logically and enable users to make informed buying decisions.
Cart : Enable users to review what they are about to purchase. Help users get the best deal possible. Enable cross and up-selling.
Checkout Journey
"At AJIO Business, we generally refer to three types of user personas based buying behaviour but in order to re-design the checkout journey, I tried to envision the same considering the users buying intent.
Understanding of why a user wants to buy from AJIO Business would help me show the relevant information to the user in a structured manner. "
Price sensitive user : These are the retailer who come to AJIO business to look for the best deals and buy products to eventually earn the best margin.
Regular Users : These are the users who come to AJIO Business to make regular purchases. They have a good idea of what they can sell and primarily want to restock their inventory.
"The journey has four steps, each corresponding to the users buying stage. For each step, I have analysed and identified the users needs and goals."
Product List Page
Product List Page
Pain Points
"Looking at the existing PLP, I tried to identify the paint points in terms of information hierarchy, structure and visual design "
Card Sorting & Information Architecture
"I conducted a workshop with stakeholders to revisit the users needs, and identify how we can solve for those needs using available data points and establish the hierarchy."
"The result of the card sorting exercise was an information structure that catered to the users needs at each buying stage in the PLP."
PLP Design
"After defining the information architecture,
I attempted to replicate it in the designs. "
"Design of the PLP is crucial since it is the first step to designing the overall design language. I ideated multiple variations before narrowing down on a final design."
Final Design
My Role: Defining information architecture, visual hierarchy and the overall structure.
Role of the Visual Design Team: Defining font family , image area and icons styles.
Product Details Page
Product Details Page
Pain Points
"Looking at the existing PDP, I tried to identify the paint points in terms of information hierarchy, structure and visual design "
Card Sorting & Information Architecture
"I conducted a workshop with stakeholders similar to the one done for PLP to identify how to solve for the existing pain points and cater to the needs identified at the consider phase of the user journey."
"The result of the card sorting exercise was an information structure that grouped information in a logical, easy to consume way."
PDP Designs
Three level approach : Information is broken down in terms of re-enforcing buying intent in level one, providing buying options in level two and adding to cart in level three.
Single CTA : Current design has multiple buttons on the PDP page. This in combination with product information confuses the user about what to do next. The new designs only have one buying button.
Sequence of information : In both level one and level two, information is sequenced in a manner that makes it easily consumable by the user.
PDP Main Page
"Conveying details of the product to the user and re-enforcing their buying intent."
Buy Page
"A separate page to tell users about their buying options. This helps in isolating the buying intent from the context of the product details. Progressive disclosure helps users focus there attention properly. "
PDP States
Adding Packs
After going through the details of the packs they want to buy, the users can add them to cart
Selecting number of packs
On tapping "Add to Cart" users need to select the quantity.
Page 1
View Next
Packs added to cart
Bottom bar shows the user the items they have added in cart. They can directly go to cart from here or continue browsing
Cart
Cart
Pain Points
"I analysed the existing card page page and marked out some of the most obvious problems. "
Ideation
"Unlike PLP and PDP which has more or less a linear sequence of information, the cart is a little more complex. Thinking from the users perspective, they might have multiple interrelated questions. Through this ideation method I tried to connect the interrelated question and draw out a user mind map. "
"I conducted this exercise in collaboration with PMs and other designers. The outcome of the exercise was a clear understanding of how the users mind worked while viewing the cart page, the questions they had and how these led to more questions."
Card Sorting & Information Architecture
" Now that I had a clear idea of what the users look for in the cart at each level, I put down the "how might we statements" for each of these questions. I conducted an exercise to map out the available data points that answer these statements and set up a hierarchy "
" With the hierarchy defined, I mapped out the information architecture of the Cart. I tried to sequence the information in a logical manner, grouped together so that the users understand without any friction "
Cart Designs
Resequenced information : The overall structure of the information being shown on the cart is re-thought according to what the users are looking for and what we as a business would want to push to the user.
Grouping : The current designs combine packs and pieces within a particular brand. We at AJIO Business call these brand groupings Seller Orders. Thinking from the users perspective, seller orders do not make sense to the users. They consider the cart as a single unit where they are buying from AJIO Business. The new design replicates this idea in the cart.
Information Declutter : The information in each section has been looked at in detail and any redundant information removed.
Offers and Discounts : Intuitively show the available offers and how to be eligible to use the. Clearly show already added discounts and their effect on the total payable amount.
Cart States
Page 1
View Next
Offer Notification
Whenever the user applies an offer or is automatically applied, a notification is shown. User can view the details of offers.
Offer Details
Users can see a list of all offers that have been applied to the cart
Total Discount
Users can see the total discount they have earned from the Total Payable section
Thanks for your time!
bottom of page