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
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.
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
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.
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
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.
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.
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.
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.
Tokenization Overview
Color System
Spacing System
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.
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.
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
Screens
Components & UI Kit
6
Weeks of design