Branding + DeSIGN SYSTEMS
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.
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 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.
Design system
Typography
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. We created and recommended a larger font, by 2 pts. In addition, the serif 'Rector' to not be utilized for responsive design and only for main static images.
Design system
Iconography
The main iconography was provided by the brand agency along with use cases for the colors in the iconography. They also recommended using their third party vendor for our Icon system. However, we collaborated on the use cases for color gradients in iconography, to be used only on the main page dashboard rather than throughout the app.
Design system
color Accessability
As previously mentioned, the color palette posed a challenge because it initially did not pass accessibility standards when tested. We created and recommended a higher contrast for typography color, switched primary and secondary color use cases for main components, and changed use cases for the secondary color palette. Additionally, 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.
Design system
Scalability Components
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, hover states for all buttons, and mobile sizing.
These use cases involved using text links only with another solid color button, adding a shadow to its disabled state, and utilizing it only to highlight within the text body. Additionally, we removed gradients from all hover states and instead changed the background to create the hover state. Additionally, for mobile components, we removed states and created mobile-responsive sizes for buttons.
Wrieframing & Prototyping
Annotations
In our hand-off documents, we included redlined branding updates for both web and mobile versions of all page levels. This facilitated our engineers in implementing branding updates seamlessly, as they integrated them into their code library and unified their framework.
Wrieframing & Prototyping
Design Tokens
As previously mentioned, our team faced a challenge with the code framework and naming conventions. We needed to eliminate inconsistencies while also streamlining the workload for our teams. Our design team collaborated with the development team to update their code library. Together, we identified discrepancies and provided guidance on terminology and naming conventions to ensure consistent references for both designers and engineers. This helped ensure that documentation was interpreted accurately and standardized across the teams.
Refelection
Impact
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
