Case Study
Visit London Design System
Journey Through Visit London's UI Wonderland Maze 🧭:
Token Expedition to Design Zen 🧘♀️
Timeframe:
June-August 2023
Tools:
Jira, Miro, Figma, FigJam
My role:
UX/UI, Usability Testing, Wireframing, Prototyping, Developer Hand-off, Design System. I worked as the sole designer in a team with one product manager, one back-end developer, and one front-end developer.
TL;DR:
As part of the Visit London platform revamp, we introduced a comprehensive design system to enhance efficiency and streamline development. By leveraging over 525 pre-designed components, the system significantly accelerated our workflow, allowing the team to create and deploy consistent, high-quality elements swiftly. This not only reduced duplication of effort but also optimised the development process, ensuring faster delivery and improved product quality.
The design system also played a crucial role in expanding the adoption of Visit London’s digital products. Its standardised approach facilitated a cohesive user experience across the website, mobile app, newsletter templates and social media channels. Additionally, it boosted our agility by enabling quick iterations and adaptations to new requirements, ultimately leading to a more responsive and flexible development process.
Increasing Efficiency:
Visit London’s Transition to a Design System
Optimising Development:
Leveraging 525+ Components
Expanding Adoption:
Enhancing Digital Products
Boosting Agility:
Streamlining Visit London’s Workflow
Design Process
⬇️Jump directly to these sections:
1. Objectives
🔍 Seeking the UI Wonderland Harmony
- Improved Consistency: Ensure a cohesive look and feel across all Visit London digital touchpoints by standardizing UI components, color schemes, typography, and brand elements.
- Faster Development: Accelerate the development process by providing a library of reusable components and design patterns that developers can easily implement.
- Enhanced User Experience: Improve the overall user experience by creating intuitive, accessible, and visually appealing interfaces that resonate with the Visit London brand
📝 Visit London Redesign as a Pilot Project
Integration with the Visit London Website Revamp
Initially, a lack of a design system resulted in a disorganised product, as uncovered by user research and audits.
The Visit London website revamp served as a pilot project for the design system, allowing for real-time testing and feedback. This simultaneous development with this pilot project provided a good foundation for ensuring the design system’s design, components and code were batte-tested.
2. Selling a Design System: UI inventory
🔍Down the rabbit hole: Uncovering the Pain of UI Inconsistencies
One effective strategy for selling a design system is to make everyone feel the pain of inconsistent user interfaces. To do this, I like to conduct a user interface audit of existing assets to evaluate the current design elements, patterns, and components used across your products and identify inconsistencies and areas for improvement.
I gather screenshots of every UI element: visual balance, colour palette inconsistency, typography hierarchy, icons, button styles, input fields, forms, navigation, pagination, breadcrumbs, cards, carousels, checkboxes, modals, etc. I also record the most critical user flows and processes. Typically, I compile all these findings into Figma, annotate them extensively, and play detective, hunting down any visual or functional flaws.
🤯We had 54 fragmented button styles
From a technical standpoint, it’s crucial to emphasise that each of these variations represents significant time, energy, and effort from development, design, and QA teams. When you multiply these efforts across all your products and services, the cost becomes staggering.
The goal is to capture all these variations and properties and create reusable UI components, centralising everything in one place. This approach not only streamlines development but also ensures consistency across all products, saving time, budget, and resources.
3. Plan
🗺️Mapping Visit London: how to navigate into a new and improved UI Wonderland
Before diving into the creation and maintenance of Visit London Design System, it’s essential to have a clear plan. The Design System Canvas helps consolidate all crucial information, assess the current state by mapping out existing components and their condition, and plan future developments with realistic timeframes. It also serves as a valuable tool for gaining stakeholder buy-in by detailing key activities, objectives, and target users. This alignment ensures that the Design System supports the organization’s overall objectives, keeping everyone on the same page and working towards a common goal.
📍Planning the perfect journey: Understanding the terrain and choosing the right route
Click the ‘Expand View’ icon to enlarge the Design System Canvas in FigJam
🫖🍵Tea Party Diplomacy: Selling the Design System to Different Stakeholders
Implementing a design system can be a game-changer, but getting stakeholders on board requires a tailored approach for each group.
- To Design Superheroes 🦸♀️: You understand fully and are 100% in. The design team recognises the value from a human-centred perspective. By standardising UI elements, we make our creative process more efficient and our output more consistent. This means more time for innovation and less time on repetitive tasks. You’ll have the freedom to focus on what you do best – creating exceptional designs.
- To the Project Managers 👩💼: a design system is your ally for better organisation and quicker sprint cycles. It streamlines our planning and ensures predictability. By reducing the time spent on designing or redesigning common elements, we can allocate more time on strategic tasks and feature development. This leads to faster project completion and delivery.
- To the Developers 🤓: think of a design system as a toolkit that eliminates the need to code the same UI component repeatedly. It promotes consistency, allowing you to reuse components with confidence. This not only cuts down on development and QA time, but also reduces errors. You’ll have more time to tackle new challenges and innovate.
- To the Executives 👨💼: a design system is a strategic move that saves both time and money. By standardising our design and development processes, we reduce the resources needed for each project. This means faster turnaround times and lower costs. Ultimately, this approach ensures a higher return on investment and a streamlined path to achieving our business goals.
4. Kick off: Defining a Shared Product Vision
🐰 Following the White Rabbit: Setting Visit London Foundations Before Beginning the UI Journey
With Inclusivity, Accuracy, and Authenticity as guiding principles, Visit London ensures its design captivates visually while authentically reflecting its identity and values. By prioritizing user needs, these principles ensure digital interfaces are accessible, content is accurate, and the brand is consistently represented. Beyond aesthetic considerations, these principles embody Visit London’s ethos, promoting the city’s beauty and diversity.
- Human-Centred Design: We use user research to inform design decisions and create empathetic, user-friendly experiences.
- Prioritise Accessibility: We ensure all digital interfaces are accessible to all users by adhering to WCAG standards.
- Global audience: We provide a consistent and seamless user experience across cultures and languages. Our design is welcoming and accessible, catering to a diverse, global audience reflecting London’s international reach
- Accurate Information: All content is fact-checked and accurate to maintain credibility of Visit London brand.
- Clear Communication: We use straightforward language and design elements to communicate transparently with users.
- Consistent Branding: We maintain consistency in visual and verbal branding to build and reinforce trust.
- Authenticity: We build trust with users by consistently reflecting our brand principles in our design, ensuring they know what to expect from us.
- Consistent Experience: Ensure a consistent and seamless user experience across different cultures and languages, reflecting London’s international appeal.
- Pride in Service: We are proud to serve our city and strive to create an emotional connection with users by reflecting the brand’s core values.
A design system isn't a project with an end, it's the origin story of a living and evolving product that'll serve other products.
5. Launch:
🚀 Unveiling Visit London UI Wonderland
Variables in design systems are essential for maintaining consistency and efficiency in a project. Similar to coding, these variables serve as placeholders for values that can be reused across various elements. By setting variables for colors, typography, spacing, and other design attributes, global adjustments can be made that automatically update all instances where the variable is applied.
This approach not only streamlines the design process but also ensures a unified design language throughout the entire project.
Click the ‘Expand View’ icon to enlarge Figma Slides
🗺️ Mapping tokens
Click the ‘Expand View’ icon to enlarge Figma Slides
6. Design handoff
🥛 Alice’s Growth Magic Elixir: Documenting Design Components for Continuous Development
7. Project Outcome & Impact:
🌻 Maintaining Visit London UI Queen’s Garden blooming
Visit London underwent a platform revamp, transitioning from a style guide in Adobe XD to a comprehensive Design System in Figma in collaboration with the development team. This accelerated the launch of the newly revamped website and facilitated seamless integration by third parties with minimal time and budget.
Increasing Efficiency:
Visit London’s Transition to a Design System
Optimising Development:
Leveraging 525+ Components
Expanding Adoption:
Enhancing Digital Products
Boosting Agility:
Streamlining Visit London’s Workflow
Adoption Rate Increase:
The adoption of the design system has expanded to include products such as the mobile app and a suite of newsletter templates. Visit London has embraced design terminology in its business strategy.
525+ Components:
The current design system comprises over 525 components, optimising the product development process for targeted enhancements to key elements that enhance quality and functionality.
Increased Agility and Reducing Design Debt:
There has been a significant reduction in design and development debt, enabling team members to focus more on innovation and less on repetitive tasks. Enhanced collaboration between design and development teams has streamlined handoffs, reducing time-to-market for new features and products, and ensuring Visit London remains agile and responsive to user needs and market demands.
Improved Consistency and Efficiency:
The design system’s centralised repository of components, guidelines, and principles has facilitated the creation of interfaces that are consistent in look and feel. This consistency has improved usability and minimised the time and effort spent on resolving design inconsistencies.
To be continued...
🔁 Iterate
What is coming next:
Test, collect analytics, and develop
The launch of Visit London in September marked a significant milestone, but it was only the beginning of. Moving forward, the aim is to iteratively enhance the platform based on user behavior observed on specific pages.
- We prioritised the development of the homepage and funnel to secure stakeholder buy-in, ensuring alignment with project goals and objectives.
- With the approval of the overall design language, we were able to rapidly scale out the project and design the subsequent pages: landing and editorial pages, category, wrapper, and listing pages.
- The implementation of a cohesive UI component library and the componentization of the user interface not only ensured consistency and coherence across pages but also facilitated the efficient production of additional screens.
- This approach streamlined the design process, saving time and resources while maintaining a high level of quality and usability throughout the platform.
Wanna hear the full version?🎬🍿
Let's schedule a call!
Connect with me on LinkedIn, email me at info@myriammartindigital.com or send a message below.
© 2024 Myriam Martin Digital. All rights reserved.