Strategy, Research, UX & UI Design
UX & UI design of one of the top e-commerce companies. Due to NDA I changed some of the design elements like (colors, typeface, copy, etc) for the presentation but told the rest as it is
Business goals & success metrics
Our team and the stakeholders together decided on how to measure the “success” of the project. Some of the primary performance indicators were
- Checkout flow abandonment rate
- Conversions after using filter & sorting on product listing page
- Conversions after product search
- Bounce rates after using the main navigation
Process
Think
Thoughtful Execution Tree
Industry reports
Benchmark Analysis
User personas
Card sort & tree test
Build
Information Architecture
User Flows
Navigation
Content Architecture
Wireframing
Prototyping
Check
Measure
Iterate
Strategy,
Research,
Planning
Thoughtful Execution Tree
Thoughtful Execution Tree (a form of Double Diamond process that Spotify uses as a framework) lets us;
- go wide in problem identification and hypothesis creation before zooming into a single solution
- prioritize prominent problem(s) to address
- to align on a specific problem(s) with the team
- set specific goals & KPI’s
- discuss impact vs effort so we can pick battles
We also conducted user interviews, online surveys (NPS & SUS), and tracked parameters (i.e Time to complete the task, user feedback, user errors,) through user tasks & usability testing
Insights
Eliminating guesswork through research
Through user research —including;
- User interviews
- Analytics data
- Benchmark analysis
- Industry reports
- Usability testing
we found out data to feed our design process. But if “data” is what we learned from the user research, “insights” are why we think that is the case. Some of the prominent insights were;
- Mobile navigation is particularly difficult for users
- Some users want exactly know where to look, but others may still be in discovery mode, especially if they’re new to your site
- users often find errors in their order information, and want to edit before finalizing the order
- and many more
Building the Experience
How might we avoid overlapping categories?
Through card sorting & tree testing exercises, we aimed to reveal users’ mental models regarding how they organize & label information, in order to help them find relevant information quickly, and complete their goals easily
Mobile navigation is particularly difficult for users
Users often simply want to get started browsing the product catalog but struggle when categories —especially on mobile navigation— aren’t immediately visible, and visual hierarchy is not indicated clearly
Product listing pages need better filtering & sorting
To provide a seamless experience, the filter on the product listing pages should provide functionalities that may not be noticed at first glance:
- It should let the users select their own price range in addition to the predefined ones,
- When opened, the first few filters should be expanded (instead of showing all in collapsed state)
- It should have thematic filters for relevant product types,
- and more
Leading the users effortlessly toward checkout & payment page
Checkout flow affect the conversion rates more than the other pages. Any problems should be addressed in order to provide a high-performing site. Any basic checkout flow should
- have a stepper indicating how many steps there are in total, and where the user currently is,
- allow users to update cart / edit information when needed,
- clearly display shipping costs and time
- …
Gifts, Promo codes, Returns
- Promo codes should be collapsed at first, in order to prevent users from going code-fishing, leaving the page
- Users have different opinions about what a “gift” is so we should provide clear instructions regarding what it includes
- —content is being updated—
Accessibility
—content is being updated—
Usability testing
Forgot Valentine’s day?
Created user tasks to observe & compare (before/after) indicators like time to complete the task, user feedback, user error rates. As an example, we asked the following bit to the user, and recorded the interaction (image below has been changed due to NDA)
“Tomorrow’s Valentine’s Day, and you just realized that you forgot to get a present.
You have a budget between €30-€50, and you’d like to buy an item as a gift to your partner, and also an item for yourself :)”
Interaction
Design
“What happens when I press on this?”
Initial paper sketches to make sense of the whole booking system and design the interactions
Business
Impact
%12
decrease in checkout abandonment rate
%21
decrease in bounce rate after using main navigation
%8
conversion rate increase after using filtering on product listing
+
improved NSP & SUS scores
My role
Our team consisted of 1 UX Strategist, 1 Researcher, 1 UI Designer, and me working as the UX Architect/Designer— responsible for designing the interactions, and building the information architecture; including user flows, content architecture, navigation and category map