SF-DVTS_00_Hero.jpg

State Farm Digital Visual Template System
Making it easy to find what you need quickly and intuitively, while fulfilling the State Farm brand value proposition.

Leading all Creative and User Experience teams, I was responsible for the design and UX of the DVTS system, helping define organization and structure for the project lifecycle, as well as overseeing training for employees across State Farm and Razorfish.

XW: Creative Director
Razorfish: Agency


THE BASICS

DVTS is a foundational framework built upon the principles of Responsive Web Design (RWD) that foster scalable, efficient, and consistent experiences across digital properties.

Responsive Web Design (RWD)

DVTS employs a modular nesting system to build pages and deliver content.

State Farm Digital Style Guide

The output of DVTS is collected within a Digital Style Guide—the resource for all templates, modules and design elements—as rules, guidelines, assets and common UI patterns.

Modular Nesting System

The Digital Style Guide is used by cross disciplinary project teams at State Farm to create Web pages or applications while maintaining a consistent customer experience.

State Farm Web Pages

3,826 Total files uploaded

Overview

The DVTS Oversite/Consulting Team worked directly with State Farm's internal governance (DC10) and prioritization workgroups to  facilitate the flow of communication across Razorfish and State Farm stakeholders. We defined and implemented a consistent workflow across Razorfish and State Farm for all DVTS projects, from work intake through item availability. 

Organizing Information Flows

UI Design Process Outline

Project Lifecycle Process Outline

Front End Development Process Outline


The DVTS Governance Team ensured consistency for brand positioning and user experience across all State Farm projects.

We reviewed State Farm project team's work, confirming compliance with DVTS. We evaluated, prioritized and tracked all backlog items, assuring that all lines of business needs were proactively taken into consideration. We also provided daily support addressing questions and providing clarity for the function and display of components. 

The Backlog List
Identify, Evaluate & Prioritize Projects

"Red-Lined" Wireframes


The DVTS Backlog Team continually grew and evolved the system while providing a rapid response to maintenance needs without impacting the overall evolution. 

We were responsible for identifying, assessing and prioritizing all gaps in the system. We oversaw the development of new or enhanced functionality—from concept through design, testing, and development.

Research & Briefing - 
Determine goals and identify possible solutions

 

Initial Wires & Flows - 
Build flows & wireframes using real world examples

 

Initial Design Explorations - 
Put all options on the table to find what works/doesn’t work

Collaboration, Evaluation & Reviews -
Guide the solutions and refine the direction

Detailed Design & Refined UX - 
Implement considerations and complete designs

Usability & Test Planning -
Evaluate usability prior to final delivery


The Style Guide Content Team implemented new DVTS components into the Digitial Style Guide, assuring that it was was the most up to date source for DVTS assets including specifications, examples, and usage guidelines. We also generated educational content to support business (e.g. Accessibility and Digital Standards) and UI team needs, provided status around availability of assets as well as technical support for content related issues. 

State Farm Digital Style Guide


The Style Guide Functional Team provided maintenance and technical enhancements for the public facing Style Guide, improving usability of the Digital Style Guide as well as developing and implementing any new functionality for the Style Guide website.

Helpful Resources

Common UI Patterns


In addition, I led Creative and User Experience in the transition of responsibilities for DVTS from Razorfish to StateFarm, which included developing a holistic training program and overseeing the instruction of State Farm managers and employees.

Bootcamp Training