A young and natural design leader with 4.5 years of experience, specialising in creating visually precise, appealing, thoughtful, and easy-to-use interfaces for web and mobile platforms. My work is a product of craftsmanship, real-world logic, and empathy.
A design graduate from National Institute of Fashion Technology New Delhi graduate. Now a passionate and enthusiastic designer leader looking to immerse myself in the world of world class product design and branding.
Ethos.
A successful product should be inspired, intuitive and inviting. Simply put you users should know what to do with it, how to use it as soon as they look at it and how satisfying and happy they feel while using it.
Zooming way out and understanding that the controls, the copy and the screens you’ve designed are ultimately meant to help a user achieve something (or the business to achieve something), designing for all the states and flows not just the sexy “ideal state”.
From Noon Food’s first product design hire to leading all product and growth design verticals in less than 2 years. Previously, Grew grofers a one-day delivery startup to quick e-commerce giant now known as Blinkit with support in both supply and consumer facing products.
I was all India rank eight in my college entrance exam among more than two hundred thousand candidates. Taken part in courses like Human computer interaction at IIT Bombay.
Salt Bae, famous for his salt sprinkle, Salt Bae Carluccio brings top-notch regional Italian
Carluccio’s
Artisanal Pizzas
Importance of order tracking for a food delivery business
Every day, countless customers across MENA rely on Noon Food to satisfy their cravings. They browse the app, pick their favorite dishes, complete their order, and eagerly land on the order tracking screen, waiting for updates on their meal’s journey.
While it might seem simple, there’s a lot happening behind the scenes. Restaurants hustle to prepare orders, while our system works to find the best courier available. These couriers, facing the bustling streets and diverse traffic conditions of cities like Dubai or Riyadh, ensure your food arrives on time.
This process is packed with variables—from restaurant busy periods to courier availability. Through our research, we’ve noticed that while some users watch the tracking screen like a hawk, others check in just once or twice. No matter the approach, our order tracking screen must deliver the right updates at the right time.
The challenge? Designing a screen that’s clear, informative, and engaging—without overwhelming the user.
Illustration By Welovegraphics
Order tracking page - noon Food
If there’s a delay with my order, I’d appreciate a heads-up. I’ve had to reach out multiple times when my food was late. How can a delivery take more than the time informed on menu page? That breaks the expectations
— Ahmed R., Riyadh
The map feature is nice, but I often find myself worrying when the delivery partner’s location keeps changing. It feels like they might be lost or stuck somewhere. A clearer indication of what’s happening would be really helpful.
— Yomna, Abu Dhabi
I usually check the tracking page just once after I order, and it’s frustrating when it says ‘Preparing your food’ for too long without any other updates. I get anxious wondering if there’s been a delay.
— Houry, Riyadh
It doesn’t always tell me why my order is taking longer, and I end up feeling a bit lost. More updates would be great, especially when there are delays.
—
Aya, Al Ain
There have been times when the tracking status doesn’t match what’s actually happening. I’ve seen the delivery partner marked as ‘on the way,’ but then I get another update saying my food is still being prepared. It’s a bit confusing and makes me doubt the accuracy.
— Sharif, Dubai
I’m a pretty straightforward person—I just want to know how much longer until my food arrives. The tracking screen gives me all this extra info, but sometimes it’s too much. I’d prefer it if the key details were more prominent.
— Rachel, Dubai
During busy hours, the tracking updates can be inconsistent. I know it’s peak time, but it would be helpful if the app explained the delay, whether it’s because the restaurant is busy or something else. Just knowing what’s going on would make the wait easier.
— Hussain, Riyadh
The tracking page usually works fine, but it doesn’t always seem to account for things like traffic delays. Sometimes the estimated delivery time keeps shifting, and I’m left wondering when my food will really get here.
— Yara, Dubai
Existing order tracking page
The challenge
Our xisting ord r tracking pag was functional but lack d th d light and clarity that our us rs crav d. With a surg in th volum of ord rs and a growing numb r of d liv ry
partn rs, th tracking xp ri nc had b com inconsist nt and, at tim s, confusing. Us rs want d r al-tim updat s, but th y also want d to njoy th proc ss of tracking th ir food. Th chall ng was to cr at a s aml ss xp ri nc that balanc d d tail d information with a s ns of fun, without ov rwh lming th us r
K y Probl ms d ntifi d
In onsistent Information: Th old syst m provid d varying l v ls of d tail d p nding on th d liv ry partn r, l ading to confusion
Anxiety-Indu ing pdates: Watching th couri r’s v ry mov on th map som tim s caus d mor str ss than r assuranc
La k of Engagement: Th tracking pag was pur ly functional, lacking any l m nts of joy or int raction.
ARRIVES BY
Estimating...
Waiting for payment processing
ARRIVES BY
Please wait while we are processing your order 11:45 AM - 11:55 AM
Your delivery agent is on his way to the restaurant
ARRIVES BY
Abrar will be delivering your food today ON TIME 11:45 AM - 11:55 AM
Restaurant is preparing your order
ARRIVES BY
Get your taste buds ready! ON TIME 11:45 AM - 11:55 AM
Restaurant is preparing your order
ARRIVES BY
We're sending our fastest delivery agent to pick it up DELAYED 11:45 AM - 11:55 AM
Your order is out for delivery
The delivery agent will get there as soon as possible ON TIME
Yaay! Your order was delivered on time
Enjoy your food
Delivery widget on the order tracking page in different states
Abrar Your delivery agent
Manoushee Street
#45673
View order details
Thank Abrar with a bottle of water or a smile. Small gestures make a big impact. How was the delivery by Abrar
Order is delivered by the restaurant: no live tracking or rider details available Call restaurant
your payment has failed
This is a pickup order - Order ID #12345
For pickup orders, head to the restaurant and share your order ID to collect your food. View directions on map Limited order tracking
steps for your scheduled order Order updates at My Orders in your profile
Order will be sent to the restaurant on the day of scheduled delivery No payment amount will be debited until your order is accepted by the restaurant
Other widgets on the page
The solution
1. Simplified Order Statuses: We streamlined the order statuses into four key steps: Order Placed, Preparing Your Food, On the Way, and Delivered. Each step was accompanied by playful animations, such as a chef tossing ingredients or a courier zooming through the streets, making the wait more enjoyable.
2. Interactive Map: The map now shows the courier’s route with predictive animations, but with a twist—users can play a mini-game where they guess how long the courier will take, earning loyalty points if their guess is correct. This feature added an element of fun while keeping the user engaged.
3. Stacked Notifications: Important updates, like changes in delivery time or courier delays, are presented as stacked notifications, ensuring users receive critical information without having to dig through the app.
4. Enhanced Accessibility: We made sure the page was fully accessible, with features like high contrast mode, large font support, and an option to reduce motion for users sensitive to animations.
5. Fun Close-Off Animation: Upon successful delivery, users are treated to a celebratory animation featuring confetti and a smiling Noon Food mascot, wrapping up the experience on a high note.
“The queen who never was”
Building empathy
In phase 2 of our order tracking page redesign, we focused on building empathy for delivery riders, an often overlooked aspect of food delivery apps. This page is where customers first see their assigned delivery partner, but many apps fail to highlight the challenges riders face, especially in Dubai's extreme heat and during prayer times.
Our research showed that riders often receive inadequate tips due to customers' lack of awareness. To address this, we introduced post-order tipping, which led to a noticeable increase in tips. We also added a live statistic showing how many riders were receiving tips, encouraging customers to contribute more. Additionally, we displayed the current outdoor temperature on the tracking page to remind customers of the harsh conditions riders endure.
These changes improved user experience and strengthened our brand image by showing our commitment to rider well-being. Our efforts were recognized on Love in Dubai's Instagram page, highlighting the importance of tipping riders. This resonated with the local community and enhanced our brand’s reputation.
In summary, our redesign humanized the delivery process, encouraged better tipping, and strengthened both customer engagement and brand loyalty.
Live activity widget
Arrives by 11:45 AM - 11:55 AM
Your order is ready to be collected
Manoushe Street
Arrives by 11:45 AM - 11:55 AM
Restaurant has accepted your order
Street
Arrives by 11:45 AM - 11:55 AM Restaurant is preparing your order
Street
Arrives by 11:45 AM - 11:55 AM Delivery
Arrives by 11:45 AM - 11:55 AM
by 11:45 AM - 11:55 AM
A design system built to simplify daily operations and unique challenges
faced by restaurant owner
Primary
Overview
We set out to create a new restaurant management system (RMS) for Noon Food, aiming to replace the outdated dashboard that restaurant owners found cumbersome. The main goal was to build a mobile-first solution that made daily tasks easier and more efficient. A key part of this project was developing a solid design system that would ensure consistency and make it easier to scale the app in the future.
Atoms
The design system SYSTEM
Molecules
Organisms
As th L ad Product D sign r, I sp arh ad d th initiativ to d v lop and impl m nt a n w d sign syst m My r sponsibiliti s includ d
Conducting r s arch to und rstand th n ds of our us rs and stak hold rs
Collaborating with th product t am to d fin th roadmap for th d sign syst m
L ading th d sign and d v lopm nt of th n w syst m, nsuring it m t th n ds of both d sign rs and d v lop rs
S tting up a n w d sign syst m w b application to mak th syst m acc ssibl and asy to us .
Research and Insights
Our r s arch focus d on how r usabl compon nts could improv th consist ncy and ffici ncy of our d sign and d v lopm nt proc ss s W analyz d xisting d sign syst ms from industry l ad rs lik Googl , M ta, and IBM to und rstand b st practic s and pot ntial pitfalls K y insights includ d th importanc of R usabl Compon nts Th s allow d v lop rs and d sign rs to build coh r nt applications mor ffici ntly by r using standardiz d l m nts
Compon nt Librari s Th s r duc cod duplication, improv collaboration, and incr as scalability
Active color
Typography - Hanken Grotesk
Colour palette, Typography, Spacing & Iconography
Spacing
Iconography
Atoms
Buttons, inputs, labels and badges
Button
Checkboxes and radio buttons
Buttons, inputs, labels and badges
success (System response)
error (System response)
error with icon (System response)
Input Fields
Place Holder Place Holder Place Holder
Holder
Holder
Holder
Place Holder
Place Holder
Place Holder
BLACKS/BLACK 11
BLACKS/BLACK 4
BLACKS/BLACK 10
ACTION/GREEN SUCCESS
ACTION/RED ERROR STATE
REDS/RED 6
Form elements, Cards, Lists and Modals
Segmented controls
Form elements, Cards, Lists and Modals
Molecules
Form elements, Cards, Lists and Modals
Body type
Organisms
Screens
Organisms
Screens
The implementation of the design system significantly improved our workflow. Designers could quickly create high-fidelity interfaces, reducing design time from days to hours. Developers benefited from a common language, focusing more on features rather than low-level UI elements. The design system also enabled rapid prototyping and experimentation, allowing us to test and refine ideas more efficiently.
Learnings and takeaways
Building this design system was a transformative experience for our team. We learned the importance of clear communication and collaboration, ensuring that the design system and developer storybook remained in sync. While the system introduced some limitations, it also provided a structured approach that improved our overall interaction design. Moving forward, we established dedicated communication channels to manage updates and changes to the design system effectively.
In conclusion, the revamped design system has become an invaluable tool for our organization, ensuring consistency across our products, enhancing collaboration, and streamlining our development processes.
Impact of visual design in consumer facing products
Evolution of noon Food Homepage
noon Food - Homepage October 2022
Attracting a new customer base, changing perceptions