Lebin Qi
Juno&co. Inc. is an e-commerce company based in the Bay Area. I join the team in 2019 as a product designer. I have worked on many aspects of the online shopping experience, including leading the shopping app design, customer shopping experience research, and implementing a design system. This dashboard is a data analytics tool that give an overall view to track the online store sales performance and metrics of social media marketing.
Time and Contribution
This case study presents a dashboard design project I was responsible for designing from March 2020 to April 2020. My work included user research, wireframing, prototyping, interface and testing. I worked with one PM and one developer. They gave me great support to build out all of these things.
Team
1 Product Designer
1 Product Manager
1 Developer
My Role
End to End Designer
Business Problem
The company used to collect all the data from different applications in one excel sheet. Manually completion of this work is inefficient and collected data is lagging behind. Our marketing and store operation teams need a place to present all the real-time metrics they need. And compared the data at different times.
The users: Our internal marketing specialists & online store manager
I spend two days worked with our marketing specialists & web store manager to better understanding the business requirements from them. This process helped me figure out what they need for this product. After listed all the information and highlighted the key points, then I have a meeting with the product manager to discuss their initial needs and how to optimize on my list.
Understand Tech Constraints
Before I started the design, I have to talk with our developer to see if there are any tech constraints to get the data in all the metrics. Fortunately, we can get all the data we need. And the more exciting thing is some of the services we use provide API for us. Such as we could get a notice if a customer's payment information has risk. It is greatly helpful to the operation of our online store.
Design
Working on the components one by one
After going through my list I found the metrics required by the two teams had a lot in common, but there were some differences. In that case, I came up with an idea to divide different metrics into a single component, users allow to make up a personal dashboard by using all the components.
Wireframe
I mocked up the wireframes for those components and put them into two parts. On the top of the dashboard, it will show the real-time data for online store performance. The following are the visualized online store metrics. By grouping them, users can have an overview and precise data through the dashboard.
1. Real-time monitoring the performance of the web store
A quick check for the online store's sales, sessions and orders in real-time. It also includes an order alert if the billing information had any issues.
2. Visualized online store metrics
Here I used different charts and lists to visualize all the metrics required by our team. These metrics, in turn, told them what we need to know about our online store’s performance.
Challenge
How could the users compare metrics to the previous period?
After creating the wireframes of different metrics, I tested and confirmed with our team to know they understood each component. Also, I have a task to add a feature to compare metrics in different periods. I have an idea to add a date selection section in the dashboard, and the metrics will including a compared data from the selected previous period.
Users can turn on the comparison feature to select two groups of periods. Then the differences will result in the charts and lists.
Metrics comparison in line charts
Metrics comparison in column charts and lists
I also add a filter to the top of metrics cards. Because both teams will use the dashboard. By the filter, helping them quickly located the important metrics they need. Avoid the dashboard overloaded with information
Metrics Filter
Final Design
Reflection
In this project, it is hard to decide which metrics should stay on the dashboard. All the data looks useful, however, too much information will overwhelm the users. And it will make this data-driven design worthless. As a designer, I should always understand the business of the company, have this basic knowledge will help me making more suitable decisions.