Arora’s — business app design

Kriti Arora
5 min readJan 3, 2020

Last month, I published a story in which I wrote about a company-Arora’s that offers tiffin service to employees of Acme Co.

As I mentioned earlier, Arora’s, managed by Mr and Mrs Arora, has been running its business on a Whatsapp group in which Mrs Arora updates the menu by 9 AM and customers put their orders in the Whatsapp group only.

As their customers went beyond 20, it became difficult for them to manage the business. So, there was a need for a platform where Arora’s could get their orders in a systematic way.

The problem would be solved in two phases:

  1. Getting orders in a systematic way
  2. Managing those systematically received orders

Part 1 was solved in the previous story in which a platform was designed for the customers where they could order their tiffins in a systematic way.

Now, for part 2, there was a need for a platform where Mr and Mrs Arora could manage those systematically received orders.

Define

The workflow of Mrs Arora, as I wrote in the previous story, starts at 9 AM.

At 9 AM, Mrs Arora puts the menu in the Whatsapp group. At 11 AM, she compiles all the information and calculates the quantity which she has to cook. Once the lunch is prepared and delivered at 1 PM, she posts the message in the group that the lunch is delivered. After winding up her work, she starts planning the menu for the next day.

Her morning routine is very tightly scheduled and it is very difficult for her to give attention to the group messages. There are times when her attention span is very low and there are times when her attention span is very high.

Selecting the platform

Because of Mrs Arora’s busy schedule and low attention span, I decided to go for a mobile application as it would be convenient for her to use her mobile phone than a laptop or computer or a mobile website.

There was a need to design for 3 different contexts of the workflow. They were:

  1. Menu updation
  2. Checking Total orders
  3. Deciding menu for the next day

Menu Updation

For menu updation, I came up with a rough idea of how the screen would look.

Menu updation

But even in this screen, Mrs Arora had to write and update the menu, which was again time-consuming.

Then I noticed that the entire menu does not change daily. It is just the sabji that changes daily, and rice, curd, or raita were added occasionally.

So I designed the page in a way that

  1. chapati, salad, and pickle would remain constant
  2. sabji could be changed daily
  3. rice, raita, and curd could be turned on and off.
Menu updation

Checking Total Orders

For total orders, the screen would be planned in a way that the orders are displayed with the names of the customers. This would help Mrs Arora to maintain a personal connection with her work because she is used to taking orders on the mobile phone where the orders are displayed with the names.

Checking total orders

Deciding menu for the next day

There was a need for a section that could give suggestions for the next day. With this, the workload of Mrs Arora would decrease as she would not be spending too much time on planning the menu for the next day.

Suggestions

Thus, overall, these were the different contexts that would change with action and time.

How home screen changes with context

Apart from these three contexts, the system would also include customer information, their order history, and sales to avoid any confusion at any stage (example- in case of wrong order being delivered to the customer or to check the sales of specific day or week).

Navigation

I chose bottom navigation over a collapsed navigation bar as it is more simple, clear, and visible. Moreover, there were only 3 options for navigation, so I didn’t feel the need to collapse the navigation.

I chose bottom navigation over collapsed navigation

Information Architecture

Keeping the basic flow in my mind, I made the information architecture.

Wireframing

A. Menu Updation

Menu updation

B. Total Orders

Checking total orders

C. Sales and Order History

Sales and order history

UI Style Guide

After working on wireframes, it was time to proceed with visual design. The guide was almost similar to the style guide used for the customer-side app, except for a few input forms.

UI Style guide

UI Design

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

A. Menu Updation

B. Total Orders

C. Sales and Order History

Conclusion

This was part 2 of the solution for Arora’s. With the customer-side application, the customers can order their tiffin in a systematic way and with this application, Mrs Arora can manage her systematically received orders and can save her time in planning the next day’s menu.

Thank you for reading. Please comment your views/suggestions if any / highlight any mistakes so that I can improve this app as well as my skills.

I am currently looking for opportunities in product design. If you find this article useful, kindly share it in your network.

--

--