Overview
Clearbot was founded in 2019 by a team of engineering students from The University of Hong Kong. The team won the 1st runner-up at Global Grand Challenges Summit 2019 in London.
The project is funded by various investors, including HKU iDendron (innovative hub in HKU) and the well-known gaming peripherals brand Razer.
Check out this new Clearbot design that is under development by the engineering team of Razer.
Design Brief
To design a desktop-view dashboard for users to login and access data collected from previous cleaning operations. The dashboard should include different sections to show key data such as the total amount of trash collected, number of trash types, and distribution of trash in the operating location.
Personas
For this project, since the types of users were very restricted and difficult to reach, we have relied on secondary research data provided by Clearbot.
According to Clearbot, users can be classified into 2 types:
1.Government / Environmental Organization
The first type of users are governments and environmental organizations. They have to do on-site investigations very frequently and have little time to stay in office. Therefore they would like to have a tool that helps them generate reports of the data collected.
2.Consumer Goods Companies
The second type of users are large consumer goods companies such as Coca-Cola. They would like to track the source of ocean wastes of their disposed products, and to tell satisfying stories to their customers by taking social responsibility in environmental protection.
How I structured the homepage (as the Team Lead)
To me, a well-designed dashboard should follow the 80/20 rule. The dashboard should help users accomplish 80% of their tasks just on the homepage itself, while the other pages are there to help users for the remaining 20% of the time. Therefore, the main focus should always be the homepage. As the team lead, my responsibility is to find out what users consider important, so that my team and I can decide what should be included in the homepage.
First, let’s take a look at what are the jobs to be done based on the personas we created.
Keeping the goals of our users in mind, I have decided to divide the homepage into two major sections.
For the first half of the page, I included key metrics such as the total amount of trash collected in kg, as well as the operation locations, distance traveled, and duration. This is considered the most important because both types of users need a clear glance on important metrics.
In addition to that, I have included a map to show live GPS location and heatmap (which is shown in the prototype later) for severely polluted areas. Users can assign more robots to target specific areas accordingly. There is also a breakdown of trash by categories on the left, so companies can easily track the ocean wastes about their disposed products.
Next, I have included a “Quick Export” section on the second half of the page. With this feature, users who work for the governments or environmental organizations can quickly generate reports they need.
Lastly, users can find the last 5 rows of the most recent dataset to get a quick idea of the latest operation. They can also click on “View all” to navigate to the cloud data page, where they can download the complete dataset stored in the cloud and pass it to data analysts.
Bringing everything together, this is how the wireframe of the homepage looks like:
User Flow
Design System
Final Prototype
A Razer dark theme for the dashboard, just for fun.
Final Thoughts
It is such a meaningful project for me to design a product that contributes to environmental protection. Also, I am very proud as a HKU alumni to see my fellow students from HKU build such an amazing product.
In this project, I have learnt a lot about designing dashboard. To be honest, designing a dashboard is already a very challenging task, and designing the homepage of the dashboard is even more challenging, due to the amount of information to be displayed in a very compact screen. I look forward to designing a more challenging dashboard in the future.