Design System
University Hospital has long been a cornerstone of healthcare in the community for over 150 years. The hospital's mobile app, launched 10 years ago, was designed to streamline communication, appointment scheduling, and health information access for young patients and their families. However, over time, the app’s design system and visual identity became outdated, leading to a poor user experience (UX) for both children and parents.
The original design system did not align with modern mobile interface standards, and the visual identity no longer reflected the hospital’s values of innovation, care, and inclusivity.
Challenge
The key challenges that led to the need for a redesign included:
-
Outdated Visual Design: The original design used dated color palettes, fonts, and icons, which did not resonate with younger users or their families.
-
Lack of Consistency: The app’s interface was inconsistent in terms of button styles, typography, and layout, creating a disjointed and confusing experience.
-
Inaccessible Elements: Certain design elements were not optimized for accessibility, making it difficult for some parents or children with disabilities to use the app.
-
Brand Misalignment: The app’s visual identity did not fully reflect the hospital’s modern, friendly, and innovative brand. The app felt clinical and sterile, which did not align with the hospital’s patient-first approach.
Goals
-
Ensure Accessibility: Ensure that the design is inclusive and accessible for users of all abilities, including those with visual or cognitive impairments.
-
Align with Hospital Branding: Update the visual identity to align more closely with the hospital’s modern, patient-centric brand values.
-
Create a Consistent Visual Language: Establish a cohesive set of design guidelines that would result in a seamless, intuitive, and accessible user experience for patients and parents
Process
Audit & Research
We focused on auditing similair apps to create a refreshed imaging for mobile assets.
Vision & Strategy Development
The Marketing department had a vision for the newest version of the company's visual styling.
Ideation
I worked off Fluent 2.0 as a basis for the design system.
Design
Using Figma, I created a file to host all neccessary mobile assets for the Design System.
Navigation Update
The existing navigation system was disorganized, cumbersome, and outdated, with limited options for personalization or ease of access. Young patients and their parents frequently reported difficulties in finding the information they needed quickly, especially under stressful circumstances, such as during appointments or medical emergencies. This case study outlines the process of updating the mobile navigation of University Hospital’s pediatric app to improve usability and enhance the overall patient experience.
Challenge
-
Complex and Clunky Interface: The app used a deep, multi-level menu structure that required multiple steps to access critical features such as appointment scheduling, medical records, and telemedicine services.
-
Inconsistent Navigation Patterns: There was a lack of consistency in how users navigated through the app, making it difficult for both children and parents to learn the interface.
-
Unclear Prioritization: Key features like telemedicine or appointment reminders were buried in the app, making them hard to access quickly, particularly in emergencies.
Goals
-
Simplify and Streamline Navigation: Create an intuitive and efficient navigation structure that allows users to quickly access essential features.
-
Leverage Modern Mobile Navigation Patterns: Utilize modern design patterns, such as bottom navigation bars, gesture navigation, and simplified flows, to make the app more intuitive.
-
Promote Key Features: Ensure that important features, like appointment reminders and telemedicine consultations, are prioritized and easily accessible.
Process
Audit & Research
The first step was a deep dive audit of all available pages and features currently within the app.
Vision & Strategy Development
Conversations about the future of this app hwere had to create a roadmap to determine the desired endstate of this application.
Ideation
We took the ideas and data that was collected to determine the main pages of the application to prioritize navigation:
1. Appointment Scheduling
2. Accessing Test Results
3. Messaging Providers
Design
I created a sitemap to organize all relevant pages while ensuring there was space for growth for future changes.
Mobile Page Designs
RUSH has been a leading healthcare provider for the Chicagoland are for over 180 years. The hospital's mobile app, which serves thousands of families, has provided important functions like appointment scheduling, medical records access, and communications with doctors.
However, the app's user interface (UI) and layout have not been updated in the past decade, leading to a clunky and outdated user experience. This resulted in frustrations for both young patients and their parents, especially when navigating important features like medical records, appointment booking, and virtual consultations.
Challenge
-
Inconsistent Layouts: The app had multiple layout inconsistencies, with pages featuring different font sizes, button styles, and spacing. This lack of consistency made the app feel disjointed and complicated.
-
Cluttered Pages: Important information, such as upcoming appointments and medical records, was often buried under too much text or presented in dense lists, making it difficult for users to find what they needed quickly.
-
Poor Mobile Optimization: The UI wasn’t optimized for modern smartphones, leading to poor performance, misaligned content on larger screens, and the need for excessive scrolling or zooming.
Goals
-
Outdated Visual Design: The app’s aesthetic was old-fashioned, using rigid layouts and basic, pixelated graphics. It lacked vibrancy and appeal, especially for younger audiences, which made it feel less engaging and inviting.
-
Inconsistent Layouts: The app had multiple layout inconsistencies, with pages featuring different font sizes, button styles, and spacing. This lack of consistency made the app feel disjointed and complicated.
-
Cluttered Pages: Important information, such as upcoming appointments and medical records, was often buried under too much text or presented in dense lists, making it difficult for users to find what they needed quickly.
-
Poor Mobile Optimization: The UI wasn’t optimized for modern smartphones, leading to poor performance, misaligned content on larger screens, and the need for excessive scrolling or zooming.
Process
Audit & Research
I needed to understand an appropriate layout which meant understanding what other apps have done and who my users are
Ideation
With the research, we found that users wanted a better overview of their medical information like upcoming appointments and billing, as well as better accessibility features.
Personas
We used Personas to create models of how we wanted to test accessibility features.
Designing
We went through multiple rounds of iterations
User Personas
Emily, the Busy Parent:
Manages her child’s appointments and vaccinations while juggling a tight schedule.
Needs quick, on-the-go access to healthcare tools.
Rico, the Chronic Illness Patient:
Regularly checks test results and communicates with her care team.
Needs real-time updates and easy access to her medical history.
Jaime, the Elderly Patient:
Relies on regular checkups and medications.
Needs a simple, readable interface and reminders for appointments and prescriptions.
Information Architecture
Information Architecture
There were two main goals when developing the information Architecture
-
Streamlining the navigation by prioritizing frequently used features (e.g., appointments, medical records, prescriptions) in a tabbed layout.
-
Consolidating scattered features into logical groupings, such as a unified myHealth Hub for medical history, documentation, and more..
Each main iteration involved an inclusion of more elements.
Low-Fidelity Wireframes: Focused on restructuring the interface for better flow and hierarchy.
Mid- to High-Fidelity Prototypes: Included visual elements like colors, typography, and interactive elements to simulate user interactions.
Key features included:
-
Home Dashboard: A summary of upcoming appointments, recent test results, and health notifications.
-
Appointments: A step-by-step guided process to schedule, modify, or cancel appointments.
-
MyHealth: Easily accessible records, shared information, and documentation
-
Messaging: Built-in chat for communicating with care providers.
-
Test Results: A quick and convenient option to quickly access past test results and result trends.
-
Search: whether for providers or pages, an easy to use search option that allows users to quickly find information
-
Accessibility Features: Adjustable text sizes, voice navigation, and color contrast options.
Wireframing
Role
UX Designer
Timeline
8 weeks
Tools
Miro, Figma
