Joe is a manager of a marketing team in a semi-large resort property company. The websites have been in place for a few years now, and more than one team has updated it in the past. There are several versions of designs across multiple products. You're aware that the websites, landing pages, and emails need more consistency, but his team just hasn't had the time to fix the problems. On top of that, resort property owners have developed the habit of renting properties to non-owners, and the company isn't able to capture and charge for these non-owner sourced reservations. He decides to bring someone in with the expertise to help.
Company: Company Acquired - Name Removed
Project Summary
Unifying 140 marketing pages and reducing component variations by 72%.
Responsibilities
- Design System Design and Documentation
- UI Design
- Redesign of the booking user flow
Scope
- Tokens
- Components
- Templates
- Documents
- Rollout
Timeline and Team
15 months working with:
- 2 managers
- 1 VP of marketing ops
- 1 head of brand/creative
- 2 front-end developers
- 2 designers
Results
- 72% fewer component variations
- Designers claimed updating and organizing the design system made it 100% easier to design pages and emails.
I jump started this 15-month remote project from discovery through launch and collaborated closely with 2 UI/UX designers, 2 front-end engineers, and 5 marketing team members.
The Audit
I audited the main websites and 140+ landing pages for consistency and accessibility using accessibe.com. In tandem, I created an Airtable spreadsheet that contained current design inventory for the 2 main websites and status of each style and component in the design files, and whether they were documented.
I discovered:
- A significant amount of repetition and disorganization
- Lot’s of unnecessary styles
- Disconnected user experiences
- Lower team productivity
The audit
Advocating & Planning
I advocated for the value of an updated design system and worked with the teams to put the current design system back on the roadmap.
The teams and I held discovery meetings to understand designer’s and developer’s frustrations.
We formed our own team and created a plan to figure out which components needed to be worked on first, and kept track of progress in Jira.
The team
Design System Structure
Working with the lead UX/UI manager, we structured the design system.
What we did
Consolidating Colors
The original files contained over 90 colors, some unused, leading to inconsistent designs across departments and products, prompting the lead designer and I to streamline the color palette while ensuring WCAG AA compliance.
Color consolidation
Leveraging AI to Generate Tokens and Ensure Accessibility
I quickly generated tokens (Figma variables) and audited colors and backgrounds for accessibility in ChatGPT.
Using ChatGPT and Figma to create tokens
Reorganization and Consolidation of Button Styles
Button styles are down from 13+ to 3.
Reorganized and consolidated button styles
Moving Templates from Photoshop to the Design System
The marketing department was using Photoshop templates for landing pages and emails that led to inconsistency in designs and inaccessibility of the templates for other teams. I moved 13 landing page templates from Photoshop to the design system.
Landing page templates moved from Photoshop to the design system
Documentation of the Design System
The styles and components were documented in the design system. The current design system was started by a couple of developers and needed some work, so I edited the design system website’s documentation with HTML and CSS using Visual Studio Code.
Editing the design system in code
Results
By redesigning the user flow and UI while using the design system assets, the client stopped resort property owners from renting properties to non-owners, and enabled capturing and charging for non-owner sourced reservations. And, reducing component variations by 72% allowed for more consistent designs, time and cost efficiency, and made a more scalable and accessible design system.
Lessons
- I'd advocate for the use of Figma earlier for ease of use and fast shipping of designs.
- It takes a village to build a large design system.
- Change takes a while in a large well-established company with a small team.
Website redesign