VISUAL DESIGN
FOOD
2024
FoodCourt Design System
FoodCourt Design System
Optimizing the order review flow on the FoodCourt mobile app to capture richer insights and improve customer experience
Optimizing the order review flow on the FoodCourt mobile app to capture richer insights and improve customer experience
Background & Role
Background & Role
Several inconsistencies were reported across the FoodCourt mobile app, ranging from icon sizes to typography, colors and component styling. Given that the mobile app is the primary touchpoint for all users, it was crucial to establish a unified design system that would enhance consistency, streamline future design efforts and reinforce brand identity.
I collaborated closely with another designer to research and implement a scalable design system. Our process involved analyzing existing inconsistencies, researching best practices and drawing inspiration from Material Design and other established design systems.
Several inconsistencies were reported across the FoodCourt mobile app, ranging from icon sizes to typography, colors and component styling. Given that the mobile app is the primary touchpoint for all users, it was crucial to establish a unified design system that would enhance consistency, streamline future design efforts and reinforce brand identity.
I collaborated closely with another designer to research and implement a scalable design system. Our process involved analyzing existing inconsistencies, researching best practices and drawing inspiration from Material Design and other established design systems.
Timeline
Timeline
January 2024 - March 2024
January 2024 - March 2024
Tools
Tools
Figma, Google Meet, Jira, Slack
Figma, Google Meet, Jira, Slack
Laying the Ground for Consistency
Laying the Ground for Consistency
Before building the design system, we first defined three core pillars to ensure a structured and scalable approach:
Before building the design system, we first defined three core pillars to ensure a structured and scalable approach:
Before building the design system, we first defined three core pillars to ensure a structured and scalable approach:
Foundations: Established fundamental design principles, including colour schemes, typography, and layout guidelines, to maintain consistency and coherence across the app
Foundations: Established fundamental design principles, including colour schemes, typography, and layout guidelines, to maintain consistency and coherence across the app
Styles: Defined the overall aesthetic, covering imagery, iconography, and other visual elements to reinforce brand identity and create a polished, engaging interface
Styles: Defined the overall aesthetic, covering imagery, iconography, and other visual elements to reinforce brand identity and create a polished, engaging interface
Components: Standardized reusable UI elements, ensuring a consistent user experience while streamlining development and improving efficiency.
Components: Standardized reusable UI elements, ensuring a consistent user experience while streamlining development and improving efficiency.
By laying this groundwork, we created a unified system that not only resolved existing inconsistencies but also provided a scalable framework for future design iterations.
By laying this groundwork, we created a unified system that not only resolved existing inconsistencies but also provided a scalable framework for future design iterations.
By laying this groundwork, we created a unified system that not only resolved existing inconsistencies but also provided a scalable framework for future design iterations.
Foundations
Foundations
With consistency as our guiding principle, we established three foundations: typography, colors & spacing that provided a structured framework, ensuring visual harmony and scalability as we expanded the design system.
With consistency as our guiding principle, we established three foundations: typography, colors & spacing that provided a structured framework, ensuring visual harmony and scalability as we expanded the design system.
Typography: FoodCourt uses two open-source typefaces- Noir Pro and Product Sans . Noir Pro plays a central role in the app's design, while Product Sans is used sparingly across the app. The font sizes in Foodcourt’s design system follow the IBM Carbon Type Scale for consistency and scalability.
Typography: FoodCourt uses two open-source typefaces- Noir Pro and Product Sans . Noir Pro plays a central role in the app's design, while Product Sans is used sparingly across the app. The font sizes in Foodcourt’s design system follow the IBM Carbon Type Scale for consistency and scalability.
Colours: We categorized colours into product, primary and neutral tones each with clear use cases within the system. For our product colors, Foodcourt Red is used consistently throughout the app while Foodcourt Blue is specifically designated to represent FC Shop, a distinct section of the app.
Colours: We categorized colours into product, primary and neutral tones each with clear use cases within the system. For our product colors, Foodcourt Red is used consistently throughout the app while Foodcourt Blue is specifically designated to represent FC Shop, a distinct section of the app.
Spacing: We implemented the 8px spacing system to create a structured and uniform layout, ensuring consistency across the app’s design. For finer adjustments, we incorporated smaller increments of 2px and 4px to enhance both visual balance and usability.
Spacing: We implemented the 8px spacing system to create a structured and uniform layout, ensuring consistency across the app’s design. For finer adjustments, we incorporated smaller increments of 2px and 4px to enhance both visual balance and usability.
Styles
Styles
We documented icon sizing, alignment, and touch targets to ensure consistency and usability across the app. Icons follow a standardized size range to maintain visual balance, alignment rules were set to create a structured and cohesive layout, and touch targets were defined to enhance accessibility and ease of interaction, particularly on mobile devices
We documented icon sizing, alignment, and touch targets to ensure consistency and usability across the app. Icons follow a standardized size range to maintain visual balance, alignment rules were set to create a structured and cohesive layout, and touch targets were defined to enhance accessibility and ease of interaction, particularly on mobile devices
Components
Components
With our foundations in place, we developed a comprehensive library of reusable components for the mobile app. This included input fields, buttons, search bars, modals, bottom nav, cards, radio buttons, checkboxes, tags, content switchers and more. Every component was structured with anatomy, variants, measurements and use cases ensuring seamless implementation and future scalability.
With our foundations in place, we developed a comprehensive library of reusable components for the mobile app. This included input fields, buttons, search bars, modals, bottom nav, cards, radio buttons, checkboxes, tags, content switchers and more. Every component was structured with anatomy, variants, measurements and use cases ensuring seamless implementation and future scalability.
Rolling Out the Design System
Rolling Out the Design System
To ensure a smooth transition, we held several sessions with the team to introduce the design system, walk through its structure, and address concerns from developers who were wary of how it might affect existing repositories. We worked closely with them to align on implementation.
To support long-term adoption, we documented a manual for handling future design updates and created a Figma library that allowed for seamless reuse of components, making collaboration between designers and developers more efficient.
To ensure a smooth transition, we held several sessions with the team to introduce the design system, walk through its structure, and address concerns from developers who were wary of how it might affect existing repositories. We worked closely with them to align on implementation.
To support long-term adoption, we documented a manual for handling future design updates and created a Figma library that allowed for seamless reuse of components, making collaboration between designers and developers more efficient.
The Final Outcome
The Final Outcome
The design system established consistency across the mobile app, streamlined workflows for designers and developers and enhanced usability for users. It remains a work in progress, continually evolving to stay current with new design needs and improvements.
The design system established consistency across the mobile app, streamlined workflows for designers and developers and enhanced usability for users. It remains a work in progress, continually evolving to stay current with new design needs and improvements.
Additional projects
