Solution to spacial constraints for UCSD student's health center

A Kiosk Design | UCSD course: Dsgn 100 Prototyping

Overview and Backgrounds

Under the pressure of getting good grades in tough college classes, and looking for opportunities for careers, students are one of the most vulnerable populations for many potential health problems. Although there is a UCSD Student Health facility on the main UCSD campus, we found that this facility is overwhelmed by the number of patients, with limited space in the main lobby where check-ins, pharmacy, waiting area, consultation, and computers for form fillings are all located. 

The constraints of  existing space-limited facilities  make the service compacted, inefficient, and lack of privacy. As our group members all experienced different problems in the process of getting medication or seeing a doctor, we feel like UCSD students deserve a more private and efficient health service. Thus, we decided to create a kiosk that will help the the faculties provide a more efficient service beyond their current work flow.

"

UCSD students need an efficient way to get health care service in order to allocate more time into something more productive.

"

Online Research and Competitive Audits

Online Research

Before we started to generate ideas on a health-related kiosk, we did a brief research online to find the existing problems that people commonly face when attempting a health care service. We found that there are four main problems in our current healthcare system.

• Check-in process takes too much time

• Unsatisfying utilization of health service by the students because of the insufficient infrastructure and limited numbers of healthcare programs available

• Monitoring health outside the hospital/ health center can be difficult and insecure

"Competitive Audits"

After finding out the common issues faced by patients in real life settings, we decided to look into some  existing solutions  and analyze the pros and cons. Since we knew that our kiosk will be specifically working for the UCSD Student Health Facility, we went relatively broad and general in the research on competitive audits, not worrying that our idea will be overlapping and competing with others. Thus, our goal was to find out some good ideas and ensure that we do not start with some ideas that do not solve problems very well. Here are some successful ideas we found:

Self-Monitoring Health Kiosk at Work 

• Advertised to reduce sickness and improve productivity

• Monitoring the health status of a company’s workforce in order to encourage the care of their own healths

Check-In Kiosk

• Secure check-in and printable maps to next location

• Those needing to see a doctor or undergo tests are ill or in a state of stress in anticipation of the exam or procedure. That means the check-in process should be as non-taxing and simple as possible.

Automated Drug Store

• Round-the-clock access to over the counter health products 

• Pharmabox is intended as a solution to provide consumers with round-the-clock access to OTC health products in nonconventional, high-traffic sites, such as malls, hotels

User Research and Need-findings

Our user research is constituted by observation and interview. Conducting the on-site observation, we collected the obvious problems that are on the visible side. After getting an initial analysis, we chose some possibly common problems from the list, and generated the first version of solutions. We created storyboards featuring/based on these problems and solutions and used our storyboards to conduct interviews. In the interview, we talked to students who just came out of the Student Health facility so that we get first-hand a story about their visit when their memories were still fresh. After the interview questions, we selected one storyboard which fit the participant’s experience and problem the best, and asked them for opinions.

Through this process, we: 

(1) learned the visible problems by conducting observations, and knew unseen sides of those problems by interviewing patients; 

​

(2) found out the core needs by filtering our multiple storyboards before to dig into the problem that is at most concerns, and the solution that is best needed

Findings from Students

Problems:

• Efficiency issues:

  • The visit processes are sometimes confusing to follow

  • Between each process, there is a long wait time before the next step

  • Visiting is not convenient enough that students are more likely to go only when they cannot get better with over-the-counter medicines

  • Not enough doctors, given a relatively bigger number of student population

• Space issues:

  • Dark lighting which increases the feeling of depression

  • Very little room for sufficiently dividing functionalities

Feedback on storyboards:

• Privacy and security in the sharing space need to be addressed for some people

• Mobile solutions are encouraged for off-campus students

• Need to be caution on the usability of the design when proposing solution

Findings from Pharmacists

Biggest struggle: people come in to request a refill prescription when they could do it online AND sometimes don’t pick it up

• Pharmacists need to provide consultations for new prescriptions but students can reject 

• Most prescriptions are refills

• If picking up for someone else, authorization is needed through the phone or online

• Privacy is important

Analyzing the findings

