Order hand-picked groceries at your fingertips!

Imene Boulhaia
Nov 6 · 7 min read

Extending an established brand into online grocery shopping — A UX case study.

Online grocery shopping

Overview

For my second concept project, I have been assigned to create an e-commerce website for “ Bag It Up Groceries ”, the city’s fictional neighbourhood grocery shop since 1988, located near Liverpool Street Station.

“ Bag It Up Groceries ” owners want to expand their business while maintaining their brand image. For the first time, they’re introducing online delivery with the option of shipping groceries to people’s house and work place.

They offer a highly-curated inventory of products, focusing on hand-picked quality over quantity.


Discovery phase

The “Double Diamond Process”

I have based my project on the Double Diamond approach which cycles through the phases of “Discover”, “Define”, “Develop” and “Deliver”, to organise my thoughts and improve the creative process.

My next step was to gather as much data as possible so that I could identify and contextualise the problem and then devise a solution.

I started my research by doing a competitive landscape between direct and indirect competitors to compare the strengths and weaknesses of each in order to help me facilitate the creation of strategic competitiveness. It gave me and the client a clear understanding of where we wanted to be, based on our vision and our core values.

Competitive landscape analysis for our e-commerce website

I then tried browsing our competitors websites to see the different layouts and navigation structure and to identify what features each website included. I tested each website from the home page through to check out page to gain an understanding a feel for the shopping online experience I could offer.

It was interesting for me to learn that…

  • Not all of the competitors websites had an easy mental navigation model.
  • Not all grocery shopping websites had an easy-to-use check out process.
I interviewed numerous customers at Planet Organic at Liverpool Street Station

To understand the problem I needed to solve, I decided to do field research and gather insights from real customers.

I went to both “As Nature Intended” and “Planet Organic” as they are amongst our direct competitors in London. I spoke to some of the customers and staff to understand their behaviours and habits as well as their needs and motivations. Here are some of the quotes from my research:

I don’t mind shopping online if free delivery is an option.” — Sofia , Planet Organic customer.

“ The only thing I would’ve wanted the shop to have is an app” — Steve, As Nature Intended’s staff member.

The core insights gathered during the site visits were as follows:

  • Customers like to shop based on where they live or work.
  • They prefer to buy where there’s a variety of healthy products.
  • They like shopping for deals and reasonable priced food.

Define phase

A persona is an archetypical user whose goals and characteristics represent the needs of a larger group of users. Personas include behaviour patterns, goals, skills, attitudes, and background information.

After I gathered my data and established some trends, I created a persona, the representation of the target customer I am designing this website for.

Paula will help me understand the users’ needs, experiences, behaviours and goals. Our users had an obvious concern and our research helped us uncover it. It is encapsulated in one single problem statement.

“Paula needs a way to buy her groceries online and browse for good deals because she wants to get them delivered to her home

Now that I established who the user is and what problem I needed to solve, I moved on to doing card sorting and tree testing to help me evaluate the information architecture and navigation structure for the website I am designing.

During an open card sorting session at GA with a user.

Due to time constraints on the project, I used fellow classmates as participants to uncover insights.

I gave the participants a selection of items and I asked them to group them together in a way that made more sense to them. Results varied but there was a clear pattern in the end. During the tree testing, I provided the participants with a predetermined set of category names and I asked them to find the locations of the items in the tree.

Bag It Up groceries’ sitemap

After finishing the card sorting, I started creating a sitemap based on a design that meets the users’ goals and preferences but also a design that meets the business obligations.

The common traits that I could pinpoint and decided to use on our website were:

  • Steer customers towards attractive deals and popular products.
  • Have a clear way of browsing through products.
  • Allow users to read and post reviews.
  • Have an easy check out process.
  • Reward customer loyalty.

Develop phase

A user testing our paper prototype using the wireframes that I created from the insights and ideas gathered up to that point.

Brimming with enthusiasm because I had everything I needed to start the sketching phase, I began drawing quick sketches to put all of the different ideas on paper and explore the different possibilities of how the website would function. With sketching comes the engrained habit of editing before producing something that we can test. I ended up having a set of wireframes I was ready to test.

These are some of the confusions during the interaction with the paper prototype:

  • Users seemed to be a bit confused by the choice of words, in this case, they didn’t understand what the term dinner basket mean. The users didn’t know whether it means a ready made meal or a product bundle as intended.
  • In some cases, they didn’t know where to go next. Some elements like the go back button and the next button weren’t really visible.
  • Users didn’t know where to click by the time they got to cart. The basket wasn’t in its conventional placement, and there seemed to be some missing steps.
I used an iterative approach to enhance the user experience during the user testing.

Taking into account the insights gathered during the usability testing, I started creating a low fidelity prototype using Sketch.

Low fidelity prototype. The first screen show the home page and the drop down menu of products. The second screen is the product information of a deal that the user tries to purchase. The third screen is a page that gives more details about each product of the deal.

A low fidelity prototype communicates enough about a specific product to set in motion an informed discussion with stakeholders. It also provides a better interaction for the user which leads to streamlined designs based on a better input.

Website’s user flow. These are the steps that the user will be taking during his journey using the website.

I provided the users with a set of tasks that translated into the above user flow. For the sake of this project, we only focused on the “happy path”. The insights that were gathered after testing the low fidelity prototype were:

  • The icons weren’t clear as to what they mean. Small titles needed to be added underneath each icon to provide more clarity.
  • The drop down menu on the home page doesn’t provide the visual clarification to the user persona and therefore is confusing.
  • A one page checkout had excessive amounts of information which made it difficult to identify where to click.
  • On the deal page, it is unclear if the user is buying one single product or a product bundle.
  • On the home page, he user expected to find a search bar rather than a magnifying glass sitting next to other icons.

I began the iteration process of my digital wireframes following my initial findings and taking into account the issues that were encountered during the usability testing.

This is a low fidelity prototype where I removed the drop down menu and instead, replaced it with food categories and pagination. I swapped some elements around. I added reviews and a recipe page.

I started testing again using a medium fidelity prototype this time and there was a considerable amount of insights that led me to reconsider the website’s information architecture and design:

  • Users felt it is irrelevant to have some ads during check out.
  • Users wanted to see several pictures of a product on the product page.
  • Users also wanted to have an option to add ingredients to their cart straight from the recipe page
This is a medium fidelity prototype where I added pictures and a check and created a new check out process adding a progress bar.

I gave the medium fidelity prototype another go, at the same time keeping in mind the observations I gathered from the usability testing, as there was still room for improvements. Some of the remarks made by users were:

  • Choice of words was not clear.
  • There should be more deals to choose from as the user found that one isn’t enough.
  • Search bar should be moved to the middle of the screen.
  • There should be titles in some pages to provide clarity.

Takeaways

In terms of next steps, I would like to further iterate and test the prototype and eventually moving to create a high fidelity one.

I will review the semantics, revisit the layout, choose the right buttons and icons, maintain consistency, opt for a more user-centric design and give the website a brand identity.

I learned how to design a responsive website in this project adding to my previous knowledge on how to do research and design a product that people need. I am gaining more confidence in understanding the overall UX design process and consolidating my knowledge.

Thank you for reading !

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade