VADEN+

Vaden is Stanford University's on-campus health service provider. A widely used resource used by all, Vaden is notorious for having a terrible digital experience, accessible only on their cluttered website. Vaden+ is a redesign of the online Vaden portal translated into a mobile app, focusing on allowing students to schedule the right appointment for their symptoms and issues at the healthcare center. 

This project started in February 2017 as a 3-week UI/UX project, the final deliverable being a medium-fi prototype. I collaborated with 2 other students throughout the entire process, taking lead specifically in translating test results into the user flow and design.

 In April 2018, I revisited Vaden+ to improve upon its interaction and visual design on my own.

defining the problem 

Challenged to create a digital solution for healthcare, my group and I settled upon tackling Stanford's own Vaden healthcare services. We broke down the current features and capabilities of the Vaden patient portal, and then interviewed Stanford students about their use and experiences with Vaden's digital platform. From these interviews, we discovered that students primarily used the digital portal for scheduling appointments at the on-campus health center. Given the scope of the project, we decided to focus our solution on appointment-scheduling specifically, as it was the most important area for student users. 

We began by identifying design requirements for our new application and designed around the existing scheduling flow that Vaden used. I  was able to identify some problematic sequences in the existing flow. The current flow was confusing because it bombarded users with choices without providing any information, requiring patients to select a department to schedule an appointment in without any explanation about which department fulfilled which medical need. This led users to be confused and uncertain if they were scheduling the correct appointment. 

concept ideation

To try and improve the scheduling of appointments with Vaden, my group and I ran a brainstorm session where we proposed solutions to the question: "How might we get people scheduling with the right department?" In answering this question, we hoped to address the major pain point we identified in our user research. 

The two ideas that we decided upon from this brainstorm session were:

A "smart search" where the user's input returns results for matching appointment types, and a chat bot that users could schedule appoints through. 

Paper Prototype Testing

Using paper prototypes, we tested both the "smart search" and chat bot models for appointment scheduling. To test our scheduling user flow, we asked users to pretend they had a specific symptom, and schedule an appropriate appointment. 

Users found the chat bot to be cumbersome, as messaging felt restricting and unnecessary to users who wanted a quick, non-conversational way to schedule an appointment. 

Users found the "smart search" to be more intuitive, as it more closely matched the current click through system in Vaden's website. However, there were three main problems we uncovered with our prototype:

1. Users were unsure what to input into the search. 
2. The connection between user input and the returned search results felt unclear. 
3. Users felt under-informed on decisions between multiple options.

While we simplified the scheduling process, students still felt as if they did not have sufficient information to make the right decisions regarding their appointment type. Moreover, users felt there was uncertainty between what the interface was asking of them, and their inputs. 

Design Improvements

From our prototype testing, we realized that our design needed to focus more on prompting users correctly, and that this could be achieved by changing the language used on each screen. As helpful as a visual makeover was, without the right writing and visual hierarchy, it did not successfully address the user's problems. The improvements we made in the next design iteration focused on the importance of UX writing: 

1. Prompt users to search with "What is the reason for your visit?" to better connect with their mental model and encourage correct responses.
2. Use clearer, more human messaging when returning search results: "These options were suggested based on your input."
3. Better communication on what each returned option entails. Present each option in a hierarchy from most to least relevant. 

first design - feb 2017

Initial Wireframe 

Design

This iteration of Vaden+ has a linear user flow that is similar to the original, providing more information and clarity to the user as they set up their appointment. Moving to higher fidelity, there was a greater emphasis on the writing and language presented to the user, to prompt, guide, and inform users to the right appointment type for their needs. 

revisiting vaden+

In April 2018, I revisited Vaden+ after having taken more courses in Human Computer Interaction, and had more experience working and developing UI/UX projects.

Design Changes

• Schedule Interface as Modal - the scheduling interface of Vaden+ is now a modal accessed through the Appointments page of the app, as opposed to being its own page. This reduces the number of navigable components of the app, and puts the most important function in an intuitive and more obvious location. Moreover, having the scheduling interface as a modal places more emphasis on the task.

• Single-Screen Time and Doctor Selection - in the early design, the selection of doctors, dates, and times for an appointment introduced clarity and a sequential order to the existing user flow. In redesigning, I have opted to use a picker to select doctor, date, and time all on one screen. This streamlines the user's interaction by vastly reducing the number of steps they must go through before successfully scheduling an appointment. 

• Visual Update - the redesign features a visual update, introducing a minimalist color palette that introduces a greater level of contrast between units of information. 

Redesign Wireframe

redesign - apr 2018

Selecting an Appointment Type

Scheduling an Appointment

Confirming and Viewing Scheduled Appointments