Intermountain Health Brand

A rebrand for a national hospital providing care to the Intermountain West with 33 hospitals and 385 clinics.

In 2023, after merging with SCL Health, Intermountain Health rebranded to unify its hospital brands. Our team partnered with an agency to create a cohesive brand identity, design system, and marketing assets, ensuring a seamless launch across all platforms in two months.

Problem

We needed to determine how to swiftly implement the rebrand across physical and digital platforms while ensuring consistency, accessibility, and collaboration with Hugo & Cat.

Outcome

Our team worked closely with brand agency, Hugo & Cat to craft a unified brand identity & design system, which included brand guidelines and new design system.

Problem

We needed to determine how to swiftly implement the rebrand across physical and digital platforms while ensuring consistency, accessibility, and collaboration with Hugo & Cat.

Outcome

Our team worked closely with brand agency, Hugo & Cat to craft a unified brand identity & design system, which included brand guidelines and new design system.

Problem

We needed to determine how to swiftly implement the rebrand across physical and digital platforms while ensuring consistency, accessibility, and collaboration with Hugo & Cat.

Outcome

Our team worked closely with brand agency, Hugo & Cat to craft a unified brand identity & design system, which included brand guidelines and new design system.

Timeline

May 2023 - July 2023

ROLE

UX Designer

Team

3 designer, 3 PMs, 3 BA, and 18 engineers

tools

Figma, Adobe Creative Suite, and Jira

How can we evolve Intermountain Health & SCL Health into a unified brand identity and develop a scalable, cohesive design system?
Constraints Shaping the Process

The brand agency provided foundational guidelines, but gaps in digital specifications, coupled with a tight timeline and compatibility issues with existing frameworks, introduced unique constraints that required creative solutions throughout the process.

Limited Time

A two month deadline, due to its early announcement instead of launching in phases within a year.

Framework Discrepancies

Framework inconsistencies created more work than anticipated due to differing terminology and outdated guidelines.

Differing Guidelines

There were minimal guidelines for our digital platforms, despite the brand agency covered many areas. We identified issues with component sizing, typography, color palette, and overall adaptability across various devices and screen sizes.

North Star
design principles

Audit & Annotate across levels and platforms

Audit, annotate, and mockup all three page levels for review and implementation by engineers

Standardizing Assets and Framework

Ensure consistent implementation for all components in framework and remove any inconsistencies

Design System Curation

Craft our design system and library for Consumer Digital Experiences based on branding guidelines

UX/UI Audits
for Brand Integration

We audited three levels of our page for branding prioritization across web and mobile, focusing on design assets such as typography, color, and UI elements. The audit provided detailed guidelines for engineers to seamlessly integrate updates into the code library and unify the framework.

Navigation & Logo
Main navigation with enhanced icons with new style and color, a new logo, and simplified resources.
Provider & Messaging Widget
Providers and Messaging widgets were enhanced with new buttons, typography, colors, and spacing
Lab Results & Appointment Widget
Lab & Appointment Widgets were updated with new calendar styling, typography, colors, and spacing.
Search Bar was also updated with new icons, and user avatar style.
Design system
Refining Typography for
Responsive Design and Scalability

Before

The brand agency provided us with a font package containing a serif and sans-serif font to implement. However, it posed a challenge due to its sizing, accessibility, and device adaptability.

After

We created and recommended a larger font, by 2 pts recommended and a higher contrast for typography color. In addition, the serif 'Rector' to not be utilized for responsive design and only for main static images.

Design system
Adjusting Icons for Clear Status
Indicators and User Clarity

Before

The main iconography was provided by the brand agency, along with use cases for gradient-heavy colors in the iconography. They also recommended using their third-party vendor for our icon system, raising concerns about device adaptability, compatibility, and potential impacts on user adoption.

After

We recommended using color gradients in iconography specifically for navigation icons to indicate 'active' status, rather than applying them to all icons in the app. Additionally, we suggested selecting Cobalt for informational icons and Dark Blue for indicating 'inactive' status.

Design system
Strengthening Color Contrast
for Accessibility and Button Visibility

Before

As previously mentioned, the color palette posed a challenge in meeting accessibility standards; the close similarity between the primary color and the primary button color compromised clarity and could hinder users' ability to identify key interactive components.

After

We recommended a higher contrast for typography color and switched the use cases of primary and secondary colors for main button components to address color overload, enhancing button visibility and ultimately increasing user engagement. (Typography color recommendation can be viewed in Typography section)


I had the opportunity to implement the brand colors ahead of our updated timeline. During this phase, I recommended the significant change to the primary and secondary colors for the main button component.

Design system
Increasing Button Component Size
for Improved Mobile & Web Responsiveness

Before

Our button components were provided by the branding team. However, as previously described, the sizing was very small for mobile screens and brought concerns for visibility and touch responsiveness.

After

We optimized responsiveness by increasing width, while creating distinct components for web and mobile to enhance visibility, touch responsiveness, clickability and usability.

Design system
Simplifying Button States to enhance
Visual Clarity through Color & Shadow Adjustments

Before

Our button components were provided by the branding team. However, as previously described, the colors were changed not only in their main state but also in other states. We created and recommended use cases for text buttons and hover states for all buttons.

After

We removed gradients from all component states, opting for solid backgrounds or double outlines to signify state changes. Text links will be utilized within the body and paired with solid color buttons when positioned outside of paragraphs. Additionally, we introduced a new component that features a refined drop shadow.

Creating Design Tokens
for a Unified Framework

We encountered challenges with the code framework and naming conventions, which we worked to streamline. Collaborating with development, we updated the code library, standardized terminology, and improved documentation clarity. While progress was made, the framework is still evolving to address edge cases

Reflection

Documentation was stability in chaos

Documentation was an anchor in ensuring consistency in designs, fixing bugs and reviewing finals as we moved at lightening speed.

Collaboration is key, not a cliché

As often as we preached, this tested our ability to dynamically collaborate as a team in our hub, across departments and the entire organization. It truly was all hands on deck and amazing to see the synchronization.

Limitation breeds creativity

With limited time, we were able to push ourselves to be more creative in our solutions. Rather than doubting, we prioritized rapid brainstorming that led to unexpected solutions.

Successfully launched our brand release in 2 months.


Now available to the 500,000k+ users through IntermountainHealth.org & the Intermountain Health Patient Portal.

Let's Chat!

Navigation

Case studies

© 2024 – Alondra Diaz

Made with love

& 'Chai' kisses 🐶

Let's Chat!

Navigation

Case studies

© 2024 – Alondra Diaz

Made with love

& 'Chai' kisses 🐶

Let's Chat!

Navigation

Case studies

© 2024 – Alondra Diaz

Made with love

& 'Chai' kisses 🐶

Let's Chat!

Navigation

Case studies

© 2024 – Alondra Diaz

Made with love

& 'Chai' kisses 🐶

Let's Chat!

Navigation

Case studies

© 2024 – Alondra Diaz

Made with love

& 'Chai' kisses 🐶

Let's Chat!

Navigation

Case studies

© 2024 – Alondra Diaz

Made with love

& 'Chai' kisses 🐶