I then continued my research of Sunshine Food’s competitors, focusing on their online stores. I began looking at the online features of Planet Organic, As Nature Intended and Tesco to understand what conventions are used in the industry.
Despite this feature comparison being a good starting point in analysing the competitors, I needed to gain a better understanding of their customer online experiences.
I then developed qualitative analysis of the three sites, which was a useful means of determining what elements I wanted to incorporate into my design, as well as confirming those which weren’t desirable.
The main takeaways from this analysis were:
- The use of large imagery alongside products (as showcased on Planet Organic’s site) works as a great tool in bringing the product to life. This would be a great way to showcase Sunshine Food’s products online.
- On As Nature Intended and Tesco’s site, there was a lack of customer service assistance and live-chat options. Customer service is a vital component of the client’s brief which needed to be addressed.
- On As Nature Intended site, the delivery options are provided towards the end of the checkout process. This I believed lacked efficiency for users during their purchasing process, which is something that Max and Sunshine Foods would definitely not want.
Information Architecture & Site Map
Using 75 of Sunshine Foods’ top selling products I conducted 5 rounds of card sorting — 3 rounds of open and 2 rounds of closed.
This was done to identify common cognitive patterns users had in the organisation of the items. I found users allocating the items in relation to:
- Home storage — where items are stored within the home e.g. food-cupboard
- Location within the store i.e. in relation to in-store signage/aisle location
- Dietary requirements
This was a useful tool which informed the organisation of the Site Map. The main ‘Groceries’ category, was broken down into 2 main sections: ‘Food & Drink’ and ‘Household’. This was then further grouped in relation to where they would be stored in the home. Due to the importance focused on dietary requirements users placed during the card sorting, I implemented ‘Shop by diet’ into the primary navigation.
I conducted a user-interview with Patrick — who’s demographic and character type aligned well with Max’s. I needed to get a better understanding of his ‘grocery-shopping’ experience. My main findings were that Patrick:
Values good product range and store organisation.
He prefers to shop in-store over online due to convenience.
He values the real life shopping experience — as likes to be prompted by visual cues.
He values good customer service — however often finds this is store dependent.
How can I map these in-store customer experiences online?
There seemed to be a cross-over between my research findings and the needs of both the client Sunshine Foods, and my persona Max. What became clear was that customers value the in-store shopping experience due to convenience, customer assistance and being able to see the products they were buying in real life.
In order to replicate this experience I would need to ensure:
- Each product online is represented with strong visual imagery, alongside helpful descriptions and information.
- Great customer service is easily accessed throughout the site.
- The online shopping experience is convenient in itself, with the site being well structured and organised.
From here I devised an outcome statement, which I used alongside a storyboard to visually frame the situation, problem, solution and outcome.
Situation: Max is planning to cook dinner for a group of friends on Saturday, and wants to place an order in advance for all the ingredients.
Problem: He doesn’t know what to cook, and doesn’t trust ordering from online grocery sites as he finds the delivery service unreliable.
Solution: Sunshine Foods have a site with great recipes, products and a great delivery service with reliable tracking information.
Outcome: A happy chef — with more time on his hands!
Moving forward in the design process, I created a user flow and wire frames, to outline the steps Max would take. I split these down into two stages:
- Recipe Discovery
- Checkout Process
Step 1 — The Recipe Discovery
Max’s path of discovering a vegetarian recipe, by filtering by diet. Once landing on the recipe page, he can edit the ingredients.
Sunshine Foods: Recipe Discovery User Flow
On the ‘Recipe Ingredients’ page, I included an ingredients calculator feature which enables users to users to input the number of people they are cooking for. The page then automatically updates the number of ingredients required for the selected recipe, with the added option to remove/ swap certain items. This feature addresses Max’s task at hand to efficiently make an order in a quick and streamlined way.
Step 2 — The Checkout Process
Once the items have been added to the basket, going through the checkout process and setting up a home delivery.
I revisited my competitive analysis to see how streamlined Sunshine Food’s competitors checkout process was. The flows below illustrate the number of steps it takes to place an order across the three competitors.
Global Navigation | I also analysed their global navigation to see if this aided or hindered the process.
I found it difficult to navigate Ocado’s delivery/ checkout steps with the tabs appearing hidden, lacking visual hierarchy. Despite finding Tesco’s general store navigation clear and well designed, I thought the checkout process differed, losing global navigation during the later steps. I therefore needed to make sure that these steps would be clearly visible on my site, maintaining global navigation through out.
Sunshine Foods: Checkout Process User Flow
With this in mind, I devised Max’s user flow on Sunshine Foods, also referred to as his ‘happy path’ when using the site. This process is organised into 5 main steps, with main emphasis on basket review, incorporating Tesco’s progress bar for user navigation.
This 5 step process enables Max to easily review his basket, and set up a delivery with flexible options. After going through the payment stage, he would receive an order confirmation and tracking information, which is something this is vital to him when shopping online .
I conducted usability tests with 6 users, to assess the viability of the lo-fidelity prototype and tested 4 task scenarios:
Max is planning to cook dinner for a group of friends on Saturday, and wants to place an order in advance for all the ingredients.
Task 1: You are cooking a meal for 8 people, and are looking for a vegetarian recipe.
Task 2: With your chosen recipe you want to input the number of people you are cooking for and then add all of the ingredients to your basket.
Task 3: You want to organise a home delivery and pay using saved details
Task 4: You also want to and ensure that you track the delivery by text.
Post user testing
From the user testing I learnt that the common pain points for the users were during the recipe selection and recipe editing process. This included:
- Confusion over copy — users wanting more descriptive copy.
- Ingredients calculator — users liking the feature but unsure exactly on how it works, or how to use it.
- Users were unsure how to add all items to the basket — due to the lack of a ‘add all’ CTA.
Based on the feedback received during the user testing, I iterated the lo-fi frames into mid-fidelity frames. These changes addressed the functionalities that needed to be improved on.
Main iterations included — the Recipe Discovery page; the Recipe page and the Recipe editing page.
Iteration 1 : Recipe Discovery
The Recipe Discovery page provides recipe suggestions based on the category selected e.g. vegetarian recipes. Alongside each recipe, users are able to view ratings and reviews, as well as have quick access to customer assistance/live chat.
Despite using large imagery throughout the recipe discovery stage, I learnt that this page lacked copy relating to the visual hierarchy. ‘Most popular’ was then added to the top images in order to provide clarity.
Iteration 2: Recipe
Once selected, the Recipe page provides a variety of large visual imagery of the meal, alongside a a description by the author and recipe information. Users also have the option to favourite recipes as well as access live chat. This enables users to create personalised accounts , as well as bring Sunshine Food’s customer focused assistance online.
On the Recipe page, I learnt that users found the ‘Shop Ingredients ’CTA copy misleading, with users assuming that when clicked, all items would be automatically added to their shopping cart. This however, actually takes the user onto the next page, where they are able to manually edit the recipe ingredients. The copy was changed to ‘View Ingredients’.
Iteration 3: Recipe Editing
Once a recipe has been selected, the ‘Ingredients Calculator’ on the Recipe Editing page, calculates the quantity of ingredients required for the selected number of people they are cooking for.
When testing users struggled navigating through the ‘Recipe Editing’ page.
- Users found the copy alongside the ‘Ingredients Calculator’ to be unclear. This was changed from ‘Ingredients calculator: I want to feed [X] people’ to ‘How many people are you cooking for? [X] persons’. This proved to be much clearer and more straightforward for users.
- Once users had used the ‘Ingredients Calculator’, they were unsure how to edit the individual ingredients, in regards to removing or adding certain ingredients from the list. Secondly, it was unclear how to add all the listed ingredients into their basket.
- User’s wanted a quicker way to add all the listed ingredients straight into their basket. An ‘Add to basket’ CTA button was added beside the calculator providing greater efficiency for the users.
The final design solution provides Sunshine Foods with a website that bring’s their products to life. Like their store, their online platform maintains their personalised independent store ‘brand image’, providing great customer service and flexible delivery options to their online customers.
Interactive Prototype — Mid Fidelity
Below is a clickable version of the final mid-fidelity prototype or click here .
- Develop the the UI of the site incorporating branding, imagery in order to develop the higher fidelity iteration.
- Explore recipe filtering options i.e. by author/ ingredients
- Refine the check-out steps to make more the process even more efficient.
- Explore recipe review/ rating options, and formatting.