top of page

CVS Health eClinic™ Interface Design

Updated: Feb 2, 2019

Develop a prototype user interface for CVS eClinicTM

Group project with Evan, Franny, and Michael



View the final prototype online here.


Key User Research Findings

To collect user input for the design development of the CVS eClinic™ app, we conducted a focus group of five representative target users covering four categories: mobile applications, medical appointment scheduling, medical consultations, and improvements to be made in medical treatment.


We learned more about this topic by having the group discuss their feelings about the efficiency of this process, and any problems they have experienced in the past with it. Here are some of our key findings:

  • Most important functions: appointment scheduling and prescription management

  • Need to solve inefficiencies of current medical process: Paperwork, Wait times Many target users value face-to-face with familiar doctors

  • People generally comfortable with concept of telemedicine. But, most have no existing experience with telemedicine (no preconceived expectations)


Design Concepts

Our two initial concepts vary mostly in navigation and purpose.


In our first concept, we chose to include all the functionality in five bottom tabs: Home, Connect, Prescriptions, Reminders, and My Profile. The bottom navigation was central to this design, as it was the navigation to all functionality within the application.


In our second concept, we chose to include only the main functions of the application. At the time, these included Connect, Prescriptions, and Reminders. Any remaining function would be accessible via the top-left hamburger menu.


Concept 1:

  • Three main functions plus Home and My Profile as bottom tabs

  • Minimalist design for labeling

Concept 2:

  • Three main functions as bottom tabs

  • Stronger branding and labeling

Preferred Design - Concept 2

  • Important to keep navigation simple for user

  • Eliminates redundant home screen

  • Relocates profile options to hidden menu


Ultimately, we chose to move forward with our second concept. We believed that distilling the bottom navigation to only the most crucial actions was most important for the user. As you will see in our first prototype, we replaced the hamburger menu with a user menu, to clarify what types of functionality could be found in this additional menu.



Prototype Development

Our preliminary design required three tabs for navigation (left), which is intuitive and concise. However, we modified the design to decrease redundancy, and to focus on appointments and medications only. To do this, we changed the homepage navigation design so users could find the primary functions (contact a doctor and schedule an appointment) easily.


We also changed the Connect Me workflow process. For the purpose of a quick appointment process, we tried to minimize the steps when making an appointment. To do that, we found a way to merge two screens into one.


Version 1:

  • Include three main functions

Version 2:

  • Two main screens

  • Change navigation style









Usability Test Findings and Modifications

We conducted usability tests on five representative users, comprising five tasks that are integral to the application: viewing the user’s profile, viewing upcoming appointments, scheduling an appointment, viewing medications, and tracking the status of a prescription order.


Each task had completion criteria that had to be met, with the most direct task flow sought. We defined a successful task as one that reached the completion criteria, even if it was not the most efficient way to do so, and gained qualitative information through our observations of how direct the user’s task flow was as well as users’ own feedback on the test.


Positive

  • Profile screen intuitive to access and exit

  • Consistent branding and organization of information

Negative

  • Appointment scheduling task flow was prohibitively long

  • “Upcoming Appointments” section overshadowed by “Connect Me” icons

  • Clickable and non-clickable icons too similar stylistically

Final Modifications

  • Eliminated unnecessary screens in scheduling sequence

  • Made “Upcoming Appointments” more apparent

  • Changed style of inactive icons

View the final invison prototype online here.





Discussion

In creating the final prototype, we used both feedback we received in class, as well as notes made during the usability testing. Our main problem to tackle after receiving feedback in class was the redundancy of the Home screen and the Connect Me screen.


To resolve this problem, we chose to replace our three bottom tabs (Home, Connect, and My Health) with two top tabs (Appointments and Prescriptions) . Research on common UX practices revealed that bottom tab bars should be reserved for cases in which three to five tabs are needed, so we chose to use two top tabs instead. In solving this problem, we also realized our word choice for our tabs was misleading and overwhelming. “My Health” was too vague, and on the “Connect” screen alone, the words “Connect” or “Connect Me” were used three times. Instead, we chose to use the words “Appointments” and “Prescriptions,” as they were the most direct .


Another major modification was the re-purposing of the “My Health” screen. In addition to changing the name to “Prescriptions” as mentioned above, we removed the functionality to create “reminders” to alert users to take their medications.


In doing this, we wanted to re-align with the purpose of this application: to connect users to doctors and to keep track of ordered prescriptions. By removing this functionality, we also created a more streamlined process. Additionally, we removed the tabs “Medications” and “Orders” housed under the “My Health” tab. Instead, we chose to make all medications and orders accessible to the user as soon as the tap the “Prescriptions” tab. From there, they can filter their prescriptions by current medications, medications ready for refill, medications ready for pick-up, and so on. Other minor changes included enlarging some text like “Upcoming Appointments,” which had been difficult for one user to locate, as noted in our usability section above.






Comments


bottom of page