Responsive web for St. Patrick’s Hospital

My Role

UX Designer


1 month


Adobe XD



Creating a scheduling flow for employees in a hospital to be able to choose or switch the shifts they preferred, and manage their private and work schedules easily on the website. 

Meet our user



  • Age: 28
  • Education: Nursing school
  • Occupation: Nurse in ER with 3 years of experience

“I take care of your health, and so does mine”


  • A flexible and clear schedule
  • To be able to see co-workers who work on the same day
  • Work-life balance


  • Long working hours
  • Uneven distribution of trainees and full-time nurses
  • Not able to pick the same day off with her girlfriend

Shelly's pain point

As a nurse who takes lots of shifts, I want to schedule my shifts as I wanted, so that I can enjoy my work and my personal life more.

User Journey Map


I conducted “Crazy Eight” to brainstorm 8 possible ideas for the wireframes of the homepage, and by comparing the designs, I highlighted some elements that are suitable to the design and could result in a better user experience. 

From paper to digital

I then brought my ideas to Adobe UX and created the interactive lo-fidelity prototype for 5 participants and conducted the first usability study. 

Homepage of pad

Homepage of desktop

User Research

After the first round of usability study with 5 participants with shifts-scheduling experience or working experience in hospitals, I organized the feedback via Miro and came up with insights. 

Major changes based on the feedback

Iteration #1

3 out of 5 users did not reach the end of the user flow, which means it needs to be clearer. 

Therefore, I added the progress bar on the top so that users know which step they are at and what comes next. 

Iteration #2

2 out of 5 participants showed confusion regarding the “work schedule” and “private schedule”.

Therefore, I combined them into one. In this case, the employee could easily check their schedule of the day instead of switching between work and private schedules.

Iteration #3

4 out of 5 participants mentioned the problems of this scheduling flow in reality. For example, what if people all want to work on the same day, or what if people wanted to make changes. 

Therefore, I added a new section for employees to switch shifts. If the shifts they choose have conflicts with others or their personal schedule, the system would notify them so that they could notice immediately and switch shifts with colleagues. 

Sticker sheet

High-fidelity prototype


"I'm impressed that you're interested in solving such problems for us!"

"I believe this product would truly make some difference in my work life."

What did I learn?

In this project, I was using Adobe XD to finish all the designs even though I’m not familiar with XD, I still managed to try out different tools. It is my first responsive website, and I believe that it is very essential nowadays because it helps attract more users. I learn that it is more helpful to create elements, such as grids, buttons, and footers, on an individual page and use the library function in XD which can keep the consistency in the design.