Landing Design System
Problem
As the company grew, the demand for pages increased but there wasn’t enough time for each project. We needed to take a step back and create a process that could make the design cohesive and faster.
We went through an audit of the entire site and decided what type of components were commonly used. We noticed the typography, icons, and spacing were all over the place.
Opportunity
This was a chance to create a design system for the website. Having a design system would skip the process to create wireframes or low-fi mockups. This will allow designers to focus more on the flow and storytelling with the modules already created.
Challenge
While the web pages were already designed in Figma, they were missing mobile designs. A design system existed, but it was for mobile apps. Some components could be reused, but others had some missing pieces and didn’t have the same functionality that would work for a website. I had to find a way to take the design and add to it without losing the brand style.
Because we were B2B and B2C, we needed a lot of different variations of the components and modules. I had to think through how to show images, videos, galleries, and carousels, how we show our forms or should it be a modal, how do quotes look if there was only one, and how it looks if there are multiple?
Solution
We created a design system using atomic design. I broke down each component into its own page to make it easier to find. We added notes to break down how it should be built for engineering. We included the max character count, max icon or image, what happens when it’s on a mobile layout, etc. I broke down the grid and padding and how the typography for each module.
We created every variation on WordPress and I spent 2 weeks QAing it all.
Takeaway
After months after it was created, we let the marketing team create their own page. Sometimes the ask were copy heavy and the original designs didn’t include any modules for that. Some modules had a background option, some were a bleed and most were designed as an insert.
Looking back now, I would spend more time asking the people creating the page if they had any projects in the pipeline and design for the future. Auditing the site was helpful but it didn’t prepare for any ask outside of what existed. I would also design every module to have a background option. Over time the landing pages looked all the same and adding ways to change color could help make a difference.
View Landing to see how pages are created with the design system.