Apothecary Mobile App
Apothecary Mobile App
A mobile app that enables patients of the University of Colorado Boulder’s on-campus pharmacy to manage, fill, and track their prescriptions with ease
A mobile app that enables patients of the University of Colorado Boulder’s on-campus pharmacy to manage, fill, and track their prescriptions with ease
![](https://framerusercontent.com/images/TvoNh6Ki8LDwNm4rrQ5EnMTdXc.png)
![](https://framerusercontent.com/images/TvoNh6Ki8LDwNm4rrQ5EnMTdXc.png)
Client
Client
The Apothecary at CU Boulder
The Apothecary at CU Boulder
Platform
Platform
Mobile
Mobile
Duration
Duration
3 months
3 months
My Role
My Role
User Research and Prototyping
User Research and Prototyping
Team
Team
Me
Namita Pasupuleti
Jenna Silverman
Me
Namita Pasupuleti
Jenna Silverman
Background
Background
The Apothecary at CU Boulder
The Apothecary at CU Boulder
The Apothecary is a full-service pharmacy located within CU Boulder’s Wardenburg Health Center that is open to students, staff, faculty, and the Boulder community. As part of my UX Design II class in CU Boulder’s Creative Technology and Design program, my student team approached Chelsea Johnson, Assistant Director of Pharmacy at The Apothecary, with ideas about improving The Apothecary’s digital systems for prescription management.
The Apothecary is a full-service pharmacy located within CU Boulder’s Wardenburg Health Center that is open to students, staff, faculty, and the Boulder community. As part of my UX Design II class in CU Boulder’s Creative Technology and Design program, my student team approached Chelsea Johnson, Assistant Director of Pharmacy at The Apothecary, with ideas about improving The Apothecary’s digital systems for prescription management.
![](https://framerusercontent.com/images/oq2WiutfUPFxslzkhMjnMrrL5PY.png)
![](https://framerusercontent.com/images/oq2WiutfUPFxslzkhMjnMrrL5PY.png)
![](https://framerusercontent.com/images/oq2WiutfUPFxslzkhMjnMrrL5PY.png)
Problem
Problem
Existing prescription management systems were outdated and not being used by patients
Existing prescription management systems were outdated and not being used by patients
While the Apothecary had an online portal and an Android app for patients to manage their prescriptions, both were outdated and were not being used by patients. Because of this, Apothecary staff members often had to prepare prescriptions without much notice and patients faced long wait times when picking up prescriptions. Knowing that the existing systems were not working well, Chelsea wanted us to design a new online portal or app with 3 goals:
• Reduce prescription requests via phone and email
• Encourage patients to set up auto-refills to give staff more time to prepare prescriptions
• Provide patients with more information about their prescriptions
While the Apothecary had an online portal and an Android app for patients to manage their prescriptions, both were outdated and were not being used by patients. Because of this, Apothecary staff members often had to prepare prescriptions without much notice and patients faced long wait times when picking up prescriptions. Knowing that the existing systems were not working well, Chelsea wanted us to design a new online portal or app with 3 goals:
• Reduce prescription requests via phone and email
• Encourage patients to set up auto-refills to give staff more time to prepare prescriptions
• Provide patients with more information about their prescriptions
The Apothecary’s existing online portal
The Apothecary’s existing online portal
UX Research
UX Research
Identifying patient pain points through interviews
Identifying patient pain points through interviews
We conducted 1-1 interviews with 7 former and current Apothecary patients to understand:
• Existing frustrations with using The Apothecary
• Top tasks needed within an online prescription management system
• Preferred platform for prescription management (desktop, mobile, both)
After gathering insights individually, we came together as a team to create user stories, identifying the top features that could resolve pain points for patients of The Apothecary.
We conducted 1-1 interviews with 7 former and current Apothecary patients to understand:
• Existing frustrations with using The Apothecary
• Top tasks needed within an online prescription management system
• Preferred platform for prescription management (desktop, mobile, both)
After gathering insights individually, we came together as a team to create user stories, identifying the top features that could resolve pain points for patients of The Apothecary.
New patients struggle to transfer prescriptions through The Apothecary’s existing PDF form
New patients struggle to transfer prescriptions through The Apothecary’s existing PDF form
As a new patient of The Apothecary, I want to transfer prescriptions to The Apothecary online so that I don’t have to download, fill out, and email a PDF document with my medical information.
As a new patient of The Apothecary, I want to transfer prescriptions to The Apothecary online so that I don’t have to download, fill out, and email a PDF document with my medical information.
Patients want to know the status of their prescriptions without calling or emailing The Apothecary
Patients want to know the status of their prescriptions without calling or emailing The Apothecary
As a patient of The Apothecary, I want clear and frequent status updates on my prescriptions so that I know when my request has been received, when my prescription is being filled, and when my prescription is ready for pickup.
As a patient of The Apothecary, I want clear and frequent status updates on my prescriptions so that I know when my request has been received, when my prescription is being filled, and when my prescription is ready for pickup.
Patients want more information about the prescriptions they have on file with The Apothecary
Patients want more information about the prescriptions they have on file with The Apothecary
As a patient of The Apothecary, I want access to information about my prescriptions on file with the Apothecary so that I can quickly find information such as RX number, provider, and number of refills remaining.
As a patient of The Apothecary, I want access to information about my prescriptions on file with the Apothecary so that I can quickly find information such as RX number, provider, and number of refills remaining.
Patients want to be able to set up auto-refills on their prescriptions
Patients want to be able to set up auto-refills on their prescriptions
As a patient of The Apothecary, I want the option to set up auto-refills on my prescriptions so that I don’t have to manually refill them when I run out.
As a patient of The Apothecary, I want the option to set up auto-refills on my prescriptions so that I don’t have to manually refill them when I run out.
Patients don’t want to wait for a long time when picking up prescriptions
Patients don’t want to wait for a long time when picking up prescriptions
As a patient of The Apothecary, I want to schedule a pickup time for my prescriptions so that I can avoid long wait times at pickup.
As a patient of The Apothecary, I want to schedule a pickup time for my prescriptions so that I can avoid long wait times at pickup.
Patients want to manage prescriptions from both mobile and desktop devices
Patients want to manage prescriptions from both mobile and desktop devices
As a patient of The Apothecary, I want to be able to manage my prescriptions from a mobile or desktop device so that I can have quick access on the go and from home.
As a patient of The Apothecary, I want to be able to manage my prescriptions from a mobile or desktop device so that I can have quick access on the go and from home.
![](https://framerusercontent.com/images/sUvwv4z0vp09qYmakdwoRUXrcA.png)
![](https://framerusercontent.com/images/sUvwv4z0vp09qYmakdwoRUXrcA.png)
![](https://framerusercontent.com/images/sUvwv4z0vp09qYmakdwoRUXrcA.png)
The Apothecary’s existing transfer request form
The Apothecary’s existing transfer request form
Information Architecture
Information Architecture
Creating a mobile app sitemap
Creating a mobile app sitemap
Though users wanted to be able to manage prescriptions from both mobile and desktop, there was a slight preference for mobile, and with limited time to complete our project in class, we decided to move forward with building a mobile app. I brought my team together to build a sitemap that would get us organized before we began designing. This exercise allowed us to consider how users would move through the app and how we could structure the app to give prominence to the most frequently used prescription processes.
Though users wanted to be able to manage prescriptions from both mobile and desktop, there was a slight preference for mobile, and with limited time to complete our project in class, we decided to move forward with building a mobile app. I brought my team together to build a sitemap that would get us organized before we began designing. This exercise allowed us to consider how users would move through the app and how we could structure the app to give prominence to the most frequently used prescription processes.
![](https://framerusercontent.com/images/uXHBXfno1VMqG6qo4SUESH0n2S0.png)
![](https://framerusercontent.com/images/uXHBXfno1VMqG6qo4SUESH0n2S0.png)
![](https://framerusercontent.com/images/uXHBXfno1VMqG6qo4SUESH0n2S0.png)
Ideation
Ideation
Mid-fidelity mockups and prototyping
Mid-fidelity mockups and prototyping
To expedite our design process before testing with users, we broke our sitemap into smaller sections that we each mocked up individually. I was responsible for creating account setup and prescription transfer forms while my teammates worked on the app dashboard, menu, profile, settings, and pickup scheduling.
To expedite our design process before testing with users, we broke our sitemap into smaller sections that we each mocked up individually. I was responsible for creating account setup and prescription transfer forms while my teammates worked on the app dashboard, menu, profile, settings, and pickup scheduling.
Account setup form
Account setup form
Prescription transfer form
Prescription transfer form
After creating mid-fidelity mockups, we pulled our most promising ideas together into an interactive prototype, ensuring alignment with our sitemap.
After creating mid-fidelity mockups, we pulled our most promising ideas together into an interactive prototype, ensuring alignment with our sitemap.
Open prototype in full screen view for best experience
Open prototype in full screen view for best experience
Usability Testing
Usability Testing
Feedback from 5 Apothecary patients revealed features and content that we had overlooked
Feedback from 5 Apothecary patients revealed features and content that we had overlooked
We tested our mid-fidelity prototype with 5 Apothecary patients, having each participant complete a set of tasks while reviewing content in the app. Feedback from these participants revealed important aspects of the app that we had overlooked. Below are some of the changes we made based on this feedback.
We tested our mid-fidelity prototype with 5 Apothecary patients, having each participant complete a set of tasks while reviewing content in the app. Feedback from these participants revealed important aspects of the app that we had overlooked. Below are some of the changes we made based on this feedback.
Adding empty states and confirmation messages to guide users through the app and outline next steps
Adding empty states and confirmation messages to guide users through the app and outline next steps
![](https://framerusercontent.com/images/WjstCqpF760I1Ro41OxnhuVdM.png)
![](https://framerusercontent.com/images/WjstCqpF760I1Ro41OxnhuVdM.png)
![](https://framerusercontent.com/images/WjstCqpF760I1Ro41OxnhuVdM.png)
Empty state added to dashboard
Empty state added to dashboard
![](https://framerusercontent.com/images/UCpDC5G13BNSKu1Y834afirdwqw.png)
![](https://framerusercontent.com/images/UCpDC5G13BNSKu1Y834afirdwqw.png)
![](https://framerusercontent.com/images/UCpDC5G13BNSKu1Y834afirdwqw.png)
Order confirmation page
Order confirmation page
Adjusting forms to make inputs easier for users
Adjusting forms to make inputs easier for users
Before
![](https://framerusercontent.com/images/DgRx7U0r2UhcQDhMHwZDkcaY6U.png)
![](https://framerusercontent.com/images/DgRx7U0r2UhcQDhMHwZDkcaY6U.png)
![](https://framerusercontent.com/images/DgRx7U0r2UhcQDhMHwZDkcaY6U.png)
After
![](https://framerusercontent.com/images/if2Q0Sdat9t0WM5e0K7Bd0XKiU.png)
![](https://framerusercontent.com/images/if2Q0Sdat9t0WM5e0K7Bd0XKiU.png)
![](https://framerusercontent.com/images/if2Q0Sdat9t0WM5e0K7Bd0XKiU.png)
Client Feedback
Client Feedback
More adjustments to form inputs and removal of pay-in-app screens
More adjustments to form inputs and removal of pay-in-app screens
Usability testing also revealed more questions that we had for Chelsea such as:
• What information does The Apothecary need from patients surrounding insurance?
• What information does The Apothecary need from patients surrounding drug allergies?
• How is insurance applied to prescription costs and is it feasible for patients to pay for prescriptions in the app?
By walking through our prototype with her, we were able to discuss these questions and ensure that our final designs created alignment between form inputs and the information needed for The Apothecary to execute their existing processes. We ended up making adjustments to account setup and settings screens related to form inputs for insurance and drug allergy information. We also decided to remove pay-in-app screens as The Apothecary prefers to charge patients at the point of pickup, where they can discuss how insurance is applied directly with patients.
Usability testing also revealed more questions that we had for Chelsea such as:
• What information does The Apothecary need from patients surrounding insurance?
• What information does The Apothecary need from patients surrounding drug allergies?
• How is insurance applied to prescription costs and is it feasible for patients to pay for prescriptions in the app?
By walking through our prototype with her, we were able to discuss these questions and ensure that our final designs created alignment between form inputs and the information needed for The Apothecary to execute their existing processes. We ended up making adjustments to account setup and settings screens related to form inputs for insurance and drug allergy information. We also decided to remove pay-in-app screens as The Apothecary prefers to charge patients at the point of pickup, where they can discuss how insurance is applied directly with patients.
Improvements made to drug allergy inputs
Improvements made to drug allergy inputs
Before
Before
![](https://framerusercontent.com/images/NsxlI3OcxB7jh2qJVJzczlHYppU.png)
![](https://framerusercontent.com/images/NsxlI3OcxB7jh2qJVJzczlHYppU.png)
![](https://framerusercontent.com/images/NsxlI3OcxB7jh2qJVJzczlHYppU.png)
After
After
![](https://framerusercontent.com/images/KYnIMM4WeRvbMaarwo0q2JaePas.png)
![](https://framerusercontent.com/images/KYnIMM4WeRvbMaarwo0q2JaePas.png)
![](https://framerusercontent.com/images/KYnIMM4WeRvbMaarwo0q2JaePas.png)
Payment screens removed from final prototype
Payment screens removed from final prototype
![](https://framerusercontent.com/images/j3XGYx3AlCXOwhEtqIAIutRTxk.png)
![](https://framerusercontent.com/images/j3XGYx3AlCXOwhEtqIAIutRTxk.png)
![](https://framerusercontent.com/images/j3XGYx3AlCXOwhEtqIAIutRTxk.png)
![](https://framerusercontent.com/images/7YhWEvEhnUVNX9u0kebniyeiRc.png)
![](https://framerusercontent.com/images/7YhWEvEhnUVNX9u0kebniyeiRc.png)
![](https://framerusercontent.com/images/7YhWEvEhnUVNX9u0kebniyeiRc.png)
Final Prototype
Final Prototype
Successful proof of concept
Successful proof of concept
Chelsea was impressed with our final designs and felt that our prototype successfully met the goals she had set out for us. Though she was interested in how our app could be developed, she was unsure who had created their existing portal and Android app, and was unable to connect us with a development team. Despite the app never moving forward to development, I felt a great sense of achievement in creating a proof of concept, showing The Apothecary a possible direction they could take to improve prescription processes for their patients and staff.
Chelsea was impressed with our final designs and felt that our prototype successfully met the goals she had set out for us. Though she was interested in how our app could be developed, she was unsure who had created their existing portal and Android app, and was unable to connect us with a development team. Despite the app never moving forward to development, I felt a great sense of achievement in creating a proof of concept, showing The Apothecary a possible direction they could take to improve prescription processes for their patients and staff.
Open prototype in full screen view for best experience
Open prototype in full screen view for best experience
Reflections
Reflections
Keep it simple
Keep it simple
Despite the complexity of the prescription processes underlying our app, we wanted to keep the app as simple as possible from a patient’s point of view. I learned that even when there is complexity in the processes underlying a problem, great design ensures that this complexity is not reflected on users so that they can have a straightforward experience.
Despite the complexity of the prescription processes underlying our app, we wanted to keep the app as simple as possible from a patient’s point of view. I learned that even when there is complexity in the processes underlying a problem, great design ensures that this complexity is not reflected on users so that they can have a straightforward experience.
Get the details right
Get the details right
Usability testing revealed many details that we had overlooked in our initial designs such as empty states, confirmation messages, and required fields in forms. Adding these small elements made all the difference for users of the app, and I learned the importance of paying attention to detail.
Usability testing revealed many details that we had overlooked in our initial designs such as empty states, confirmation messages, and required fields in forms. Adding these small elements made all the difference for users of the app, and I learned the importance of paying attention to detail.
Communication is key
Communication is key
With little knowledge of pharmacy and prescription processes, we asked a lot of questions throughout the project and stayed in close contact with our client. By communicating effectively with my teammates and our stakeholder, I was able to develop a deep understanding of the problem space and create successful designs to meet the needs of users.
With little knowledge of pharmacy and prescription processes, we asked a lot of questions throughout the project and stayed in close contact with our client. By communicating effectively with my teammates and our stakeholder, I was able to develop a deep understanding of the problem space and create successful designs to meet the needs of users.
More Projects
Revamping instructor-facing alerts on large lecture hall touch panels
A redesigned interface for 300 touch panels at the University of Colorado Boulder with a focus on streamlining alert resolution for instructors while teaching
A redesigned interface for 300 touch panels at the University of Colorado Boulder with a focus on streamlining alert resolution for instructors while teaching
Empowering undergraduate students to seek academic support
A new feature for the University of Colorado Boulder’s student portal that matches students with free tutoring and learning resources provided by the university
A new feature for the University of Colorado Boulder’s student portal that matches students with free tutoring and learning resources provided by the university