I led the design process for nom!, a 6-week project to help restaurants boost off-peak traffic. I guided a team of three designers, created a design system, and mentored the team to deliver high-quality results on time.

PRODUCT

Nom!

ROLE

Lead UI Designer

TIMELINE

Feb 2024 - Mar 2024

6 Weeks

SKILLS

Design System

UI/UX Design

Prototype

Branding

Visual Design

TOOLS

Figma

Trello

Adobe Photoshop

Adobe Illustrator

From Slow Hours
to Golden Hours

nom! is a mobile app that helps restaurants maximize their potential during off-peak hours. With the Deal Scheduler feature, restaurant owners can effortlessly create and manage time-limited promotions to attract diners. The app streamlines deal planning, making it easy to drive traffic, increase revenue, and optimize operations.

Designed with simplicity and functionality in mind, nom! bridges the gap between restaurants and diners, creating a win-win experience for both.

Where challenges
meet potential.

70% of diners

say that a deal or discount would make them more likely to dine out.

57% of millenials

look for coupons when looking for new restaurants to try

Source:
https://www.techryde.com/why-you-should-add-offers-to-your-menu
www.marketingcharts.com

Understanding
starts with listening.

Our first step in creating nom! was conducting user interviews. We interviewed four business owners representing a variety of restaurant types.

The objective was to understand how off-peak hours impact their businesses, identify the strategies they currently use to increase traffic during these periods, and assess how effective these methods are. These findings shaped the foundation of our design process.

User Interview Findings

"Off-peak hours depend on days, strikes, weather and other factors"

Off-peak times vary widely, making flexibility essential for scheduling promotions.

“We can only do promotions when I have the time to plan them”

Time constraints limit business owners from running effective promotions.

“Advertising that appeals to customers is very important”

Engaging and easy-to-create advertising is key to attracting diners.

Solution

From our user interviews, we identified the challenges restaurant owners face during off-peak hours: limited time to plan promotions, the need for flexible scheduling, and the importance of effective advertising to attract customers.

To address these pain points, we designed nom!, equipped with key features to empower restaurant owners

Features

Deal Scheduler

Orders Overview

Smart Ad Maker

Search & Recommended Deals

Visual Design

The visual design process began with a team effort to define the mood and direction, focusing on two key goals: attracting customers with a bold, fun atmosphere and appealing to restaurant owners by balancing creativity with clarity. We chose red as the primary colour and yellow as the accent, both of which are strongly associated with food and deals, making them ideal for a deal-focused app. The logo and in-app typography incorporate curves to create a casual, friendly vibe while maintaining a sense of professionalism.


For typography, we selected Public Sans for its clean, modern aesthetic, ensuring that text-heavy sections are legible and user-friendly. This choice aligns with our goal of creating an intuitive, comfortable interface without compromising on visual impact, making the app both easy to navigate and engaging for users.

How the nom! Logo Came to Life

The logo for nom! began with my initial draft, where I conceptualized the playful design that captures the essence of savouring food and efficient dining. My focus was on making it simple yet engaging, with elements like the bite mark and the use of bold, approachable typography. From there, my teammate stepped in to refine and finalize the logo, adding a polished touch and ensuring it fully aligned with the app's identity. The result is a cohesive visual representation of nom!—a platform that brings irresistible deals during off-peak hours.

Building The App

The development of the app began with insights from user interviews and research, which guided us in creating the user flow. We then moved to wireframes, conducting usability testing on the prototype of the wireframe to gather feedback and make revisions. These insights helped shape the final design direction. We followed this with the creation of a design system to ensure consistency, then built out components to maintain a cohesive visual language. Finally, we synthesized everything into a high-fidelity prototype, refining interactions and usability to deliver a polished and intuitive user experience.

Userflow

The userflow was designed to make the experience straightforward and efficient for both restaurant owners and customers.

For merchants, the journey starts with account creation and onboarding, leading them to core features like the Deal Scheduler and Ad Maker. They can set up promotions by selecting menu items, applying discounts, and generating promotional banners with AI-assisted text. The process is structured to be intuitive, allowing restaurant owners to quickly create and manage deals without disrupting their daily operations.

