UX/UI Case Study

To create a mobile app & responsive website to help users take their meds on time

Role

Client

Google UX/UI design certificate

Tools

Adobe XD

Time

12 weeks

Project Overview

Challenge:  To figure out what type of resources are needed and highlighted to help local citizens across the United States to find help when taking any type of meds. 



Solution:  Educating and helping local communities about taking prescribed medications, OTC medicines, and etc.  By having the resources to decrease misuse of meds while empowering individuals to take what is needed on time. 



Understanding the User

PAIN POINTS


I have interviewed participants to understand beyond the need to take meds on time.  Competitive audit, personas, and overall user research allowed me to empathize what other resources and insights users may need with their health and medical issues on an app and website.



Time

The ability to schedule and be notified to take meds for user's convenience.

IA

To map the needs of the end user to help all users to navigate effectively within the website and app.

Accessibility

The ability to bring haptics and sound notifications to alert users of any schedule to take meds.


PERSONAS

JOURNEY MAPS

Ideation


I did a quick ideation exercise (Crazy 8s) to come up with useful and innovative ideas for users who need to take their prescribed/OTC meds on time.  I focused on important features such as: donations of unused meds and the locations of local pharmacies and doctors for the responsive mobile.



Starting the Design

Digital Wireframe


Several iterations of the paper wireframe helped create the second round of this digital wireframe.  This artboard portrays the different tabs to help take meds on a timely basis.



Low fidelity prototype


I created a lo-fi prototype to implement a user flow to search and set a reminder for a life-saving medication for one of my personas.




AFFINITY MAP

USABILITY STUDY FINDINGS

Refining the Design

MOCKUPS

After conducting a usability study of every8hr’s app, a clear need for written direction (such as a banner) is shown for signing up.



App Mockups

High fidelity prototype


Iterations are made after an usability study and peer review to update the low-fidelity prototype.




Arial 38pt

Century Gothic 18pt

Tahoma 16pt

Roboto 12pt

Rockwell 10pt

Roboto Mono 10pt

ACCESSIBILITY CONSIDERATIONS

Responsive Designs

Site map


Understanding the initial needs of users with the every8hr’s app, the initial stage of what could be the responsive mobile’s  IA is formatted for ease of navigation.



Going Forward

One participant said.

“It would be very helpful for an app (every8hr) like this to actually exist.  I could see myself using it.”

Impact:   The users’ overall response of an app that helps to take any meds on time and have access to local resources are overwhelming positive.  

Personal Understanding:   By creating the IA for every8hr's app to its responsive website (mobile-first), allowed me to discover ways to help a community specific needs.  There is so much exploration for more user flows and expanding the sitemap.