Grocery Shopping App for Seniors
The challenge
The challenge was to develop a new product solution for an elderly-friendly shopping app. Designing an app for seniors provides unique challenges and considerations. This app would be useful for situations such as the Covid-19 pandemic, when those over 70 needed to ‘cocoon’ themselves for their safety and welbeing.
This group project was part of the 2020 UX/UI Online Summer Program, hosted by Talent Garden Innovation School Vienna. As part of a team of five learners, all with different education and work backgrounds, we wanted to have a role in every part of the process to gain as much experience as possible.
The process
Design thinking
UX design is an iterative process, involving Thinking, Making, and Checking.
We used the principles of design thinking to organise the design process into five key phases – Discovery, Definition, Ideation, Prototyping and Testing.
Discover phase
Discover / Empathise
The discovery phase of the project included:
- Stakeholder Mapping
- User Research
- Competitor Analysis
- Problem Definition
- User Interviews
An important part of this phase was challenging our assumptions about senior users. When designing User Experiences it’s vital to remember that you are not the user. You have to empathise with the user, and truly step into the users’ shoes to really understand their needs.
User interviews
The best way for us to collect qualitative research about our users was to conduct user interviews. Covid-19 created a challenge for us, but still we were able to conduct 10 indepth user interviews. We interviewed potential senior users of our app, and other potential users identified during the discovery phase (including carers, family members who help their elders with technology, etc.)
Main takeaways
More than half of the seniors we interviewed have a smartphone, but they find them complicated to use. They generally only use a handful of apps, mainly social messaging apps such as WhatsApp to help them keep in touch with grandchildren, etc.
They mainly use their phone for calling others or taking calls, preferring this method of communication to texting or instant messaging. The main pain points here include visual problems and reading small text, and also physical problems with typing
All of our senior interviewees said they were suspicious of smartphones, and didn’t trust them with their information, especially their bank or credit card information
Very few of them had shopped online before. The main pain points here include wanting to pay with cash, being afraid of making a mistake with the order, worrying about problems with the delivery
All of our seniors told us that they like getting out to the shops, for exercise and social reasons. They like to be able to see the products and offers available. They dislike self-service and will avoid it when possible. They value the ‘human touch’ in their customer experiences
But the majority also said they value their independence, and appreciate that smartphones and apps can help them with certain aspects of their lives. They all said they are eager to learn for themselves, and are concious of being ‘technology burdens’ on their family members or carers
Define phase
Define / Analysis
The define phase of the project included:
Personas
User Stories
User Flows
Information Architecture
Personas
Based on the research and results of the interviews we set up three personas, and referred to them throughout the entire product development process. The personas reveal the top users we identified: The family member / carer, the ‘tech curious’ senior, and the ‘tech adverse’ senior.
User journey
We mapped out the users’ steps to see how we could simplify their journey to help them reach their most important goals with the product.
Ideation phase
Ideate
The ideation phase of the project included:
Brainstorming
Concept Sketches
Task Flows
Screen Flows
Following on from our research and analysis, we decided that the USP (unique selling point) of our app would be enabling the user to use voice command technology to help them shop. Senior users prefer to use their phones as phones, to call others. Many of them have issues around using the keyboard on their phone, they find it small and difficult to use. There are usually visual issues around small text and UI elements.
Having a large ‘Talk’ button that they can use to dictate their shopping lists became our solution.
Prototype & test
Wireframes
The mid-fidelity wireframes were built with Figma. This helped us to define the UI elements, and break down each step on the user journey into simple, one-action screens.
User testing
This wireframe was then converted into an interactive prototype for user testing. This was important to do early in the design stage.
We asked the users to use the mid-fidelity prototype to achieve the following goals:
Login to your account by selecting the face recognition option
Search for ‘carrots’ by selecting the voice command option
Select the ‘special offer’ option and add it to the cart
View the cart and then checkout
UI design
UI design
I did a lot of research on the best practices for designing apps for a senior audience, and the main lesson learnt from this and the user testing was to avoid assumptions.
Some of our findings:
Seniors may not understand things like scrolling or search functionality
Icons and symbols are less clear. When using icons and symbols always pair them with text
Don’t divide screens into multiple actions — one focus at once will have better results
Give clear feedback on progress and completion
Simple plain backgrounds are better to avoid distraction
Typography
Make everything easy to read! (The WCAG recommended contrast ratio for body text 4.5:1 to meet AA standards. The WCAG recommended contrast ratio for headline text 3:1 to meet AA standards)
Font 16px minimum
Sans serifs are the best typefaces to use
Avoid using multiple fonts
Use type weight to make a clear hierarchy (bold v regular)
Our vision gets worse as we age – the majority of the senior users we interviewed have problems with their vision, and all of them cited small text and icons on devices as an issue. Sans serif font choices on screens are the most readable for older people.
Source Sans Pro was chosen for accessibility reasons. It is a sans serif font with a high x-height and open counters, which provides clarity and legibility.
Large font sizes were chosen to make the app as legible as possible.
Colour & Contrast
- Don’t rely on colour to convey a message (older users tend to prefer text over symbols and colours as a medium for information)
- Check your designs by using online visual impairment simulators and converting designs to grayscale to make sure they are still legible
- Older users need stronger colour contrast than the average mobile device user – it’s recommended to keep a contrast ratio of at least 4.5:1, although it would be best to stay over 7.0:1
- Outlines of objects are more difficult to recognise, and shades of blue seem to fade or be desaturated – avoid blue for important interface elements
UI Elements
- Make buttons look like ‘buttons’. Flat design looks great, but can cause accessibility issues. Add some shadow and depth to make elements ‘pop out’
- Having a clear call to action on elements always helps the users to identify interactivity
- Having text alongside icons may make the experience easier
- Buttons on touch interfaces should be at least 9.6mm diagonally (for example, 44 × 44 pixels on an iPad) for ages up to 70, and larger for older people
Final thoughts
The ShopTalk app is a group project, as part of the TAG 2020 UX/UI Online Summer Program, over a 6 week period.
It was a challenge doing this project during Covid-19, researching and designing a product with a group entirely online, but I’m proud of what we were able to achieve, and we got great feedback at the final presentation.
I would have liked if we could have conducted more user testing with our final prototype, which is something that was difficult to do online with our defined users. This is something I’d like to explore in future – how to best conduct user testing with senior users.
If I had more time I would also have liked to explore creating a prototype using ProtoPie, which has voice prototyping. This could be extemely useful in testing the final design with our potential senior users.