Ocado
Hobby kit mobile app
Overview
For the first team design project we were tasked with designing a native application to add a new product to our “client’s” existing offering. The client for this concept product was Ocado, a British online supermarket delivering groceries and home essentials to their customers. In our brief, Ocado wanted to respond to a growing need (due to the Covid 19 lockdown) for home baking with “hobby packs”.
My team was made up of fellow General Assembly students that were chosen at random. We had two weeks to design a solution for our “client” over Zoom and other remote working tools.
Meet the team:
I took the lead on user research and project management for the team.
Goal
Our goal was to design and prototype a feature as part of Ocado’s native mobile app that brings a new product offering to their customers. In the two-week sprint we needed to:
- Establish customer needs and goals
- Determine the feasibility of the new product
- Add a feature to Ocado’s app that meets the customers needs
- Use the Ocado design system to stay on brand for a seamless integration
Assumptions
To keep the project realistic, we made a few assumptions that we felt would influence our design process and make the project realistic.
- We would not be changing the sitemap/architecture of the app
- We would not change the UI, or brand
- We would use the same layout where possible
Design Process
One of the reasons I love UX is that designs are led by data and there is a structure and process to follow to ensure nothing is missed. Below is a diagram I drew (of a common process in UX) to show the steps we followed in this design sprint. It illustrates the diverging of information gathering and idea generation, and the converging where the information and ideas are distilled into actionable insights and prototypes. This process is iterative and we often revisited phases when needed.
- Discover — Client brief, User survey, User research, Competitor research
- Define — Affinity map, Key insights, Persona, Empathy map, Experience map, Problem statement, How Might We
- Develop — Design studio, User flow, Sketches, Wireframes, Usability testing
- Deliver — Final screens and Prototype
Discover
In the discover phase, we are gathering as much relevant information as possible. We started by looking into the client and their expectations, the competitors, and lastly the users (customers).
Client brief
To achieve the best product, Ocado gave us some constraints to work with:
- Customers should be able to choose from a range of hobby packs. The
- Customers should be able to customise a pack based on items they may already have
- Customers should be able to access guidance for how to use the items in the hobby pack
Competitor research
We divided the competitor research between us, each taking a company we thought met similar goals for customers looking for hobby packs. Below is a section of the key findings where we explored the way they handled aspects like reviews, descriptions, selecting products, and their baskets.
There were features from each of these that we thought could work in our designs and some served as a proof of concept. For example Tasty (a very successful recipe app) led us in the layout of the wireframes designed for the recipe page.
User research
User research is the key to a great product so it was important that we found the right users to interview. I took the lead on the user research as it is an area I am comfortable with. We designed a questionnaire to send out to our network to help us narrow down the users we should speak to. In a few hours we had 61 responses of which we identified 11 users to speak to with a fairly even split between men and women mostly between the ages of 25–34 which we identified as the primary target market for online shopping.
While the responses were coming in, I wrote a few guideline questions you can see below to ask the users from which we could pursue further insights from.
Once we had conducted the interviews, we wrote down the answers onto post-it notes and put them up on a big board all together. An example of some of the answers we received are below.
Define
At this stage in the sprint we have diverged and gathered many insights we can move forward with. The define stage now takes this data and narrows it down to create a clearer picture of who we are designing for and what goals and objectives we need to meet for the user.
Affinity map
An affinity map is a UX workshop that takes all of the above mentioned data and attempts to find patterns. We take all of the post-it notes and start putting them with similar notes.
This is to expose popular trends in the data so that we can see what users are looking for, what they want to avoid; their likes and dislikes, needs and wants, and much more. Following is a top level view of these patterns, on the right you can see the types of insights we gathered.
Key insights
Firstly, we took the data from the affinity map and drew out some key insights. They were:
Persona
As I was the lead on the user research, I took the information from the user surveys and the interviews and created a user persona.
This process in UX is so that designers can get a clear picture of who they are designing for and design for them rather than themselves. Things that need to be outlined are the user’s biography, behaviours, needs and goals, and pain points.
Empathy map
An empathy map is a visual tool that allows designers a deeper understanding of the behaviour and attitude of users. We try get to the point we can empathise with our end users and this tool helps us do this. Faisal took our persona and drew up the following for us:
Experience map
Together we developed an experience map which shows Alexa’s experience whilst trying to achieve her goal. It is by mapping her actions, and thoughts, to her emotions that we can identify her pain point.
You can see in the above graphic that Alexa is unhappiest when she is looking for instructions, and then trying to buy all of the ingredients to make her kombucha.
Problem statement
Now we know more about Alexa and we can see where she is struggling we identified a specific problem to solve for her which we recorded in a problem statement:
Alexa needs a new hobby to relax outside of work which is simple to learn, reasonably priced and not time consuming because she has a demanding lifestyle.
How Might We
A “how might we” helps us to frame Alexa’s problems in questions that opens up brainstorming and ideation sessions. We wrote a few but decided on:
…help Alexa find a new hobby.
We took this statement and carried out a design studio.
Develop
Design studio
A design studio is a type of UX workshop that allows for divergent and convergent thinking. Each member takes the How might we statement and thinks of as many possible solutions. It is often helpful to think of big hairy ideas, ones that go outside the box. We limited our time to 6 minutes and then wrote them down like you can see below. We then discussed with the group and used a dot voting process to determine the ideas we wanted to push through with.
The idea is to sketch your ideas down, but in the limited time, I decided to write mine down and then draw them out if I had time but I didn’t get there before we had to sell our ideas to the team.
The outcome of the design studio were the following ideas:
- A mystery subscription box service
- Skills builder
- Special filter function
User flow
Once we had an idea of the features we needed to incorporate and the steps for Alexa to go through, we were able to draw the following flow Alexa would take in order to achieve her goal.
Sketches
Each of us drew some wireframes of how we thought we could layout the pages and we then discussed the best elements from each. Here are a few of the sketches we did:
Wireframes
We started with drawings (low fidelity) and moved up in detail until they resembled a real app (high fidelity). Fina is a visual designer by trade, so she ran lead on the visual design, creating the UI elements we were to use. We each took ownership of certain screens and designed the wireframes ourselves. Below is a look at the screens I personally designed.
Usability testing
At each level of detail we carried out usability testing to see how users interacted with the wireframes and made tweaks to features, layout, positioning, sizing, names, etc.
Once we were happy that we had addressed the issues raised in the usability tests, we took our designs to the high fidelity prototypes to follow.
Deliver
The outcome of the sprint was this prototype you can find by following this link: Ocado Hobby Kit. Please feel free to check it out and let me know what you think.
Here’s a high level view of the final UI screens if you don’t have time to play around with the prototype.
Project management
As I mentioned I was the project manager for this project. The following is a view of how I managed the sprint by sectioning it out in the beginning in Miro and adding our work as we went. This way we could see a visual representation of the progress we made as well as making it very easy to find and present each phase of the project.
Learnings and What’s next
In the design studio we had ideas that were a little more complex than the instructors had imagined. We went back and forth internally and with the course instructors who recommended we pull back on a few of the ideas and “keep it simple” which we did in the end.
I have a feeling they were worried about time but we finished our project two days early. I think we could have made an exciting product whereas it became a simple e-commerce app with elements of our ideas as smaller features. It is a good learning experience as I imagine future clients will often make decisions like this.
What’s next
As a concept project I won’t be taking this any further; however, if i were to the next steps would be to:
- More design iterations
- More Usability Tests (on hi-fi prototype)
- Incorporate “recipe preview” into the product page / earlier pages
- Design + prototype “Surprise Me” Feature
- Develop achievements feature further
Thank you for reading.
