OVERVIEW
Project Goal & Responsibilities
Project Goal
Improve BONDAI’s usability and efficiency by addressing user pain points and enhancing the overall experience
Project Result
-56% support requests from clients, 124% user traffic increase, and 92% user satisfaction rate.
Responsibilities
- Conducted user research through in-person interviews
- Performed usability testing and analysis
- Developed a full design system
- Designed user interfaces for optimal experience
- Created interaction designs for seamless user engagement
BACKGROUND
BONDAI is overly complex and has a steep learning curve
BONDAI is an all-in-one B2B2C CRM platform used by Bank of America and Merrill Lynch for their loyalty programs. Designed as a self-serve tool, it allows staff to collect customer data, manage newsletters, and update websites. However, BONDAI frequently receives requests for assistance due to its complexity, leading to significant time and resource inefficiencies. To address this, the client needs improvements to make BONDAI more user-friendly.
Design Process
1
Research
User Interviews
Pain Points
Persona
User Journey
2
Ideation
Finding Solutions
Information Architecture
Mood Board
Sketch
Low-Fidelity Prototype
3
Prototype
Stylesheet
Design Solutions
High-Fidelity Prototype
4
Testing
Initial Result
Conclusion
RESEARCH
User Interviews
To better understand user needs, an in-person interview was conducted with seven end users. They were invited to the office to share insights, answer questions, and demonstrate their daily workflows.
The interview explored:
- Could you show me the steps you take to complete your tasks, and share if there are any parts that feel inefficient?
- Have you ever felt lost or confused while navigating? If so, where?
- Are there any features you wish to be added?
- How do you feel about the current design? Does it make it easier or harder to use?
RESEARCH
Pain Points
Key pain points from the old design were identified through user interviews. The screenshots below highlight areas where users faced challenges. These insights helped guide the redesign and improve overall usability.
1. Confusing Menu
Users consistently expressed frustration with the confusing menu groups and unclear tab names and icons, which made navigation challenging. One insightful comment suggested adding shortcuts to frequently used functions.
2. Outdated UI
The interface was old-looking, difficult, and not user-friendly. Users also noticed too much empty space and a blank homepage, which left a bad impression on new users.
3. Unclear Actions
Many users felt uncertain about their actions due to a lack of clear signals, making tasks like reordering, editing, or deleting items less engaging and more confusing.
RESEARCH
Persona
RESEARCH
User Journey Map
IDEATION
Finding Solutions
Confusing Menu
Group Brainstorming
Gather input from cross-departmental teams to collect diverse perspectives and collaboratively shape the new menu structure.
Outdated UI
Mood Board
Conduct market research to gather design inspiration and identify trends that could
enhance the visual appeal and usability.
Unclear Actions
Interaction Design
Prioritize microinteractions from the beginning of the design process, ensuring a seamless and intuitive user experience throughout development.
IDEATION
Information Architecture
To address the menu structure issue, we conducted a collaborative brainstorming exercise to redesign it. The interviewees were invited back to provide input on the new structure. First, we gathered their feedback on how the tabs should be grouped. Then, we organized the tabs by prioritizing them from the most frequently used to the least used. This step was difficult, as participants came from different departments, each with unique workflows and perspectives. Despite the differences, we successfully created a final menu structure and information architecture that balanced these diverse needs.
IDEATION
Mood Board
To resolve the outdated UI and lack of microinteractions, we conducted market research to benchmark the designs of other platforms and created a mood board to guide the design direction.
IDEATION
Sketch
IDEATION
Low-Fidelity Prototype
PROTOTYPE
Stylesheet
PROTOTYPE
Microinteractions
Microinteractions were one of the top priorities in this project to address user feedback about unclear actions and a lack of intuitive UI.
PROTOTYPE
Design Decisions
Sidebar menu
The new sidebar menu is newly arranged and includes a bookmark feature, allowing users to save their most frequently used tabs by clicking the star icon. Also, a search feature is added to find the desired tab easily.
Filters
In the previous interface, each page had different filter designs. I made consistent filters across all pages and added a search feature to make it easier to find what users need.
List view
Since users often work with long lines of text, a hover effect is added to the list of items to enhance readability. A "Sort By" option is added for customized views, and drag-and-drop reorder is available on supported pages.
Home Dashboard
A customizable home dashboard is launched, allowing users to mix and match widgets from their most frequently used pages for quick access and an overview.
Data Analysis
Previously, clicking on data analysis redirected users to a specific Google Analytics page. Now, the data is directly integrated into BONDAI, allowing users to set custom date ranges and access various metrics with drill-down pages for detailed insights.
PROTOTYPE
High-Fidelity Prototype
The final prototype was created and handed over to the development team. During this phase, I worked closely with the developers to ensure the highest quality of interactions and accuracy in every detail. After the product was coded, the entire team dedicated time to go through QA testing to identify and fix any errors that could lead to user frustration, ensuring a smooth and flawless user experience. The final prototype is available for preview here. (For a better view, click options (top right corner) - Fit Width. Due to confidentiality, certain links and functions are unavailable.)
TESTING
Initial Results
-56%
Data Collection Requests
124%
User Traffic Increase
92%
User Satisfaction Rate
The updated version of BONDAI was released to a selected group of end users. Over a month, we monitored their activity and traffic, followed by a user survey. The results were highly positive: requests for data collection dropped by 56%, user traffic increased by 124%, and the user satisfaction rate reached 92%.
TESTING
Conclusion
The results of this project show how important it is to focus on solving user problems. By simplifying the design and improving key features, BONDAI saved time and resources by reducing user requests and increasing engagement. The reduced data collection requests and boosted user traffic proves that the solution worked well. After just one month, these improvements showed great results, and we’re optimistic that they will continue to bring long-term benefits and increase B2B satisfaction in the future. The success of this project was also driven by active back-and-forth feedback between stakeholders. I’m especially proud of the attention to detail, particularly the microinteractions, which created a smoother and more engaging user experience.
