Masthead_Atomemc1-1
WEB APP DASHBOARD

Atome Merchant Dashboard

Background

This project is a revamp of a B2B facing dashboard for Atome merchants to retrieve information on their transactions, payout, and manage their business profile.

My role

- Designed the UI screens across 3 breakpoints, desktop, tablet, and mobile
- Led the creation of Atome merchant design system
- Govern and update design system

Problem statement

How can we create an accessible platform for merchants and staffs to access and retrieve information?

The existing merchant center dashboard was put together by the engineers, it was not responsive and had several user experience issues. 
In certain stores, they do not have a tablet which meant that if the staff have to retrieve information about the transactions, they would have to use their their personal mobile phone to login and access the dashboard.

Objective

Improve the user experience for store staff by creating a mobile responsive platform.
Establish a design system to reduce redundancy of components usage while maintaining visual consistency.

mc_04

Dashboard

The merchants need to have an integrated view of their performance. The dashboard provides an overview of their orders, customers, and followers and a conversion summary. Users get to filter the orders by outlet, period, and frequency. 

A breakdown of statistics of their new and repeat customers helps the merchant to understand their customer demographics better.

mc_05
mc_06-1

Analytics

We make it easy for merchants to understand their followers and customers better. With these insights, it helps them do better ad targeting and build a better partnership with Atome.
Providing clarity on top purchased categories as well as frequently browsed merchants.

Payout & Transactions

Providing merchants with an accessible way to track their daily, monthly, and yearly transactions. This information can be easily exported for accounting purposes. At the same time, they get to manage their payouts from Atome.

mc_07

Design System

A design system library was created for Atome Connect, and it is designed to be used across all merchant-facing products. It covers app and web components that have been built into the code base.

mc_library

Results & Takeaways

- Reduce in number of queries related to retrieving information from the platform
- Increase in percentage of merchants/staff using the dashboard

This project was done in 2-3 months, and I worked closely with the other designer to ensure it goes smoothly. The key learning here would be time management and understanding the engineers' workflow so that we can hand over screens in batches while meeting the timeline. At the same time understand the best ways to build a lean design system that can work across different platforms.

Product Design Team:
Designers: Alvin Tan & Qian Yu