ALMA APP
Health App Concept Design - 7 Weeks
Over the past few years, we have witnessed more of the integration between healthcare and tech, which lead to a revolutionary change of how we access health resources today.
This is my story of designing Alma— a health app that empowers users to make better decisions about their purchases to live and maintain a healthy lifestyles.
MY ROLE
Product Designer, UX Researcher, Interaction Designer
This project is one of a few that I have worked on during attending a design bootcamp between November 2017 and April 2018. I worked on this project as a Product Designer, a UX Researcher, and Interaction Designer.
I collaborated with three other designers who happened to have professional experience in UX Research, Front-end Development and Product Management. While we all contributed to the whole project from end to end, I was responsible for user research, product design, interaction design, and branding.
The Challenge
Too many products, too many complicated ingredients
More than ever, people want to know more about the products they buy. Beyond the expectation for products to be safe, people also want transparency on how the product was made, with what ingredients and materials as well as its effects on the environment. Yet when labels look like this it can be a bit overwhelming. The abundance of information readily available can also often confuse or concern the users as much as it intends to inform.
Mindful and health-oriented adults who care about the products they consume and use want to be able to understand the ingredients in the products and decipher scientific termed ingredients. There is a need for a quick reference guide to assist in consumers’ purchasing decisions.
The Mission
Simplified ingredients, conscious decisions
Alma translates ingredients into simple honest terms, flags ingredients that pose health risks, and highlights products that meet users’ lifestyle and concerns.
With Alma, users can easily find all information related to any product of their desire. From ingredients, to their impact on their body and health, to deeper information about brand ethics. Users can also find alternative products to ones that don't fit their needs.
Skip the process and view prototypes
Research Goals
We wanted to gain insight into who is interested in knowing ingredients for purchasing decisions, how important ingredient transparency is as well as understand how they currently validate and learn about ingredients in their food and personal care products.
Main Objectives
Understand underlying reasons for concerns such as allergies
Understand the level of importance for knowing the ingredients in products
Understand how users find out the information they need
Understand at which part of the purchase process are they seeking to learn about the ingredients
Understand how the information they seek affect their purchasing decision
Competitive Analysis
Closing the gap
To kick off the research process, we closely analyzed three different apps in the same space. We discovered that while these apps provide some detailed information about the products, the navigation and UI were messy, which lead to poor user experience. It was with no doubt that these apps either showed too little information or far too much that it lost the point of simplifying for the average user. These apps lacked a wide database and a lot of well-known products were not found. Finally and most importantly, the existing apps lacked the opportunity for personalization. Enters Alma.
The Survey
Reach a wide audience to validate assumptions
We decided to use a survey method to allow for discovering main concerns and industry gaps that we were not aware of. We also wanted to validate our initial assumptions regarding what people look for when they purchase a product. To reach a wide audience we created a survey using Mechanical Turk and received 100 responses. We analyzed the results and gained enough insights to determine the next steps. The insights are as follows:
People usually search online to learn more about ingredients and health risks they pose
Cost played an important role for users’ purchasing decisions
The main points of concern are natural ingredients, allergies, medical conditions
Most people find the labels helpful however some people do not find the labels trustworthy
Brand was main focus when it comes to purchasing decision for users
Other concerns people showed are animal testing, expiration date, and sustainability
User Interviews
Gain deeper insights and reach potential users
To gain deeper insights, we interviewed 6 people. The flow of the interview and script was dependent on the interviewees answers to each question. The goals of the interview was to understand the shopping behaviors of the user and the reasons behind it.
“There are always new products coming out so if I am already attached to a brand I might never learn about the new products that might be even better.”
Insights
For people who have new restrictions due to developed allergies or diet preferences, the learning curve was very high.
For some of the restrictions, people were uncertain on what to look for in the labels.
For those who are familiar with products they use and have brand loyalty, they were finding it difficult to learn about new products that might be a better fit.
Many people rely on product reviews and recommendations to learn about new products.
For some people, expiration dates are very important because they shop long term.
Many people find it difficult to read the ingredients due to the way they are presented.
Some people only look for active ingredients in the products.
“I just glance over the ingredients because they are hard to read, If I was aware of the ingredients I would use them more in my decision”
Target Users
It is all about the user
The Storyboard
A typical scenario for our users
We created a storyboard that shows the problem and the potential solution. The storyboard shows a typical scenario for many of our target users and this was a great way to visualize it. The storyboard was a great way to empathize with our users and it provided a sense of direction for brainstorming sessions. It also allowed my teammates and I to focus on the features we want to include in our solution.
Ideation
Perfecting the solution
When four minds come together and get to work, we end up with million ideas! After analyzing our research results, we spent some time to think about the features we wanted to include in our solution.
Affinity Diagram
Features, features, features
Since we ended up with a lot of features and thoughts, we used affinity diagram to organize our ideas and to exclude those that were not perfect. We first thought about the main needs for our users and then went on to think about the features we wanted to include in our solution.
User Information Architecture
Does the organization make sense?
To make sure that the organization of the app makes sense and the flow is easy to follow, we asked a potential user to organize the main categories of the app and walk us through her thought process.
Decision Flow Diagram
Three main flows
After we confirmed the organization and the flow made sense, we decides to move forward. Users are able to set up their own preferences, update their, and edit their account settings. To organize the features further, we decided to have three main flows:
Users can scan a barcode on a product to find out information related to it
They can find items through categories of food, personal care, cosmetics, and home supplies
They can search for a product using the search and filter engines
Wireframe Sketches
More collaboration, more creativity
As a team we decided to make the first version of the wireframes individually to allow for more creativity and sense of ownership. We each started working on the wireframes and thinking through the flow on our own to sketch the features that we agreed are crucial to include.
After we individually created the first draft of the wireframes, we organized the wireframes by feature and category they presented. As a team, we picked and chose the wireframes that best implemented our features and which were easy and simple to follow. Once the wireframes were chosen we went on to create the digital version of the wireframes.
Digital Sketches
First attempt
These wireframes reflect the first attempt of digitizing the wireframes sketches. Now that these were done, we would be able to do our first usability testing and figure out what we need to iterate on.
Usability Testing
Ideate, iterate, repeat
Running the usability test allowed us to understand the problems in the current user experience.
We identified some issues that include:
Steps of entering the label manually were not clear
The filter flow was not familiar to the user
The function of criteria violation notification was not intuitive
It was not clear that the brand name is clickable
Styleguide
Brand voice
We created the style guide to ease the process of building the hi-fi mockups. I included the brand voice to be our reference while building the app. I wanted the colors to be soothing and calming to ease the tension of the amount of the information that the app is presenting. The colors are chosen to give a calming feel along with a sense of honesty and transparency. the typefaces are chosen to be clear and easily read. The Pacifico typeface also adds an element of playfulness to make the app more enjoyable and friendly.
Scan Flow
