Launched: March 2016
Duration: 1+ years

Vertafore XD Standards & Guidelines.


Problem

The Vertafore XD team received insight that revealed that the existing XD Standard & Guidelines site's usage was low and offered limited value to our internal customers – namely Development and Product – because it lacked the type of information frequently needed to make quick and informed decisions.


Overview

With the goal to better serve our internal customers, which would in turn create for a cohesive customer experience across Vertafore's portfolio of products, we went back to the drawing board to redesign the XD Standards & Guidelines site.

As the senior visual designer, I was part of the small working group tasked with overhauling the XD Standards & Guidelines site where I owned the creation of the overall look and feel of the new site, and provided creative direction and definition of UI component styling that would be included in its collection. Other members of the team included two interaction designers and a front-end developer.


Discovery

To make the XD Standards & Guidelines a valuable tool to create our digital properties and increase customer adoption, we met with key influencers and stakeholders within Vertafore's developer and product communities to understand their pain points and process.

Through our collaborations, we quickly realized that the most efficient way to communicate design was by using a familiar language and framework of code – Bootstrap and Angular JS. A shared language that would in turn create a shared understanding.

Planning

As a result of our discovery, this led us to the decision that the new site should comprise of a Sandbox of UI components with working reference code. This would allow internal teams to see how a design should work and offers the option to download the HTML + CSS for each component. Not only would this accelerate the understanding of a design – from interaction to visual design, but also streamline one of the ways XD communicates with teams throughout the design process. We also looked at web style guides from leading brands like Airbnb, Uber and Mailchimp to see how they leveraged web style guides to great success.

As part of this process, we outlined a list of high priority styles, design patterns and UI components that we needed to include on the site for the first rollout, as they were frequently used and seen by our customers. For visual design, that meant conducting a UI audit to take stock of what the interface is composed of – documenting UI patterns to highlight inconsistencies and help set the stage for a broader conversation about establishing a pattern-based workflow.

Top UI components targeted were buttons, forms elements, tables, modals, color, typography and icons. The benefits of conducting a UI audit were that it:

  • Lays the groundwork to a sound design system – By deconstructing pages down to their base level, this interface inventory can be used to help guide our living style guide.
  • Establishes a cohesive design system & promotes consistency – Displaying a plethora of similar-but-still-different treatments next to each other exposes redundancy and underscores the need to create a consistent, cohesive experience for our customers.
  • Ensures all interface components are accounted for – Helps establish project scope and ensures that all components are accounted for so there are no surprises.
Ideation

In parallel of the UI audit, the new site's IA as well as a defined set of parameters for each of our controls were sketched out by the interaction designers.


Design

For the site, I took these artifacts and quickly brought it into visual design for look and feel, creating comps and finally a working prototype in HTML + CSS leveraging the Bootstrap framework to illustrate basic layout, colors, typography and the collapsable left siderail.


Typography

I rationalized the typography system, setting hierarchy and identifying h1 to h6 headings, body copy, links, intro text and so on.


Color

To bring visual cohesion to our digital solutions, the use of color quickly became one of the most important assets to our style guide. In an effort to reconcile and rectify our color system across products, I created a transitional Parametric Color System, which consisted of a baseline of codes + hex values. This system became the design team's “Single Source of Truth”, evolving over time as I continued to identify and carefully add colors to the baseline palette.


Iconography

The inventory document that rationalized our product icon set was then visualized, mapping metaphors with the associated Font Awesome icon(s) or custom font. For custom fonts, an illustrator template was created to ensure custom fonts fit the required specs. To promote adoption, our prototyper compiled our icons into a downloadable font set for developers to use.


Buttons

The visual styling of buttons were standardized to create cohesion and consistency across Vertafore's product suite.


Form Elements

With forms comprising a lot of Vertafore's products' UI, I created visual specifications and styling for all of the top form elements used across products from text input fields to datepickers. And with the customer always in mind, our interaction designers and prototyper added the ability to inject delight by providing a setting to see delightful interactions on select form elements along with illustrative code.


Visual Specs

Throughout the design process, I continued to iterate and spec out styling and design patterns, which were handed off for development into the site.

Feedback

Throughout the re-design, our working group consulted with many teams and set-up Lunch & Learn meetings with the UI Framework Council and product + development partners near and far, iterating and evolving the work, week over week. And to date, there’s been a lot of positive buzz generated by our partners and champions, alike. A few comments we received were:


This will be really useful for QA. ~Team Lead, Sr. Software Engineer, Test
This will be a great help to us. ~Software Engineer, Offshore Development
All goodness. We'd use this! ~Team Lead, Sr. Software Engineer
Result

The result is a new site designed as a Sandbox of UI components with working reference code. For development and product, the new XD Standards & Guidelines site provides defined UI components and patterns, which promotes design pattern reuse and with elements provided in code, they can see exactly how UI components need to look from the start.

While our design team has made great strides for our development and product counterparts, it is by no means a completed effort. We continue to meet regularly as a working group and with our respective stakeholders to gain insight, test, identify design gaps, add more standards and repeat.

We are also taking steps to improve the XD Standards & Guidelines for our designer persona. With multiple designers working on different interfaces or parts of a larger product, the style guide should aid in the design process by providing a collection of pre-designed elements, graphics and rules to promote brand, style and interaction consistencies and cohesion.

Like what you see?

Lets start talkin'

Copyright © 2013-17 Kat Estacio. All Rights Reserved.