Life.io Brand Refresh

UX & UI Design | Branding & Identity | Prototyping & User Testing

THE CHALLENGE

As the Life.io brand continues to grow, it became apparent that the visual identity of the brand wasn't aligned with the direction of the product. In early 2017, the Life.io team decided to go through a brand refresh. The result is a centralized and bold design system which allows for further expansion for web and print. As a health and wellness engagement product, the additional iconography, vibrant photography, and other brand elements add a unique personality and a human touch to the brand.

THE APPROACH

  1. I conducted a series of remote workshops, internal surveys and usability tests to evaluate Life.io's core brand attributes
  2. Based on these results, I developed a set of Core Brand Attributes for Life.io's End Users and Customers
  3. I used these Core Brand Attributes to develop a centralized visual identity for the Life.io brand
Life.io template

THE GOAL

We started out on this brand adventure with the centralized goal of expanding the core palette, defining a consistent visual identity and optimizing the look and feel for print, web and mobile. We wanted to further define the Core User and Customer brand attributes. These attributes would help us align the visual identity to our end user and customer attributes. Finally, we would develop a design system, including style guides, based on these findings.

USER RESEARCH

We started the research project by defining the Core Messaging and attributes. We weren't aligned on the Core Messaging, so we defined core statements and reviewed the effectiveness of each of the messages.

Life.io Core Messaging

Question: "Which statement do you find to be the most motivating?"

90%

chose "Engage, Connect, Advise"

messaging

Life.io Brand Messaging - Users

The Life.io team collaborated during a remote workshop to develop the core brand attributes according to our users. The team met during a follow-up session to narrow the attributes to the top 6. We used these attributes to evaluate the brand color palette options.

  1. Appealing
  2. Accessible
  3. Empowering
  4. Tailored
  5. Intuitive
  6. Integral

Life.io Brand Messaging - Customers

The Brand Messaging statements were slightly different for our customers. We wanted the brand to appear more as a partner and coach, but also the authority.

  1. Tailored
  2. Integral
  3. Clear
  4. Connected
  5. Insightful
  6. Consultative

Color Palettes

We developed a set of color palettes based on our Core Brand Attributes. These palettes can be applied to print, web and mobile. They are better optimized for user interfaces and have more flexibility to be used for interactive elements, messages and icons/illustrations.

We decided to keep purple as the central brand and action color for the application for its unique characteristics and strength.

  1. Purple symbolizes strength and power
  2. Purple is a blend of the energy in red as well as the coolness of blue
  3. Uses purple as the central brand color (to align with current brand)
  4. Brighter and more engaging palette
  5. High contrast palette
  6. High contrast palette is better suited for user interfaces
  7. More versatile palette for marketing collateral, website, icons, data visualization, and illustrations
palettes

Color Palette Exploratory Research

Question: "Which palette do you find to be most aligned to the core attributes?"

47%

of participants believed that Palette 4 was the most aligned to the core attributes of Appealing, Accessible and Empowering

  1. "The colours are very different among the others, this way you can totally understand the chart"
  2. "It looks more appealing, bright, and visible"
  3. "It's bold and strong the others seemed dull and faded. I think the bold one the best, makes me feel strong."
  4. "The colours are more vibrant, so they emphasize positive life changes!"
  5. "I think this option has stronger colors which gives power to the page"
palette 4
palette 4
palette 4
"The colours are more vibrant, so they emphasize positive life changes!"

Marketing Site User Feedback

To further test our assumptions, we conducted additional usability research on marketing materials. We used the Microsoft Desirability Method to evaluate users' perception of the aesthetic quality of the materials.

Desirability Testing

We asked participants: "Which words do you think best describe the layout and color palette of the site? Please select all that apply."

Top Responses:
  1. Appealing (60%)
  2. Accessible (50%)
  3. Tailored (30%)
Other Top Responses:
  1. Empowering (20%)
  2. Intuitive (20%)
  3. Creative (20%)
site

Internal Brand Feedback

I asked the internal team which traits they felt represented the brand. "Optimistic", "Thoughtfully built" and "Insightful" were top choices.

Question: "List 3 traits which represent our brand."

blog
blog

Brand Assets

Based on this feedback from users, usability tests and the team, I developed enhanced brand and user interface guidelines.

style style style style