E-Commerce Platform
Challenge: Develop a new filtering and product listing system for an e-commerce platform.
Deliverables: Competitive analysis. User surveys and interviews. Testing Report. Personas. Task flows.
UI Library. Prototype. Usability tests.
Role: Lead UX Researcher. Lead UX Designer. UI Designer.
Project Overview
About
Every day, people visit online stores and leave without making a purchase. They are unable to find what they need. This relates to every e-commerce website.
The UX/UI design team was constantly testing the storefront and the app using different tools to better understand the needs of the users and present them to the clients.
In one of the many tests the UX team had run, it was noticeable:
Testers/Shoppers never used filters to search for the product!
To confirm that, with different tests and behavioral analytics tools, I was more than certain that not just the layout and design are behind the trends, but our Filtering system was missing seamless UI, complexity, and lack of consistency!
Our platform is the pioneer cloud-based e-commerce solution specifically designed for grocers. The platform is created by developers and grocery retail professionals who identified a gap in the technology available for grocers.
Teams of visionaries and problem solvers work relentlessly to make sure our customers are equipped with the most technologically advanced features and capabilities to unlock their full e-commerce potential.
My Role & Tools
I was part of the pitch team and responsible for the research and (re)design of the Storefront and the App.
Time Line: 6 months - including research, designs, and tests
Year designed: Jun 2022
Year Launched: July 2023
*Disclaimer: For this case study, I significantly changed the UI kit, but kept the flow.
Quick Links
The Design Brief
Problem
Our platform offers filters and categories, but they were never fully organized, designed, and discussed with the Product Managers, and Product Owners and Developers.
As a result, the current filters are unintuitive and unhelpful for shoppers, driving visitors away instead of generating profits.
The poor filtering design - driving visitors away instead of delivering profits!
After all, we know that when done right, filters enable users to see only the products that match their individual needs and interests. It’s the e-commerce equivalent of walking into a physical store and asking the salesperson for “pink women's high heels in size 8.”
Project Goal
Knowing that filters are a great chance to present a variety of products, improve the UX, reach a wider audience, and increase sales, I present the benefits of good filtering to the management team, and we all agree that we have to push the project forward!
The purpose of the website filters is to give a person the opportunity to remove all that is not to the point, so that only what best suits their expectations remains.
That means a more personalized experience!
Applying relevant filters is the easy part, but showing relevant results is slightly more difficult.
For every interface and intent, we have a comfortable range in mind, that is, a preferred number of options that we think we can manage relatively effortlessly.
Solution
From there, I managed to determine and sort findings in different groups and also make the “Solution list”. Having all that listed, I was ready to go to the next level and create the test, ask the right questions, and search for the features in the following competitive analysis.
What the UX team needs to do is the following:
Understand user behavior!
How do users interact with the current filtering options?
Competitive analysis & Visual analysis.
Have interviews with shoppers & clients.
Next, we have to analyze user needs and motivations to ensure that the interface is user-friendly and effectively meets their requirements. Compare that with the findings we were already able to sort.
Finally, the UX team needs to determine ways to create intuitive and seamless interactions.
Just the simple act of adding filters can increase a website’s conversion by 26%, and fixing issues in UX design can produce powerful results. - Statistics, 2022
Problems & Goals
Empathetic Approach
In this Section
1.Research + High Priority
2. Competitive Analysis
3.User Interviews
4.User Persona
5.Research Findings
Research Phase
Grocery shopping is one of the essential daily activities among consumers in the world.
If we focus on the US market, the e-commerce sector is constantly advancing and developing across all industries. Online grocery retail has become a go-to channel to buy food for a growing number of households across the country.
Statistic: In the United States, Grocery delivery e-commerce revenue will exceed 257 billion U.S. dollars in 2024 and is expected to surpass the 422 billion dollar threshold by 2028. The Online grocery customer base counts around 138 million shoppers and is forecast to grow further in the upcoming years.
Knowing all that and with the clients in the US, Canada, and Europe, the UX team is continuously researching, testing, conducting interviews, and talking to clients to better understand today's shopper.
Being the UX researcher in the team, my job was to follow the market trends and collaborate with the Project managers and clients.
Determining the Priority & Observation
Being the UX Researcher in the team, my job was to follow the market trends and elaborate them with the Project managers and clients.
To help me better understand the shoppers, how they feel, what they do, and how they interact with our platform, I use the following tools: HotJar, Microsoft Clarity, Google Analytics, TrymyUI, and spend time collecting and synthesizing reviews, data, and interviews.
Comparing all the research findings with the reviews coming from users, it was not a surprise to see the results and determine the high priority!
The UX team can’t do much regarding the missing items, but if we look at the chart, our job is to solve the problem(s) in different areas.
If we focus on the statistics, 10% of users were complaining about poor filtering.
HotJar Statistics
Competitive Analysis
The process continues with the competitive and visual analysis of the most popular grocery and GM US and EU. We were searching for opportunities where our Platform and our designs could stand out and provide the best user and customer experience.
Having reviewed the filtering options of about 50 major e-commerce websites, both desktop, mobile, and app, I was certain that our platform needs to be redesigned and improved.
When creating my competitive analysis, it’s important to look at the strengths that your competitors have, but what’s important is finding the weaknesses.
Being an investigator is a MUST!
This is where you find the holes in the market, and your client’s goals could be precisely what the industry is missing.
Competitive Analysis - Focus On Categories & Filters
Competitive Analysis - Filters Only
Interviews & Test Flow
Using all the tools, I was able to organize and focus on the shopper pain points, making a clear distinction of what we as a UX team can do to improve the CX and UX, and what is something we can not help with!
Tests were run on TryMata software for Desktop, Mobile, and the App:
Total: 32 testers
From Canada&US
Special request: Testers MUST have an account with the retailers in the test.
Tests were run for Desktop, Mobile Android, and iOS
Shoppers/Testers were asked to complete the following tasks:
Search for certain products and add them to the cart. (Add 3-5 products in the cart with requirements for some to be organic or vegan, specific brand, and nutrition facts).
Review the cart and proceed to checkout, considering the substitutions.
The testers were asked to answer questions about their experience and each task. Here are some:
What did you like about the website/App?
How difficult was it to find the required products? Please Explain.
Which did you prefer better, the search bar or filters?
Do you always consider substitutions and why?
Test: Filtering - Example Old Design
“Using the filters/deals/categories to search for foods is not ideal. It would be much more efficient using the search tool.”
— Shopper 1, Desktop
“I would love broader filters and then sub filters. I'd also like an easy way to load and shop those offers all without being redirected to a new page.”
— User 4, App
“Very frustrating when you want to browse ONLY the category. Because putting the brand in the search bar will add other brands like it too. very annoying.”
—User 5, Desktop
“The screen freezes when i selected filter and take me back to product all products? I think this filtering needs to be better organized and improved! I am looking for the items on sale and I don’t have that option”
— Shopper 10, Mobile
“Why am I looking categories in filters section? After every selection I am back on product page?This is bad and makes me anxious.”
—User 9, Mobile
“Filtering options are just poor and have no point, I have allergies and I need to search the products based on that and other specifics.”
— Shopper 7, Mobile
“Difficulties we're with the filters of search as I could not find some items I needed because it is to messy to even start searching, I would rather use the search bar for products.”
— Shopper 5, App
“The filters are frustrating to use as you can only choose one at a time. Prefer the search bar as filters often show way too many products.”
— User 2, Desktop
Persona & Journey Map
I adapted the persona and implemented all the findings from interviews and quantitative data. Journey Map helped me visualize an individual relationship with a product, online grocery shopping, and searching for specific products.
Personas
Shopper Journey
Research Key Findings
In the next stage, I had to organize the collected data in groups based on their natural relationship. From there, I was able to identify user pain points, what they are seeking, and what they are interested in.
Sorting, Analyzing, Prioritizing
Define
In this Section
1.Filter Patterns
2. Feature Must Have
3. New & Improved Features Lsit
Understanding Filter Patterns
As customers, we use filters to reduce a large set of options to a more manageable and relevant selection.
The design should minimize the time needed for users to get from the default state, when no filters are selected, to the final state, when all filters are successfully applied.
The ultimate question is how to find a balance when our interface helps users quickly arrive at just enough results. One answer to that question lies in something that sounds obvious: eliminate any roadblocks on the users’ path towards that comfortable range. Sounds easy, but it is quite challenging, especially when you have dozens or even hundreds of filters that have to be accessible on mobile or desktop.
Here is what I learned so far from the research and case studies:
Filters usually come in large numbers, especially in groceries, and they need to be displayed across screens.
Filters can come in different indications and shapes (for pricing, ratings, colors, dates, times, size, brand, age range, symptoms, product status, etc.).
Filters have different states - selected, unselected, and disabled.
Filters often need sensible defaults, and they have to remember the user’s input.
Filters can be difficult to validate, for example, when users can type in complex data, like a whole sentence with many indications.
Filters need to support and show meaningful error messages.
Make your Filters Simple.
Consider your products from the viewpoint of your customers - We are designing for grocery retailers, keeping in mind we need to keep up with the trend and be in constant communication with stakeholders, to be able to precisely determine what customers desire. Is it a flavor, dietary preference, price, or better deals?
Use the words and terminology your customers use to describe your products.
MoSCoW
Deck for Devs
Prototype
In this Section
1.Branding
2. UI Kit
3. High Fidelity Wireframes - Mobile
4.High Fidelity - App
5. High Fidelity - Tablet
Branding
When creating a Mood Board, I had in mind Groceries and Tech, and how they line up together. I wanted to keep it clean, fresh, and minimal.
Mood Board
Logo
This logo is inspired by my interviews with both shoppers and clients. I wanted to make it simple and clean. Starting with black and white and later implementing some colors.
After all, my interior architecture design always starts in black and white (Revit, AutoCAD), while colors come in 3D!
Then I decided to use a bright green color that is vibrant and represents health, new growth, and freshness. I added just a little bit of bright burgundy that gave the sophisticated look.
Logo
Typography & Colors
Design System
HI-FI Wireframes
Below are the homepages for the desktop, tablet, and mobile versions.
My first full version of the prototype was intentionally built out for mobile devices, following the mobile-first approach.
This flow is the same as we asked our Shoppers to do - Look For the Apples using filters.
Filtering Mobile
Search Product Flow
Tablet - Categories & Search Bar
Homepage - Tablet
Categories
Categories - Level2
Categories & Departments Hierarchy - Level3
Search Bart in Filters - When more than 5 options
Search Bar - Sort A-Z
Search Bar - Text Input
Search Bar - Text Input
Filters Applied
Desktop
Homepage
Homepage
Homepage - Footer
Levels - Categories & Subcategories
Subcategories
Levels - Categories & Subcategories
Levels - Categories & Subcategories
Filters Applied
Filters Applied
The App
While designing and improving the new app, the UX team discussed about incorporating photos in category and subcategory sections. The Flow and designs are in the “UX Vault”.This is just a proposed example.
App Designs
Test & Challenges
Testing was successful! The date was set when the filters will be launched!
One of our main challenges is the lack of resources and time! With this challenge, we often have to reiterate our designs in order to be achievable within time and technical constraints, while still providing more value to our users.
There were minor changes happening during the development process, but 90% of the design is accepted, tested, and has become part of the platform.
Sliders
Sliders are wonderful when we want to encourage customers to explore many options quickly, but they are quite frustrating when the user has something specific in mind and hence needs to be a little bit more precise.
My Design provided both options, a slider and a text input field, so users can type in values directly without having to use the slider.
Ratings
Through rounds of usability testing and research, the UX community published many articles explaining the importance of reviews and ratings, knowing that users rely on product reviews to make purchasing decisions. The possibility to rate the products is more common in GM than in grocery stores, but it is still an important filter and feature.
Colors
Color is a common product variation on sites in many industries such as apparel, home & hardware, and houseware & furnishing, among others.
Including swatches in addition to the names of colors ensures that users can select the options closest to their preferences.
Shopping Mode
Some Users prefer the Pick Up option! And would like to filter products based on their availability in their local store. Shopping mode selection in filtering would help them with better organization and shopping lists.
FINAL PROTOTYPES & IMPACT
Key Metrics
I created a guide to support the developers who were working with me on the platform, as well as for handing off designs to succeeding designers.
The design was launched as an A/B test, and commercial metrics and customer satisfaction were measured. The test had a positive impact on customer and commercial satisfaction.
However, there are still improvements that can be made.
To see how the filters please check: Dunnes.com, Shoprite.com, Foodland.com, Saveonfood.com, etc., or download the apps.
Keep testing!
95%
Of users expressed satisfaction with the new filtering experience.
%20
Rise in daily active users in that month following the release (data from all clients)
%40
Screens Modes
+10
Steeples Nights