Mobile app and companion responsive website for PillBell

Project: Mobile app and companion responsive website for pill reminder

Role: UX Designer

Duration: November 2022 to December 2022

Project vision

Design a dedicated mobile app and a companion website to help adults remember to take their medicine on time.


  • Presenting a design that is simple, intuitive, and accessible.
  • Providing the necessary features to make the user experience fulfilling
  • Ensuring that the user can get the help they need when they require it.
Home desktop site
Home tablet site
Home mobile site
dedicated mobile app home

Starting line

In this project, I took an approach that proved to be quite effective in my design effort. I found the qualitative research method to be most useful, consisting of research, competitive analysis, stakeholder interviews, and most important person hypothesis construction. I started asking some initial questions.

What is the product and who is it for?

What do our primary users need the most?

What is the effect of my design on social good?

What challenges could I face moving forward?

Who do I see as our biggest competitors?

What literature should I review to familiarize myself with the product?

I conducted a secondary research on Pill Reminder apps and the value they offer. I then conducted preliminary interviews to understand the users. The initial group were adult people diversified among working or retired adults.

This user group confirmed the initial assumption about the need adults, but research also revealed that age was not the only factor limiting users from remebering their medications but also the increasing number of medicine taken proportionally with age.

The user

aggregate persona sayed

Competitive Analysis

I started by having the idea to design a simple yet comprehensive design and at the same time not overwhelming to the users. So I conducted a competitive audit for some of the best in the business in 2022 for Pill reminders apps.

medisafe icon

Starting the journey

P&P wireframe

The initial idea was to design a dedicated mobile app for the Pill reminder application and build from there. And by conducting the earlier competitive audit, ideas started to come to mind which resulted in the finalized P&P wireframe.

Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.

Prioritizing useful button location and minimize unnecessary elements placement on the home page was a key part of my strategy

digital wireframes
lo-fi prototype


After creating the lo-fi prototype flow, I did a moderated usability study. I asked 5 participants to run through different scenarios in my prototype in hopes of garnering enough feedback to use for the next set of designs.

reservation fees 3 removebg preview

To address the problem face by users with vision impairment. Voice control was added to address the problem.


Some users complained that not only is the problem related to the medicine time is needed to be solved but also the dosage required for each medicine.


Some users stated that their ability and patience to input medication in the app and in some cases ignore the reminders call for a caregiver needed to share the received notification.

reservation fees 3 removebg preview

Challenge 1: Accessibility

Based on the insights from the usability study, I made changes to the design to address the need for a voice control option.

dedicated mobile app home

Challenge 2: Dosage

Based on the insights from the usability study, I made changes to design to add the option of inputting the dose for each medicine added.

dose specification in add a med page

Challenge 3: Caregiver

Based on the insights from the usability study. A new option was added to assign a caregiver as needed.

hi-fi prototype

Next Step

After completing the design for the app, the next step was to design a companion responsive website. To do that it was essential to first design the structure of the website to provide a clear navigation hierarchy, meet the users’ expectations and improve navigation throughout the website


I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users navigate from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.

Home desktop site
Home tablet site
Home mobile site


I learned that even a small design change can have a huge impact on the user experience, especially in this case where the design is mainly used to serve the social good. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions. 

Previous Project