Designing a healthcare experience
Embedded Files
MAA for India mobile app is designed to help people get online consultation, follow a healthy diet, educate themselves, and stay updated to eradicate anemia.
My Major Contributions: UX research, information architecture, visual design, interactive prototyping, usability testing, developer handoff
ROLE
Product Designer
DURATION
May - July 2020
TEAM
Design, Product, Engineering
DISCLAIMER
The information in this case study is limited due to a non-disclosure agreement.
What's MAA for India?
MAA for India stands for March Against Anemia for India. It's on a mission to eradicate anemia from India. They conduct camps to educate people about proper sanitation, hygiene, and nutrition. They also organize sessions, encouraging people to address this issue and get treatment for anemia.
01 — PROBLEM
To spread awareness about anemia, health, and well-being in general, a mobile experience needs to be designed for MAA for India. This would also help people to access their services faster on the go. A web experience isn't enough to get people to benefit from the services.
02 — GOALS
01
Easy
The user experience is easy to use, and content is elevated to assist people in quickly finding the information.
02
Consistent
It's important to keep the experience consistent to form a mental model faster and make it feel more intuitive.
03
Straightforward
Keeping linear navigation and simple user flows can help in reducing the cognitive load and overall efforts.
03 — SOLUTION
A personalized mobile experience for people to access the services offered by MAA for India. This app will educate them about anemia, connect with doctors and volunteers and get timely reminders and notifications.
04 — KEY HIGHLIGHTS
Content front and center
The content is prioritized and accessible in the lowest number of taps to deliver the core value faster. The bottom bar contains the frequently visited destinations in the app. This makes it faster for existing users to find information and also orients new users. The home page contains all the major services offered by MAA for India. The navigation is kept linear rather than branched. That means the flow works in just two directions, i.e., forward and backward.
Iterating home
The home page is the most important part of the app as it's the place for all the services offered by MAA for India. It went through many iterations ranging from several visual variations of the cards and the 'SOS' button on the bottom bar. A variant with colorful cards was thought of as we believed that people would form a mental model of associating specific colors with their function. But it failed. It was simply increasing the cognitive load.
Bottom bar variations
The 'SOS' button was emphasized in earlier versions as it was considered an emergency feature. However, after user testing, it was found that people were not tapping on it. It was looking as foreign to the interface. In the final version, it was integrated within the interface to look like a part of it. This version performed better in the testing.
Solving for search
After the user testing, one of the interesting observations was that people got confused with what they can search for on the home page. The search on the home was added to act as a global search for searching everything inside the app. I tested some search field variations on the home page and finally landed with the one above. This version gave hints at what all can be searched right from home. It performed better than a static field in the testing. Once people know that they can search for anything right after opening the app, they can quickly land at the desired location.
Reducing the eye jumps
I chose a list view for displaying the items compared to the grid as the list view allows more items to scan in a single view. Adding a subtext was a necessity; it also got accommodated without getting truncated. It was observed from user testing that people mostly look at the item name and price and rarely read the description. To account for this and improve the scanning experience, I moved the prices up and combined them with the item's name. This also means that now the eye jumps are lesser as compared to the previous version.
Minimizing efforts
Instead of a drop-down to select the meal, a segmented picker provided a quicker solution with lesser effort. This made it very easy to switch between different meals. Prices of items and the option to save them for later were included to account for additional use cases after user testing.
05 — THE PROCESS
Understand ⟶ Define ⟶ Explore ⟶ Design ⟶
Test ⟷ Iterate
The insights from the research helped us to have a better understanding of the problem. We further condensed them to define the goals and primary use-cases, then we started exploring various solutions. Next up, we designed several versions of our exploration and tested them. After multiple rounds of testing, feedback, and iterations, we handed off the final version to the development team.
Revisiting the problem
To spread awareness about anemia, health, and well-being in general, a mobile experience needs to be designed for MAA for India. This would also help people to access their services faster on the go. A web experience isn't enough to get people to benefit from the services.
Why is it a problem?
With the increasing smartphone penetration in India, a native app is a better way to reach people than a website.
Most of the new internet users are introduced to the web via mobile phones. They have never used computers.
It's easier for people to learn using a mobile app than a website on a computer. A web experience doesn't provide ease of use.
It was found from research that users with limited literacy are more likely to use a mobile phone than a computer to access the internet.
The website primarily contains all the information which may not be necessary for everyone. The mobile app can be personalized to the specific needs of an individual.
Why is it important?
When it's not possible to consult the doctor physically, a mobile app can help connect with doctors and healthcare volunteers.
It'll act as a knowledge source to spread awareness about anemia and other healthcare issues. Webinars can be conducted online, and people can quickly join them from their smartphones.
It'll also help to build a community of people to fight against anemia and general health issues.
People will get access to customized diet plans and nutrient supplements made by experts right from their mobile phones.
People can also opt-in to get timely reminders to take medicines and keep vaccination and other health records readily available.
In case of any emergency, they can quickly hit the 'SOS' button in the mobile app to call for immediate assistance.
Reflecting back
Designing in black and white
It's easy to get distracted by colors. Therefore it's always helpful to design in black and white then add colors later.
Staying aligned
Getting timely feedback and communicating effectively is essential while moving ahead in every part of the process.
Keeping it organized
It's essential to keep all the iterations and feedbacks well documented and organized as they might be helpful later.
Moving forward
I'm insanely grateful to get this opportunity to work with a fantastic team. I also learned a lot of things while collaborating closely with the research team. While meeting deadlines can be challenging, the quality of the experience shouldn't be compromised. We shouldn't settle down with the first option. Iterations are important. All these challenges pushed me to become a better designer.
TL;DR
MAA for India mobile app was designed to spread awareness about anemia, health, and well-being in general. This will help people get online consultation, customized diet plans, watch webinars, and attend live events to promote a healthy lifestyle. A native mobile app would also help them access their services on the go and get timely reminders and notifications.
Google Sites
Report abuse