Easily Manage Your Store Through The Bhinneka Seller Center App — UX Case Study
--
みんなさん、こんにちは！ (Hi, everyone!)
I want to share my project, a submission for the final case study International Design Challenge 2021 held by Binus University. The project was done in October 2021 with 10 days duration. I took the role of Product Designer (end-to-end) and lead the project. I collaborated with my 2 talented teammates, Ammania Rachmadiva (UX Research & UX Writer) and Yusuf Helmy (UI & UX Designer).
Brief Introduction
Bhinneka is a B2B e-commerce platform in Indonesia. If you haven’t heard of it, you can check it out here. Sellers can sell their goods to individual customers or corporates through the Bhinneka platform. To increase the convenience of store management for sellers, Bhinneka planned to expand their seller center website access to a mobile app. Thus, I and my team were challenged to transform the seller center’s web version into a mobile app.
However, some problems need to be considered given by the committee:
- Onboarding Process — A lot of data is required when registering as a seller.
- Managing Products — Seller spends a lot of time and through a lot of procedures to upload their products.
- Managing Sales — The seller has to continuously monitor to see the new orders.
Design Approach
Let’s jump into it!
The duration of 10 days might be sufficient for us to do a quick talk with users regarding their takes on the existing platform. Unfortunately, the timing collides with exam weeks so we had a limited working time for this project. Thus to kick off the project, we decided to do a heuristic evaluation and competitive analysis of Bhinneka’s seller center. Not only does it help us to gain necessary insights, but also to save time because it can be done quickly.
Heuristic Evaluation
We used the Ten Usability Heuristics as our basis to do the heuristic evaluation on Bhinneka’s seller center web version. With this, we can gather necessary insight regarding the existing product’s issues in a short time.
We walked through the design of the existing flow and analyzed it upon the 10 rules of thumb. We focused on the onboarding process, managing products, and managing sales flow.
Competitive Analysis
We also analyzed seller-side mobile platforms of other e-commerce in Indonesia, such as Shopee, Tokopedia, Blibli, and Bukalapak. We focused on the onboarding process, managing products, and managing sales flow.
We’ve set the ball rolling by doing the analysis. Heuristic evaluation helps us to notice existing product issues. While competitive analysis gives us insights on opportunities for the regarding features on a similar product.
Here are what we got:
1. Regarding Onboarding Process
Problem on the Existing Onboarding Flow
Based on our analysis, we found some issues for merchants to onboard as stated in the flow above. On Bhinneka’s web version, Merchant Set Up consists of Profile, Legal, and Bank Account data are combined into one form page. The amount of data required was substantial, up to 20+ inputs. Not only does it make the page overly long, but this also can hinder the recovery of data entry errors by the user. This might be even riskier on the smaller screen.
Compared to the competitors, most other e-commerce platform has short and fast steps of account registration. Probably because the others were B2C product platforms, while Bhinneka also serves B2B products. Evaluating and redefining Merchant Set Up data might be a good idea. However, we chose to skip it since it will cause change for the whole system and we needed a stronger basis to do that.
Moreover, the user needs to fill in the Address & Delivery data located in Dashboard after they complete the Merchant Set Up. This might create confusion because there was no guidance to fill in that information unless the user try to add new a product. In addition, the verification status after the completed steps was nonexistent. Given these crucial issues in the registration process, we chose to redefine the flow itself.
Proposed Onboarding Flow
We decided to change to flow and split the Merchant Set Up form (previously consisting of the Profile, Legal, and Bank Account on one page) into 4 categories presented in 4 consecutive steps shown in green, including Address & Delivery. The Merchant Set Up was also placed after the user has an account and enter the Dashboard.
By dividing the form into 4 steps, it creates clearer system visibility of the Merchant Set-Up process. Since the Merchant Set Up was done after the user has an account and enter the Dashboard, then it is possible for the user to save the contents of the form that is being filled for each step. This way, we can provide more error prevention and error recovery for the user.
2. Regarding Managing Products & Sales
Issues on products & sales management that we found were related to visibility, recognition, efficiency, and even error prevention. Below are some issues found and their respective opportunities that are also taken into consideration to build the product.
In Adding Product Form, a lot of inputs are required. We found that some of the inputs have uncommon or ambiguous terms. Thus, it’s necessary to add help & guide for the user. Then, since there’s a large amount of data required, we also suggest splitting the form into appropriate steps. This is quite important, especially on the smaller screen. Not only does it increase the system’s visibility, but it also provides error recovery for the user.
In the existing website version, Adding Multiple Product feature is available. But it requires the user to download and fill in a spreadsheet. We assumed this was so much of a hustle to do on a mobile phone. Adding a single product alone requires a lot of data, let alone for multiple products in a spreadsheet. Yet, we decided to keep the feature and validate our assumption on the test session later.
From competitor analysis, we got that some platform has shortcuts to edit or manage products. A shortcut might be useful, especially for data that changes frequently. Thus, we recommend adding a shortcut to edit stock and price from the product list page. We can validate this idea later in the testing phase.
For sales management, we couldn’t evaluate the whole process because of the access limitation. However, we could still gain necessary insights through competitive analysis. One of them was all e-commerce platform has clear steps of the order status (such as Not Paid, On Process, Sent, etc). This is important for sellers to track and manage their sales.
User Flow & IA
After having a solid take on the solution, we then build user flow and IA that describes the information structures as well as workflows of the product.
Below is the User Flow of Bhinneka’s Seller Center mobile app. I’ll further explain it along with the Hi-Fi design later.
Design Guidelines
To make sure that our design is aligned with Bhinneka’s existing design, we built design guidelines in Figma that matches as closely as possible with Bhinneka’s design.
Note: The illustration that we used is from Smash Illustrations Kit.
Here’s a snippet of it:
Hi-Fi Design
We then continued by crafting the High-Fidelity Design and a prototype using Figma.
Account Registration
The Onboarding Pages are designed to better introduce the mobile version specifically. User can then access their account immediately but must complete the merchant registration process first before they can start selling.
Dashboard & Merchant Set Up
The Dashboard Page shows sales overview, notification, chat, and also the Merchant Set-Up section. The previously one-page Merchant Set-Up is displayed as 4 distinct cards to remind users to complete the registration process and show their progress. This way, we provide clearer information on the merchant preparation process.
The registration form is grouped into 4 steps: Profile, Legal, Bank Account, and Address data. After completing all 4 steps, a merchant must accept the terms and conditions. Then the verification process begins with the status immediately visible in the dashboard.
Product Page
The Product Page is accessible from the navbar. After verified, there will be FTUE to help new users add a product. We also split the add product form into appropriate steps to provide clearer information. Info buttons are also provided inside the form for a few ambiguous fields.
On our first iteration, users can ADD or UPDATE either one or multiple products. The feature to add multiple products (simultaneously) is already available in the web version and we designed it according to the existing design. But on the second iteration, we decided to remove it (further explained in the Design Adjustment section).
However, they can still set up variants on each product. The variant page is also redesigned with the main page being a lot simpler, we only show the most important information but the details are still accessible. This way, the functionality remains fully intact with the variant feature easier to understand and configure.
Updating stock and price can also be done from the shortcut on the product list page or from the product’s details page.
Sales Page
The merchant needs to be able to access the sales page quickly, anytime, and anywhere, as it is heavily dependent on customer activity. The page provides all the immediate information and features needed to manage incoming sales. This also includes a clear order status tab, which consists of New Orders, On-Process, Sent, Done, Cancelled, and On-Hold.
Merchant can confirm incoming orders, process the order, and get package delivery numbers. We also provided a guide to help new merchants.
Usability Testing & Interview
We then held a session consisting of interviews and UT with participants of 5 sellers either selling B2B or B2C products. We also use Task Completion Rate (TCR) and System Usability Scale (SUS) as the testing metrics.
Below are the interview insights and UT results.
The main note was mobile version only serves as a companion for the desktop version. Therefore, it’s better to prioritize existing features that needed to exist on a mobile app rather than exploring new features on the mobile version.
Design Adjustment
Major design decision implemented in the second iteration is to highlight 2 key insights:
1. A Simple, but Functionally Adequate Application
We decided to remove the add multiple products (simultaneously) features because it requires merchants to download and fill a spreadsheet file. When we asked the user at the UT session, most participants said this is unlikely to be done from mobile devices. The variables in the spreadsheet were overwhelming to be filled using a small screen. That being so, we limit this functionality only to the desktop version.
2. Highlight Insightful Information
The most obvious adjustment is on the dashboard which we redesigned to feature various statistics needed for the merchants to run their store. Based on the qualitative interview that was conducted before, most merchants said they’re concerned with data such as earnings, new orders, and ongoing orders. Thus, we decided to highlight that information.
We also add the Bhinneka Bisnis section below the Merchant Set-Up section. Bhinneka Bisnis was an upgraded membership of a regular merchant. In Bhinneka Bisnis, the seller can sell their products to corporates using an e-procurement system. So we thought it was necessary to highlight this section.
Minor Adjustment
Other than the major adjustments stated above, we did some minor adjustments such as changing some confusing terms, adding tooltips, and adorning the illustrations.
Suggestion
We’ve covered the onboarding process, managing products, and managing sales of Bhinneka’s seller center mobile app. In spite of that, we also found some interesting insights from the interview other than those features. One of them was that users tend to check the progress of sales data through statistics. This was quite useful for the user to track their sales anywhere and anytime through mobile phones.
Actually, we provided statistics on the Dashboard because it also existed on the website. But we didn’t focus on that because it’s beyond the scope of the project. Thus, we suggest further investigation and exploration of Analytics & Statistics.
Reflection
Heuristic evaluation and competitive analysis in the early phase help us gain the necessary insights in a short time. However, doing evaluation and analysis without the participation of the user was quite risky. Especially if we don’t have a strong context of the user at the beginning. We might miss issues that are not quite apparent to us. If the testing results require us to make major design adjustments, the design would be needed to be tested again if it was completely new. In this case, a crucial adjustment happened on the Dashboard page.
I believe there’s a lot of room for improvement in this project. Nonetheless, I learned many things from it. Especially to be more critical of how I should approach the design decision considering the time and effort needed.
That’s it, thanks for reading! Feel free to leave a like or comment. I’m also open for any discussion, just ping me out :)
LinkedIn: www.linkedin.com/in/dhimasaji/
