My first internship assignment: Dashboard Information Architecture and UX for a food-tech startup.
After completing High School, I took a gap year to gain some work experience and work on my graphic design portfolio for college applications. During the winter of 2015, I got an internship at Limetray — a Delhi based food-tech startup. I was initially recruited as a designer for social media and marketing, but after my first week, I was transferred to the product design department. I had zero experience in product design, so this was both a challenging and exciting change for me. Eventually, I worked on some dashboards, the most challenging one being the Third Party Delivery Integrations System.
Limetray offered a variety of services to help restaurants and food business owners to digitize their business. One of these services was the Third Party Delivery Integrations or TPDI.
What is TPDI?
Through this service, Limetray acted as a platform where the restaurant could connect with and avail third-party delivery services and monitor individual deliveries.
The Problem: Being a new service, the dashboard required a lot of work on the information architecture because of the number of variables associated with the service. For example, a restaurant could choose from n number of services, and sometimes the restaurant could have x number of branches in y number of States. Besides, the restaurant had to monitor a number of factors like time taken to deliver, cost of delivery % to the total cost of the order, distance covered, revenue generated etc. All these factors demanded a solution wherein the user, the restaurant business owner (who isn’t tech-friendly), could easily navigate through all the options, understand the statistics and take steps to improve business.
Working towards a solution: Since I was a young intern with no experience in product design and all our users were active clients, I wasn’t given much freedom with UX surveys and research, but I worked closely with the sales team and the product manager that carried out all the surveys. Based on our collaborative efforts, we figured out that the following sets of information were preferred by the clients from both business and customer experience point of view:-
- Averages for:
* Cost of Delivery
* Time taken to deliver
* Turn around time (time taken by the delivery service to respond to the customer’s delivery request)
* Delivery cost to order cost (%) - A way to show individual deliveries and the data associated with them
- A way to compare and review all the services availed
- Filters for every module, so that the user could navigate through the variables (mentioned above) easily.
Most of my work included summarizing the information that I had into categories that were simple to read and follow. After the IA, I had to find ways to make the dashboard intuitive, and not confusing. Since the time was running out (for my internship), my boss asked me to create detailed wireframes.
Design decisions: UX and UI
My primary focus was to sort all the information and categorize them, so they were simple enough to understand, filter and access, and that’ why I stuck with the basic tools for data visualization: Tables, charts and pies.
I made cards for each set of information so that they could be lydistinguished from each other visually.
The visual hierarchy:-
- Starting with averages allowed the user to know what information to pay more attention to as he/she moved further, hence the ‘Averages’ cards were placed on top.
For example: If the delivery time is alarming, the user wouldn’t waste time on every set of information and filter his search and attention to Delivery time for that particular branch. - Filters were placed on top right so they would not compete with the comparatively bigger card on the left and settle better with the cards on the right (visually)
UX Design Decisions
Based on what I had learned during the first couple of weeks, I made the following design decisions for all the elements on the dashboard application.
Filters
The two main filters were locations and time period. Since the locations could go two layers deep, I went for a two-step filter wherein the user would first select the State and then the branch.
For the time period, I went for this kind of scroll because most user wouldn’t go beyond one or two months for delivery issues, since most of these issues are settled within the active month.
CTAs
All the ‘Averages’ cards could expand to show detailed statistics. Over here the “View More” button expands the card to show a breakdown of ‘average cost’ and compares the four services so the user knows which service to get rid off (if needed). Since the start-up was planning on restricting itself to the given four delivering services for a long time, I decided to have a key and use the colors for comparison, which I normally wouldn’t do because going back and forth to the key to analyze data is a bit too hectic, but over here each service had a distinct primary color, and with frequent use, the user will be able to associate the colors with the delivery company/service.
A live feed for all individual orders (location and date specific)
The table was the most clutter-free way to show a plethora of information. Moreover, there were filters for each module which made it very easy for the user to access critical information and save a lot of time.
Since the live feed could blow up during festivals and holidays, it demanded more screen space, and that’s why an Expand Table button was added to have a full-screen view of just the table which could incorporate more data.
I decided to add a ‘raise issue’ button on the table itself to allow users to interact with important elements without extensive navigation. This feature was necessary because the ‘Cash on Delivery’ payment option lead to a lot of problems as people would deny orders, make prank orders etc.
On raising an issue, another CTA would appear at the bottom of the table in red (to highlight urgency). The user has the option to raise an issue on the spot. On interacting with the button the user gets a full screen view (pop-up) of the same table so that the issue gets more screen space to allow focus on one thing at a time.
Competition amongst the third party services
To make the experience more intuitive, I placed the cards for each availed service next to each other to allow comparison and have a competitive feeling. This would give the services the incentive to work better and the user to monitor each service and find out what service suits his business needs the best.
Different colors were used to highlight attention-demanding information and CTAs. Besides, a small badge/ icon was introduced for the company/service performing best.
Settings
The second part to this dashboard was the settings — how to enable the client, someone who struggles to interact with tech, to seamlessly navigate through the settings.
Categorizing Settings instead of a single page scroll
After classifying the settings into four broad categories, I decided to use big icons for each category to allow visual association with the settings and avoid confusion.
Moreover, the company made the dashboards customizable and flexible, with such options it became necessary to have a hierarchy of approaching settings.
Another challenge was to use visuals for guidance/assistance, but keep them limited since I didn’t want the client to keep scrolling through an infinite space and get annoyed. I introduced logos instead of text because visual association makes it easier for the user to navigate through options. I also introduced more interactive features like switches and drag and drop because I believed that settings needed to be as intuitive as the dashboard since that’s where the user took actions to improve the business.
So this was my first product design assignment ever. It was really enjoyable to work with both the product and sales team. Most importantly, I’m glad I was made responsible for such a project without any prior experience in the field.
Later I worked on my UI skills. You can check out the next project I did (which was UI based) here.