Solution to spacial constraints

for UCSD student's health center

A Kiosk Design | UCSD course: Dsgn 100 Prototyping


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, the constraints of  existing space-limited facilities  make the service compacted, inefficient, and lack of privacy.  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

​Existing problems


Time consuming
Insufficient infrastructure
Limited healthcare program
Monitoring health

​Existing solutions


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





Observable or obvious problems



​Generate some solutions

​Interview with storyboards

Visible side

Users' needs

Invisible side





  • Confusing visiting process

  • ​Dark and small space

  • ​Long waiting time

  • Not picking up prescriptions

  • Have to ask to consultation

  • Long picking up process


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

Need privacy and want shorter wait time by having efficient service when picking up medications




Student's Persona



Student Athlete


  • Motivated

  • Efficient

  • Savvy

  • Empathetic

  • Social



  • Get in and out as quickly as possible so he can finish homework and make it to the shift on time

  • Pay a reasonable low amount for these unintended visits that occur from practices

  • Have access to commonly used medication for injuries without having to see a doctor

Tom is a third year Math major who is on a full-ride scholarship for track. He's lived off campus since freshman year to save money, and works at Peet's on-campus when he's not studying or at practice. He also loves going to Trivia Night at Hops and Salt every week with his friends.

Tom is competitive and motivated to doing his best at practice every time. He visits the health center about 1-2 times a month from smaller injuries. However, he hates the waiting and refrains from going if he thinks his injury/sickness will blow over quickly. Tom needs to feel more comfortable going when necessary.

Pharmacist's Persona



  • Helpful

  • Caring

  • Innovative

  • Intelligent

Robert has lived in San Diego his whole life. He has been working at SHS since he graduated from UCSD with a Doctor of Pharmacy degree. He loves the city and the school and what's best of its residents.

He is frustrated with how inefficient the current pharmacy is set up, and wants to see a drastic change in how prescription are handled


  • Improve the efficiency of the pharmacy

  • Get better at programming

  • Combine skills as a pharmacist and a programmer to help people






Shifting focus after interviews

First thought before interview:

Improving the productivity during wait time

  • Provides dynamic wait times

  • Desk attached to front of kiosk

  • Side panels surrounding screen / desk

Idea: Productivity Kiosk

  • 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


Adjustment after interview:

maximally reduce the wait time

Idea: Auto Pharmacist

  • Decrease wait times

  • Lockers attached for self-pickup

  • Basic information for medications provided


  • 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


Low-fidelity prototypes


Recalling the spacial constraints

As shown in the image on the right hand, the right side indicates the corner of the student health facility, where locates a consultation window. The kiosk is going to be a wall to protect privacy. 



Kiosk body physical prototype

Locker side


User testing

Kiosk and wall side

Phase 1


Paper prototypes


Gain general feedback about the most basic flow of our design


Problems found:

  • 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

Phase 2


Almost real-size physical kiosk, and digital version of clickable high-fidelity prototypes


Gain specific feedbacks for different flows under different scenarios

Scenario 1

Scenario 2

For a student picking up medication for oneself

For a student picking up medication for someone else

Scenario 3

For a pharmacist's flow and timing

Problems found:

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

  • A “processing” screen was needed,

  • Patients cannot remember the whole set of SSN numbers and others' student ID

  • The red color misrepresent warnings

  • Duplicated selection of consultation choice for each medication

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

  • Add a total amount of cost 

  • Add a way to see some basic information about the refills

  • Wanted to see all the medications at a time

  • There is unnecessary to input student’s account information once again for the payment

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

  • 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)

Final Design



In the context: the pharmacy

The kiosk covers the consultation window

Our kiosk locates here!

Physical Kiosk Prototype


Scanning instruction and locker number display screen




Main interaction window


The “privacy” wall


Consultation window (behind the wall)

咨询窗口 (墙后方)

​Barcode scanner


Front VIew

The touchscreen




​Card slider


​Fingerprint scanner


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.

Pickup side



Screen to show locker number


​Receipt scanner


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. 

Pickup side

​Pharmacist locker access


Pharmacist screen


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


We designed our own logo for the system



Select subject for picking-up

Users choose to pick for themselves or others

 Additional step if picking up for someone else: 

​Alternative without ID

​If the student brings his or her ID, they swipe the ID with the slider on the kiosk to login; If not, the student can use the alternatives to login


 Confirm identity 


 Enter SSN 

​ Medicine select  

​ Medicine confirm  


Accept or Reject


For consultation service, the students can select whether they need a consultation by clicking accept or reject, and confirm it by viewing the color or signs in the confirmation screens

 Consultation Disclaimer: 

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

Double confirmation

Payment is always a careful process so that we design a extra confirmation page so that the users trade less time off  back if make a mistake

 Payments select  

 Payments confirm 

 Swipe to pay  

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

 Input to pay  

Didn't bring a card?

​If the student doesn't want to pay with his or her student account but doesn't have a credit or debit card with he or she, he or she can manually input the card information to pay

 Print receipt  


Print receipt for picking up

A student takes his or her personal receipt for this case so that they can use it for opening the lockers to pick up medicines

Pharmacist Screens

​Simple screen that matches workflow

For the pharmacist's home screen, we make it straightforward to manage so that they can hit their desired actions quickly to mange the medications and students for consultation

 View queue situation  

 Manage consultation  

 Assign locker number  

 Confirm consultation  


Additional designs for the kiosk body

Locker Screens

Instruction on kiosk body on top of the touchscreen

Locker and privacy wall surface


Interactive protypes

Due to the large number of screens in the interaction design, please experience the full-version clickable demo 




  • Calm

  • Secure

  • ​Soothing



 © 2020 by Jing Lang. 

  • LinkedIn
  • Instagram
This site was designed with the
website builder. Create your website today.
Start Now