According to the feedback, we realized that students need privacy and want shorter wait time in the shared space in the student health center. Notice that this user also points to the problem of efficiency. Since it is difficult to change the process of being seen by a doctor and thus reduce the waiting time in the process, we would like to focus on reducing pharmacy pickup waiting time.

Personas

Student's Persona

Pharmacist's Persona

Storyboards

Our storyboards were initially made based on the first round of observation rather than on the interview results. After conducting the interviews, we shifted our focus point from “improving the productivity during the waiting time” to “maximally reduce the waiting time” which more directly targeted the main issue we discovered. These two storyboards are actually consistent that they both want to help students find more time to do their study work, but are trying to do so from different perspectives.

Initial Primary Storyboard

Idea: Productivity Kiosk

• Provides dynamic wait times

• Desk attached to front of kiosk

• Side panels surrounding screen / desk

Chosen as primary in the interview because:

• Waiting is an observed issue

• Observed students trying to be productive

• Real-time feedback about wait times 

• Replaces existing static screen of wait times

• Improves privacy in the waiting room 

• Improving waiting experience

Final Storyboard

Idea: Auto Pharmacist (Our final idea)

• Decrease wait times

• Lockers attached for self-pickup

• Basic information for medications provided

Chosen as primary for final design because:

• Waiting is an issue because it exists, but not because people can't be productive during the waiting time

• Spatial constraints can not only be taken into account but also taken as an advantage as part of our design

• More conventional than other ideas, which will be easier for students to figure out the functionalities and use

Other Storyboards

Idea:

Appointment Scheduler

Problem:

Privacy / Security

Idea:

Wrist Band that notifies

you the approximated waiting time

Problem:

Costly

Idea:

Mobile + Kiosk

private scheduler

Problem:

Coordination with campus app and multiple users

Idea:

Prescription Locker

Problem:

Clarity of Use / Privacy as Bad as Assumed?

Low-fidelity Prototype

Sketches

Our first version of the sketch demonstrates the brief idea of including a medication locker to a machine with a touchscreen which will incorporate the core pain points we want to resolve. Our second version of sketches better took the space constraints into account, such that instead of making the kiosk smaller to fit in, we want to make the kiosk itself as part of the facility. As shown in the image on the right hand, the right side indicates the corner of the student health facility, where there is a consultation window. The kiosk is going to be a wall to protect privacy. On the left hand side of the kiosk is the original pharmacy window, where we would like to make the kiosk to replace and become an automatic pharmacy.

Kiosk body physical prototype

Based on the second version of the sketch, we use paper boxes to cut our first physical prototype of the kiosk.

Locker side

Kiosk and wall side

Interface paper prototype

This is a paper prototype which simply shows the basic user flow and functions that we would like to include in the touchscreen interface.

User Testing

Phase 1

In the first round of user testing, we used our paper prototype to ask the users about their general ideas on the physical kiosk body and the screen interface. The goal of this phase was to just gain general feedback about the most basic flow of our design. For the kiosk body testing, we found that there were some difficulties when we tried to let the users spatially imagine the settings because it was inappropriate to conduct a physical showcase inside the Student Health lobby. Besides that, our physical kiosk received generally good feedback. There are more problems found in the interface design:

• No significant difference between clickable and un-clickable buttons

• Name of the prescription on square frame makes it image-like view instead of text-based

• Not clear on what happens if the patient selects “refill”/ “prescription”

• Did not show the options of payments

In general, we received positive feedback on the big picture ideas and flow, but there are many details to be refined. 

In this phase, we did not conduct user testing to our secondary stakeholder-the pharmacist-because it is important for us to settle down the main user flow before deciding on the flows on the other user end.

Phase 2

In the second round of user testing, we used an almost real-size physical kiosk, and digital version of high-fidelity screen design. We implanted a tablet which has our clickable wireframes on Figma opened to allow the user to gain a more realistic experience on the design. To ensure that common flows are went through by the target users, we created three scenarios and asked the participants to follow:

• Goal of Scenario 1: testing the flow of picking up medication for oneself, and the flow of picking up some medication in one’s account

• Goal of Scenario 2: testing the flow of picking up medication for others, and the flow of picking up all medications in one’s account

•  Goal of Scenario 3 (for pharmacists):  testing the flow and potential timing problem of a pharmacist who conducts services at the other end

