Volusion design system

Challenge

The Volusion experience was in need of an update to support a changing product and a shift in target audience. Prior to Nov. 2019, the visual style and messaging catered to new business owners. The new direction focused on growing a merchant base of established businesses already well versed in online commerce. All aspects of our marketing approach and alignment between product and brand needed to be elevated to meet the needs of a more experienced audience.

Approach

The goal here was to stay true to the core values Volusion represents. To achieve this we needed to highlight the capability of Volusion’s powerful platform to support large online retailers, focus on innovation, and provide personalized support for every merchant.

Talk the Talk – Content Direction
The fluffy, high-level language needed to be changed to a much more clear and informative tone. I organized discussions between the product, content, and members of the leadership team to determine a list of brand attributes that would help align the visual and content direction with the product vision.

Once attributes were established, I directed outlines and content for key pages on the new website. Then, my colleague Amanda Glaeser worked on the content guidelines by gathering input from myself and the larger team. The documentation was then distributed throughout the company. She and I stayed in lockstep throughout this process to keep the content and design directions aligned.

Redesign the Walk – Visual Direction
Drawing upon the strengths from the current brand was the first step we took to ensure we were not harming the existing brand equity.

I recognized the cornerstone of the new color palette needed to be the dark blue/violet color from the existing Volusion word mark. Focusing on this deep, sophisticated color would elevate the palette. From there, I focused on the secondary color selection and the primary CTA. It was important the action/CTA color we chose would draw attention and also be  accessible to all users. Our “action purple” met both of those requirements while still maintaining the consistency drawn from our existing logo.

Typography and design components were the next elements my team developed.. Implementation time, cost, and usability were all considerations when selecting the display and body text. Galano Grotesque was chosen as the display typeface for headlines in the 2017 brand redesign due to its flexibility in weight and contemporary look. I decided we would continue to use it since those considerations held true, and it would ease the transition between the new and old design. Roboto was selected as our secondary/body typeface for all other type applications because it is ideal for on-screen readability and would be easy to implement both for the design and development teams.

Spread the Word – Adoption and Implementation
Marketing Channels
The new styles are being used across the new website, presentation templates, emails, display ads, etc. To ensure consistency across channels my team and I created a Figma component library that is used by the design, development and marketing team members.

Product Admin
Elements from the new design system like the color palette, form components, and icons are now used within the platform. They carry the aesthetic through the entire experience from prospect to customer to keep these styles consistent, Figma and Storybook component libraries were created by my team and two of our front-end engineers for the design, product, and engineering team to reference.

Cross Departmental Alignment
The Brand and Asset Library was created as an internal collection of design and messaging documentation for all departments, contractors and partners to reference. It was a collaboration between all members of the content team. Users can read messaging, product and design guidelines in addition to being able to download brand assets and templates.