UX #3 - iPillbox Cross-platform

Design a Cross-platform tool to help people remember to take medicine on time

In my third and final UX case study, I designed a product focused on driving social good, which allowed me, as a UX designer, to approach my community's issues with empathy. This was my opportunity to develop and combine a dedicated mobile app and its complementary responsive website to create a new cross-platform design project, showcasing everything I learned during the Google UX Desing Professional Certificate.

To help me design seamless user experiences across devices, I have applied the 4 C's approach, being aware that my goal was always to put the user first and keep their needs front and center, this means designing for the devices and screen sizes they're using most.

This project has been possible thanks to the support of the Google-Fundae Scholarship Program.

Slides Presentation

At this point, you can choose to continue reading my case study or, if you prefer, view my slideshow!

1-Case Study Slides [iPillbox Cross-Platform Project 3]

Figma Design File

If you wish, you can access my project in Figma.

Project Overview

“In developed countries, adherence rates to treatments for chronic diseases are around 50%. This figure is considerably lower in developing countries, according to a recent report from the World Health Organization (WHO), which calls non-adherence a ‘major global problem’ [...] ”

Designing an effective cross-platform tool through a dedicated mobile application and its responsive website would enable patients with chronic diseases, their families and the multidisciplinary health team to provide medications on time and effectively monitor the treatment. Thus improving patients’ adherence to treatment and their quality of life.

Presentation of the iPillbox cross-platform tool on different devices. Composed of a dedicated mobile application and its corresponding responsive website.

This project consisted of a dedicated mobile application (on the left) and the design of its corresponding responsive website (on the right) to ensure usability across devices.

The iPillbox Project is a cross-platform tool that is part of a non-profit organization in Spain whose objective is to promote social good. The organization needs this tool to help people with chronic diseases to effectively and safely manage the follow-up of their treatment. The main target users of iPillbox are people with chronic treatments who need help remembering to take their medication on time.

As a UX designer my responsibility was to design a Dedicated Mobile App and a complementary Responsive Website from conception to delivery, taking into account content, layout and performance across devices to ensure usability.

Research

User Research

I used the data and knowledge available from my company as well as the analysis of information from various institutions, WHO, NIH and Elsevier, on patients’ adherence to their chronic treatments to develop interview questions, which were then used to conduct interviews with the users. The majority of interview participants expressed feeling stressed with following their treatments and even being afraid of the possible negative consequences derived from incorrect follow-up. The comments received during the research showed that users would be in favor of introducing technological aids for taking their medication appropriately and monitoring the treatment by all interested social actors.

Personas

As a result of the user research, two target users with their respective problem statements were identified:

John Doe is a chronic medically treated patient, who needs an easy way to consult his treatment and remember to take his medications on time, because this will help him maintain a good quality of life without worries.

John Doe represents the first target users. This Persona has a neurodegenerative disease that requires chronic treatment.

Personas are crucial in the user-centered design process because they define expectations, concerns, and motivations.

Jules Richard is a busy doctor, who needs effortless way to access patient's records through intuitive browsing, search and filter functions, because he wants to ensure excellent patient care.

Jules Richard represents the second target users. This Persona is a doctor who needs to follow his patients' chronic treatments in a simple and effective way.

Personas help us understand how to design a product that meets user needs, making it a success.

Competitive Audit

An audit of three competitors was carried out, which allowed us to evaluate their characteristics and quality in order to identify high-quality apps, deficiencies and opportunities to take into account when developing our multi-platform system.

3-Competitive Audit 1of2 [ENG][P3-iPillbox]

3-Competitive Audit 2of2 Report [ENG][P3-iPillbox]

Ideation

I applied an ideation process to quickly generate ideas on how to take advantage of the opportunities identified in the competitive audit as well as the analysis of information from various institutions. My focus was specifically on strategies to help remind users to take their medications on time.

Crazy Eights is a quick drawing exercise that challenges UX designers to sketch eight different ideas in eight minutes.

This phase provides the opportunity to think creatively and find as many solutions to a problem as possible.

Starting the Design

Digital Wireframes

After ideating and drafting some wireframes on paper, I created the initial designs for the dedicated iPillbox mobile app. These designs focused on providing personalized guidance to the user to help them establish their chronic treatment.

Different phases of wireframe design, from paper design to digital.

From paper wireframes to digital wireframes, example of the evolution of a screen of the dedicated iPillbox mobile application.

