Online Ordering Dashboard

The Business goal at a glance

Popmenu is a marketing technology platform designed to make growing your restaurant easy. With that as our North Star, we made a decision to design dashboards for various features of our product to enable our users and help them in the growth of their restaurant. Online Ordering is one of the most important aspects of a restaurant's business and as a result, it was evident that we needed to make a dashboard for this feature. The business goal was clear, we needed to provide our users with essential insights about their order patterns, for example total revenue, volume, average order amount, best sellers, order types, hourly volume, and fulfillment-based revenue. Along with that, we wanted to highlight trends that could aid our users in strategizing their operations.

Part of the process of us gathering the different types of data points to show on a dashboard.

Goals

The project aimed to create an intuitive, easy-to-understand dashboard that could reveal order trends, and adapt it for our mobile and tablet apps. We were addressing our users' need to better understand the performance of their orders. For instance, they wanted to know which dishes were hot sellers and which weren’t, to help in their business decisions. Insights into the peak hours for orders were also sought after, enabling them to staff accordingly or prep for high-demand dishes.

Our goals for this dashboard were:

1. Create a dashboard that included important data points and was easy to understand.
2. Show trends related to how orders were performing.
3. Design a mobile and tablet app.

My Role

Although I was part of the AI Answering team, I got the opportunity to design the Online Ordering dashboard, filling a gap as there was no designated designer for that team. My collaborators included a PM, Lead Engineer, and data analysts. After we launched the dashboard, I partnered with the UX Researcher to evaluate its impact. An additional responsibility was ensuring the dashboard's presence in our mobile and tablet app, which led me to work closely with the product designer on the mobile team.

Design process

The way I approach solving a problem is typically the same from project to project. Some time ago, I sat down to document what my “usual” design process is. By "usual", I mean that while variables can change and not every scenario is exactly the same, this process is typically how I approach problem-solving. Below is the TL;DR version of my design process, and I've linked the full document I wrote here:

Part of the process of us identifying the key metrics.

Since we had already agreed upon a framework for dashboards, that was one less step that we needed to spend time discussing, and it meant I could move into understanding the problem. This step is where I spend time asking a lot of questions. I want to understand what we are trying to solve and also how this aligns with business goals.
 
After understanding the problem as deeply as I could, we met as a team, which included the PM and engineers, and I helped everybody get aligned on the problem. Alignment is key because it helps to ensure that as a team, we are working towards solving the same problem.

After this, I partnered with the UX Researcher, and we spent time researching and understanding our users to get a good understanding of how they used charts, dashboards, and their understanding of them..

From this, I started exploring and designing multiple different solutions. I chose one of the solutions and made a prototype, which I then tested with a small sample of users. We got great feedback from this user test and went back and spent time redesigning the dashboard based on feedback."

A view of some of the explorations.

One of our objectives was to also translate this design into a user-friendly mobile and tablet application. For this, I reached out to a senior product designer from our mobile team. Given my deep understanding of dashboard designs and her extensive experience in mobile app design, we were able to tackle the problems together. We held regular meetings, brainstorming, critiquing, and fine-tuning designs together, ensuring a unified vision across platforms. This process of ideating and testing proved to be crucial because it helped us reach our final solution with confidence.

A view of some of the design explorations we did.

Design

Before I began the designing process, I led a discussion on the function of dashboards and their fit within the broader ecosystem of our software. I had conversations with the product team and internal stakeholders at Popmenu to ensure a consistent interface across Popmenu. This consistency would allow our users to understand and navigate the platform more effortlessly. By establishing a mental model of what a Popmenu dashboard looks like, we aimed to ease user transition between different sections of our platform. Meanwhile, another product designer on our team focused on designing and testing various dashboard layouts. This collaborative effort not only informed a company-wide dashboard framework but also established a universal layout applicable across all areas of our software. Now that we had a shared understanding and insights from our research, I could rapidly iterate through design explorations.

So I might have done a lot of exploration. 😅 🔍

We released an early dashboard design to a select group of users for testing, focusing on a comprehensive assessment of its functionality. Besides seeking their opinions on overall impressions and ease of use, we aimed to determine three main aspects: 1) whether the dashboard effectively communicated the ROI of AI Answering, 2) if it helped users spot trends and make informed business decisions, and 3) if the dashboard increased data comprehension for users. The insights gathered from this user testing phase were invaluable, providing us with a clear direction for our subsequent design iterations.

An early dashboard design that we sent to a select group for testing.

ROADblocks

One of the biggest hurdles during the design process was determining the most user-friendly way to represent the data. Having a dashboard template was beneficial, as it eased the cognitive load of the users when interacting with different dashboards. However, we were still tasked with figuring out the best way to visualize the data. We had to make decisions on the types of charts to display, how to group them, and more.

To tackle these challenges, we dove into a comprehensive study of best practices for chart design. After making decisions about the types of charts, we conducted user tests with a small group. We wanted their feedback on whether they understood the charts, the grouping, and what their next steps might be after viewing the dashboard. This feedback turned out to be invaluable and played a significant role in shaping our final design.

Iterating on chart solutions that we could test.

Solution

The final solution that we launched.

The mobile and tablet dashboards.
The web dashboard.

Results & Impact

After launch, the UX researcher and I gathered feedback on the dashboard. The response was immediate and impactful. Users reported increasing their staff during specific hours, based on the top-selling dishes identified at those times. They also adjusted their inventory accordingly to prevent dish shortages. An unexpected outcome was that users began offering discounts on less popular dishes to boost their sales, a strategy they devised after viewing their order trends on the dashboard.

Reflections

One of the most valuable takeaways from this project was the importance of cross-functional collaboration. Regular communication with various teams—senior mobile product designer, ux researcher, pm, and engineers—led to a richer understanding of the project from multiple perspectives.