Redesign btwn’s Business Dashboard
My role: UX/UI designer, project manager
Duration: 7 weeks | Summer 2022
Tools: Figma, Figjam, Adobe XD, Google Meets
Project Overview: btwn for Business is a referral marketing platform designed for businesses that want to increase revenues and loyal customers. When a customer makes purchase, btwn sends automatic cash reward to the customer through the btwn app (customers use the btwn mobile application to use the service). The customer can earn extra cash rewards for revisiting and referring a friend. The company’s target customers are both e-commerce stores and restaurant businesses. Initially, it had more e-commerce stores as customers as the COVID-19 spread and impacted the restaurant industry. As the COVID-19 restrictions lifted, the company pivoted its goal to onboard more restaurant businesses.
The Challenge: btwn reached out to me that the btwn app has been updated with new visual designs and new rewards feature: Stamp Cards. Once a customer makes transaction at a restaurant or online store, a stamp card is going to be created automatically to indicate the customer’s nth time of visit and show how much cashback they earned and will earn. However, the new features had not been updated on the dashboard, so merchants had no access to their customers’ stamp card data.
Working Together:
This is the collaboration chart to represent how our team collaborated to deploy the updated dashboard.
Discover
1. Understand the current dashboard
To understand what the merchants can see on the btwn dashboard at that time, I browsed the dashboard.
2. Compare the btwn app to the dashboard
I navigated the btwn app to see if there is any system gap between the app and the dashboard.
Problems
After investigating the platforms’ current state, I identified the following problems:
The Dashboard does not show empty states based on the merchants’ account status.
Merchants see vague information on the dashboard (e.g. broken logo image, blurred dashboard categories).
Merchants cannot access certain customer information on the btwn app (e.g. Customer Reviews)
Define
1. Interview the stakeholder
I had an interview session with the stakeholder to understand the Stamp Cards feature’s functions and goals. After the interview, we created a hypothesis of the information the merchants would want to see:
Numbers of created stamp cards
Numbers of customer visits
Total expenses on the cash reward
Top 5 regular customers
2. Gather Feedback History
I also collected customers’ feedback from the Customer Success team, and one of the feedback stood out: one of the merchants said they’d want an option to change the cashback percentage and to change the reward options (e.g. the percentage of cash rewards, free drink).
We identified the following project goals after collecting the needs from the stakeholder and customers:
Reorganize the dashboard’s information architecture
Create new dashboard categories: Stamp Cards and Customer Reviews
Stamp card: add cash reward customization options
Customer Reviews: display customer reviews and allow merchants to reply to the reviews
Personas
btwn has two main types of customer groups: restaurants and online businesses. From mid 2020 to late 2021, btwn had more online businesses onboarded. Now btwn targets to onboard more restaurants. Based on the btwn’s current customer base and its goal, I designed 3 personas of 2 restaurant owners and 1 online business owner. For each persona, I came up with their problem statement to demonstrate the problems btwn wants to solve.
How Might We?
I designed “How might we” questions to identify the next steps to create an actionable design solutions:
How might we make cash rewards in the stamp cards customizable for the merchants?
How might we design a space, where the merchants can interact with their customers?
Problem statement 1:
Iris needs a way to track her marketing strategy and its effectiveness because she can’t tell if her strategies are meeting the business goals.
Problem statement 2:
Joseph needs to connect with regular customers because he wants to send special offers to encourage them to come back to the restaurant.
Problem statement 3:
Jackie needs to connect with new customers because she needs an efficient way to advertise her products.
Develop
Information architecture
Then, I redesigned each dashboard menu’s information architecture so that we could enhance the journey the user would take. These are some of the information architecture:
Business Profile
Marketing (Invitations, Coupons)
Wireframes
I mocked up wireframes of each dashboard menu. For example, after designing the low-fidelity wireframes of Stamp Cards, I confirmed with the stakeholder to see if the mock-ups meet the requirements and the appropriate flow. Then, we reviewed with the developers to make sure if the designs worked within the technical constraints of the project.
Throughout the design process, I updated the design systems with more components. The design system was efficient to create or edit the mock-ups. Also, the engineers could refer to the design system to deploy the prototypes to production.
