Design System | UI Design | Branding

Tools
Figma

Duration
September 2022 - December 2023

Team
3 UI Designers

My Role

  • UI Designer

    • Assess and create a new style guide & a site map for the restaurant, Laurel’s, website

    • Build basic components using a UI Kit & expand into a comprehensive Design System

    • Wireframe & redesign restaurant website, implementing Design System components into design

    • Test the new Design System with external designers

    • Thoroughly document component usage as part of dev handoff preparation

Three Unique Experiences, One Consistent System

When FOODIES, a newly established parent company, took over three uniquely branded restaurant properties, they encountered a challenge: creating a cohesive digital presence that unites each property's distinct identity. The design team was tasked with rebranding and redesigning the home, menu, and about pages for each property’s website. With a 10-week timeline, the team needed to create an efficient, scalable design system complete with documentation to streamline workflows, store reusable components, and prepare for seamless developer handoff.

To meet these goals, the team of three UI designers collaborated closely, balancing the individuality of each restaurant’s brand with the consistency required for the newly unified FOODIES identity. The three UI designers were each assigned to a specific restaurant property, understanding that crafting a shared design language would empower future growth.

The FOODIES design system offers a robust framework of reusable components, detailed documentation, and design guidelines, enabling efficient interface design, consistent user experiences across restaurant property websites, and a seamless developer handoff process.

Challenge

FOODIES faced the complex task of harmonizing the digital presence of three uniquely branded restaurant properties under a unified identity. The challenge lay in designing a scalable system that maintained each restaurant’s individuality while ensuring consistency across the portfolio. The team also needed to develop a comprehensive design system that housed reusable components, detailed documentation, and guidelines to streamline collaboration and enable a smooth developer handoff.

01. Research & Evaluation

KEY OBSERVATIONS

  • Visual storytelling through wide imagery and videos: These elements emphasize the elegance and culinary expertise at Laurel, drawing the viewer's attention to the food and creating an immersive experience.

  • Minimalist design approach: The clean and simple aesthetic provides a sense of balance, allowing users to process information at a comfortable pace while navigating the website.

LAUREL’S CURRENT EXPERIENCE

Laurel is a contemporary luxe French-American cuisine, opened in 2013 by head chef Nicholas Elmi. The restaurant is located in Philadelphia and their website suggests an elegant and sophisticated atmosphere, reflecting the upscale nature of the restaurant.

CURRENT SITE MAP & COMPONENT EVALUATION

As a team, we meticulously mapped out the current site structures of our respective restaurant websites and cataloged the components and elements utilized. This thorough analysis enabled us to identify alignments between the various site pages and existing components.

Before initiating the design system development, each team member conducted a thorough evaluation of their assigned restaurant property. For my part, I delved into the history and brand essence of Laurel, analyzing its existing website to document key elements and components. This comprehensive assessment provided a foundation for understanding the rebranding direction and informed the starting point for building the design system. These insights were then shared with the team to collaboratively align on the initial components and structure of the system.

The simplicity of the current site map highlighted possibilities to organize pages more effectively by grouping them under a dropdown navigation item. This adjustment not only optimized the site structure but also ensured greater alignment with the navigation frameworks of the other websites. For Laurel, the existing minimalist design provided an ideal foundation for developing a new design system. The current website's components offered opportunities for streamlining and scalability, aligning seamlessly with the design needs of the other restaurant properties to ensure a cohesive and unified system.

02. Rebrand & Design

CONTINUED SOPHISTICATION WITH A DIFFERENT LOOK

Laurel has been rebranded as Le Laurier, maintaining its elegant, upscale identity. The navy, off-white, and beige color scheme, accented with green, contrasts with high-quality food imagery in front of dark scheme backgrounds, enhancing user immersion. Serif fonts were chosen to further reflect the restaurant's refined character.

STREAMLINED SITE MAP & COMPONENTS

We streamlined the main navigation menu across all redesigned websites and identified reusable components to establish a cohesive and efficient design system. For Laurel, I preserved its unique pages by integrating them into dropdown menus within the updated site map, maintaining its distinct identity while aligning with the broader structure. The comprehensive list of components required across all three brands served as the foundation for building our design library, enabling scalability and ensuring reusability as we expanded and refined the component designs.

Building on insights from Laurel's brand and restaurant identity, I rebranded it as Le Laurier to preserve its elegant, upscale essence. While each team member worked independently to rebrand specific restaurants, this phase demanded close collaboration to align components and ensure consistency in the site's structure and design.

WIREFRAMING FOR CONSISTENCY AND IDENTITY

