Grocery App Case Study
The overview for this project was to: Research a Grocery Store App and interview people to see what they think when they visit the grocery store or shop online. I then decided on my target audience and who I was going to ask questions too. To do this I found people over the internet to ask questions.
The next part was to gather my research and analyse what was said in the interviews. Once done, I started prototyping a Grocery Store App. From sketching ideas and wireframes to designing high fidelity mock ups. To do this part of the project I used tools such as sketch & Adobe XD to create these.
Once I was happy with the design I then did a user test on the Grocery Store App. To do this I used tools such as 'usertesting.com' and also I asked a few people who I know locally to help with the testing in person & via a video call. The users reacted really well, I had a few things to re-consider such as making the budget button more eye-catch for the user and how the user can change their budget easy. From the users feedback I then developed the app further to make it a better experience.
My Role
• User research & Analysis
• Persona creation
• Wireframes
• UI Design & Prototyping
• Usability Testing
Problem
The problem is a new client wants a grocery store app for the local grocery store. They want to conduct initial research to help determine specific problems, or pain points, users have with grocery shopping that their new app might be able to solve.
By doing this I will create a user research plan to organise and layout my initial interview questions. After the plan is in place, I needed to find 5 people who fit into a target audience to interview. I made notes of their answers to the interview questions and analysed their responses to find one key pain point for my client to focus on when building their app.
The current issue is that people find it hard to budget themselves when shopping on a grocery app, as it's so easy to put things in your basket without knowing the total cost until you come to checkout.The issue takes place when people are shopping and they don't know what they are spending. When the user comes to pay at the checkout and they spend over their budget which they had in mind.
Is is important to fix the problem and help people manage their money better when they had a budget set before shopping. We will make the mobile app more engaging by making the user select their budget before proceeding to start their shop. We will create a budget button on the app where users can adjust this before they start shopping.
Audience
My target audience would be people who already use online shopping apps, as they know what it’s like to use one. People who go to the supermarket who have never used an online shopping app. And people who do both online & go to the supermarket. The age group i’ve chosen is 18 - 60
User Persona example 1
User Persona example 2
Solution
I feel that my solution for my idea is that the user will be able to know what they are spending on the app as they put things into their basket.
To show this I would maybe put a counter on the shopping cart icon at the top of the menu bar and they can see how much they are spending (in a prominent red circle or something that stands out) .
Another idea would be to put a filter bar in and they can put their spend limit in this and when they reach their budget it will alert them to carry on shopping or to stop once they have reached their budget.
Or I would combine both ideas and make them into one, with a filter and also the counter on the trolley icon will show them how much they have left to spend visually.
When the user has spent up, an alert message will come up telling them they have reached their budget.
Planning & Research
The research goals are how can we make the grocery app helpful and easy to use. We are trying to learn how people think so we can make it as helpful as possible. I want people to choose ordering groceries on an app is better than going to the supermarket sometimes.
Interviews
In order to find the 5 people to interview, it will be a mixture of going to the supermarket to ask people if they have 5 minutes to answer my questions. Or I will find people who use online shopping & find people who will do both online and go to the store. This can be done on social media sites or forums. I will also zoom call a few people.
Interview Questions:
What do you think of going supermarket shopping?
What is your typical experience like?
What is time efficiency like for you? Does the time ever vary? What can cause shorter/longer trips? Please explain
Can you tell me about a time you had a below average or above average customer experience?
What’s the hardest/challenging part about going to the supermarket?
The key takeaway from my interviews are that:
Participants enjoy choosing their own food from the grocery store and they can look at the dates on the packaging etc. They like to look at what's on offer when they visit. However people who work long hours and have children prefer to use the online service as this is more convenient to them.
People usually find it easy to go to the supermarket and get what they need. However if they forgot their list they can find it hard to remember what they need. People who have children usually spend longer in supermarkets than users who only need a few bits on their own. Checkout delays can hold people up if they go at a peak time.
Customers usually have a pleasant experience shopping. However a few have had a below average experience eg. aggressive customers or checkout staff whizzing items through so fast you find it hard to pack them. A few things people found hard was, when the supermarket is busy they find it hard to find a parking space, and if they forget their shopping list it’s hard for them to remember the items they need.
Affinity Diagram x 5 participants
Organised Affinity Diagram
Pain Points
The most prominent pain point from my user research is the user trying to stay within their budget when food shopping. This can be hard not knowing how much things in your trolley are adding up to, until you get to the check out. It’s a shock when you have spent over your budget on shopping.
Solution to the Pain Point
I feel that my solution for my idea is that the user will be able to know what they are spending on the app as they put things into their basket.
To show this I would maybe put a counter on the shopping cart icon at the top of the menu bar and they can see how much they are spending (in a prominent red circle or something that stands out). Another idea would be to put a filter bar in and they can put their spend limit in this and when they reach their budget it will alert them to carry on shopping or to stop once they have reached their budget.
Or I would combine both ideas and make them into one, with a filter and also the counter on the trolley icon will show them how much they have left to spend visually. When the user has spent up, an alert message will come up telling them they have reached their budget.
Steps
To create a budget for their full grocery shopping list whilst they shop they will need to:
1. Once the user has logged in they will adjust the budget slider for their full grocery shop at the top of the app from £0 - £1000
Example of a budget slider: eg my budget for all my grocery shopping is £50
2. When they are shopping and want to adjust the budget for their full shop, they can click on the shopping cart icon/budget ‘£’ icon select ‘ change budget’ this will be for the full shop not individual products. Or on the homepage there is a button for ‘set budget’
3. Once selected a new page will appear where they can change their budget.
4. When budget is reached for their full shop an action box will pop up saying ‘ budget has been reached’ button to say ‘ok’
Wireframe - Sketches
Screen 1
Screen 2
Screen 3
Screen 4
Wireframes
Interactive Wireframe Prototype
High Fidelity Mockup
(before user testing)
Interactive Prototype
(before user testing)
Device Mockup
User Testing
Discussion Guide
For this part of the project I wrote out an introduction script.
User Test a Grocery Store App
The next part of testing was to complete the usability test with at least 5 participants.
Analysis
Next Steps
Overall the feedback from the users is that they like the budget idea, before they shop they can set their budget and shop in confidence. I also think some users when testing it, got confused between the ‘£’ icon and the top of the page next to the cart icon and the ‘set your budget’ button underneath the ‘time slot’ button was a bit confusing.
As some just clicked on the ‘£’ as soon as they saw it. Most clicked on the ‘ Set budget’ button though.
I found out that users found the set budget slider didn’t slide, but this is due to the software used as it isn’t and option to set it to slide from left to right, however you can slide from right to left, so I had to put a tap in there, as few needed a guidance on how to use this. Another thing is that they said the budget slider doesn’t start from £0 and increase on every number. This is something to think about when deciding on the next steps.
The next steps will be:
1. Make the ‘set your budget button’ a bit more prominent on the home page so it stands out the most as I want users to use this more.
2. Move the ‘book your time slot’ onto the ‘cart’ page. So it doesn’t compete with the ‘set your budget’ button.
3. Create the slider a bit better and put all money values on there up to £500.
4. Create the slider so it actually slides.
5. Put the ‘£’ at the bottom of the page in the menu, so it appears on every page, but not next to the cart & label the icons, so it makes them a bit more clearer
6. Another thing a customer said was that she wanted 2 bunches of bananas and there was no quantity option on the bananas page. So this is something else to consider when updating the app.
Updated Prototype
Interactive Prototype
Site Map
Summary
From doing this project, I learnt that designing an app is different to a mobile website. In terms of buttons at the bottom of the screen for the user to reach out easily to. And you have to think about what the next page would be and where would it go back to when designing the interactive prototype.
If I was to do this project again, I would look at other competitors even more and see what works for them. I did look at competitors throughout this project, to see how they approached their app design and how it works for their users. The wireframes changed after i had sketched them out and put them onto the computer as when creating I thought about it more as I could easily move things around on screen rather than having to re-draw every time by hand. I changed the budget on the homepage, to a main button which is easy to view. But I also had the icon for the budget in the top right hand side of the page.
One thing I found hard was figuring out how to display the budget screen and how the user would get to that screen easily, without getting lost on the app, adding in the button on the homepage makes it easy for the user to do this before shopping. When they are shopping they can click on the ‘£’ icon in the top right on the screen and can adjust their budget this way aswell.
I think I pulled this through and it would work well. Overall it was a great project to do with lots of learning curves.