Introduction:

In my role at Premier Inn, I spearheaded the creation of a comprehensive design system using Figma. This initiative was pivotal in centralising our design efforts and enhancing the overall quality and consistency of our user interfaces. By meticulously organising components and laying a solid foundation for our design language, I ensured that our team could work more efficiently and collaboratively.

‍

Process:

The process began with transferring existing components from various user journeys into a centralised component library. I meticulously labelled and organised these components, facilitating seamless integration with the new design system. Foundational elements such as colours, typography, and spacing were carefully defined to create a unified design language.

Communication played a crucial role in this project; I kept all designers informed about design updates and developed straightforward methods for locating different components. Additionally, I created comprehensive educational documentation to guide designers in using the design system efficiently, fostering greater collaboration and improving the consistency and quality of our design work.

Testing and adaptability were also key focuses. Components were rigorously tested across different areas of the user journey to ensure versatility and adaptability. I established a robust process for adding new components, minimising duplication, and ensuring coherence, thereby creating a scalable and maintainable design system.

Results

The creation and implementation of this design system significantly enhanced Premier Inn's design workflow. Designers could easily access and utilise a unified set of components, leading to more consistent and high-quality design outputs. The educational documentation and improved communication channels fostered greater collaboration among the design team.

Moreover, the rigorous testing and robust processes established for component integration ensured the system's adaptability and scalability, supporting Premier Inn's long-term goals. Overall, this project not only streamlined our design efforts but also positioned our team for continued success and innovation in the future.

Introduction:

At Premier Inn, addressing the limitations and inefficiencies of PDF menus became a priority to enhance accessibility, responsiveness, and operational efficiency. The PDF format presented significant challenges, including incompatibility with screen readers, lack of text-to-speech capabilities, and poor adaptability to different screen sizes.

Frequent updates to these static documents were time-consuming and costly. To overcome these issues, I led the creation of a comprehensive design system using Figma, centralising and streamlining our design processes.

Process:

The design process began with a thorough analysis of the existing PDF menus' accessibility and responsiveness issues. I identified key problems, such as screen reader incompatibility and the absence of text-to-speech features, which hindered visually impaired customers from accessing essential information.

Additionally, the static nature of PDFs led to poor user experiences on mobile devices and tablets due to their lack of adaptability to different screen sizes. Research highlighted the need for a more dynamic and user-friendly format. To address these challenges, I spearheaded the creation of a centralised component library in Figma. This library incorporated foundational design elements such as colours, typography, and spacing, creating a unified visual identity across all platforms. I meticulously labelled and organised user journeys to ensure seamless integration with the new design system.

Effective communication was crucial throughout the process; I regularly updated designers on changes and provided straightforward methods for locating components. Comprehensive educational documentation was developed to guide designers in efficiently using the system, fostering collaboration and consistency.

Rigorous testing was conducted to ensure that the new components were versatile and adaptable across various contexts. A robust process for adding and maintaining components was established, minimising duplication and ensuring scalability. This systematic approach significantly reduced the time and resources required for updates, enhancing operational efficiency.

Results:

The implementation of the new design system using Figma brought substantial improvements to Premier Inn's digital presence. The centralised and organised component library streamlined the design process, making it easier for designers to access and utilise components. This led to a consistent and high-quality user experience across all digital touch points.

The enhanced accessibility features, including screen reader compatibility and text-to-speech capabilities, ensured that visually impaired customers could easily access menu information. The new system's adaptability to different screen sizes provided a much-improved user experience on mobile devices and tablets.

The time-consuming and costly process of updating PDF menus was replaced with a more efficient and scalable approach, aligning with Premier Inn's long-term objectives. Overall, the new design system not only addressed the immediate challenges but also reinforced Premier Inn's leadership in the hospitality sector by enhancing the user experience and operational efficiency.

‍

Introduction:

At Whitbread there were 6 restaurants with 6 different visual language for their brands. All of the brands had similar components but different visual style that was not consistent for a centralised developers library. Therefore, I created a design system that encompasses the brand visual language of all brands and be able to have the component style change based on the brand.

This ensured that all libraries were centralised in one place and enabled cross-functional collaboration between different restaurants.

Process:

I gathered the visual language across all brands. Liaised with brand managers and PO's to propose a structure that enables flexibility, adaptability and structure. Rebuilt all of the components to work for all use case scenarios using slot components. Tested the components across a variety of journeys and handed off to developers to create a new centralised library. Created documentation for the components in Figma and Supernova

Results:

As a result, we centralised all digital assets into one platform, ensuring a consistant and efficient system for managing as a parent system across all brands.

Introduction:

Customers wanted to be shown different rates for hotel rooms, each rate had a different total price. The component used by designers varied across user journeys, meaning that there were inconsistencies leading to design and tech debt. Additionally, all of the components were adaptive but not fully responsive to the dimensions of the website/app.

Process:

We considered all features and functionalities across multiple user journeys and recommended to stakeholders that we make it consistent and fully responsive across web/app. We ran an A/B Test to ensure that performance is not reduced across all journeys..

‍

Results:

As a result, we created a component that is consistent with all journeys and ensuring functionality and maintainability across design and development.

‍