I aimed to stay true to the GEICO brand by being playful, vibrant, and engaging. From using colors with intention to user-friendly controls, Hue embodies company design principles by putting the user first, establishing a unified design language, and fostering consistency across different channels.

01 User Research

Competitive Analysis: To reimagine our existing web elements to create a GEICO product, we had to first dive deep into design systems as products in the tech-field. We found key advantages and disadvantages that we wanted to include in our initiatives.

Because users are introduced to clear and consistent design throughout products using a design system, it establishes easily recognizable patterns that allows users to move throughout the experience as intended
These design systems allowed tech companies to scale up their products, allowing companies like Apple and Google to build exponentially more products based around centralized design decisions

02 Brand Styles

The foundation for the GEICO Design System is composed of core elements representing the brand, including colors, text styles, voice, and tone. I created visual documentation guides for Color Accessibility, Typography, and Icon Usage. To implement brand styles in Figma, I used my existing documentation to variables and tokens in Figma.

Accessibility

I proposed and introduced a high-contrast dark mode update that would elevate our color contrast standards to the WCAG (Web Content Accessibility Guidelines) Level AAA standard and ADA (American Disabillities Act) Title III standard.

Not only does it create a standard of inclusivity for those with visual impairments, it improves the overall user experience for all customers as well.

Tokenized Color Variables in Figma

To stay at the forefront of Figma new additions and features, I implemented Figma color variables and tokens into the design system files. This enhanced efficiency so that designs are able to update seamlessly with any design system changes.

Typography

We created and updated custom font for the GEICO Design System, and named it GEICO Roobert, inspired by the original sans-serif Roobert font family.

The feeling from the typeface could be “rounded square” like in Eurostyle (which matches our GEICO logo’s eurostyle look).

03 Native Mobile Components

After creating style documentation, I created the following components: image selection cards, card selections, buttons, checkboxes, progress indicator, a shopping bar experience, address auto complete, and planning for migrating our design system to React.

Creating Components + Documentation

Design system components were created as Figma components with documentation pages for handoff, and also published on hue.geico.com as part of a weekly release.

Visual Examples: Component visuals contain mobile and desktop versions, and show designers how the component is used in the app.
Guidelines: Documented guidance for designer and developer usage and handoff are written here.
Dark-Mode: All of our experiences are available in dark mode-high contrast mode, which is documented in Figma and our live design system website.

Product, Native Mobile/Desktop UI

Design System

I aimed to stay true to the GEICO brand by being playful, vibrant, and engaging. From using colors with intention to user-friendly controls, Hue embodies company design principles by putting the user first, establishing a unified design language, and fostering consistency across different channels.

01 User Research

02 Brand Styles

Tokenized Color Variables in Figma To stay at the forefront of Figma new additions and features, I implemented Figma color variables and tokens into the design system files. This enhanced efficiency so that designs are able to update seamlessly with any design system changes.

Tokenized Color Variables in Figma To stay at the forefront of Figma new additions and features, I implemented Figma color variables and tokens into the design system files. This enhanced efficiency so that designs are able to update seamlessly with any design system changes.

Typography We created and updated custom font for the GEICO Design System, and named it GEICO Roobert, inspired by the original sans-serif Roobert font family. The feeling from the typeface could be “rounded square” like in Eurostyle (which matches our GEICO logo’s eurostyle look).

03 Native Mobile Components

After creating style documentation, I created the following components: image selection cards, card selections, buttons, checkboxes, progress indicator, a shopping bar experience, address auto complete, and planning for migrating our design system to React.

Creating Components + Documentation Design system components were created as Figma components with documentation pages for handoff, and also published on hue.geico.com as part of a weekly release.

Tokenized Color Variables in Figma

To stay at the forefront of Figma new additions and features, I implemented Figma color variables and tokens into the design system files. This enhanced efficiency so that designs are able to update seamlessly with any design system changes.

Tokenized Color Variables in Figma

To stay at the forefront of Figma new additions and features, I implemented Figma color variables and tokens into the design system files. This enhanced efficiency so that designs are able to update seamlessly with any design system changes.

Typography

We created and updated custom font for the GEICO Design System, and named it GEICO Roobert, inspired by the original sans-serif Roobert font family.

The feeling from the typeface could be “rounded square” like in Eurostyle (which matches our GEICO logo’s eurostyle look).

Creating Components + Documentation

Design system components were created as Figma components with documentation pages for handoff, and also published on hue.geico.com as part of a weekly release.