Project Overview
About
Every day, people visit online stores and leave them without making a purchase. They are simply 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 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
Responsibilities: Competitive analysis, User surveys and interviews, User personas, Task flows, Journey maps, wireframes and prototype, High fidelity prototype, Usability tests.
Tools: Figma, Sketch, Jira, Miro, Trymata, Photoshop, Usertesting,
*Disclaimer: For the purposes of this case study I significantly changed the UI kit, but kept the flow.
Quick Links
The Design Brief
Problem
Our platform has filters and categories - but they were never fully organized, designed, and discussed with the Developers, Product Managers, and Product Owners.
Unfortunately, the filters on our platform were not intuitive or helpful to shoppers.
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 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 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 with filters UX design can produce powerful results. - Statistic,
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 foodstuff 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 elaborate them with 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 Project managers and clients.
To help me better understand and the shoppers, how they feel, what they do, 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 really important is finding the weaknesses.
Being a 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!
Test were run on TryMata software for Desktop, Mobile and the App:
Total: 32 testers
From Canada&US
Special request: Testers MUST have account with the retailers in the test.
Test were run for for Desktop, Mobile Android, iOS
Shoppers/Testers were asked to complete the following tasks:
Search 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.
What 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 awfully obvious: eliminate any roadblocks on users’ path towards that comfortable range. Sounds easy but it is actually 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, 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 the 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 good together? I wanted to keep it clean, fresh and minimal.The idea was to show the flow, from taking the phone, picking uo t
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 freshens. 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, UX team disscused about incorporating photos in category and subcategory sections. The Flow and designs are in the “UX Vault”.This is just an proposed example.
App Designs
Test & Challenges
Testing was successful! The date was set when the filters will be launched!
The, 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 developing process but 90% of the design are accepted, tested and become the 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, slider and text input field, so users can type in values directly without having to use the slider.
Ratings
Through rounds of usability testing and research, UX community published many articles explaining the importance of reviews and ratings, knowing users rely on product reviews to make purchasing decisions. The possibility to rate the products is common in GM more 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.
By 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!Keep Improving!
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
Thanks For Reading!
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!Keep Improving!