The goal
CERES fair food is a not-for-profit social enterprise that is 10 years old. They currently deliver organic produce to around 2000 Melbourne households per week averaging around $120 per order.
​
The goal was to design a solution that would be the most useful for the
client and the users who shop for groceries.
​
The brief's main focus was to improve their digital platforms, especially their homepage, and to increase conversion on their mobile website platform.
Mobile solution
What are the assumptions?
In order to begin the project and understand where the research scope should be, I need to make some assumptions. The assumptions were based on stereotypes about organic shoppers and non-organic shoppers, what shoppers want from their grocery experience and how informed shoppers are about organic products. All of these assumptions were selected to create a discussion guide to aid the research.
Organic groceries are generally more expensive
People believe organic groceries are more healthy
People want to receive fresh groceries
People choose organic products because of recommendation and online promotions
People want to receive their groceries fast
People generally buy less organic groceries than non organic groceries
Research approach
The first thing I needed to do was understand how people shop for their groceries. I shop for groceries almost every week, but what about you? To gain a better understanding of these behaviors, it is essential to get into research and to understand how people approach shopping and organic foods. Have they heard of CERES?
User surveys
Competitive and comparative analysis
User interviews
Contextual inquiry
Research methods like these are part of the standard UX process and allow me to examine every aspect of user behavior
User Surveys
Public discussion channels were sent survey invites to gather qualitative data about a choice made. I wanted to ensure that I received feedback from different types of users. Users who participated in the survey were then approached for a detailed interview, which would enable me to get more insights into their lives that would be useful to the research.
We received 30 surveys and these were the results
My core findings were that users who shop organically do not typically shop online, they consider buying organic but do not do so regularly, they are willing to pay more for local produce, and they spend $50-$100 on groceries per week on average.
Competitive and comparative analysis
Comparing similar market players in Australia is a key part of competitive and comparative research. I can use this information to understand how others engage with their users and allow them to shop online for their products. The outcome of this research helped me identify the steps that each website takes in order to achieve the same goal and what makes one website better than another.
Adding the same item took less than 7 steps to accomplish a checkout for all stores
All websites had a minimum order amount
CERES had the longest task flow with 38 steps
Except for Pachamama, all websites require you to sign in before checking out
Delivery fees were more expensive than the item itself on all websites
After summarising the findings it was understood that it is important to allow users to checkout without signing in as it shortened the task flow and allowed a more welcoming experience for users.
User Interviews
Interviews were conducted with 10 users who shop organically. I conducted the conversation in a way where there were main areas of questions to address, and I encouraged the conversation to proceed naturally.
​
Participants were asked about their shopping habits, shopping behavior, and attitudes toward online shopping. By doing so, I was able to confirm if all of the assumptions were correct or not.
What do users at CERES think?
User 2, Melb
“I shop at CERES because you can bring your own packaging."
User 4, Melb
"I dont like that sometimes I put through an order and then it gets rejected with no second option."
User 7, Melb
“I just like looking at what im buying and picking out what is fresh.”
User 3, Melb
“The convenience of being able to buy things online is important.”
Defining the research
Now that I have a set of qualitative data, what do I do with it? How do I synthesize the research?
UX methods were used to define my research and understand the core problem behind the users' problems.
Affinity mapping
Empathy mapping
Persona
Problem statement
These methods were chosen to understand organic shoppers and synthesise my research data the best.
Affinity mapping
After the user interviews, It was time to move to affinity mapping.
​
The process of grouping them was quite interesting since I was able to see many trends that are similar. One major insight I discovered was that the users are hesitant to shop online because they need to see the produce - such as fruit and vegetables - before purchasing it.
​
The delivery times, product quality, and possible packaging that comes with the product are important to them.
The users told me that going to the grocery store is the best experience for them because they like to feel and see the freshness of their groceries, it is the most important thing to them, and they enjoy browsing and choosing their foods.
Empathy mapping
I then created empathy maps to try to pinpoint what our persona would feel, speak, think and do during their experience purchasing online with CERES.
​
Through this exercise, I was able to understand the affinity map groupings further to understand the user based on their experience of receiving groceries that did not meet their expectations, it was not fresh enough.
The user shops once a week and prefer to eat healthy when they can.
Meet Ben
Using empathy mapping, a persona was created.
​
Ben is a full-time retail manager who lives in Melbourne. He enjoys good food and is health-conscious. While he wants to eat healthy and more home-cooked meals, his full-time job leaves little time for going to the store.
​
Despite trying to buy groceries online, he has never been satisfied with the quality of fruit and vegetables that are delivered.
Problem statement
Now that I have understood our users into a persona, I need to complete the definition of the problem into a problem statement.
“Ben needs to know his groceries will be fresh because his online deliveries have not been the best quality.”
Based on his goals, needs and pain points, I found that he would benefit from buying online if he could see or check the quality before purchasing.
Now, lets solve this problem.
Once I have identified our users' pain points and defined Ben's problem, I can create a possible solution.
To achieve this, I followed a classic design sprint method, where I brainstormed to many different ideas to generate the final outcome.
How might we
Crazy 8's
Defining the idea
Feature prioritisation
In the end of this process, I came up with multiple ideas that we wanted to develop, and after understanding each idea fully, I found the minimum viable product.
1 / How Might We
During the ideation process, I wrote down ideas, potential solutions, and how might we statements to resolve Ben's problem. With some peers, I discussed these possibilities and pointed out the pros and cons of each. After that, I selected 3 of the most important ways we could resolve the issue.
​
​
​
​
​
2 / Crazy 8s
I conducted four rounds of crazy 8s to generate as many ideas as possible. My first few ideas were those I had when I was conducting the interview, but as I continued the ideation process, better and fresher ideas came to mind.
​
​
​
​
​
​
​
​
3 / Defining the idea
The idea chosen is a fresh produce swiper deck, similar to the tinder swipe, swipe left or right to your grocery items!
I chose this idea since it will give Ben a familiarity with other applications that may have had multiple options for him to choose from. This is a very quick and simple process that will allow Ben to pick out her produce quickly.
​
To understand the feasibility of the idea, i moved onto further defining the features that may go into this idea to make it a reality.
​
4 / Feature prioritisation
During this process I brainstormed important features that must be included in the solution to make it possible and to enable the users to enjoy a familiar and fluent experience. They were ranked according to their impact and effort to produce the minimum viable product.
.jpg)
.jpg)
Minimum Viable Product (MVP)
"Quality assurance photo taken of groceries to allow customer to review fresh produce before the package is dispatched."
By understanding the features that are most feasible to design, the features were able to be synthesised into an MVP.
The MVP was determined based on understanding which features solved the users' problem statement the best.
Creating a solution for the users
Having defined the idea, I needed to understand how the user interface might look. A user's interaction with a product and decision points they may encounter along the way were visualized using methods that allowed me to explore how they might interact with a product.
Task flow
User flow
Paper prototype
This will help develop a design that is specific to the user and easy for the majority of users to access and use.
By using these processes, I was able to create a prototype that was ready for testing.
Task flow
Due to the competitive comparative analysis at the beginning of the process, I wanted to make sure users did not have to create accounts and could check out as guests. I wanted to keep the easy flow to check out the same since that process received positive feedback during the research phase.
Select Category
Select Product
Add to cart
Go to shopping cart
Log In/ Sign Up/ Check out as Guest
Input personal details
Place Order
Auto-Tick Freshness Photo
Send Email Link
Quality of Groceries Checked
Input Delivery Option
Input Payment
Package is Dispatched
User receives items
User flow
The user flow was created once the task flow was understood. It consisted of two main decision points. If you want to checkout as a guest or sign up, and if you want to view your groceries before checking out, these are the choices.
Paper prototype
In order to create a possible solution on Figma for testing, I decided to test the paper prototype first. The purpose of the paper prototype was to determine how users felt about the product selection process and whether they felt confident in choosing the right photos.
I hand-drew all the frames and used Marvel to test them. This was the fastest way to test out the ideas.
How we understood our users needs
In order for the design to be user-friendly, reliable, and functional, it must be easy to read and interact with. This was tested through various rounds of prototyping to understand what users like, dislike, and what they do not understand.
Prototype testing
I was able to gather qualitative data about how the design is currently functioning by using Marvel screens. During the ideation phase, the tests enabled me to assess the effectiveness of the design, and they allowed me to connect with the users.
Feedback
The usability of the paper prototypes were tested by watching five users interact with them on marvel. At the end, questions were asked on why some participants seemed confused in certain areas of the flow and the results were noted down below.
Likes
-
Option of having photos taken or not​
​
-
Process was clear and easy to follow
​
-
Allowing photo checks before payment or checkout
Dislikes
-
"I don't understand the purpose of taking a photo? probably needs more of an explanation why that is beneficial"
​
-
Saying "ensure" promises too much
​
​​
Confusions
-
"How many images are there for me to look at?"
​
-
"Can i add more items after photos?"
​
-
Tick box was conrfrusing
​
-
"Do i need to approve all photos?"
Iterations
The mid-fidelity prototype was created based on feedback from the paper prototypes. These prototypes eliminated a lot of the negative feedback comments about the words being unclear or which buttons could be pressed. As a result of the testing, iterations were created on some screens to meet the users' needs. The changes were necessary in order to help the flow of the idea engage the users.
-
Updated graphics by showing more green space
-
Constraints introduced, buttons are greyed out until task is completed
-
Description of total number of images to review
-
Improved description of grey scale image
-
Explanation of what photo review is
-
Added option to keep shopping
-
Updated graphics by showing more green space
-
Constraints introduced, buttons are greyed out until task is completed
-
Reworded giving more clarity on what the business is doing for the user
We understood the problem to be:
“Ben needs to know his groceries will be fresh because his online deliveries have not been the best quality.”
The solution
Let us help you pick the freshest groceries!
Final solution is a deck of photos taken by CERES workers and posted online to help users pick out their groceries before they pay. The user will know what they will receive and from our research, this solves Ben's problem of not receiving what he expected during the ordering and delivery process.
Solution statement:
The checkout process was viewed positively by users, who feel confident and assured they will receive fresh groceries.
-
Browse for item
-
Select from category
-
add to cart
-
Shopping cart summary
-
Submit for photos
-
Browse photos of groceries
-
Approve or relesect photos
-
Pay for items
-
Select delivery window
-
Complete purchase
Main takeaways
Having worked on this project for the first time, I gained an understanding of how the UX process works and the importance of user feedback. I noted down feedbacks that I would like to take into consideration for my next project throughout the process.
My favourite part:
Conducting interviews was my favorite part of this project as I gained insight into the organic shopping market and got to visit CERES for the first time. That allowed me to truly understand why people were there and who the people were, which was very interesting and different than my previous experiences.
My biggest learning curve:
In learning Figma during this project, I was able to see how easy it is to visually present an idea rather than the paper prototypes that I am usually used to creating from my architecture background. In my drawings, I often display ideas and I think that it was an effective way to deliver the idea in a quick way. It was really cool to create that type of delivery in a different medium.
What to focus on next:
It is my goal to consider more of the business needs in my next project than this one, since I wanted to understand how I could present this idea to a larger audience within a company. This is something I would like to work on in my next few projects.