Branding + DeSIGN SYSTEMS

Intermountain Health Rebrand

Intermountain Health Rebrand

Intermountain Health Rebrand

Intermountain Health has expanded and evolved over the last 50 years as a national hospital spanning seven western states. As technology has transformed healthcare throughout this time, so has its brand. This launch included creating an entirely new design system, brand guidelines, marketing assets, and design libraries for Intermountain’s different web and mobile apps.

Intermountain Health has expanded and evolved over the last 50 years as a national hospital spanning seven western states. As technology has transformed healthcare throughout this time, so has its brand. This launch included creating an entirely new design system, brand guidelines, marketing assets, and design libraries for Intermountain’s different web and mobile apps.

Context
Intermountain Health

Intermountain Health is a national hospital that has 385 clinics and 33 hospitals in the West primarily in Utah, Idaho, Nevada. In 2022, Colorado-based SCL Health and Intermountain Health merged, adding to it's expansion in the Intermountain West.

Timeline

2023: 2 months

ROLE

UX/UI Designer

Tools

Figma, Adobe Creative Suite, and Jira

Team

3 Teams with 1 Designer, 1PM, 3 Buisness Analysts, 5 Engineers,
and 3 QA'S

Product
Intermountain Brand

Intermountain Health had last updated it's brand in 2005 but since then continued expanding in many facets. In 2023, Intermountain acquired and merged with several hospitals under SCL Health, each with its own unique identity. This merger prompted senior leadership to ensure the public understood that all hospitals now operate as one entity as Intermountain Health. As a result, our senior leaders chose our design team to collaborate with a third-party agency to finalize branding for an aligned new brand identity and design system.

How can we evolve Intermountain Health and SCL hospitals into a unified brand identity and develop a scalable, cohesive design system?
How can we evolve Intermountain Health and SCL hospitals into a unified brand identity and develop a scalable, cohesive design system?
How can we evolve Intermountain Health and SCL hospitals into a unified brand identity and develop a scalable, cohesive design system?
Objectives
Our North Star

Audit & Integrate

Audit & Implement new branding into all three page levels

Standardizing

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

Design System

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

Timeline
Roadmap

As our design team collaborated with the brand agency, our product leaders formed a committee consisting of selected engineers, product managers, and business analysts to develop our strategy for implementation across all of Intermountain's digital experiences and applications. Alongside three other designers, each of us led a team focused on our designated area of expertise.

Constraints
challenges

Time Limitation

The original plan to phase the brand launch over a year was shortened to two and a half months due to its early announcement.

Framework Discrepancies

Our engineers reported framework inconsistencies, estimating more work than expected due to differing terminology and previous guidelines.

Accessibility Concerns

During our collaboration with the brand agency, we emphasized color accessibility, typography, and component use cases, noting that many colors had insufficient contrast for our healthcare organization's standards.

Contrasting Guidlines

While the brand agency covered many areas, their guidelines for our digital platforms were minimal. We noted accessibility concerns with small typography and the use of a serif font, which could hinder page load times and screen adaptability.

Research
uX/uI Audit

We audited three levels of our page for branding-prioritization. This audit was done for web and mobile versions and all page levels. This facilitated our engineers in implementing branding updates seamlessly, as they integrated them into their code library and unified their framework.

Design system
Typography

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
Iconography

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
color Accessibility

I had the opportunity to implement the brand colors ahead of our updated timeline in which I was able to recommended the significant change to the primary and secondary colors for a main button component.

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)

Design system
Scalability Components

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.

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.

Wrieframing & Prototyping
Design Tokens

We faced challenges with the code framework and naming conventions, needing to eliminate inconsistencies and streamline workloads.

Our design team collaborated with development to update the code library, identify discrepancies, and standardize terminology for designers and engineers. While this improved documentation clarity, it remains a work in progress as we address edge cases and refine the frameworks. This is an example of our design tokens.

Refelection
Impact

Successfully launched our brand release in 2.5 months.


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

Successfully launched our brand release in 2.5 months.


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

Successfully launched our brand release in 2.5 months.


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

Refelection
Takeaways

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 just a cliche

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 breeding 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.

Browse more work

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 🐶