Lo-Fi Prototype

Screenshot of the main user flow, add a medication, from iPillbox's first low-fidelity prototype.

Link to the first low fidelity prototype of iPillbox to interact with the main user flow.

For usability testing, a low fidelity prototype was created. The main user flow consisted of adding a medication by scanning its barcode and completing the requested information.

Usability Studies

During the usability studies, common patterns were identified thanks to the target users, which allowed us to gain insights that would help us improve the usability of the dedicated mobile application.

The three main findings made with the usability study were related to layout, navigation, and confirmation dialogs.

A usability study is one of the most valuable research techniques. It helps identify problems users are having with a specific UI and reveals difficult-to-complete tasks and confusing language.

Refining the Design

Mockups

Based on insights from the usability studies, I implemented design changes, such as providing clear status bars and navigation, including a CTA button that indicates the user is adding medications.

Example of design evolution before and after usability studies.

Testing can ensure that the product is easy to use.

Additional design changes included the addition of confirmation dialogs that provide a clearer indication of the actions the user is taking with the goal of not accidentally losing data.

Refining the desing ensures a positve user experience.

Hi-Fi Prototype

The high fidelity prototype followed the same user flow as the low fidelity prototype, including design changes made after the usability study.

Screenshot of the main user flow, add a medication, from iPillbox's high-fidelity prototype.

Link to iPillbox's high fidelity prototype.

Accessibility

During the development of this project I took into account accessibility, one of the principles of UX design, to give the same importance to all users and their needs regardless of their physical and/or cognitive abilities. This allowed me to identify three features that would allow this cross-platform tool to always put the user first and keep their needs front and center.

Alt text, Headers, and WCAG 2.0 will provide users with an seamless experience, increasing user retention and contributing to the success of the social good of this platform.

Responsive Design

With the designs for my dedicated mobile application complete, I began work on a complementary responsive website focused on driving social good. Both combined will allow me to build a cross-platform design.

IA

Thanks to Information Architecture (IA) I have been able to organize and maintain my content and the structure of the website, its organization and the nomenclature of its navigation elements. As part of IA I have created Sitemaps to represent all this information visually.

I used the iPillbox sitemap, a blueprint of my site, to visualize the architecture and hierarchy of all the web pages, helping me make decisions that would lead to a cleaner, sharper, and easier to navigate website. Creating a consistent experience across all devices.

iPillbox's sitemap used as a reference tool to visualize how different pages and sections of the navigation fit together and to identify gaps in content.

This is a sitemap that maps out the hierarchy and organization of content pieces on the iPillbox project.

RWD

Responsive Website Design (RWD) has allowed me to set specific conditions for different screen sizes, resolutions, and orientations, ensuring my website displays optimally on multiple devices.

Screenshot of the responsive designs for mobile, tablet and computer.

Responsive design for different screen scales ensures usability on different devices.

Going Forward

Next Steps

At this point, the first phase of the iPillbox project has been completed, which consisted of developing a dedicated mobile application and its respective responsive website to allow users to take their medications on time.

To develop a comprehensive cross-platform tool, the design and development team should continue, after launch, with the other phases already planned.

The final three steps to complete the functionality will be to conduct research on patient use, implement access for healthcare personnel and family members, and finally develop connectivity with other devices through IoT.

These steps will allow, in the implementation phase, to create a functional and usable cross-platform tool.

Impact

Problems of therapeutic non-compliance are present, regardless of the disease, demographic group and socioeconomic level. However, it seems to depend on factors related to the patients, the disease, the medication, the doctor and healthcare, the socio-familial context, the media and society.

This tool provides reminders, alerts and allows treatment monitoring, contributing to the objective of reducing involuntary non-adherence of the patient, the healthcare team and family.

Thus reducing the risk of morbidity and mortality and healthcare costs.

What I learned

Through this project I have realized that gone are the days when governments, multinationals and large NGOs were the only institutions with the reach and resources to initiate changes in our societies.

Designing for social good has been a way of addressing my community's issues with empathy and being clear about always putting the user first, keeping their needs front and center.

I have realized that design contributes to harnessing the power of technology, allowing us to improve human behavior and build a better world!

We have reached the end of my third case study and the reason why I started building this portfolio. Thank you for coming and for the interest shown in it!

Oh! and remember...

"Focus on the user and all else will follow"

-Google