Personal project: medication reminder app

This was one of the personal projects I created during my studies with the Google UX design and probably the most detailed one. Based on a prompt from their generator, all the concept designs were self-created as if I am designing for an existing brand.

MediMinder is a small business company that aims to provide reminders to people that have a need to be reminded of when to take their medication.

My role consists of the following in detail: research on the types of medical reminder apps available on the market, conducting interviews, paper & digital wireframing, low & high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture and responsive design.

Desktop browser version of this project

Tablet & mobile browser version of this project

User goal

To design a user experience tool to help adults remember to take medicines on time. Caretakers or parents also wishes there is a tool to help them to add dependants to their account so they can monitor the intake of their dependants easier.

Research & Ideation

My research started from conducting interviews and created empathy maps to understand the users' needs. The target audience are mainly adults or users that have accessibility to use the app or browser website.

Most target users prefer to have function where they can take the medication later depending on their surrounding circumstances. Some users also expressed concerns about being too busy to check if they took more dosage than intended. For parents or caretakers they wanted to be able to create groups to monitor their children’s or dependant's dosage intake along with other guardians.

The above were collated into persona statements and competitive audits had been performed to see if there are any inspiring functions or lack of features that can be added to the project.

UX research samples: personas & user journeys

UX research samples: competitive audit

Ideations for the app were then noted down on paper, later on being converted to paper wireframes as part of the process.

Crazy eight ideation based on user goals for the app

Problem solving & refining the design after usability studies for the app version

When the prompt was to create a medication reminder app to users, one thing that jumped out was that for every user, they will need the ability to set up their own account so they can keep track of their own medication dosages.

By letting each user have their own account, it was possible to expand the idea of creating family groups or groups for caretakers to track the medication on their dependents and so it helps them be able to attend to their needs.

With the above in mind, the paper wireframes were converted to digital lo-fi prototype and used for the first phase of user testing.

Visuals of lo-fi wireframes and user flow of the app

After conducting an unmoderated usability study with participants there were the two main findings. The dependant page flow needs addressing; users find the end flow of the adding dependant page to be confusing and that it’s better to go back to the main user’s profile page instead of jumping straight into the dependant's account.

The other finding  was based on the medication reminder prompts; some users find that ‘already taken’ and ‘due to take’ to be slightly difficult to differ due to tonal values in the digital mockups. This should be resolved with the use of appropriate icon indicators.

With these findings from the usability studies, the fixes have been performed and a high-fidelity prototype of the app is then created.

Hi-fi wireframe after usability study feedback

Visual sample of the main and overall user flow of the hi-fi prototype

Information architect & refining the design after usability studies for the app version

With the app version completed, the next stage was to create a responsive website version that uses the same UI dashboard similar to the app.

A sitemap was built, with some minor changes such as adding existing app users via their device’s contacts; this has been removed as that is a function from the device and it may not be available for a responsive browser website.

All different screen sizes has been noted down from being paper wireframes to lo-fi digital prototype testing and then to hi-fi visuals to make it as a real live product as much as possible.

Information architect for the browser website

Sample of paper wireframes for all browser screen sizes 

Sample of lo-fi wireframes for all browser screen sizes 

Sample of hi-fi wireframes for all browser screen sizes 

Showcasing the mobile version of the main user goal flow of the mobile hi-fi prototype 

Reflections

This is a small project created within a limited timeframe of approximately 21 days. Ideally I would love to finish creating other pages suggested within the sitemap to have it represent more of its uses. 

Another thing I can take away from this is the use of symbolic iconography that helps indicate things clearer for users; especially for the colour-blind.

If given another chance to redo this project, I would probably redesign the layout on the list of medications and ideate further on how the wireframe would visualise if various dependants are to be shown all at a glance.

This was more of a dashboard for a smaller scale of people, but imagining it to be used with real live situations, I could imagine the group of people to be greater and that there may be more prescriptions that a person would need. The list of needs can go on.

Final visuals for all different web browser screen sizes and for designated mobile app

See another project…

Personal project: audio tour app

One of my UX projects on how to tackle a phone app as part of the Google UX design course.