UX CASE STUDY
CP HEALTH
CP HEALTH
A simple, easy to use mobile application designed specifically with Cal Poly students in mind. We streamlined the way each user interacts with Health Clinic staff by giving them the ability to Manage Appointments, Access Lab Results, Fill Out Walk-in Forms, and Explore Health Resources.
A simple, easy to use mobile application designed specifically with Cal Poly students in mind. We streamlined the way each user interacts with The Health Clinic staff by giving them the ability to Manage Appointments, Access Lab Results, Fill Out Walk-in Forms, and Explore Health Resources.
Overview
CP Mobile App Design was a very impactful project for me. It was the first UX Case Study I had been involved in and initially sparked my interest in collaborating and conceptualizing in the UX design space.
In a team of two designers, we were able to dive into the project by utilizing steps in Discovery, User Research, Sketching, Wire Framing, Hi-Fidelity Prototyping, and User Testing. We worked directly with Cal Poly Students to discuss and define a problem in the current Cal Poly Health Clinic experience. From here, we developed a research plan to understand our users’ needs, which led us to arrive at an intelligent and meaningful design solution. About a year after completing this project, I personally updated the UI Design with a desire to fix some minor visual design and usability issues.
Role & Duration
USER EXPERIENCE AND INTERACTION DESIGNER
Research, Information Architecture, Visual Design, Interaction, User Testing, and Adobe XD
April 2018 - June 2018
Team of two designers
The Problem
The Problem
After identifying issues in the current health clinic experience and interviewing a diverse group of Cal Poly students, it was found that many students complained of long lines and failure to access resources through the online portal, resulting in overall neglect for their health.
These findings pointed to one key problem. The current Cal Poly Health Clinic Website is an ineffective and confusing tool for students to access health resources and communicate with staff.
83%
of users expressed frustration toward long wait time
<16%
of users schedule appointments through the online portal
100%
of users were unhappy with the current Cal Poly Health Clinic experience
Research
We began the research process by conducting a competitive analysis of our market - health applications. This process helped us build our strategic plan while kick-starting our thought process on which features would be most beneficial for the app.
Next, we created an affinity map to help organize our ideas into clearly defined categories. To reach our minimal viable product, we took all the potential features we thought to include in our application and ordered them according to the level of impact and expectation. We felt confident moving forward to design only the features that had the greatest impact and were most expected to be included in a health application.
COMPETETIVE ANALYSIS
A comparison of 7 different health applications. Noted the various features each one had to offer.
AFFINITY MAPPING
Brainstormed while keeping three things in mind: problems, missed opportunities, and just plain important to get right in the health clinic experience.
FEATURE PRIORITIZATION
Minimal Viable Product features: Manage Appointments, Access Lab Results, Edit Profile, Update Walk-In Forms, and Explore Health Services
Getting to Know Our User
Getting to Know Our User
100+ interviews were conducted with randomly chosen Cal Poly students. This process helped us identify common ideas, thoughts, and frustrations that our target users expressed.
From these findings, we created personas to represent the different user types that may use our application and personify their specific needs, goals, and motivations.
My team and I conducted 100+ interviews with randomly chosen Cal Poly students. This process helped us identify common ideas, thoughts, and frustrations that our target users expressed. From these findings, we created personas to represent the different user types that may use our application and to personify their specific needs, goals, and motivations.
"I never schedule an appointment online because it takes way too much time and effort!"
"I probably won't go back until they improve their lengthy check-in process."
"By the time I saw a doctor, I had to rush out to make it to my next class...and I was late."
Handmade Sketches
Handmade Sketches
After many design iterations and several crumpled up pages later, we created the final sketches of our main screens. We explored various design concepts with a pencil and paper before going to the computer. This step was crucial and ultimately saved us time in the long run.
After many design iterations and several crumpled up pages later, we had the final sketches of our main screens. We explored multiple design concepts with a pencil and paper before going to the computer. This step is crucial and ultimately saves us time in the long run.
Low Fidelity Wireframes
Low Fidelity Wireframes
Below are digitally adapted wireframes that were created using Adobe XD. We refrained from using any color or making any big design decisions in order to effectively test the functionality of our app.
Below are digitally adapted wireframes that we created using Adobe XD. We refrained from using any color and avoided making any detailed design decisions in order to affectively test the functionality of our app.
MAIN LOGIN
RESOURCES
HOME PAGE
WALK IN FORMS
APPOINTMENTS
PROFILE
SCHEDULE APPTS.
LAB RESULTS
Testing Our User
Testing Our User
The first round of testing was administered using the low fidelity prototype. We created user scenarios or narratives that helped describe how users may interact with the designs – a useful consideration for ideation and usability testing. Ultimately, they were able to focus strictly on completing tasks without being distracted by visual design elements.
The first round of testing was performed using the low fidelity prototype. We created user scenarios or narratives that helped describe how a user may interact with our design – a useful consideration for ideation and usability testing. Ultimately, they were able to focus strictly on completing tasks without being distracted by visual design elements.
SCENARIO 1: FEELING SICK
Task Completion:
100%
SCENARIO 2: CURIOUS USER
Task Completion:
Task Completion:
94%
User Flow Diagram
User Flow Diagram
Hi-Fidelity Prototype
Workflow shown below:
LOGIN TO HOME SCREEN
LOGIN TO HOME SCREEN
For the first screens users came in contact with, the goal was to keep the design clean and easy to navigate. The home screen was important to keep simple as it would likely be the most visited page in the application.
Visual clarity allows users to navigate through the app and accomplishes their goals without any added friction. The bright blue and green gradient included with a friendly greeting give a lively and positive first impression of CP Health.
When designing the first screens our users came in contact with, we aimed to keep the design clean and easy to navigate. The home screen was important to keep simple as it would likely be the most visited location in the application. Visual clarity allows users to navigate through the app and accomplish their goals without any added friction. The bright blue and green gradient included with a friendly greeting gives you a lively and positive first impression of CP Health.
Workflow shown above:
Workflow shown above:
SCHEDULING AN APPOINTMENT
SCHEDULING AN APPOINTMENT
We anticipated the Appointments tab to be a focus feature of the app based on our findings from Cal Poly students. A user would start this process by either pressing the New Appointment button, viewing a previously scheduled appointment or viewing a past office visit. From here, we gave users the opportunity to choose a doctor they would like to meet with, as we found some students had more specific preferences.
We anticipated the Appointments tab to be a focus feature of the app based on our findings from Cal Poly students. A user would start this process by either pressing the New Appointment button, viewing a previously scheduled appointment, or viewing a past office visit. From here, we gave users the opportunity to choose the doctor they would like to meet with, as we found some students had more specific prefereneces. Next they would choose an available date and time that works best for them based on current availability. From here, they are prompted to enter a reason for visit, which is immediately followed by an "Appoinment Set," confirmation screen. This is a design we chose to keep throughout the app to give users a hint that they are accomplishing their goals and also to prompt them to make their next step. In this case it would be to either return "Back to Home," or to "Schedule Another Appointment."
Next, they would choose an available date and time that works best for them based on current availability. From here, they are prompted to enter a reason for the visit, which is immediately followed by an "Appointment Set," confirmation screen. This is a screen kept throughout the workflow of the app in order to provide a confirmation for users that they are accomplishing their goal and also to prompt them to continue browsing the app.
Next they would choose an available date and time that works best for them based on current availability. From here, they are prompted to enter a reason for visit, which is immediately followed by an "Appointment Set," confirmation screen. This is a screen kept throughout the workflow of the app in order to provide a confirmation for users that they are accomplishing their goal and also to prompt them to continue browsing the app.
VIEWING LAB RESULTS
VIEWING LAB RESULTS
The Lab Results feature provides students with full access to lab results from tests that were administered at previous appointments. This is helpful for both health staff and students, as it keeps communication clear and all in one place. We continued to include buttons that prompt users along their journey through the app. By limiting the amount of effort users' used on the application itself, it would leave them with a positive experience overall.
The Lab Results feature gives students an all in one place way to access lab results from any tests that were administered at a previous appointment. This is helpful for both health staff and students as it keeps their communication clear and all in one place. We also continued to include buttons along the way that aimed to prompt a users next move. This is valuable because we hoped to limit the amount of effort our users' used on the application itself, leaving them with a positive experience overall.
WALK-IN FORMS
WALK-IN FORMS
A common pain point we found from users was the long wait experienced during walk-in appointments. This wait is attributed to a lengthy check-in form students are required to fill out before seeing a doctor. By allowing users to fill out this form ahead of time, they are skipping the line at their next visit. A feature we felt necessary to include based on the feedback we received from Cal Poly students.
A common pain point we found from users was the long wait students experienced during walk-in appointments. This wait is almost completely attributed to a lengthy check-in form students are required to fill out before seeing a doctor. By allowing users to fill it out ahead of time, they are ultimately skipping the line at their next visit. A feature we felt necessary to include based on the feedback we received from Cal Poly students.
EXPLORING HEALTH SERVICES
EXPLORING HEALTH SERVICES
After talking with health center staff, we found that health resources were extremely underutilized. The services found on the current website saw very little foot traffic, so it was important that we found a way for students to take advantage of the many helpful resources at their fingertips.
We ended the Health Services experience with a confirmation screen that tells users that they’ve "Explored all Health Services," while also hinting they should feel accomplished for doing so!
Lastly, we included a all-in-one location for all of the alternative Health Services to live. After talking with staff from the Health Clinic, we found that an abundance of information offered by health center was being extremely underutilized. These resources which were found on the current website saw very little traffic so it was important to health staff that we find a way for students to take advantage of all the helpful resources at their fingertips. We ended the Health Services expereince with a confirmation screen that tells you that you've "Explored all Health Services," while also hinting you should feel accomplished for doing so!
UI Design
UI Design
COLORS
TYPOGRAPHY
GRAPHIC ELEMENTS
ICONOGRAPHY
SOLUTION
An intuitive, easy to use service that allows health center patients to make appointments, access services, and effectively communicate with staff, improving the overall health clinic experience for both Cal Poly Students and Health Clinic Staff.
An intuitive, easy to use service that allows health center patients to make appointments, access services, and effectively communicate with staff, improving the overall health clinic experience for both Cal Poly Students and Health Clinic Staff
Reflections
WHAT WENT WELL
Working in a team of two taught me the importance of clear communication and keeping an open mind. We were able to successfully bounce ideas back and forth because we were collectively open to hearing each others' thoughts. We kept good time management and stuck to our timeline by allocating jobs and taking on different roles. I naturally took on more of a leadership position in this project and felt I became a more well-rounded and confident designer because of it.
GIVEN MORE RESOURCES OR TIME
Moving forward, I would keep the UI Design and branding of the application consistent with Cal Poly's brand look and feel, but I did enjoy having my own creative freedom for the sake of this project. I would have enhanced the interaction design by adding moving elements. This would add visual interest and more importantly give feedback to the user whenever an action was made.
GREATEST TAKEAWAYS
I had a great experience working through the UX design process and learning the detailed steps of a UX case study. It changed the way I think about complex problems and has allowed me to deal with them by taking thoughtful steps to reach the best possible solution. I improved the way I explain my design process to a client which was challenging, but extremely rewarding when we were able to reach a mutual understanding.