Foundit is a scanning application that aims to improve users’ shopping experience by simplifying information from groceries items and arranging them in a way that is easy for users to browse and obtain the necessary information as efficiently as possible.
📑Project Overview
Duration
1 month
My role
Sole UX Designer
Tasks
User research | Usability testing | User interviews | Wireframing | Hi-fi & low-fi prototyping | UI design | Concept ideation
Tools
Notion | Figma | Miro | Maze | Google Survey | Zoom
🚩 Design Problem
During my trips to the grocery store with my mum, oftentimes she would hand me some food products, then ask me a list full of questions about them "when does it expire?", "Does it have cheese?", "How much is in it?". However, when my mum comes home from her regular grocery trip without me, I find that she has a less pleasant shopping experience as she spends more time trying to decipher information on food packaging. This got me thinking, what if my mum isn’t the only person having a hard time reading food labels?
58% of the online consumer panel identified the “size of the text” on food labels as making them hard to read or interpret
I started this project with some secondary research and found a research paper from the Food Standards Agency (FSA) that stated “when asked about what makes food labels difficult to understand, over half (58%) of the online consumer panel identified the “size of the text” on food labels as making them hard to read or interpret.” This was eye-opening, I originally speculated that only a small amount of people would experience difficulty in reading information on food labels but the number was much higher than I expected. This sparked my curiosity even more, and I wanted to see what the users had to say.
Source: food.gov.uk
Design Process
🔬User Interviews and surveys
Goal
To discover difficulties users encounter when looking for information on food labels
Research questions
• Tell me about your last grocery shopping trip?
• How often do you read food labels?
• What type of information did you typically look for in on food labels?
• Tell me about a time you have trouble reading food labels?
• How did you solve that problem?
Affinity Mapping Using Miro
Themes
Theme 1 | Inconsistent wording
"MSG" for example is referred to by other names on different food labels, such as "hydrolyzed vegetable protein" or "yeast extract"
Theme 2 | Unreadable content
Due to the small font size and cramped layout, users find it hard to find information, it is especially challenging for those who have reduced vision, or visual impairments
Theme 3 | Nutritional terminology
The terms "emulsifiers" and "dietary fiber" are not commonly known or understood by the average user.
🗞️Competitor analysis
In my search for apps with similar concepts, I discovered that many of the existing options cater to individuals with specific dietary needs or focus solely on the nutritional aspect of food. While I did not find any direct competitors, I did identify three indirect competitors that have a similar concept. To conduct this analysis, I first established my main objectives and outlined how each would be evaluated.
Objective 1 | To understand how competitors organize information from food labels on the app
Examine the layout and whether how information is organized in a way where users will have not a problem finding what they need.
Objective 2 | To discover what kind of features competitors offered users for accessibility
Since my main target users are those with visual impairments it is important to analyze the types of features competitors have implemented in order to create an accessible and equitable application
Objective 3 | To understand the way in which the products are scanned in order to obtain the information
I will be evaluating the different methods competitors use to scan products and how easy/difficult it was for me to do so. I will also analyze comments left on google play by other users to see what they say about their chosen methods
Competitors
🤔 What I learned...
• The apps offer the option to input allergies and dietary restrictions during onboarding. Although this is a common feature among nutrition-based apps, adding this to my app could be a useful way to provide personalization options and cater to the specific needs of the users.
• The most popular method for obtaining product information is by scanning the barcode.
• The app includes features that enhance accessibility for users, including language options and text-to-speech functionality. While the text size is already appropriate for reading, there is currently no feature that allows users to adjust the size of the text to their liking.
• Incorporate simple imagery or icons to help users easily navigate and skim through the information.
• After researching the way food label information is organized on the competitors, I came to the understanding that the structure of information organization in my app needs to be more elaborate. This is because my app will have to handle more information than just nutritional data, unlike my competitors. Therefore, I will need to do additional research to figure out the best way to organize the content on my app.
👩Personas & User Journey Mapping
To further empathize with my users I created 2 personas which I will be using to represent my users throughout this project. Meet my two personas Monika and Eshaan! Based of off the insights from the user research, I've narrowed it down to two main user groups, with the biggest difference being age and the purpose of reading food labels.
Outcome
Based on the journey map, I found a potential discrepancy in the user’s journey in both personas there is a possibility that users can become confused or frustrated during the ‘Read’ phase of the journey. Having to scroll through the information to find what they want can be time-consuming, and users can even miss the information they are looking for.
✏ ️Problem Statement
How might we...
• Increase users' understanding of nutritional terminologies?
• Ensure that text size is easily adjustable for all ages?
• Organize information from food labels on the app?
• Limit unnecessary scrolling?
💡Ideation
After establishing our problem statements, it's time to move on to ideation. The ideation technique I used was crazy 8's, I sketched out possible solutions to my problem statements, this included, possible layout ideas and features that could be implemented in the application.
As I was reviewing the insights I gathered during the research phase, I came to understand that a one-size-fits-all approach to organizing information would not work as all users have different categories that they find important.
To address this, I wanted to give users the freedom to personalize and arrange the categories according to their own liking. This also results in the reduction of the amount of scrolling required by users as categories that are most important to them will be at the top of the page.
When coming up with potential solutions, I focused on making the definitions as accessible as possible, taking into consideration that they will likely be using this feature while they are shopping. To ensure convenience, I chose a solution that made sure that when the feature was active, it remained on the information page so as not to disrupt the user's flow.
Additionally, I kept in mind that one of my target users is the elderly population, so the feature had to be clearly visible and easy to access. All these considerations led to my final design solution (circled in green).
I had trouble deciding which one was the best solution. So, I did more research and found a study done by the University of Buffalo, showing that elderly people have a harder time using multi-touch gestures, compared to younger adults. So with this in mind, solutions requiring gestures like pinch-to-zoom and swipe may not be the best choice. While some of these gestures may be necessary, I want to avoid them where possible.
I felt that the best solution would be to have the feature available in the user's account instead of on the main information page, adding it there could make it too cluttered and overwhelming for users. (Later down the process, I realise this assumption was incorrect😅)
🎨UI Research
In order to make the UI design decisions, I analyzed the UI that was related to my product solutions, in this case, it would be a survey during the onboarding process and an information section after the barcode is scanned.
Informational Architecture
Based on the competitive analysis, I’ve also found that most of the apps have similar IA structures. Knowing that this is the user’s existing mental model I decided to create my current IA based on that. This will ensure that users will already be familiar with the IA structure as it'll be similar to the apps they may have used before. They can focus on accomplishing their goals rather than wasting time trying to learn an entirely new structure, thus minimizing cognitive load.
Paper wireframes
To start, I created various layouts using paper wireframes, annotated my ideas, and highlights the areas or features that I felt could aid my users during their journey. The purpose of this is to flesh out as many ideas as possible (I aimed for 6 different designs each), although ideas may sound great in your head, they may not be feasible due to various circumstances, which is why I sketch out my application before going digital.
Results page sketches
I am experimenting with various layouts for my components. This is based on my competitive analysis, including clear imagery and icons that are useful when needing to scan something quickly. The reasoning behind this is that humans are more likely to recognize shapes before words, according to psychology. I am also trying to determine the most effective way to present each category of information. For instance, organizing nutritional information into a grid format, again based on competitor analysis it's the easiest and most popular way for users to understand and process the information.
Profile page sketches
When designing the profile screen, my main focus is to figure out how to seamlessly integrate the two features, text size adjustment, and label reordering, within the screen to solve problems identified through research. I want to make sure that these features, which are heavily influenced by the "crazy 8s", are presented in a clear and intuitive manner on the screen.
Scan barcode page sketches
As noted in the competitive analysis, scanning barcodes is the most popular way to search for product information, incorporating this made sure that users know exactly what to do when they encounter this screen as this creates a sense of familiarity. This is important because it is the first screen users will see after completing the onboarding process.
💻Prototyping
Low-fidelity Wireframe
This is were we move on to the digital prototype!👏 We begin with low-fidelity wireframes, which allow us to focus on the layout and content of the design without being influenced by colors and imagery. This prototype is also used for the initial usability testing of the project. By starting with low-fidelity wireframes, we are able to gather valuable feedback and make any improvements before adding more detailed design elements.
Usability Testing
Once I created the low-fidelity prototype, I conducted a usability test. I found that there were two main changes I needed to make:
Iteration 1 | Make borders more visible
While the light drop shadow added some depth between the components, users still found difficulty distinguishing between the background from the groups of information. So I added borders to create contrast.
Iteration 2 | Make the change text size feature more accessible throughout the app
Having the feature on the profile page makes it less accessible, especially if you are out shopping and need to do a quick change.
Iterations
After gaining some feedback from my users, it was clear that iterations needs to be made. I made 3 different iterations of the general layout of the application as well as placements of features that the app offered.
While the light drop shadow added some depth between the components, some users still had difficulty distinguishing between the background from the groups of information. To address this I added boarders to create contrast between the background and the foreground.
Users explained that although having the ability to change text size is useful, having it on the profile page makes it less accessible, especially if you are out shopping and need to do a quick change.
UI Guidelines
I created the application's UI based on previous research I did, as well as, taking into consideration that my primary users are those who suffer from visual impairments. It was vital that information was simple and clearly organized for a better user experience, to do this I used bold lines to segregate sections of information, allowing for easy navigation.
This guide was created to summarise the assets used to create the Found it application.
To ensure accessibility I followed the contrast ratio guidelines set by the web content accessibility guidelines (WCAG). Each of the color combinations meets WCAG standards.
📱Walkthrough
Onboarding
Once users download and open the app, they are greeted by a welcome page that introduces users to the purpose of the app and how it can improve their grocery shopping experience.
They are then asked a series of simple questions relating to their diets such as any allergies or dietary requirements.
They are then asked to order the categories to their liking. This aim is to limit the amount of scrolling users may need to do. This gives users the freedom to personalize the category order based on what they deem as important.
Results
Once the scanning is successful the user is automatically taken to the results page which contains food label information. on each page, there is a button that users can use to change text size permanently (this button is available on all screens).
Users can tap the ‘read more’ button a bottom sheet will appear containing information about the term. This is to allow for more clarification when encountering unfamiliar nutritional terminology so that users know exactly what is in their food.
My Account
To change allergies, dietary restrictions, and label order users can go to the ‘My Profile’ page. This screen will also show what their current settings are. I’ve kept the layout similar to the results page to give users a sense of familiarity which can allow for easier navigation throughout the screen
Takeaways
Impact
Before finishing the project I conducted one more usability test to see what my users think of the final design.
Overall over 80% of users were able to easily complete all 3 tasks that were set (which I think was pretty successful). Out of the three tasks, task 3 (which was to change the category order) was the least successful with an 82% success rate. After asking users what they found difficult, users explained that they expected to be able to change the category order on the results page by dragging and dropping, rather than having to go to the profile page which can be a hassle. If I had more time this would definitely be something I would change.
What I learned
There is a reason for everything!
Throughout the project, I learned that everything within your design must have a reason. This was a challenge. Although what I did may have looked good it did not necessarily fit the user’s needs, this in my mind ultimately led to a better design.
This project was a turning point for me when it came to considering the impact of my design work. I was introduced to Key Performance Indicators, and although I only used one in this project, it opened my eyes to the value of using KPIs to measure the success of a design.
Next time...
Personalization
If I had more time, I would definitely consider adding different color palettes (skins) which would allow for more personalization from the user as they can choose a color palette they find clearer than the default. Maybe even considering custom color palettes for users with specific visual impairments?
Inclusivity for our elderly users
To further increase inclusivity in the app, whether users are able to scan items using the app with ease will definitely need to be considered, this is especially true for users who are elderly and may suffer from reduced fine-motor control and slower response times. I think this would definitely need to require further exploration.
*If you cannot see full prototype screen, simply select 'z' on keyboard
