Project Overview
As part of a ground-up redesign of their platform, Trio Health also wanted to update the product's look and feel. I worked closely with the company's founders and product owners throughout the process.
My Role
- Visual Design Lead
- UI Design
- Interactive Prototyping
- Agile Development Collaboration
- Design QA
Process
Use Words
My first design goal was to understand how the stakeholders abstractly conceptualize their brand. Words and descriptions of the brand are often easier to define than visuals, so I started the team with a brief survey about the brand. Leaning heavily on personification, I asked the stakeholders to describe the brand in various ways.
Part of the survey included a list of adjectives. I asked the team to pick ones that most strongly correlated with the brand, giving the team a common language to use. I then ranked the results and shared them with the team.
Style Tiles
Once I understood the general character of the brand, I leveraged the list of adjectives to create style tiles. From the list I created 3-4 word clusters of adjectives that created a specific tone. Each of these clusters became a Style Tile. My goal for the first iteration of style tiles was to 'get the dart on the board'. As with all first client feedback sessions, it's an opportunity to understand aesthetic preferences, as well as scar tissue from previous experiences.
The 'business-partner' health care tile. This tile was the most consistent with the current brand and mainly served to add a secondary color and modernized.
The 'academic-excellence' health care tile.
The 'patient-friendly' health care tile.
As I expected, the team wanted to maintain many cues from their existing brand. However, the process of creating alternate styles garnered useful feedback on the team's preferences, and helped me explore additional, related styles.
Iterations
During the platform redesign, other priorities came to the forefront, causing the look and feel to take a back seat. Putting the visual design on hold came with a number of process advantages: During the intervening time our team improved our working relationship, helping us to reach consensus more quickly and anticipate each others needs. Also, by the time we came back to visual design, the page content was completely defined, making it easier to compare options.
When we reconvened on look and feel, I offered the stakeholders multiple options again. While the primary direction was already established, defined page content helped the team compare more nuanced options.
At this stage it was clear that the classic blue theme was our target. However, the alternates helped us have useful discussions around button styling, selected states, and emphasis on different regions of the screen.
The final design came together through detailed design critiques within the strategy team, a last review with the stakeholders.
The design was communicated to the development team through Invision's clickable prototypes and inspect function, regular meetings, and design QA.