CASE STUDY - Ned

Ned is a medication alert app and website geared towards helping young adults (ages 20-40) to remember to take their medications on time. This tool seeks to aid adults on their health journeys by allowing users to easily track their medication taking habits.

Responsive screens of Ned, medication alert app.

Goal: Design a fictional app (guided by the Google UX course) that will provide medication alerts and a way for users to mark off doses. Provide medication resources in a centralized and easy-to-use app/responsive website.

Responsibilities

Success Metrics

Ensure users:

User Research

General questions were crafted and asked to young adults who take (or have taken) medication to gain insights as to what features would be useful for a medication alert app based on needs and habits of the target audience.

Users could see a medication alert app being useful, even if they didn’t currently use one. Some users rely on symptom onset to trigger a reminder, which wouldn’t be as safe for more time-sensitive medications.

A pharmacist interviewed mentioned that patients between the ages of 20-80 often show up late to pick up refill prescriptions which likely meant doses were being missed. This suggests a reminder alert would benefit most users.

Mariah: Problem Statement

Mariah is a busy working mother who needs customizable medication reminders and checklist because she’s busy taking care of others and needs to ensure she’s taking care of herself.

Maria persona

Artimus: Problem Statement

Artimus is a career-driven program coordinator who needs to be reminded to take his medications because he wants to take care of his health and be productive at work.

Artimus persona

Competitive Audit

A comparison of 3 medication alert/health apps provided insights on current market offerings and potential market gaps for the Ned app to focus on.

After an audit report was completed, one of the takeaways from the competitive audit was to provide a clean and simple interface with a moderate number of features.


Other opportunities identified were: offer a very simple log-in/sign-up, offer a bold and engaging brand that is neither too youthful, nor too clinical, and consider accessibility/assistive features to include more user groups.


Competitive audit chart for medication alert/health apps.

Data from the competitive audit was summarized into a report.

Digital Wireframes

Paper wireframes were created first to quickly form ideas. Digital wireframes addressed the research by offering: a flow that provides customization without an overwhelming amount of features, a vacation reminder feature, and a very simple sign-on feature.


Digital app wireframes of medication settings screen and travel reminder screen.

Low-Fidelity Prototype

A dedicated mobile app prototype was created with relevant copy that allows a user to add a medication alert. Extra features uncovered during initial research (caregiver and travel reminder) were also incorporated.

A caregiver could be added to help remind the user if a medication dose is missed. A Travel Reminder is an alert that reminds the user to pack medication before a vacation.

Low-fidelity prototype of medication alert app with connection lines.

Usability Study Findings

Remote usability studies were conducted with 5 participants in Canada. These were the main insights learned by conducting low-fidelity prototype usability studies.

1

Drug Setting Confusion

Users found the drug setting options and input confusing.

2

Marking off a Dose

A desire to clearly mark off each specific dose after it was taken was observed.


3

Travel Reminder

Users found the Travel Reminder alert feature lacked clarity and scheduling options.


Mockups after Usability Study

Usability study participants vocalized that wording and options were confusing under the Frequency settings. Exact value dropdowns were added so users could select an option instead of manually entering where possible.

Some users expressed a preference to numerical input rather than ambiguous text field entry to avoid confusion.

Before and after usability study app screens of medication settings screen with improvements shown on second screen (exact value dropdowns).

Input fields were changed to specified dropdown options or number-only entry constraints.

Mockups after Usability Study

For the medication overlay, edit features were replaced with the time doses were taken so users could clearly see when each dose was marked off during a reminder alert.

Before and after usability study app screens showing improvements made to Medication overlay.

Mockups after Usability Study

One study participant who is a pharmacist provided the insight that alert flexibility would be useful as users may need enough time to order refill prescriptions before travelling.

An option to schedule a Travel Reminder feature was added so users had more control over when a notification appeared.


Before and after usability study app screens of travel reminder and improvements made.

App Mockups

High-fidelity screens of the main user flow: customizing a medication alert.

Five app screen mockups of the user flow for medication alert app.

High-Fidelity Prototype

The hi-fi prototype of the Ned app included a bold and fun colour palette geared towards young adults and design changes based off of usability study findings.

High-fidelity prototype image of connected screens for mobile app.

Hi-fi prototype of Ned app main user flow.

Accessibility Considerations

Haptics

Haptics were considered in the Notification Settings to include a variety of alert options to suit diverse sensory needs. These offerings could be expanded with more accessibility testing.

Quick Sign In

Sign in process is clean and easily accessed. Only mandatory fields to create an alert are requested.


Colour Contrast

The primary colour used as negative space behind text and for headings is a dark periwinkle, which passes AAA WebAIM accessibility standards for legibility.

Responsive Design

Sitemap

A sitemap was developed for the responsive Ned website. The structure remained similar to the mobile app, but included more features (About Us and Resources pages) and a different navigational element (fly-out menu vs nav bar).


Sitemap for Ned website.

Responsive Designs

The Ned responsive website was designed for iPhone, iPad and Macbook Pro screens which required content adjustments. The number of alert overlays was reduced and header/footer navigation were added.

Mockups of the Macbook, iPad, and iPhone versions of Ned's homepage.

Responsive Designs

Resources and About Us pages were added to the responsive website version of Ned. All pages from the main user flow were converted to three priority screen sizes. Bodies of text were often left-aligned to improve legibility.

Responsive screens of the Resources an About Us pages for Ned website.

Takeaways

Users viewed the Ned app as useful and saw the value in a simple-to-use app. Overall, users spoke in a positive tone and seemed intrigued with some of the feature offerings: Adding a caregiver, travel reminder, ability to search via DIN number. 

Ashley said, “I liked having the travel reminder. I wouldn’t have necessarily thought of that function but I see how it could be useful”.

Developing an app to help people with their health requires more testing and research by a team of experts. Ideally, collaborating with healthcare professionals and developers would produce a more robust and user-centered product. Speaking to pharmacists provided valuable insights that could be incorporated into designs.


Next Steps