perfecting the shopping experience
I was part of an ambitious project to redesign the ecommerce experience for a superapp startup. To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study.
Interaction design on Ecommerce, focus on these scenarios:
Shopping experience on grocery and food- shopping cart- order payment- edit items
Main page
My role:
Pinpoint the problems and focus on the TAs, competitor analysis, construct a complete scenario, understand user’s psychology and intention. and perfect the UX flow with logic, reduce steps to complete user's goals.
•Competitor analysis
•UX pitch on solutions
•Flow and wireframe
•Implementation
•Iteration
I designed the buying, shopping cart, order list edit item experience.
In addition, I worked alongside 1 product manager, 1 UI, 2 engineers.
Project Brief: Analyse the SEA food delivery service contexts：
-Compare the UX in grocery and food delivery scenarios,
-Evaluate different contexts and products’ variations.
-Aligned usage behaviours in one platform.
-Optimise shopping cart experience, reduce steps.
Target audience:
From age 21 to 50. Different verticals cater different needs. Retail and food-family group based. Travel- for young adult and working adults. Based on each vertical we have different target markets.
Information Hierarchy
As we plan to design a super-app, growing complexity of the app over the time has to be taken into consideration.
the main verticals
2 main shopping channels: Grocery & Food
Create smooth shopping experiences from main screen- browsing, adding, checking the selected item, select item variations, edit items, go to cart and order confirmation.
Design for these complex interactions:
1. Food has many variations, it is confusing to edit the same order or make another food but having different variations. e.g bubble tea has different sizes, flavors, toppings. The goal is to optimise complicated ordering process.
2. Able to edit again in the order confirmation especially editing food variations.
The goal is to allow user to edit and add more items in a clean and easy interface without letting user to quit buying.
Differentiate SKU and SPU requirements, design the edit entry points for both types.
Design for these scenarios:
Shopping cart
Takes time to edit
In the order list, there is always showing "buy more than $50 to get free delivery" Hence it is time wasting to quit the screen and go back to the store and look out what to buy. This will result in low customer retention.
Food variations
Food has different variations e.g. spicy, size, side orders extra add ons.
Key goal
keep users to stay on cart or order list as much as possible. Create ways for them to edit items on these 2 screens.
Key Findings:
· Features Discoverability issues
· Different from grocery, food has different variations e.g. spicy, size, side orders extra add ons.
· Too many taps for the simple action
· Make use of pop ups to retain users on the shopping cart and order confirmation pages.
Initial Proposal:
Proposed a design with fast access to modify selected products and delivery methods in shopping cart and order list til the payment step (channel through grocery, food, restaurants, merchants, sections) and made accessibility straight.
Order confirmation
Food variation logic
Food
Design user flow: add to cart- go to store
Walk through the food screens
Spec & functions:
search, category tabs, smart sorting, collection method tabs, unique tags filter, reataurant list with details.
UX optimizing：
Under the collection tabs, restaurants will be filtered out by its services.
There are: Delivery/Self collect/Reservation
Purpose：
Fast switch of collection methods on the first level, to help user to filter out the availability of the restaurants by the collection methods.
Interaction:
when scrolling down, the picture and info card will minimise, tabs will be fixed on the top.
Tap on the card- go to food detail screen.
Tap on the plus icon, add food to the cart, number of items added will be shown on plus icon and shopping cart icon.
Spec & functions:
Pictures- scroll left and right to see more
Food details: name, description, share, price, reviews, number button, wallet, add to cart button
Basket
Purpose：
Quick glance of the purchased items on the current restaurant.
Users are allowed to leave the current restaurant page, and all the added items will be saved in shopping cart too.
Selected items pop up
UX optimizing：
Tap on the basket icon, it shows the selected food within the current on screen restaurant. The unavailable item will be shown in grey mask
1
Shopping cart
UX optimising:
Added items number will be reflected on the shopping cart.
Differentiate SKU and SPU requirements.
Purpose:
Browse all the selected groceries and food.
Shopping cart edit items
Item availability calibration rule:
Everytime clicking the number button; select the item; press check out item.
UX optimising:
Unavailable status:
-Unavailable, out of stock, stock shortage
-Radio button turn grey, only when in the edit mode the item will be removed or swipe left to remove.
UX optimising:
Food re-select conditions:
- When food variations are not available e.g not availble in big size, user has to re-select to small size. When this condition appears, user is unable to select the food and check out. Either remove the item or re-select the food variation.
Edit logic:
Click edit to delete control will apear at the bottom.
Click cancel to quit edit mode
In the edit mode, not showing number selection.
Delete item confirmation pop up dialog.
No-stay on the current page
Yes- items removed.
Order confirmation screen
UX optimising:
Food re-select conditions:
- When food variations are not available e.g not availble in big size, user has to re-select to small size. When this condition appears, user is unable to select the food and check out. Either remove the item or re-select the food variation.
Edit logic:
Click edit to delete control will apear at the bottom.
Make another
Grocery
Design user flow: add to cart- go to store
Flow & wireframe