Problems we found:

​

By conducting this round of user testing, we did not only test our general flow, but also showed our design considerations to the users and saw their reactions. Here are problems we found:

• There was no way for the user to correct their errors, such as “back home”, or “exit”

• A “processing” screen was needed, in order to add realistic feeling

• Patients cannot remember the whole set of SSN numbers. Maybe the last four digits would be enough since that is eligible for most real-world scenarios and existing verification systems.

• Would hardly know and remember the other's PID (the student’s ID number) when you are picking up for them; there were also privacy concerns

• The red color in the disclaimer page makes patients feel like they did something wrong

• Duplicated selection of consultation choice for each medication, which is unnecessary since you need to wait for consultation any way as long as you selected “yes” for consulting one medication

• The option of receiving verification code via text was unclearly to be “clickable”

• A total amount of cost needed to be added

• A way to see some basic information about the refills so that if satisfying the patient can skip consultation even though one forgets some facts about the old medications

• Wanted to see all the medications at a time or it would be difficult to go back and forth to select the refills and new prescriptions

• There is unnecessary to input student’s account information once again for the payment since you are logged in already

• It was confusing that the screen both showed the pickup number and let you scan a barcode

• including one way for giving out pickup number would be clear and convenient enough

• Minor security concern on scanning the thumbprint for picking up medications (we demonstrated that this is less concerning because phones also uses thumbprints, and official student health service has sufficient credits of protecting students' information)

High-fidelity Prototype

Kiosk

The final kiosk prototype we created was designed to be large enough to cover the corner in the Student Health lobby, as shown in the left image. The blue arrows show corresponding pharmacy parts that the lockers will cover. The red circle on the left image shows the consultation window, which should be covered by the right side of our kiosk (the “privacy” wall). The wall on our kiosk covers the originally open window which is easily to be pry by the passers-by, providing a privacy space for consultations.

In the context: the pharmacy

Physical Kiosk Prototype

Note: the blue arrow indicates the original area in the student health center pharmacy that will be covered if our kiosk is implemented.

User’s Front View:

This is the main functional kiosk, which the users go to and interact with at the very beginning.

Patients touch the screen to enter their information and select prescriptions to pick up. They can use the card scanner to swipe their student ID card or debit/credit card as instructed. The thumbprint scanner is used to identify the users’ identity when needed. There is a fixed direction sign in front of the users on top of the screen, so they can use this information to find the lockers and consultation window.

At the end of the patient’s interaction with this section of the kiosk, they will receive a receipt with a barcode. This receipt is needed for the next section of the kiosk.

View of the Lockers:

After receiving a receipt with a barcode, the patient is directed to this section of the kiosk to receive their prescription.

The patient scans their receipt on the barcode scanner and the screen will show the locker number that contains the patient’s prescription. The locker will then automatically open with the prescription inside. 

Pharmacist’s View:

From this view a pharmacist will be able to see the status of the consultation line and a list of the prescriptions currently needing to be filled. 

Patients in the consultation queue can be selected and removed immediately before the consultation starts.

Also, by selecting a patient’s name, the pharmacist is prompted to enter a locker number. After entering an empty locker number, the pharmacist will put the prescription into the designated locker.

Patient Screens

Main

Pickup 

Additional step if picking up for someone else:

Consultation Disclaimer:

Medications/Consultation Selections

Note: there is no consultation option if you are picking up for someone else, while everything else stays the same

Payment w/ card or student's account

Note: there is no extra information entry if using a student's account and the payment will be automatically processed if clicked.

Printing Barcode and Ending

Pharmacist Screens

Main

Queue Management

Additional designs for the kiosk body

Locker Screens

Instruction on kiosk body on top of the touchscreen

Locker and privacy wall surface

Interactive Prototype

Due to the large number of screens in the interaction design, please experience the full-version clickable demo here ( “run” button on the upper right corner in this link): 

https://www.figma.com/file/RQZrZY7d8Du6c8lJkgAU2Bf3/DSGN100-A4-Moodboard-and-Style-Guide?node-id=11%3A0

​

Enjoy!

Design Principles

Moodboard

In the interview we got feedback on the dim light and compacted environment. So we want to create calm and soothing mood in our design.

Styleguide