My Role: UX Designer | Duration: 2 Weeks | Project Status: Completed
DISCLAIMER: This is a hypothetical project and is not affiliated with Lidl or its website.
Project Overview
Depends on who you ask, grocery shopping is either a fun or torturing chore. People who are in the camp of I-don’t-want-to-but-have-to-grocery-shop often dislike the task because it takes too long, costs too much, and quite frankly, it’s overwhelming when there are too many options to choose from. Grocery shopping usually involves way more patience than anyone bargained for. We decided to investigate how we can solve this problem. While we can’t help the situation with the costs, we can help with the time — how we structure the navigation and information architecture (IA) to help shoppers save time on this essential task when they grocery shop online.
Scope of Work
Our field of activity was web design through the study of Information Architecture. Our client was Lidl, a German international discount grocery store that offered a range of high-quality fresh food groceries at low costs. We wanted to know their navigation design constraints and opportunities, and how it affected its grocery shoppers. We conducted business and user research investigating their website navigation. Then based on the research results, we iterated the navigation design that focused on creating a solution that would minimize shoppers’ time spent on grocery shopping.
Process
To uncover areas of improvements, we began our research phase with a business audit to better understand how Lidl fitted in the current market. We then performed IA and navigation structure evaluations to identify insights around the existing website. From there, we defined the insights and created a navigation redesign with two rounds of usability testing to understand the impact.
Persona
To keep Lidl’s users’ needs front and center, we used a persona to evaluate its website features and determined how we could better serve them.
Our initial problem statement and hypothesis were the following:
Shoppers need a more concise navigation system to locate the product when grocery shopping. How might we help Rebecca find the products she needs while providing her a positive shopping experience?
RESEARCH PHASE
Goal of Research
To understand the root of the problem space, we execute a research plan to understand how grocery shoppers associate the taxonomy and subsequently navigate Lidl’s website to find the items they want. Our goal is to optimize features and web flows that help users reach their goals (find/buy a product, create a shopping list, etc) efficiently.
Methodology
We started our process by conducting a business research to better understand Lidl’s business needs and values, and how it compared to its competitors in the market. Next, we conducted the tree study and card sort test, two user research methodologies to validate the effectiveness of the existing navigational structure. And lastly, we did a heuristic evaluation on Lidl’s existing website to further validate our research results.
Key findings
Increasing efficiency was a key area we believed would make the most impact in improving users’ experience. Comparing the two rounds of test results, users responded positively with the proposed navigation changes. We saw an avg. of 15% increase in overall task success rate.
- Insight 1: The # product categories make it difficult for users to find the products they need efficiently.
- Insight 2: The lack of product filters prevented users from finding products easily.
- Insight 3: The language, ‘Sign-in’, on the home page was not a clear label for users. People had a hard time retrieving/accessing their grocery lists.
Business research
In this step, we conducted the business model canvas, competitor matrix, and feature analysis which helped us to uncover best practices and areas of improvement to better serve Lidl’s audience that aligns with business goals.
User research
With the business analysis insights in mind, we began our user research to understand the effectiveness of Lidl’s website navigation and IA structures. Our goal was to create a navigation redesign with optimized features and web flows that supported shoppers reaching their goals (find/buy a product, create a shopping list, etc) efficiently.
Heuristic study
To help us better understand opportunity areas and how we can improve the site to create the best experience for users, we analyzed LIDL’s home page and an additional 4 pages by referring to the 10 design principles of Abby method.
Journey Map
Shoppers have very limited time to grocery shop. As a result, Rebecca finds it difficult to best use of her time to plan her school and food shopping list.
Revised Problem Statement: How might we streamline and minimize Rebecca’s time spent on grocery shopping?
RESEARCH » DESIGN
Insight 1: The # product categories make it difficult for users to find the products they need efficiently.
Feature A: Streamline top nav by reducing the number of product categories and visually emphasizing relationships among items to create a more user friendly shopping experience.
Insight B: The lack of product filters prevented users from finding products easily.
Feature B: Implement a filter capability to help users find products they want quickly.
Insight C: The language, ‘Sign-in’, on the home page was not a clear label for users. People had a hard time retrieving/accessing their grocery lists.
Feature C: Make the utility feature, Sign in, to be more dominant on the home page by updating the name to, My Account, to allow users easily accessing their shopping lists.
DESIGN PHASE
MVP Reveal
Feature 1: A mega menu to visually emphasize relationships among items.
Feature 2: Implement a filter capability to help users find products they want quickly. Lidl’s existing website has no product filter or sort functionalities.
Feature 3: Rename Sign in to ‘My Account’ to allow users easily accessing their shopping lists.
Design Studio: Sketching + Concepting
Before we unpacked the design process, we wanted to point out that during our research we learned that Lidl’s existing website did not pass the b/w accessibility test. In particularly, the yellow background made it illegible for people who have achromatopsia.
As a result, we used white as the primary background in the redesign to increase the readability.
Low fidelity sketching
Next, we began sketching out our features by creating several lo-fi paper sketches to illustrate the navigation changes.
Mid-fidelity screens
From there, we compared the usability to users’ key goals and needs to prioritize the elements we should incorporate into the redesign. Once we had a final idea of the overall elements we needed, we moved to digitize the design in Figma by creating a mi-fidelity prototype (not clickable) to align navigation redesign changes.
High-fidelity Screens
See the clickable prototype in Figma
User Flows
To drive the redesign impact home, we mapped out the process of how the users would navigate through the site — their process and decision points in order to complete a task. With the proposed navigation redesign, we would eliminate three decision points / process steps and helped users reach their goal faster.
Flow comparisons:
The task illustrated below is, “You created a school shopping list. Find your list.”
Recommendations + Implementation + Next Steps
Our research and testing showed that Lidl’s site navigation and IA have areas of improvement opportunities. We recommend first implementing the proposed design changes and closely monitor the result. From there, we suggest further trim down the secondary navigation categories to further streamline user experience. Lastly, we recommend revisiting the tertiary navigation.
