Case study: A new online adventure for the local grocer
A UX project | Designing an e-commerce concept website
Brief
Fresh Crop is a neighbourhood grocery located in the area of Clapham, London. As a shop, they have been a part of the community since 1998. The shop’s business model is based on customer service, reasonable pricing and keeping it local. Most customers are residents or small businesses.
Through a new e-commerce website, Fresh Crop wants to showcase its products, while maintaining its brand image. They offer a highly curated inventory, focusing on hand-picked quality over quantity.
The primary goals:
- Having a clear structure to locate specific products.
- Support a single page for each product.
- Finding an efficient way to purchase one or more products.
- Steer customers toward popular products.
The secondary goals:
- Allow customers to browse products related to their current selection.
- Allow customers to read and write reviews of a product.
- Provide information about the store’s heritage.
My role
This was a solo concept project of two weeks during the 12-week UX Immersive Design Bootcamp from General Assembly. Through the course of the project, I performed user- research, interviews and card sorts. Also, I made my debut in Figma creating the final Mid-fidelity clickable prototype.
Key deliverables
Competitive Analysis | Persona| Information Architecture | Card Sorts | User flow | Clickable mid-fidelity prototype tested with multiple users
Results
The design of the new website grants users with:
- efficient and easy findability of products by having clear structured product pages. Also, by giving the user the ability to narrow down the search with the use of filters to sub-categories.
- product focused advice. The user is provided with a clear product description, product reviews and recommendations of inspirational recipes based on the shop’s inventory.
- a fast and simple checkout experience where the user fills out the delivery- and payment details in a few uncomplicated steps.
Double Diamond
Steps we will take to get the desired results.
Discover
Competitive Research
Starting off the project, I researched direct and indirect competitors to identify opportunities for Fresh Crop. The authentic values and product range can set the shop apart from their competition, this quadrant analysis shows where they sit in the market.
Fresh Crop’s heritage, customer service values and hand-selected quality products were also identified as key unique selling points in relation to their competitors
User Interviews
I interviewed 3 people from Fresh Crop’s target audience to understand users’ wants and needs and their pain points. My key findings are organised in stages of a shopping experience.
- Preparation to Shop
- During Shop and Product Decision
- Check-out Experience
- About the Independent Local Grocer
The key insights from the user research included:
Wants and needs:
- Quality of the product they are purchasing.
- Convenience with quick and easy delivery.
- Dietary requirements are present in various forms.
Pain points
- Expensive and limited product range is an assumption generally made.
Define
Persona
With the findings of our research in mind, I created the persona of Sam. They allowed me to keep the user at the centre of the design process, ensuring I based all future design work on her needs and goals.
Based on Sam’s goals and frustration, I created her narrative with a:
Problem Statement
Sam needs a way to learn about how to use food products she hasn’t cooked with before, as she is shopping for them at the grocery’s online.
Scenario
Sam is browsing online to shop for new ingredients to make a new dish.
While browsing she doesn’t know how to put these ingredients together. She can’t ask a shop worker so now she doesn’t know what’s good.
My hypothesis
Sam goes on the Fresh Crop website. With each product, there are customer reviews and they have recipes on how to prepare the ingredients. The other ingredients of the recipe are also available in the shop.
She feels inspired.
Information Architecture
It is important to organize and structure the content of the website in a way that users can find the products without too much effort.
To synthesize data for a sitemap, I performed 2 closed card sorts and 2 open card sorts.
- Open card sort, an exercise where participants are asked to organize Fresh Crop’s inventory into groups that make sense to them. Next, was to name each group they created in a way that they feel accurately describes the content.
- Closed card sort, a way to ensure the previous findings, participants were asked to sort the shop’s inventory by placing the products into predefined categories.
Key findings cart sort
Insights I retrieved from the cart sort was the need for sub-categories based on dietary requirements. Also, it became apparent to me that the products needed a clear description of the food products and how to use them in recipes.
The inventory list is divided into main categories with subcategories of dietary requirements.
Site map
The site map is a hierarchical layout of the website that shows how pages are prioritized, linked, and labelled. I used the main categories founded from the card sorts ensuring the site structure was easy to navigate for the user
User Flow
To get an idea of Sam’s journey through the website, I started mapping out her user flow. Though using the site map and Sam’s scenario, I was able to visualise what her ‘happy path’ would be.
Structure of Navigation
Before I could start thinking about wireframes, I needed to create a structure for the hierarchy of the navigation. By doing so, I made it easier to sketch my ideas into logically structured pages
The hierarchy was arranged like this:
- Primary Navigation directs the user through the site’s main menu.
- Secondary Navigation categorises the products.
- Faceted Navigation, user interviews showed that dietary requirements were important to our users. This was achieved by adding filters to narrow down the search outcomes.
- Supplemental Navigation will be placed on the footer with access to information and the ability to contact the shop.
Develop
Starting with sketching simple wireframes on paper I quickly moved on to Figma to start developing low fidelity wireframes. After 3 rounds of user tests, I iterated the wireframes into a clickable mid-fidelity prototype. This increased the value of the usability tests and resulted in several changes to the designs based on user feedback.
Through testing, I was able to observe user frustrations and discover which areas of the designs needed improving in each iteration.
Iteration 1 — The homepage
Problem
After testing the mid-fidelity prototype I received feedback about the text in the footer being over-elaborate which makes the content messy and unclear.
Solution
- Rearrange the information on the footer.
Iteration 2 — The product page
Problem
- On the — overview — product page, when clicking on the add button, users were sent directly to the — product — detail page but it wasn’t clear if it got added to the basket.
This showed that users struggled to find a fast way to shop for a product they already knew about since they had to go to the product detail page first.
Solution
- The ability to add products to the basket from the overview page and increase the level of efficiency.
- A sign on the cart icon shows the number of products in the users’ basket.
- The addition of Breadcrumbs allows the user to see on which page they are and shows them the steps to where they came from.
Iteration 3 — The payment details
Problem
- The checkout page was perceived as cluttered, and a full billing address form underneath the delivery address felt redundant.
- Most people weren’t sure if the order they made had gone through without receiving confirmation after purchase, like an email or an order number.
Solution
- Condensing the forms on the Check out Page by including a tick box — Billing address same as delivery address — to make the forms less overwhelming.
- Providing proof and reassurance the order got through correctly by adding in confirmation message including an order number and email send.
Outcomes
The Final Prototype includes:
- An inviting Homepage with an intuitive structure to either explore the content or have a fast process making an order.
- A well-arranged Product page with filters to special requirements to narrow down the users’ need.
- The Detail product page including reviews and testimonials with additional recipes based on the shop’s inventory.
- Finally, a fast and efficient Checkout process with the users needs for convenience in mind.
Click to see our high fidelity prototype: Here
Next Steps
- Build further on the recipe page by improving visibility and accessibility.
- Expand the offers and deals section.
- Integrate the loyalty card scheme.
- Make the — Check out — easier by including Apple Pay and Google Pay.
- Developing the visual design to support the key brand values, in particular, to enhance the store’s heritage.
Conclusion
My key learnings in this project are how important it is to conduct proper interviews with the right questions. It is a revelation to realize how other people’s minds work from your own. It gave me the conclusion of how easy it is to fall into assuming if you don’t keep an open mind.
Also, it was eye-opening to not be afraid to take steps back into the research or the design process. For this project, I had to perform new rounds of interviews because my initial questions did not get me insight to move forward with. However, in a later phase of the process, it paid off because it allowed me to make better design decisions based on newly retrieved data.
