![](https://static.wixstatic.com/media/0a5a5a_ab58909dabd8475383819237b90ca3d1~mv2.jpg/v1/fill/w_1920,h_1280,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/0a5a5a_ab58909dabd8475383819237b90ca3d1~mv2.jpg)
Optimising Reviewbah's Data Content For Higher Efficiency
Making our team's work to be more efficient and productive by simplifying complex data content into intuitive dashboard interfaces.
Team
Poong Ka Vui
Chiew Jian Zhi
Amanda Chong
Role
Hi-Fidelity Design
Visual Design
Product Strategy
Year
Jan 2024 (3 weeks)
Tools
Figma
![designs_2.jpg](https://static.wixstatic.com/media/0a5a5a_527aea485e0f4c9a9e94cb5a0fce2cb2~mv2.jpg/v1/fill/w_892,h_474,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/0a5a5a_527aea485e0f4c9a9e94cb5a0fce2cb2~mv2.jpg)
Overview
Our team has decided to create an admin dashboard for our customer review app - Reviewbah, in order that the teams can better managing the platform's user reviews, analytics, revenues and more.
I took on the admin dashboard project with my main role being the product strategy and visual design, and being the only designer on this project team, together with a back-end developer and a product manager, communication was vital for us to achieve clarity and understanding on the project.
Why We Need It
Better managing data content efficiently
Reviewbah has been expanding from being simply not just an app for customers to search or write helpful reviews but being able to purchase products on the platform via Reviewbah wallet in the future.
Because of that, a simple and centralized platform for managing user activities, analytics, metrics, data imports and exports is important for team members to make data-driven decisions and oversight over the platform they manage.
The Solution
Intuitive & understandable data interfaces for faster performance
1
![DASHBOARD -2.png](https://static.wixstatic.com/media/0a5a5a_d1d3c316d6d64615801028e9befb3672~mv2.png/v1/fill/w_678,h_482,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/DASHBOARD%20-2.png)
Simple data presentation with clear visual hierarchy
-
Teams can faster analyze presented data reports
-
Intuitive and easy to navigate
![USERS -1.png](https://static.wixstatic.com/media/0a5a5a_e0262228a4c54bc88d07f137f8641e19~mv2.png/v1/fill/w_678,h_482,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/USERS%20-1.png)
2
Manage user data and metrics
-
Track user signups, demographics, purchases etc.
-
Better understanding of user activities and behaviors
![MERCHANT-1.png](https://static.wixstatic.com/media/0a5a5a_f38197e0e67d4838829ed1bcea49c4da~mv2.png/v1/fill/w_678,h_482,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/MERCHANT-1.png)
3
Manage transactions and purchase history
-
Record and track transaction histories of users and merchants via ID names
-
Wallet transparency for easy account management
Problem Statement
As an admin dashboard designer, I want to easily present all the data through intuitive design interfaces, so that it allows admins to access information at ease.
Research
A comprehensive overview of important data content for easy interaction and navigation
I conducted some research on some articles and blogs and I came across similar key insights on how to create an admin dashboard effectively by presenting the important data on a single screen on the basis of optimizing the team's work.
Some common features to be included would be the following:
Able to manage
user profiles
Manage user's activities
and transactions
Take intervention
against users that aren't complying
Send out push notifications and messages for marketing purposes
Content and product management
Audit log, security, and permissions
Designing The Product
At first, a simple product would be feasible for a small startup
Together with a full-stack developer and a back-end developer, we've come to a conclusion on making the admin panel as easy as possible since we're a small startup consists of 5 people, so, creating an easy-to-use, simple interface admin panel to showcase data content would be feasible for us to do.
We discussed a few of the functions that needed to be added into the admin panel:
Product listings
-
List of products
-
Edit product
-
Name
-
Category
-
Description
-
Status
-
Price
-
Date created
-
Stock
-
Remarks
-
Users
-
List of users
-
Edit user
-
User orders
-
Transaction history
-
Wallet amount
-
Date joined
-
Affiliate status
-
Retention rate
-
Activity
-
Vouchers
-
List of vouchers
-
Edit vouchers
-
Status
-
Created by
-
Date created
-
Validity
-
Wallet
-
User wallet status
-
Balance
-
Top up
-
Withdraw (Merchant only)
-
Transaction history
-
Merchant revenue
-
Orders
-
List of orders
-
Edit orders
-
Status
-
Date created
-
Product purchased
-
Merchant name
-
Amount
-
User order
-
Reviews
-
User reviews
-
Total reviews
-
Written by
-
View count
-
Date written
-
Merchant name
-
Affiliate status
-
Framework
Evaluating the priority of data content is key to establishing clarity among team members
In order to have an unified understanding of what, how and why the admin panel plays an important role in optimizing data information, we discussed why and how a team member would use if for in terms of making data-driven decisions to benefit our Reviewbah platform.
Here we decided 3 of the most important data contents for us to focus on.
Product listing
details
Sales
(orders, transactions)
Users and their
activities
Improvements
2 major improvements in the design
Based on the feedbacks my teammates had given to me, I iterated the design over 2-3 days with 2 major improvements. I've come up with this layout design below to accommodate with the decision being made.
![demo.png](https://static.wixstatic.com/media/0a5a5a_f2d3bf854717487799c4bfb997d3393f~mv2.png/v1/fill/w_444,h_265,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/demo.png)
![demo2.png](https://static.wixstatic.com/media/0a5a5a_14d5fa1804644c3e821ce6504809b901~mv2.png/v1/fill/w_442,h_265,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/demo2.png)
-
(1st Tier) Yellow section: This is where the main important data are being presented in numbers, graphs, charts etc.
-
(3rd Tier) Green section: Data that consists of many texts and details (e.g purchase history).
-
(2nd Tier) Red section: A brief summary of data that are presented in numbers, charts or graphs.
![image3.png](https://static.wixstatic.com/media/0a5a5a_5cfe4875bb1c4f1d80472880d381867f~mv2.png/v1/crop/x_16,y_22,w_848,h_606/fill/w_420,h_300,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/image3.png)
![DASHBOARD -2.png](https://static.wixstatic.com/media/0a5a5a_d1d3c316d6d64615801028e9befb3672~mv2.png/v1/fill/w_424,h_302,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/DASHBOARD%20-2.png)
1. Add a comprehensive overview of data content on the dashboard option
-
Based on the feedback received, having the summary of the important data by category at first glance is more desirable.
-
Having consistency in layout is helpful for users to navigate the dashboard
2. Present all of the desired options on the menu
-
We discussed that it'd help the teams a lot in navigating to the options where they'll visit the most at one click and reducing cognitive load too.
-
Ability to toggle between days and weeks for comparing overall performance.
Final Screens
The final product
![Sign in.png](https://static.wixstatic.com/media/0a5a5a_923acc82f9004d7ba9fa5561920f620f~mv2.png/v1/fill/w_299,h_213,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Sign%20in.png)
![DASHBOARD -2.png](https://static.wixstatic.com/media/0a5a5a_d1d3c316d6d64615801028e9befb3672~mv2.png/v1/fill/w_295,h_210,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/DASHBOARD%20-2.png)
![PRODUCTS -1.png](https://static.wixstatic.com/media/0a5a5a_186745ad5c4646b5a34b326c4fe683ec~mv2.png/v1/fill/w_299,h_213,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/PRODUCTS%20-1.png)
![USERS -1.png](https://static.wixstatic.com/media/0a5a5a_790e07a2b0594928a814ca31710b3740~mv2.png/v1/fill/w_299,h_213,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/USERS%20-1.png)
![WALLET-1.png](https://static.wixstatic.com/media/0a5a5a_074e7538f79c4a96b688f0b03b67986e~mv2.png/v1/fill/w_295,h_210,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/WALLET-1.png)
![VOUCHERS -1.png](https://static.wixstatic.com/media/0a5a5a_2c1d7414479142bca36a9d02bd2f5891~mv2.png/v1/fill/w_299,h_213,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/VOUCHERS%20-1.png)
Reflections & Lessons Learned
Things I'd do differently next time
-
Keep asking questions before doing. During this project I didn't consult with my team members much often about what functions or commands should be included in the project and how it should be planned (since they're super busy). Thus I went ahead with the project and resulted in me doing a little bit too much from what they expected. Next time I'd consult with them before starting to designing any projects in the future.
-
Be purpose driven. Not (only) project driven. I noticed I was more focused on the "what" rather than the "why" aspect of the project, resulting in me losing touch of the intention behind creating and designing the product. So, with the user in mind, I hope to become stronger in communicating my product design with a designated purpose.
Thank you so much🩵
Let's get in touch via⬇️