Arora’s - customer-facing PWA design

Recently, I got a task to design a solution for a lunch provider — Arora’s who were facing a problem in managing their lunch orders.

In this story, I have talked about their problem and the solution to it.

Disclaimer: This is my first story and your feedback will help me in improving my skills.

Challenge

To design a solution for “Arora’s”, a company that offers lunch service to Acme Co. To help Arora’s in order management and to simplify the ordering process for its customers.

Context

Arora’s, run by Mr and Mrs Arora, is a tiffin service that provides homemade, vegetarian, and north Indian lunch meals to Acme Co. on weekdays. Customers are required to order their lunch before 11:00 am and their lunch is delivered to them during their lunch break. They are charged according to the meal they order.

All the ordering and processing is done through a WhatsApp group managed by Mrs Arora. Earlier the number of customers was less. However, recently, the number increased beyond 15 and it became difficult for her to manage them.

To sort out this problem, I was given a task to create a system with which Mr and Mrs Arora could get their orders from the customers in a systematic way.

Whatsapp group in which Mrs Arora manages her orders

Discovery

I wanted to know about the basic flow of the system — how the menu was updated, how the customers placed their orders, etc. So, I asked Mrs Arora a few basic questions:

1. How does the system work?
2. Is the menu changed daily?
3. What items are sold?
4. By what time is the menu updated? And till what time can the customers order?
5. When do the customers get their lunch?
6. What are the different options for payment?
7. Do the customers have to deposit any security?
8. How are the customers informed once the lunch is delivered?

And the most important question I asked her was, “Why do people choose Arora’s?”

According to her, a lot of youngsters stay here in Bangalore away from their homes. So they look for homemade food at economical rates. Arora’s gives them homemade food at economical rates.

Mrs Arora told me that, along with Mr Arora, she was managing her small business through a Whatsapp group. The system worked like this:

Current workflow of Arora’s

So through the WhatsApp group, everything was manual, from putting orders to updating the bills per person. Mrs Arora had to keep a check on all the messages till 11 am and after that, she had to note down all the orders and compile all the items, which was a very tedious process.

I also wanted to know the flow from the customer’s side, so I met Ashmeet.

Meet Ashmeet

Define

Keeping all the problems in mind, I decided to create one such platform where the customers can:

1. have full control over the amount they spend on their lunch.
2. order individual items without bothering Mrs Arora about the prices.
3. access their previous order details whenever they want.

and where:

1. the workload for Mrs Arora becomes lesser. Earlier she had to keep a check on all the messages and at 11 am she had to compile all the orders by herself. But with this, she can take out all the compiled information at 11 am. The chances of confusion is also lesser.
2. Mrs Arora needs not maintain the wallet record herself. Everything becomes transparent automatically.

The customers were used to ordering from mobile. So, I decided to go for a mobile-first approach.

In this approach, I could go either for a mobile website or for an app. A mobile website is harder to access than an app. However, an app takes up the storage on the phone. Moreover, an app needs to be downloaded on the phone.

So I decided to go for a Progressive Web App (PWA) because it is as easy to access as an app and doesn’t take up much storage on the phone.

Sketching the solution

Keeping all the goals and needs in mind, I made a basic flow of placing an order.

Basic flow of placing an order

This helped me in making the information architecture of the app.

Information architecture

I started with rough sketches and rough wireframing to get my ideas out on paper.

Rough sketches

Wireframing

There was a need for a home page for every user. Then I thought that the home screen has to fulfill certain requirements, such as

1. The home screen should contain:
   1. a way to view the menu and place orders
   2. a way to access account details
2. home screen when an order is active should contain:
   1. a way to view and edit active orders, if possible
   2. a way to access account details
   3. a way to place another order
3. home screen when items are in the cart should contain:
   1. a way to check the cart
   2. a way to access account detail
   3. a way to place an order
4. The home screen when a new order can’t be placed because today’s order is already delivered should contain:
   1. a way to access account details
   2. a way to access the home page

So keeping all the possible options in mind, I made three states for the homepage.

Defining the UI style

After working on the wireframes, it was time to proceed with the visual design. I chose tomato color as the primary color because it combines red and orange, both of which are known to increase the sensation of hunger.

Defining the UI style

UI Design

With all the wireframes decided and styles in place, I designed the UI of the app.

Home page

Menu of the day

Meal selection

Sign-up page

Enter OTP

Review your order

Select a payment method

Confirmation page

Different states of the home page

With all the wireframes decided, I designed the UI of the app. Check out the prototype here.

Conclusion

Since this was my first design project, the entire journey was challenging but rewarding.

Being new to the field of design, every step was a learning for me. One such example was visual designing, which was a big challenge. But practicing one after another design helped me in improving my skills. I learned how I can apply Gestalt’s principles to visual design.

Also, I understood the importance of minimalism and in-depth thinking in design. Earlier, I had copied the idea of other food apps and had added the feature of ‘add extra items’ on ‘review your order’ page. But it led to a very cluttered design. Later I re-researched and found that the customers do not add extra tiffin to their orders but they just customize their meals. So I eliminated that option, which not only made the page simple but also neat.

What next:

This PWA is still in its early stage and is not tested by its users. By doing a usability test, more problems can be surfaced and solved.

Also, this is not the entire solution. This is just one side of the coin. There’s a need for another platform for Arora’s with which they can manage their daily orders. ̶T̶h̶i̶s̶ ̶w̶i̶l̶l̶ ̶b̶e̶ ̶a̶ ̶p̶a̶r̶t̶ ̶o̶f̶ ̶m̶y̶ ̶f̶u̶t̶u̶r̶e̶ ̶p̶r̶o̶j̶e̶c̶t̶s̶.̶

Its story is now published. You can check it out here.

Arora’s — a UX case study Part 2

Let me know your thoughts on how I could design this better. Your feedback is highly appreciated.

Thanks to Abhishek Sharma and Vineet Arora for helping me during my project.