Designing scablable tools for launching private labels
Badaboom
2021-2022
Badaboom is an end-to-end wholesale supply chain platform that helps users to source high-quality products(Currently focused on the eyewear industry) and launch their brand.
Since September 2021, I joined Badaboom as a product designer to be responsible for multiple projects which are building the order documents management platform for the internal team, redesigning the order detail page, the creation of user personas and the user sign-up process.
Product Manager
3 Engineers
Creative Director
Operation Team
Founding Product Designer
Product Design
Interactive prototyping
User Research
Usability Testing
2021-2022
↑15% vs. industry baseline rate
with peaks of 950+ logins/day
through 200 lending institutions
Throughout the project lifecycle with Badaboom there are a number of documents that are created. Documents span from commercial agreements, product development documentation as well as fulfillment documentation. Although some documents are generated and maintained by the team members, there are also documents that are produced and maintained by our suppliers.
The project goal was to design a purpose-built tool for the revenue and operations team to easily create and manage order-related documentation and files.
Documents were scattered across third-party tools
Team members need to be authorized to use certain platforms to access business documents, and some documents are not even stored, making it cost unnecessary time to confirm the order is ready to be fulfilled.
• Created a unified, scalable design framework and system that aligned borrower and lender products under a shared visual language and interaction model, ensuring consistency and efficiency across platforms.
• Established cross-journey mapping workshops to identify overlaps and pain points.
Document versions were inconsistent and difficult to track
Team members use Email or Wechat for communication and file transfer, with no place to reference the document is up-to-date or at a later date should be deleted or misplaced.
• Created a unified, scalable design framework and system that aligned borrower and lender products under a shared visual language and interaction model, ensuring consistency and efficiency across platforms.
• Established cross-journey mapping workshops to identify overlaps and pain points.
No efficient way to download or share documents on request
Team members need to use third-party platforms,email or ask internal team to find specific documents to download and then manually send them with the stakeholder.
• Created a unified, scalable design framework and system that aligned borrower and lender products under a shared visual language and interaction model, ensuring consistency and efficiency across platforms.
• Established cross-journey mapping workshops to identify overlaps and pain points.
• Created a unified, scalable design framework and system that aligned borrower and lender products under a shared visual language and interaction model, ensuring consistency and efficiency across platforms.
• Established cross-journey mapping workshops to identify overlaps and pain points.
The first challenge was that I need to understand what files were stored in each platform since all the documents have largely lived in different places based on the activity. And this is a totally new world for me, not only this is an internal platform, there is no competitive analyses, but also I need to familiarize myself with order terms, read internal resources to understand get familiar with the “market”.
The things that I considered was that this was a requirement that came directly from CEO with strict time limit to be completed in one and half month from product design to developers’ execution. A problem arose here, as it was clearly impractical to have all the documents related to an order piled in the platform.
Users who are frequently managing orders and order-related documentations to improve profits.
CEO
Operation Team
At first, we divided the requirements into the following user stories, Create and Manage Order Documentation, Order Management, Authentication and Roles, Object Versioning, HTS Code Management, Document Signature and File Management.
With the frequent discussions among the team, considering the feasibility and time constraints, we stilled four core features that would be most impactful.
I didn't have a lot of time for explorations, under the circumstances I had some researches to see how the other platforms to do order management and quickly did some sketches of user flows with a high-level explained Loom video to test the idea and make sure I could gather feedbacks from engineers and product manager to clarify the scope and to see if we were aligned.
After gathering feedbacks from the team, I refined the flow to “Log in to the platform”, “Create a New Order”, “Edit Order Document” and “Object Version” where possible and to ensure all the information architecture is good based on team’s feedback. Furthermore, I could know percisely how many pages I needed to design.
From wireframe to high-fidelity prototype, I kept iterating 6 rounds based on the team’s feedback. Here are some key iterations.
Need more data to reflect current Sales Order details. Align with the information that the dev team has on the object structure and hierarchy. We will need to create a new Supplier to use as a one-off for the Purchase Order. Saved Supplier should be added directly to the database via Retool.
Considering the amount of data to be displayed, changed the pop-up window to full screen to support more data. And set “Create a New Supplier” to a pop-up window to avoid repetition of the modal.Highlight the element “Title” to remind users where they are.Remove all the subheads and follow the MUI design system.
By grouping the "Order Details" "Shipping" "Buyer" and "Supplier " information together to form the first part of the information to shorten the page length so that users can quickly scroll down to fill in the Line Items.Add line item uses the same popup window modal as add supplier, rather than add a new blank line item after all the items.
During final execution, I aligned the design with a new UI library (MUI) as the team moved away from ANT Design for scalability. I familiarized myself with MUI’s component architecture and patterns to design fully within the new system, enabling faster development and long term consistency.
