Arity.com

Homepage relaunch and modular CMS expansion

Arity hero image with laptop screen of the homepage and phone.
Arity (Allstate)
Oct 2017–Today
Agile

Arity is an Allstate startup that utilizes driving data and predictive analytics to evolve transportation. VSA created their branding from scratch, and it touches almost every area of Arity’s visual identity.

I was transitioned onto the Arity website after the initial instance of the website was ported over to a CMS. Our brand new scrum team was charged with evolving the design system and addressing the steady stream of new asks from the client as the startup rapidly grew and changed. Our biggest task was to completely revamp the homepage.

My role

I became the lead designer on the website workstream of this client. I worked side-by-side with development, strategy, UX, content, and writing scrum teammates in two week agile sprints.

Full width image of AI diagram and future of navigation
the work

Through scrum we strategically phased out the changes and additions for the site.

When I came onto the website, the homepage was still using the design from the one-page “splash page” that was created as the startup was getting on its feet. The company and site content had outgrown this original homepage and navigation.

Working closely with content and strategy teammates, we identified the pain points that the original homepage was experiencing:

  • Because content structure was ambiguous and long, the user did not leave the homepage understanding who Arity really was.
  • The layout relied on dark colors and large imagery that was not conducive to the company’s ever-changing messaging and marketing needs.
  • Users were not scrolling down the page or into additional pages.

These points informed the new design for the homepage. The direction we landed on utilized a light and airy layout with very modular elements. Small pops of brand colors and motion were brought in to reaffirm the company's niche in transportation/mobility and create a friendly and enticing experience as the user lands on the page.

When designing the homepage, we took the time to atomize the modules so that these brand new modules could be flexible enough to be reorganized and used on other pages when needed.

The site was built to be a CMS to empower the client to be able to get into the site and add/edit/change content as the need arose. As we continued to add to the site, we wanted to make sure that we were maintaining and expanding the modules and components in a logical way. This was an additional layer of design challenges to work through:

  • How to make modules flexible and agnostic for multiple types of content in multiple situations/locations on the pages.
  • Finding the balance between optional elements and having TOO many options on the CMS side for the client.
  • Finding creative ways to keep visual interest in these flexible modules without causing dependency on a designer.
  • Finding consistent spacing rules for each module so that they work with each other in different orders.
  • Documentation of requirements, rules, naming, and maintaining the pattern library.

There was a moment on the project when we realized that the original design system was not vetted against WCAG accessibility standards. This compliance was very important to us and the client, so we worked an accessibility audit into a sprint. I took the lead on this effort. I audited the entire site and created a document to track each principle of the WCAG AA guidelines, how the current site measured up, and next steps to achieve compliance. I coordinated with the other disciplines on our team to make sure our audit was completed for all aspects of accessibility. This accessibility audit document was then used to create stories for the backlog for the team and client to prioritize fixes. This document is now being used as a standard across VSA’s interactive discipline to ensure that our projects are accessible from the start.

Snapshot of the many elements and components that made up the system

Modularity

Throughout the process of updating the homepage and expanding the architecture of the site as a whole, each new requirement had to be carefully considered in how it fit into the atomic/modular system and CMS. New content types may require an entirely new module or adding flexibility to an existing one. With each update, I needed to design for the module’s multiple use cases, instances, and options/requirements to allow in the CMS.

Full width image of some of the module configurations of the design system
Full width image of the gdoc documentation for each module

Homepage

Arity realized that they had outgrown their original homepage (below, left). Originally designed as a 1-page splash page, the homepage was seeing a high bounce rate and their new content was not being seen. I designed two homepage re-designs based on the content & strategy outline (below). The client picked the left design direction and we iteratively created the homepage that lives on arity.com today.

Orignal homepage screenshot on the left. The two initial hompage revamps with copy structure in the middle.
Created by VSA Partners, Inc. Copyright belongs to VSA, the client, or third parties (as licensed by VSA or client).