Design Brief
Design the client-facing web app that let's a client company set up employees, budgets, and approval rules. Also, the experience should be designed so employees can view all their orders and know if they were approved or rejected.
About the project
During my experience I have worked on a wide variety of projects, design related, development related even devOps related but I never got the opportunity to work on a dashboard design. I wanted to explore product thinking behind any SaaS application.
So while building my portfolio I found one problem statement at design_pilot social channel and decided to build solution, it was challenging enough and I myself have experienced that issue while working at previous organisation.
Context & Problem Statement
As food ordering becomes common in organizations— from client lunches to late-night project sprints — a large number of Zomato orders placed by corporate employees are business-related. These expenses are often eligible for company reimbursement, yet the current process is manual, fragmented, and error-prone.
So Zomato found this issue and released a web app ‘Zomato for Enterprise (ZFE)’, where a client company can register itself and then Zomato will directly bill the orders to that company. The reimbursement hassle part is now bypassed.
So now you’ll ask me if it has been already solved, what you’re going to solve?
ZFE is not publicly available to anyone, the only way to access is to register with business email and there are a-lot of steps involved to onboard any client.
Neither any image is available on the internet except one released by Zomato, so I decided to design few screens by myself, problem statement had 4 flows to cover:
Add an employee
Set up monthly budget
Send food order request
Approve/Reject any order request
Billing and payment (added from my end)
Constraints & Assumptions
In order to start with the designing process I had to consider a lot of assumptions because of lack of first hand information.
Order approval will be done by admin team and not by employee/team leaders/managers.
Employees’ phone number registered on Zomato will be used for placing business orders.
Maximum budget limit will be assigned based on business size and order frequency and it will be decided by Zomato.
Core Users
Corporate employees who order food for client meetings, team lunches or business travel & offsite events (Zomato mobile application).
Finance/admin team who approves food-orders for the organization, maintaining audit logs & records (ZFE web app).
Metrics to be measures
Before moving forward with the screens, let’s also consider what metrics we’ll gonna be measuring because metrics are something which will help us (as designers) know if our solutions is effective?
Business Related | User Related |
|---|---|
Manage food expense at organization, view reports, logs and stats. | Average reimbursement time should be decreased. |
I didn’t get to test this thing, but theoretically it will help manage food expenses & order, it definitely will bring avg reimbursement time to 0. Achieving both business & user related metrics.
Components, Flows, & Screens
Sidebar Menu
Before I start with the flows allow me to explain sidebar menu. It consist of 5 menu-items
Dashboard: Default home screen with summary and consumption details.
Employees: List of all the employees who are allowed to place orders, with a filter & search element.
Meal Plans: Haven’t given much thought about it.
Payments: For billing and Finance related stuff.
Reports: To view insights and reports on past order, pattern of ordering and order related details.
Dashboard & Summery
Zomato has released an image of ZFE dashboard on their website, I took it as base to build my further designs, and even added few more details in their summary card. Like digital representation and statistic of orders, employees and budget gauge. And for simplicity I have added upcoming task section whenever moderator sign-up, so they know their necessary next steps..
Setting up employees
I first choose employees flow to start with, as it was straight forward task. A simple form with employee details like name, email, phone number, and department. Once employee has been added a push notification will be sent to employee’s email and their Zomato app to convey the message that they have been invited to join ‘company-name’ business account on Zomato, and now they are eligible to directly place business order through Zomato app.
Setting Budget for the Organization
I have set a limited budget amount for any company registered within ZFE, based on company’s scale and frequency of orders. I have assumed that to be 2.5 lakh for this case study.
Created an interactive slider input to adjust the budget amount, By rotating the slider the amount will be adjusted and there’s a note in the footer of the modal window about maximum limit and if admin wishes to increase the limit they can reach out to Zomato.
Food Order Request: Status, Approve & Reject
This flow took most of my time and iterations. Idea behind this is, that business order should be felt similar to personal orders, just when an employee select mode of payment they will have an additional option of ‘ENTERPRISE’ account which will be linked to their company’s account.
Once an employee select enterprise as their mode of payment that means it is a business order and they have to select a category for this order, right now I have included 4 categories:
Meeting Lunch: For client meeting & lunches
Team Lunch: Team or group ordering
All night Project Sprints: Food for teams working late at nights
Festival Sweets: Any festival related meal
Evening Event: For small birthday or evening snacks
Employee can select any relevant category and send the order request for approval, till employee receive any response on the request they’ll have to wait.
On the other hand, admin will receive the approval request, through a push notification (browser based/in web-app) and admin has two option either to approve or reject this order.
Now based on admin’s decision, employee will see the relevant message. I could have also incorporated reason for rejection ‘why admin rejected any particular order’ but I decided to skip that. Accepting and rejecting these two options will work fine for now. Approved orders can be placed through enterprise account.
Finance
Moving on to add financial POC and bank details to manage invoices and billing.
First step was to add an employee from finance department who has the authority to transfer funds and approve payments.
Then the finance guy will be able to add bank or card details to process any payment or transfer. Payments dashboard is similar to regular dashboard, showing cards for due payment, budget remaining and primary account for making payments. And the second row is for previous month invoices.
Time to retrospect!
So this is it, my first time hands on experience on building dashboard, it was an interesting problem for me to solve, ensuring good information architecture, clear user flows and planning edge cases. Next I plan to add reports and stats pages within this case study.
