AI Recommendation is a new feature project for an existing robot training environment that helps the user to train the robots to automate data extraction and monitoring data for them. Aside from the AI feature helping the user with easier, relevant data selection, it also increased in task completion rate along with decreased human error in pagination methods.
AI Recommendation
Platform Context
Robot Studio is a robot training environment within Browse AI where the user can easily train the robot to extract specific data and monitor changes. It offers step by step guidance for the user to easily select data and label the data for the robot to track those data in the future.
Project Context
AI Recommendation allows users to follow the simplified training by accurately selects data within websites, automatically labels datasets, and defines pagination—reducing errors in areas where manual selection and our platform typically struggle, and emphasize the product value of ‘ease of use’.
By using the AI technology in the right way, we are able to increase task completion rate, reduce user time in training and for us to reduce human errors that ends up decreasing the time of CS.
My Role
Lead Product Designer - Brainstorm Session, Research, Wireframe, User Flows, High fidelity design, Prepare assets, Dev Handoff, Further design iteration
Collaborated with 1 Product Manager and 2 Engineers.
Timeline & Status
4 months, Launched in June 2023
Achievement
✔️ Got positive feedback from beta user surveys
✔️ Task completion rate of training robots increased 21%
The easiest way to extract and monitor data from any website.
This is one of the key value Browse AI have. In order for us to continue reach that point, we were on a journey to continue iterating the current experience in the robot studio where we emphasize ‘ease of use’ with increasing robot completion rate with higher success.
SNEAK PEEK
Final Experience + Impact
Automated Pagination
By automatically selecting the pagination and also enhancing the visualization of the each options, it reduces the complexity of choosing the pagination which decrease the overall error states and CS human support work.
Recommended datasets
Instead of manually selecting data sets, users now can receive AI recommended datasets to help them reduce time of data selection and labelling datasets.
We believed in crafting the experiences by leveraging AI as well to be a best-in-class web scraper.
The main success metrics:
Overall recording completion rate
New user first robot completion rate
Overall median time to record a robot
Number of robots created
Acceptance rate for recommended datasets
Overall acceptance rate
Median time to record a robot for robots created with AI assistant
We believed in crafting the experience by leveraging AI in the robot training process.
Design Process
Precedents
When onboarding onto the AI recommendation project, it has been just 3 weeks as I joined the company. I was just starting to learn about the product as a whole and in order to start quickly set up for success, I decided to look into other competitor products to find key themes in web data extraction so I can benchmark.
From 4 different web data extraction product, the common behaviours I found includes:
Context
Brainstorming Session
With the insights in mind, I chose to brainstorm the core flows with a fellow designer.
The objective of this brainstorming session is to explore creative flows and sketches depicting user stories within Robot Studio. These sketches will serve as the foundation for developing wireframes, allowing for the exploration of multiple options for integrating AI features to improve the user experience. The ultimate goal is to make Robot Studio more user-friendly and ease of use for users.
Context
With a fellow designer (who is an expert in this product), we decided to quickly sketch out 3 user stories for 15 minutes.
Workshop Process
The outcome of the brainstorming session
Once the sketches were done, we had conversation about each of it, commenting on the sketches directly to calibrate our thoughts as whole. Then, I decided to make the sketches come alive.
User Flows / Design Exploration
Expanding on the brainstorming session and the user flows, I did further design exploration on key elements that needs to be communicated with the users in the main flow. Here is an example of how the robot studio tooltip has developed over time.
Once the exploration was finished, I had 2 meetings:
Just about this time, I had an engineer checkin meeting as well. This is when I learned about some of the tech limitations and the architecture of Robot Studio experiences that I should be aware of. Based on:
loading time will be longer therefore, we need to make it feel like it’s delightful
we cannot include pictures on the bottom of the side bar
Based on these two new learnings, I went ahead to prioritize to make the loading more delightful and make the experience more holistic in a familiar experience in Robot Studio.
There were also multiple design feedback session with the design team + CEO. From the meeting, I was able to align with the team on the user flow. Based on the feedback on the high priority items, I made
Design Iteration
Loading state
Since we knew the AI feature loading state is going to be a crucial friction to the user, we wanted to make it a bit more joyful as possible. I held a mini brainstorming session again to explore different visualization that can possibly make the experience a bit more smoothly.
Design Feedback
As I ventured into designing various widgets, I sought feedback from fellow designers, focusing on two major concerns:
Ensuring my design is cohesive, flexible, and digestible
Confirming coverage of all edge cases
The outcome of the design iteration
These are a few examples of how my design evolved through multiple iterations and feedback loops. In addition to input from designers, I collaborated with the Internal Operation Team to gain insights into information hierarchy.
This collaborative process empowered me to iterate with confidence as I advanced through the design phase.
Problem with our data extraction approach
Some of the data selector was not reachable by creating experiences, they were based on technical limitations.
Unreliable Data Selector
Aside from the above problems to solve, we wanted to incorperate AI for the future usage.
There are powerful AI tools available now that can help read and process information online. We already see some web scrapers making use of these tools to automatically identify and scrape content on a webpage with the user just needing to enter the URL. We want to include these kinds of features as well, and make sure we’re leveraging AI to be a best-in-class web scraper.
The power of AI
In order to efficiently extract data for the users, the robot has to mimic the behaviours. It means the robot needs to know how to extract data beyond just the first page and in order to learn how to move onto the next page, it was the human during the robot studio training where they had to properly train the robot. However, often times, people had hard time selecting the right pagination method.
Pagination Errors
Final Design
Updates on the new dashboard
Dev Handoff
Documentation: Global behaviours & Interaction model
When handing off the design to the devs, communication and documentation is important. I have specified flows, interaction and global behaviour rules for the developers to follow. From this document, we were able to clearly communicate the hover state, filter rules and interaction of each widget.
The outcome of the dev handoff meeting
By inviting engineers to participate in some of the design check-in meetings for visibility purposes, everyone was well-informed about the context, and there were no surprises with the design. This facilitated discussions about the priority of widgets, and constant communication ensured smooth preparation for the beta launch.
Beta Launch
Change management
Prior to the official update, we focused on change management. We initiated the process by launching a beta version of the new dashboard, allowing users to seamlessly switch between the new and classic versions using a toggle button.
Successful Beta Interview
A few weeks later, I participated in the beta user feedback session with the product team. During this session, we received positive feedback from users, emphasizing the uniqueness and great power of the widgets. Users appreciated the ability to focus directly on their concerns despite the different roles they had.
The outcome of the beta launch
The overall outcome was a success, and we officially launched and presented Dashboard 2.0 to the entire user base of the platform.
Post Official Launch
With the public release of Dashboard 2.0 on June 26, 2023, our design journey reached a pivotal moment. Leveraging insights from Pendo analytics, we witnessed 224% surge in page views compared to the previous two weeks and this trend has continued in a similar range up to the present (October 2023).
While acknowledging that this data may not be 100% accurate due to factors like onboarding new users, it's noteworthy that the average time spent on the dashboard nearly doubled compared to the previous version, indicating a significant positive impact from the redesign on user engagement.
Measuring Success
Takeaway
Memorable moment
One unforgettable experience was leading ideation sessions, which not only broadened my own design perspective but also opened up new possibilities beyond my initial concepts. Collaborating with a diverse, cross-functional team enriched the process with valuable insights from experts in various fields.
An additional source of pride came when I learned that my ideation workshop methods had a ripple effect. Marketing team adopted these methods for their own projects and they loved it! It brings me joy to share design techniques, making design accessible to everyone and fostering a creative culture.
What I learned about myself
In creating over 20 unique widget experiences, maintaining their cohesiveness presented a significant challenge. Establishing global behaviours that harmonized the entire user experience was a crucial step toward achieving a seamless dashboard interface.
Despite the initial challenge of building numerous widgets, I discovered a passion for establishing frameworks and creating building blocks. By constructing multiple components, I developed a versatile reference library that allowed me to design with both constraints and flexibility in mind, turning what seemed overwhelming into an enjoyable and structured process.
If I could go back
The journey of redesigning my original dashboard was an enjoyable challenge, as any designer will attest that design iterations are perpetual, always evolving toward better solutions. While Dashboard 2.0 marks a successful milestone, I recognize the continuous potential for improvement.
If I could revisit certain decisions, I would delve deeper into researching different widget types, optimizing data visualizations for specific data scenarios, and enhancing inclusive design through improved color contrast and accessible font choices.
Work Highlights
Dashboard 2.0
Data Visualization, UX/UI Focused
Mohae
Product Focused
Help Center
UX/UI Focused
Design Ops
Operation Focused