Pindi Platters Restaurant Website Design

Aamir Naseem

laptop website mockup

Project Overview

The Product

PindiPlatters is a restaurant located in the mid of Rawalpindi which also sell online traditional food of Rawalpindi in the surroundings of Rawalpindi city. This website is designed for those who either are the local youth of Rawalpindi or the outsider who work or study here and they want to taste the famous and traditional food of this city.

Project Duration

August, 2024 to September, 2024

Project Preview

Project Overview

The Problem

Young students and professionals in Rawalpindi, often living away from home, struggle to find affordable, authentic, and convenient traditional food. Their busy schedules and limited budgets make cooking difficult, and they desire the comfort of home-cooked-style meals delivered reliably to their doorstep.

The Goal

To design and launch a user-friendly online food ordering website that provides a seamless, reliable, and satisfying experience for time-poor, budget-conscious individuals to order authentic Rawalpindi cuisine, thereby becoming their go-to solution for traditional food delivery.

Project Overview

My Role

Lead UX Designer (research, wireframing, testing, and final design).

Responsibilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping,conducting usability studies, accounting for accessibility, iterating on designs and responsive design.

Understanding the User

User Research: Summary

I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users treat online shopping as a fun and relaxing activity when they need a break from school or work. However, many shopping websites are overwhelming and confusing to navigate, which frustrated many target users. This caused a normally enjoyable experience to become challenging for them, defeating the purpose of relaxation.

User Research: Pain Points

1

Difficulty Discovering Traditional Food

Struggling to find truly traditional food that reminds them of home in a convenient delivery format.

2

Uncertain Delivery Availability

Users don’t know if the restaurant delivers to their specific hostel or apartment area.

3

Inconvenient Payment Options

Lack of easy and quick payment methods like mobile payments or debit card payment on websites.

Persona: Fatima (Busy Professional)

Problem Statement

Fatima is a software engineer works in Rawaalpindi from Lahore who lives in a rental apartment in Rawalpindi. She has a busy job schedule so she often orders online food.

Haleem

Age: 26

Education: BS
Occupation: Software Engineer

Goals

- To order food multiple times in a week..
-Need customization options.
- Less cluttered navigation & layout for easier navigation.
- Easy checkout process.

Fraustrations

- Unreliable delivery times.
-Limited payment options.
- Food does not match homemade quality.
-Complex user-interface.

Works long hours and values convenience. Doesn’t have time or energy to cook after work. Seeks hearty, authentic meals delivered quickly.

Persona: Muhammad Hussain (Student)

Problem Statement

Muhammad Hussain is Computer Science Student from Queta who lives in a hostel in Rawalpindi. He has a busy study schedule so he often orders online food.

Haleem

Age: 24

Education: BS
Occupation: Student

Goals

- To find the most affordable and traditional meal. -Split order with friends. - Pay easily via mobile wallet. - Easy checkout process.

Fraustrations

Hidden delivery charges. -Limited payment options. - Food does not match homemade quality. -Complicated ordering processes

Has a tight budget and no cooking facilities. Craves traditional food but can’t afford expensive restaurants. Very tech-savvy.

User Journey Map

I created a user journey map of Fatima’s and Muhammad Hussains’s experience using the site to help identify possible pain points and improvement opportunities.

Food Website User Journey Map

Starting the Design

Sitemap

Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap.

My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.

Food Website Site

Paper Wireframes

Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points about navigation, browsing, and checkout flow in mind.

Food Website Paper Wireframes Desktop

Paper Wireframes Screen Size Variation (Mobile)

Because customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.

Food Website Paper Wireframes Mobile

Digital Wireframes

Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.

Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.

Food Website Digital Wireframes Desktop

Digital Wireframe Screen Size Variation(s)

Because customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.

Food Website Digital Wireframes Desktop
Home Mobile

Usability Study: Parameters

Study type:

Unmoderated usability study

Location:

Mansehra, Remote

Participant:

05 participants

Length:

15-22 minutes

Usability Study: Findings

These were the main findings uncovered by the usability study:

1

Customization Option

In the food details page there was no customisation option so that user can change the quantity and type of food.

2

Checkout

Users want an easy way to pay quickly during checkout, so mobile payment system was added.

3

Quick Registration

Users want to have a simple sign up process and little information to sign up.

Refining the design

Mockups

Based on the insights from the usability study, I made changes to improve the site’s checkout flow. One of the changes I made was adding the customisation option in food details page so that user can change the quantity and food from this place.

Before usability study

Details Page

After usability study

Food Details Page

High-Fidelity Prototype

My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study, as well as several changes suggested by members of my team.

High-Fidelity

Accessibility Considerations

1

High contrast between text, icons, and background. Type icons are supplemented with text labels for clarity.

2

The combination of a clear sound and a text notification caters to different needs and ensures no user misses a reminder

3

All elements are properly labeled (e.g., “Personal task type button,” “Time picker, set to 3:00 PM”).

Going forward

Takeaways

Impact:

User feedback on the final design was that it felt "quietly confident" and "deeply intuitive." Participants noted that the app successfully eliminated the anxiety of missing a reminder and the frustration of navigating a complex interface.

What I learned:

This project was a masterclass in restraint. I learned that true simplicity isn't about removing features, but about deeply understanding core user needs and designing a seamless, focused experience around them. The most fulfilling feedback was users saying, "It just works how I expected it to.".

Next steps

1

Conduct follow-up usability testing on the new app

2

Identify any additional areas of need and ideate on new features

Let's Connect

Thank you on reviewing my work on MATasks To-Do List Mobile App.

If you’d like to see more, or would like to get in touch, my contact information is provided below:

Email: info@aamirnaseem.com

Website: aamirnaseem.com