top of page

Timeline

🕗 Jan 2022 - Jan 2024

All proofs of concept, prototypes and designs were created for use by GEICO, Government Employees Insurance Company. 

Role

📝 As a Senior Product Designer, I worked on high-priority Enterprise GEICO Applications, and played an integral role in pioneering the GEICO Design System. 

Tools & Languages

🛠️ Figma, Figjam, Mural, Azure DevOps, Indesign, Illustrator, Photoshop, Sharepoint, Outlook, Widen Collective

🛠️ HTML, CSS, Javascript

front cover.png
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 puts the user first, establishing a unified design language, and fostering consistency across different channels. 

01 User Research
why hue 3.png
[2022] Tech Talk Presentation.png

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. 

Documentation-Colors-Updates (3).png

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.

ezgif.com-video-to-gif (2).gif
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.

  1. Visual Examples: Component visuals contain mobile and desktop versions, and show designers how the component is used in the app.

  2. Guidelines: Documented guidance for designer and developer usage and handoff are written here.

  3. 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.

  • LinkedIn

Created by Stephanie Luo, © 2023.

bottom of page