Product | Experience | Design
StyleGuide-Thumbnail.jpg

Avalara Web Style Guide

 

Avalara Web Style Guide

Styleguide.avalara.com

This project focused on establishing the first comprehensive Avalara web brand style guide. This guide will serve as the foundation for all future Avalara marketing web property design and will raise the standards in user experience on Avalara’s marketing web properties. In collaboration with Product UI Designers, this project aims to unify the visual language across the entire company (brand, product, and marketing). In addition to the UX/UI guide, it hosts the brand and content guides created by other departments.

Goals

Scale

  • Grow faster with smaller teams
  • Rapid testing
  • Onboard new sites/acquisitions with low impact to team
  • Agile production

Governance

  • Standardization
  • Continuity in customer life cycle
  • Reinforce brand
  • Build trust

 

Site audit

My first step in this project was to examine what our needs are, what already exists, and what can be standardized. My research informed the working strategy I proposed to form the foundation of the Avalara UX Center of Excellence. In order to execute this undertaking, I proposed we form mission-based teams who would work on one item at a time, the cycle outlined in the document linked below.

Download project planning template >


Tested/Proven designs

We tested into our key designs that were standardized or changed as they were finalized in the style guide.

FormsTes.png

Typeramp.png

Steamline CSS

In order to enforce standardization and limit the need for inline code, we made a few key changes to the way we thought about our foundational elements like typography and color. 

In our old site, our developers would make inline modifications to type styles to meet designs while maintaining SEO. We implemented a new type ramp that separated type size and color from H tag, allowing designers freedom to manipulate visual hierarchy apart from SEO.