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.
Tested/Proven designs
We tested into our key designs that were standardized or changed as they were finalized in the style guide.
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.