Homepage relaunch and modular CMS expansion
Arity is an Allstate startup that utilizes driving data and predictive analytics to evolve transportation. VSA created their branding from scratch and 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.
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.
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 as it 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:
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 reorganized and use 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 arised. 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:
There was a moment on the project that 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 fixs. This document is now being used as a standard across VSA’s interactive discipline to ensure that our projects are accessible from the start.
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.
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 of the content & strategy outline (below). The client picked the left design direction and we iteratively created the homepage that lives on arity.com today.