Product Design Portfolio - Pushp

Page 1


About.

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

Signature - Curation of high quity brands

Brand highlights

Brand highlights

The most loved restaurants in UAE
Salt Bae, famous for his salt sprinkle, Salt Bae
Carluccio brings top-notch regional Italian
Carluccio’s
The most loved restaurants in UAE
Salt Bae, famous for his salt sprinkle, Salt Bae
Carluccio brings top-notch regional Italian
Carluccio’s
Artisanal Pizzas

Banner design system

Road to the future

Thank You!

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.