Project Summary
A healthcare insurance start-up client engaged us to research branding for their new company. We had worked with the client stakeholder previously, so they engaged us again to complete basic design elements for this new company's website brand similar to what we did for their previous company. I led the design efforts and mentored a Jr. UX Designer during this process as well.
Discovery
Starting with a branding workshop ensures everyone is aligned on the core brand fundamentals.
Iterations
Taking learnings from the branding workshop and then giving options to clients to arrive at a final solution.
Implementation
Building for scalability and efficiency starts with a design system, starting with colors and typography.
Discovery: Branding Workshop
We kicked off the project with a branding workshop to define the company’s brand, gain team alignment, and brand attributes. It ensures everyone is aligned on the core brand fundamentals and future positioning from big feature decisions to the look and feel of the product.
With our client stakeholders we started with alignment, workshop rules, and then got into the meat of the workshop with the brand attributes exercise to understand the company’s voice, culture, users, benefits, value, and x-factor.
Final brand attributes we decided on were:
- Innovative
- People Oriented
- Entrepreneurial
- Easy to Understand
- Confident
- Money Savings
- Better Technology
Iterations: Mood Boards
We took the final brand attributes from the workshop and paired the words with color theory. Also, this client’s company is a healthcare for small to medium size businesses and their audience age is 32-38 and more female than male.
Finally, we compared our selections to competitors (specifically Optum, Allstate, and OptimaHealth) to make sure they were not too similar, and created four mood boards for the client to give feedback on.
Iterations: Stylescapes
After client feedback we moved forward with two moodboards to flush out more into stylescapes to give an idea on different components that could show in print media and online. The client ultimately chose the 2nd option shown here.
Implementation: Style Guide and Design System
A design system provides a single source of components, patterns, and styles and helps to ensure a continuous brand experience. It means that no matter how, when or where a customer experiences a brand, they are experiencing the same brand. It's this consistency across every touch-point that helps build a brand and brand loyalty.
For this client project we provided styles (colors, typography, icons, elevation, imagery usage, and imagery examples), alerts, buttons and links, navigation, content blocks, forms, modals, spacing and grids, and design system helpers.
Icons
Large Icons were modified from thenounproject.com, most should be used at 100 x 100px with various primary & secondary colors. UI icons downloaded from remixicon.com, most should be used at 24 x 24 px, some smaller instances might be needed at 16 x 16 px. All can be accessed from Figma’s assets panel.
Buttons & Links
Buttons allow users to take action and make choices with a single tap. Button labels express what action will occur when a user interacts with it. Each page should have one primary button, and a Return or Enter keyboard event should trigger it. Any remaining calls-to-action should be represented as secondary buttons or text links.
Our solid buttons should only be used on the highest priority action on the page — usually this is the sign up flow. Other instances include: downloading a resource, contacting the sales team, or adding an item to the shopping cart.
Outlined Buttons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action on the page.
Text Link Buttons are used to initialize actions in spaces where a button might not fit or otherwise be appropriate. They can be used in combination with buttons, as long as they represent the secondary action.
Navigation
Navigation enables users to move through your web application.
Form Inputs
Text Input fields let users enter and edit text. They typically appear in forms and dialogs. Text Inputs can span the full width of the display on small screens, but should be bounded by flexible margins or other containers on larger screens.
Results
In 3 short weeks, we defined the company’s brand, gained team alignment, and decided on brand attributes. Everyone is aligned on the core brand fundamentals and future positioning from big feature decisions to the look and feel of the product. They now have branding and a design system to launch print and online materials.