.jpg)
8 min read | Last updated: 19 May 2024
<aside> 🎉 What I delivered
UX Audit | Strategy sessions | UI Design | Token Management
</aside>
<aside> ✨ Overview in 60 seconds
Problem
In 2019, Avanti West Coast(AWC) inherited FirstGroups' legacy website and app, from then on numerous unique problems were resolved concurrently by AWC leading to increasing design inconsistency.
Solution
By 2022, Avanti aimed to create a design system to address these inconsistencies, starting with the website and expanding to their app and ticket vending machines. We developed a unified UI kit in Figma and introduced template pages in the CMS to standardise content. Workshops and regular reviews facilitated team adoption.
Impact
The new system improved design consistency, accessibility, and efficiency, with 70% reusable components. It helped designer design 2.5x faster and content creators built pages 2x faster. Moving forward, we plan to extend the design system across all platforms, continuously evolving based on user feedback and technological advancements.
</aside>
In 2019, Virgin Trains stopped operating the West Coast Main Line, and Avanti West Coast took over which was owned by FirstGroup and Trenitalia. As a result, Avanti West Coast inherited a legacy website, app, and ticket vending machines from FirstGroup. From then on, numerous unique problems were resolved concurrently, with each project enhancing the user experience in its unique manner. However, despite each project's success, it added an ever-increasing level of design inconsistency to the overall experience.
AWC legacy design system 2020
In 2022, we decided to bring more consistency and efficiency to the design and development process. We decided to build a design system initially for the website. Based on its success, we planned to scale our design system to our mobile app and ticket vending machines.
This is how we did it ✨
There were two ways we could do this. The first one was to march into the leadership's office and exclaim, 'Let me tell you why this company needs a design system. Also, use terms like ROI, Conversion, Revenue.' Sometimes this approach works, but most times, it doesn't. We took the second approach, which was to start with the pages that are live right now and the features we are building at the moment. We conducted a UX audit. We looked for the following:
.png)
This was the time when the redesign of our homepage was happening. The design was approved after a year-long process and was finally ready for development. So, we took the homepage along with ten other pages for building our UI kit in Figma.
<aside> ✨ Interesting fact During our UX audit, we discovered a whopping 150 variations of brand colour on our website, which was shocking because we hardly have 10 brand colours. I will explain how this happened below.
</aside>