Visual Design for Nurse Scheduling
Product:
Nurse scheduling tool for Carta Healthcare
Problem the product addresses:
The nurse administrator needs to easily see what upcoming shifts are understaffed so that they can staff up with on-call nurses who are available for a given timeslot
Why this problem?
To keep the hospital properly staffed with nurses at all times
Role in the project:
For this project, I joined on as a visual designer as part of a team of 3. The objective of the project was to create a Version 1 of the nurse scheduling experience and the team had gone through rounds of user research and low-fidelity / mid-fidelity mockups, with team members joining and churning from the project throughout.
Approach:
Reviewing what the team had done up until the point when I joined
To onboard onto the team, I read through existing documentation, past user research, and reviewed the low-fidelity mockups. This helped me understand the target users and the problem that the product is trying to solve. Throughout the project, I walked through numerous possible customer use cases to gauge from the design team what is and isn't a priority for the user base.
Research Design Systems
I researched how design systems are created and collected resources from designer case studies, Medium posts, and other networks where designers share professional insights.
First was to understand the overall process and steps of the design system creation process, as well as to distinguish how design system principles yielded different outcomes for different organizations.
Sample Design System Resources:
Some Examples of Design Systems Documentation:
Create a UI Inventory
Brad Frost was kind enough to include a template for creating a UI inventory, so leaning on that template I created a UI inventory for the team to build on, learning the different parts that comprise a design system at the same time.
To be frank, the UI inventory I created looked really basic, and we iterated on it as I got up to speed on visual design vocabulary.
A sample from my UI inventory, saved as a Sketch file. I isolated the components from the respective artboards so that we can easily identify where the component displayed in the application.
From here, the team pared down the UI inventory by consolidating each type of component on one artboard rather than including the source for that component.
We referenced this UI inventory throughout the project in order to see where we can consolidate similar components or apply consistent stylings if components are distinguishable from one another.
Brainstorm Branding Principles
The team convened to brainstorm principles that would guide the visual design process, looking at competitors in the healthcare industry. During the brainstorm, I asked questions about the needs and goals of the user base and this prompted us to include more user-centric guidelines specific to the audience.
We agreed on the following guidelines:
Issues should be obvious, with high contrast
Avoid full flatness in order to visually prioritize functionality
Type size makes it easy to read
Optimized for older audience
Simple, with complexity hidden
Clean, welcoming aesthetic
Trustworthy, authoritative
Calming
Build a Color Palette, Type Scale, Grid System
With the branding principles in mind, the color palette would stick to cool (perceived to be calming) colors except for alerts that nurses would need to quickly identify from the screen.
Assign Components to Design
Between the team, we identified the following components to divide and conquer in order to get high-fidelity designs to the client in a rapid turnaround time (2-3 weeks). I worked on the header bar, left-hand navigation and mini-calendar. To keep ideas freshly flowing, we traded different components amongst team members after several rounds of designs
Dividing and conquering the visual design for the Day View
We focused on one screen of the application (the view for looking at a day's schedule) before applying agreed-upon stylings to the rest of the application.
Rounds of Design Critique
We also did quick rounds of design critique, discussing the role of color to highlight actions that nurses should take, how shadows can make certain functions pop out, and so on.
During our rounds of critique, I brought up corner use cases and sussed out more information about the nurse administrators who would be using the application, asking questions related to the age and type of technology available in hospitals (dated desktop computers that are several years old), the immediate environment (high pressure, prone to distraction, continuous context switching) in order to make sure that the visual design accounted for the user.
In the example below are my rounds of iteration for designing the active state on the current date and how alerts for the current date or upcoming dates would look visually.
Different designs for the active state of viewing the current date, in this case July 26.
How might a nurse administrator easily identify alerts for the current and upcoming dates?
My colleague taught me that if ideation was a struggle for me, I can solve for this by creating variants that slightly deviate from the first examples I created. This was a really handy tip that I leaned on in order to improve my visual design skills.
In the example on the right, I explored numerous stylings that could fit the branding principles of a calming experience for a nurse to view while working in a frenetic environment.
Results:
We settled in a mild gradient for a contemporary feel, with color used for sections of the screen that the nurse administrator would need to glance at again and again throughout their shift.
Learnings:
I had a really steep learning curve for this project as this was one of the first design projects I took on after my tenure as a product manager. In order to provide immediate value for the team as I ramped up on learning visual design principles, I would chime in for clarifying questions during client calls in order to maintain a positive working relationship between the design team and the client and ghost-wrote emails for the design lead so that we effectively communicated our design process. I also played the role of cheerleader for a team that experienced fatigue in the strategic shifts and pivots prior to my joining the project.
Prior to this project, I worked primarily with one lead designer in a partnership and we quickly design one set of features at a time with numerous rounds of user testing, giving the visual designer full autonomy on the look and feel. Now I'm better able to critique specific elements of high-fidelity design and execution and connect it back to customer use cases.
This was also my first time working with multiple designers for the same project and I learned how work could be assigned so that we could generate several options for components or screens.