To enhance alignment and streamline our progress, we developed wireframes for each brand. This process enabled in-depth discussions about the layout of key pages, including Home, About, and Menu. Collaboratively, we decided to standardize the layouts of the Home and About pages across brands while tailoring the Menu pages to reflect each brand's unique identity. Wireframing was a critical step in facilitating the creation and implementation of components from the Design Library. For example, it allowed us to establish consistent responsive spacing and grid structures across all websites, ensuring a cohesive and scalable design framework.

03. Build & Test

We built and tested a comprehensive design library in Figma, organizing global and local styles, creating components using the atomic design method, and refining documentation based on external feedback, culminating in the successful integration of the system into the new restaurant websites.

BUILDING THE SYSTEM

We built the design library in Figma, organizing components on separate pages for clarity. Establishing spatial and structural foundations was a crucial first step, enabling us to design with consistent components while adhering to documented guidelines for spacing, padding, and grid layouts.

I then focused on Le Laurier, starting with colors and typography, and added these to the library's local styles under the “Le Laurier” folder. Consistency in layout and documentation was ensured throughout the library. Using the atomic design method, I created components from the atom level to pages, allowing for structured growth as the design system expanded. Applying Le Laurier’s style to the components, the designs began to come alive.

LEVERAGING FIGMA FEATURES

We used Figma's powerful tools to efficiently and consistently craft components, ensuring a seamless design process. This project provided me with the opportunity to deepen my expertise in Figma’s variants feature, which proved invaluable in streamlining component libraries by grouping similar elements into a single container. Variants simplified the workflow by reducing instance complexity and flattening component structures for easier access. Additionally, the ability to rapidly iterate new states through a user-friendly sidebar interface enhanced our design system's flexibility and scalability.

DOCUMENTING RULES AND GUIDELINES IN DETAIL, WITH CARE

As the library continued to expand, we ensured that all designers were using components consistently by organizing the Figma file containing pages for each component following the atomic design model and providing specific instructions and rules on how and when to use each component. To further this explanation, we also provided examples of the components being used, ensuring specificity in the description to avoid confusion.

I worked on the redesigns concurrently, using wireframes as a design reference while implementing component instances seamlessly into the updated designs for both the mobile and desktop versions. This integration of wireframe elements with fully built components significantly streamlined the process. A key challenge—and valuable learning opportunity—was ensuring that component spacing aligned precisely with the design system's documentation. This required a deep understanding of Figma's auto-layout feature, which I thoroughly utilized to maintain consistency and efficiency throughout the redesign process.

Given the scope of designing only three pages, I created a straightforward user flow using the Auto Flow plugin in Figma. This user flow mapped out various user actions, effectively showcasing how different components would function within the design. Visualizing these interactions enabled me to integrate the flows into a streamlined prototype, ultimately bringing Le Laurier to life.

ENSURING THE INTEGRITY OF THE DESIGN SYSTEM

Once the design system was complete with all the necessary components, we recognized the potential for overlooked errors, unclear documentation, and inconsistencies. As the authors of the design library, it was crucial to test and validate the components for both visual consistency and usability. To achieve this, we conducted testing sessions with three external designers. During 30-minute sessions, participants were tasked with using the design system and accompanying documentation for Le Laurier to build an About page from scratch. I was able to observe the points during the sessions where participants took longer pauses and asked more questions when figuring out what components to use and where to place them on the page. This exercise highlighted areas in the documentation that required greater detail and specificity while uncovering inconsistencies within the components. The insights gained informed critical refinements, ensuring the design system remained robust and user-friendly.

SEAMLESSLY SCALING THE SYSTEM TO A NEW PROPERTY

We integrated design system components into a new restaurant website, maintaining consistent layouts FOODIES recently acquired Sushimi, an omakase restaurant blending Western and Japanese culinary techniques. Leveraging the scalable and refined design system, I created and implemented components tailored to Sushimi’s website. Consistent with other properties, the Home and About pages followed established layouts, while the Menu page was uniquely designed to reflect Sushimi's distinct brand identity. I led the branding and design of these pages, incorporating new elements into the local styles within the Figma library. Additionally, I supported the prototyping process for both mobile and desktop versions, ensuring a cohesive and responsive user experience.

Learning Outcomes

  • Documentation is a key part of the design process especially important for developer handoff

  • The design system is a living, breathing document and will continuously need to be expanded and updated as needed

  • Communication and organization are key factors in creating and managing an entire design library

Reflection

  • If time had allowed, I would have conducted testing with developers on our design library to identify components requiring more detailed descriptions, such as interactions, various states, and additional nuances.

  • Learning and Implementing variables in Figma to streamline and enhance design efficiency.