For customers, the focus is on discovering and redeeming offers with ease. After signing up, they can explore deals, claim discounts, and redeem them in-store. The flow ensures that users can quickly find relevant offers, helping restaurants drive traffic during off-peak hours while providing diners with attractive promotions.

By refining each interaction through research and usability testing, we built an experience that is efficient, engaging, and beneficial to both businesses and customers.

Select the dropdown to toggle between the Merchant and Customer views.

Wireframes

Once we completed the user flow, our team divided the features among ourselves. My responsibility was to design the Deal Scheduler, Booking of Restaurants, Customer Home Screen, and Merchant Home Screen. As the lead, I also guided other designers in shaping the remaining sections, ensuring consistency across the entire app.

After finalizing the wireframes, I set up interactive prototypes for each feature. This allowed us to conduct usability testing, gathering insights to refine the design and enhance the overall experience before moving to high-fidelity mockups.

Design System

To ensure consistency and efficiency across the team, I implemented a tokenized design system. Since the designers were new to this approach, I hosted a workshop to teach them how to use design tokens effectively. I also prepared exercises to reinforce their understanding, ensuring a smoother adoption of the system.

Our design system is built on a 4pt grid system, which helps maintain alignment, spacing, and proportionality throughout the interface. Given that we had four designers working together, tokenization was crucial in reducing inconsistencies and streamlining the handoff process to developers.

The system includes:

  • Primitive Tokens – Define the foundational values (e.g., colors, typography, spacing).

  • Semantic Tokens – Assign meaning to primitives based on context (e.g., primary button color, text heading size).

  • Component-Specific Tokens – Tailored to individual UI components for consistent styling.

To further enhance efficiency, I created detailed documentation for developers, making it easier to implement the design system in production and maintain consistency across future iterations.

Tokenization Overview

Color System

Spacing System

Components & UI Kits

After finalizing the design system and wireframes, we built the UI components and kit to ensure everything was modular and reusable, saving time and maintaining consistency. We focused on core components, variants, and flexible layouts to streamline collaboration and make future updates easier. This approach kept the design process efficient, especially with multiple designers working on the project.

High Fidelity

For the high-fidelity designs, I focused on the Deal Scheduler, Booking of Restaurants, Customer Home Screen, and Merchant Home Screen. While I assisted teammates with some of their components, my showcase highlights the flows I was responsible for. Below are the visuals of my work.

Feature 1

Deal Scheduler

Merchants can schedule deals linked with menu items in the form of redeemable, time-limited coupons. These coupons will appear on customers' home and search screens as well as restaurant profiles. Merchants have the flexibility to customize the coupons’ dates, hours, discounted menu items and discount rates.

Feature 2

Booking of Deals

Customers can search for deals and receive personalised deal recommendations according to their search and browse history. They can filter and browse deals by food categories and nearby restaurants.

Screen

Customer Home Screen

I designed the Customer Home Screen to offer an engaging and intuitive experience for users exploring dining options. At the top, users can search for restaurants by location and filter by cuisine type using intuitive icons. Below, a carousel showcases exciting offers, while featured restaurants are displayed with images, names, ratings, cuisine types, distances, and time-based discounts. A personalized 'Dishes for You' section highlights popular food items with discount tags.

Outcomes and Insights

After six weeks of design and another six weeks of development, we successfully launched our MVP, helping restaurant owners optimize their off-peak hours while aligning with their business goals.


One major takeaway was the value of strong documentation—our well-structured system allowed us to stay ahead of schedule, giving developers extra time to refine and fix bugs. This reinforced how an organized, well-coordinated team can drive efficiency and deliver high-quality results. Clear communication was essential in keeping everyone aligned and leveraging each team member’s strengths. In the end, bringing out the best in each other was key to delivering a polished, impactful product.

Design in Numbers

70+

Screens

50+

Components & UI Kit

6

Weeks of design

Copyright © 2024 Philippe Gabriel Hernandez. All rights reserved.