UI/UX design, product design, branding / Spring 2022
This project was the final project for my UI/UX design certification through Google. The objective of this project was to create a mobile app and responsive website for social good. In addition to learning more about the creative process and research process, I've learned a lot about how to design to address issues for social good and take marginalized people's needs into account.
Tools Used: Figma, Illustrator, Photoshop, Pen and Paper
Project Goal
The goal of this project was to come up with a solution to meet the needs for social good through designing a mobile app and a responsive website. I chose to work on a medication tracking app to help people keep accurate track of their medication intake.
Project Introduction
Many people take medications and supplements. But in today's fast-paced society, some people struggle with remembering taking important medications and the proper suggested use. The issue can be more complicated for those visually impaired, with memory issues, and those with a language barrier.
Design Space
Create a tracking application that makes tracking medication intake easier by reducing steps and barriers to tracking intake and adding new medication reminders. By making the app more accessible to use, visually impaired people can better track their medications.
The Process
Research
I first researched about current medication tracking apps as well as conduct user interviews to establish what core user needs are
Ideation
Next, I sketched out ideas and iterated on them in order to come up with a design direction
Wireframe
I then refined those ideas into low-fidelity wireframes as well as create the information architecture for the app and website
Prototype & Test
After an initial user testing session about the wireframes, I refined them into high-fidelity wireframes and prototypes for a final round of usability testing and wrap up the project.
Current Tracking App Audit
I researched 3 different tracking apps offered on the Google Play store. I spent a week trialing them to discover their pros, cons, and areas where my app can improve on
User Personas
Based on initial research as well as interviewing 3 people, I crafted 3 different personas that represent the type of user I want to focus on.
Based on initial research as well as interviewing 3 people, I crafted 3 different personas that represent the type of user I want to focus on.
Based on initial research as well as interviewing 3 people, I crafted 3 different personas that represent the type of user I want to focus on.
Click on each persona profile to zoom
User Problem Statements
Theo's Problem
"I'm a on-the-go yoga instructor who needs a simple way to track my meds because I'm too busy and I need a way to remember when I took my meds"
Isabelle's Problem
"I'm a busy yet capable visually impaired person who needs a way to read the usage instructions because the labels are sometimes too small to comfortably read"
Anika's Problem
"I'm a hard working immigrant student who needs a simple interface to understand my supplements because I'm practicing English and can't handle big jargon"
Ideation
Crazy 8's
I needed to start from somewhere, so I used the Crazy 8's method to come up with a wide range of ideas. From scanning pill bottles with the camera, to using a voice assistant like Google Assistant, I used these quick sketches to get my creative juices flowing and figure out what features to flesh out and how to design them
Paper Wireframes
Next came paper wireframes. Because the goal is to minimize steps to track medication intake and adding reminders, I needed to balance the amount of features with visual design elements on the home screen. The key questions I asked myself was
- What key buttons do I need to include front and center?
- What information should I prioritize?
- How many gestures should I include in the user interface?
Information Architecture
Some of those key questions can be answered by sorting out the information architecture. By figuring out the I.A. I can have a good idea of what screens I need, what I should include in each screen and the user flow
Home
The home screen initially featured the list of medications up front with an indicator indicating if the medication was taken or not.
Low-Fidelity Wireframes
Low-Fidelity Wireframes
Low-Fidelity Wireframes
Confirmation Screen
Users had the ability to edit when exactly they took the medication as well as key information related to said medication
Confirmation Notification
I knew it was important to have a clear way for users, especially visually impaired users, to know that they have successfully tracked their medication intake. A full screen animation would show that users tracked their intake.
Home Screen Changes
After some interviews I found that the first iteration home screen looked generic compared to other offerings and is not as apparent which medications are already taken or not. The new iteration of home screen now shows a big indicator for how many medications are left to take.
Cair aims to make medication and supplement tracking easy by making tracking and adding reminders simple and make key information clear and easy to understand
Home Screen
The new home design got great feedback from users, so I kept that design in the high-fidelity design. The colour status wheel helps give additional context to how many medications have been taken
My Meds
The My Meds screen is updated with clear indications of which medications are taken. Each med container is accompanied with its respective time
Confirmation Screen
The confirmation screen makes use of dividers to help users better track information and a big green button draws the eyes straight to the confirm button
Large Confirmation
Sometimes people quickly forget that they just took their medication. That's why the app features a large animation screen that captures the users attention to let them now they took their medication
Responsive Website
In addition to an app, I also made a web design for the companion dashboard. This dashboard features a complete overview of medications, schedules and profiles.
Responsive Website
Users get all the same features as in the app but in a larger format for those who use PC or who may not have their phone near by
The future of medication?
Initially, I had the idea that the pill bottles were going to feature an NFC tag embedded in the bottle for a tap-to-track feature on the app but quickly realized that it took focus away from the app and was beyond the scope of this project. But I think it's still a good idea and may be a future iteration of what the Cair brand can turn into or become a partnership with a big pharmacy brand
Take-aways
I am very proud of this project for a number of reason. For one, I think it came out very well and looks like a fully fleshed-out app that exists in the app world today.
But I am also proud because I was able to come up with an idea that addressed a real human need. Often times we simply put pen to paper and immediately come up with designs and ideas that we think is the best and attractive and any iterations comes from our own behest.
But I learned to put personal needs and taste aside, examine real world issues, listen to users, back design decisions with research and refine until the app fully serves the user.
To date, this has been my favourite project and I can't wait to see what other works will soon become my new favourite.
