Design Language & Coded Pattern Library

 
florida blue showcase mockup.png

HOW MIGHT WE empower florida blue to elevate thier digital presence in the florida insurance market?

Context
The marketing team at Florida Blue reached out to frog Design with a need to rethink their web experience. Through the development of a live coded pattern library and site visual refresh, we delivered not only the foundation for a Design Language System (DLS) that will extend across their entire digital ecosystem, but also the foundation for a new organization-wide re-brand. This work contributed to winning a $3.25 million dollar multichannel follow-on engagement.

ROLES AND RESPONSIBILITIES

  • Creative Director leading a team of Interaction Designers, Visual Designers and Program Management.

  • Client relationship management, working with CMO and marketing team to help sell-in and socialize work to key stakeholders.

  • Co-creating workshop across organization verticals.

  • Led Design Language System development with user interface visual style and interaction paradigms that afford a unified shape to product look, feel, and functionality.

  • Partnered with visual designers on new site art direction.

A Design Language that Differentiates
We helped Florida Blue distill a unique value proposition in a crowded landscape of insurance providers. “We are Florida first” became our defining mantra—bringing the vibrancy embodied by the people and nature of the sunshine state to the forefront of our new design language. Organic lines, festive colors, and a fresh fluid type face brought a sizzle to the Florida Blue brand.

 
 

Co-creating a Shared Vision
Bringing stakeholders together in an collaborative environment provided the space for our team to facilitate meaningful dialogue between team members and ultimately co-create a prioritized understanding of key customers and flows—and a shared aspiration of the new look and feel of the site.

 

Developing a Coded Pattern Library
We delivered a library of working code to ensure Florida Blue’s new Design Language System is executed at fidelity and able to extend across their entire digital ecosystem. With proper governance, the pattern library will become a conduit between design, business, and technology to insure a consistent experience that scales.

Coded Pattern Library is live in the code base and referenced in page designs.

User flows developed in the Immersion Workshop helped us determine high-value design patterns for the foundation of the coded library.

Extending the Library with a Governance Framework
The following pages articulate how and when to extend the Coded Pattern Library.