Revamping the entire AutoML platform dashboard experience
to improve usability and increase user discovery rate by 23%.
( 8min Read )
Responsibilities
⦾ Product Design
⦾ Information Architecture
⦾ User Testing & Research
Project Context
∙ June 2022 - Current
∙ 8 week
∙ Team: J, M.(PM), A.(Eng)
Tool Used
∙ Figma / Invision /Illustrator
∙ Hotjar
∙ CSS
Who am i working with
Butalerlabs.ai
Butler is a Saas platform that helps developers turn AI into easy to use APIs. Create, train, and deploy AI Models in minutes. No AI experience required.
Timeline
In this 8-week project, I teamed up with a PM and a senior SDE to redesign the SaaS products including the dashboard page and pre-train library to improve usability and encourage user discovery.
I mainly use Figma for prototyping. We also run data analytics through Hotjar as evidence to support design decision.
Deliver an autoML platform dashboard experience
that helps the user discover pre-trained models that may be of interest to them,
encourage them to create custom models that are relevant to their use case.
What does Butler do?
Butler puts ML in the hands of every developer - Instantly
Butlerlabs is a startup based in San Francisco founded in 2020. It uses cutting-edge ML to ensure 95%+ extraction accuracy on any document, customized for the exact use case.
With the Butler, Over 1000+ developers are encouraged to turn AI into easy-to-use APIs.
How does Butler operate ?
Developers are encouraged to create, train, and deploy AI models that are relevant to their use case.
Our product serves pre-trained and customed models for instant management and usage :
01. Tutorial help users get started when first coming to the product.
02. Library of pre-trained models: Helps users discover models that may be of interest to them
03. Dashboard served as a Central hub for user’s models.
Problem Statement:
Developers were growing increasingly dissatisfied with how they manage projects.
When I joined the team, the leadership had already begun working on the dashboard+library revamp.
Unfortunately, the solution was made based on the existing models, it didn't consider the increasing number of both pre-trained models and custom-trained models (Lack of scalability). Thus, our current interfaces couldn't serve the expansion of models.
Data Inspection:
My PM and I run an data inspection to prioritize the scope of work. Through histogram it shows an incresing drop-off rate and low usability of two main functions "create a model" and "train a model".
Created model
There is a 40% drop from previous data.
Trained Model
Only 32.7% user trained model.
UX Flow Audit
Define Problem Page/Flow
The single most important screen we decided was the dashboard, where the user would see all their tax liabilities and information. The reason for this decision is that this is the unique selling point of the app, and it’s main proposition.
Heatmap Analysis
Inefficient Pre-trained Model Display
The first iteration has bar with 3 columns display, each card is designed as a portrait (vertical) layout with cover image, tittle, introduction and tag. This layout caused series issues when facing the increasing number of Butler pre-trained models.
I used 3M VAS heatmap to analyze the visual hierarchy. View attention usually stay within 100 View Height, even we used unlimited Scrolling to encourge user explore, but the results indicate we should include as much model as we can within one page view to improve user discovery rate.
Unlimited Scrolling X
Hard to explore
Heuristics Evaluation
Inconsistent Dashboard Experience
I revisit the dashboard experience with Heuristics guideline and Gestalt guideline to inspect potential issues.
Lack of Visibility
Limited model cards on one page, which cause the low discovery rate for our rich pre-trained models.
Lack of Consistency
Inconsistent use or color and Model Card shape. The status color is mixed with call to action color.
Unclear Hierarchy
The layout is missing a clear visual hierarchy and users are struggling to find focus on a screen.
Define the Audience
People use Butlers are most probably:
By talking with the sales team, I learned that most end users are developers who already understand the logic of the training model, and they usually come to Butler with a clear goal.
Besides end users, we should also consider the buyer users who come to Butler and decide whether to purchase the service. We should provide them with a feeling of a professional and user-friendly interface.
User Pattern:
User Flow
What does user do at Butler?
Learnings :
Hard to navigate the pre-trained model:
01 Developers have more than 6 model cases can't find the model in 10 seconds, which usually causes the drop-off rate.
02 We found that 30% of developers used the navigation bar to find the model, and 33% used the search bar. It's an important feature, while the size and color makes those two features hard to find.
Users don't have much interest to explore:
01 With Limited information on each card, developers were confused and disinterested to explore.
02 From phone interview with our users, we learnt that they are easliy get confused between "My Models" page and "Library"page. Especailly with similiar page layout and ML card layout.
Most end users who chose Butler are developer, business ops, or freelancer with a basic understanding of machine learning. They come to Butlers to find an easy way to deal with massive paper documents.
We can further divide our end users into four group: Creator, Pre-Trainer, Builder and Debugger.
Currently, we have 1000+developers on our Saas platform. They are encouraged to use our pre-trained model and create a model for their use case.
Research Object
Define targeted service flow/key pages/components
By leveraging feedback from user research from our sales channels, I reorganize the experience of Butler Dashboard
In this task, I focued on study dashboard experience from direct competitors, and study feature layout from broader cases.
Competitive Analyis:
Learn from Competitors to see how they exhibit model information
In order to construct a concise and solid foundation for Bulter, I had to venture out and see what the prominent AutoML applications were already doing and what user goals they were not reaching.
Feature Competitor Analysis:
Analysis successful UI patterns from project management/content creation platforms.
The research is not limited to our product competitors, we also studied the project management / content create platfroms to learn how they encourage users to create content, and how they manage the information in a way that is quick for users to locate, and easy to use. Those competitor cases are provided by project manager, google search, UX mentors, friends who work in this industy.
Feature Analysis:
Positioning: Quadrant Study
We aim at curating complex model information in an easy way that improves user accessibility and ease of use.
Our users need an app with a simple and intuitive user flow. Allow future growth of products/services, but also curated in a way that require low effort for end users to use.
Low Effort to Use:
01 Use existing UI pattern to lower the learning curve.
02 Provide clear visual hierarchy, Design visual cue to be more impactful
Organize information in a Simplified/Curated Way
01 Our users need an app with a simple and intuitive user flow.
02 Don't show unnecessary information. Keep the interface simple and engaging
How might we revamp the dashboard experience to improve the usability and user discovery rate ?
01. has a clear visual Hierarchy
Final Prototype:
Intuitive Flow from Dashboard to Library Page
Design Scope A : Dashboard
Hi Fidelity Mockup
Wireframing:
Add a section for pre-trained models
Alignment Meeting:
01: Fixed Section for Pre-trained models
After user research and competitive analysis. I did few lo-fi mockup to test and fit the idea of combining model library with butler library.
Feedback:
Keep "Pre-Trained" library and "My Model" library in two seperate chips.
The reason is butler has 48% use case that developers will only go single product line. Merging two function will cause further confusion.
02: Switching View - Customized the user experience ?
Proposed switiching mode for user to select data row version or card display version. Here I used background shape/gradient (Square VS. Circle) to differenciate the "pre-trained model" and "created model"
Feedback:
4 out of 7 developer said it's a nice to have function, but it wont improve the efficiency significantly.
Before & After
Dashboard
Design Scope B : Library Page
Hi Fidelity Mockup
01 Informational - providing an overview of pretrained model
02 Navigational - providing quick access to the model category by industry.
Wireframing:
Layout Iterations:
Wireframing:
Design Iterations
Encouraged to explore different methods of page layout, the layout doesn't need to base on the current design.
Improve the Scalability and Consistency:
01 Coordinate with the color scheme on all web pages for a cohesive look&feel.
02 Improve color and logo library to improve the scalability of the design.
Hi-Fidelity Mockup:
Library Page
1. Navigation Bar & Search Bar:
Add visual weight to differentiate the side navigation bar and search bay by adjusting the common region and color contrast.2. Rethink the category and how to differentiate one from the other.
2. Help users discover models that may be of interest to them
Reduce single card size, so that the different models were more easily discoverableInclude visual language with the card design. Imagery allows you to do more with less.Prefer the flat logo to photography for better accessibility, scalability, and visual consistency.
Learning 01
Understand the user at first hand
In this project, I participated in the whole designing & developing stages, and helped ship the product end to end.
One of the mistakes I made was when conduct a reletively simple task, I started pixel level development diretly instead of study the use cases.
But after meeting internally with PM, we found out there is a use case that developer only create their own models instead of using pre-trained models. It doesn't make sense for them to have the those two information on that page. When PM pointed out this edge case, I realized no matter how simple the task is, always put the user at first place, each decision should start from studying the use cases.
Learning 02
Collborate with engineers often
We were drawn to dark mode for it's the strong visual style and futuristic feeling. We thought this visual language matched butler's value which encourages explorations.
After syncing with software engineers, we found this option requires a high development effort to support light'dark switch.
Even though the feedback we received from audience is they love this concept. But we wont include it in our next product launch.
We havent given up on this design yet, we are working on applying this visual language to our corporate's landing page.
PM's Goal
Redesign "your model" page that serves as the central hub for user’s models.
1. Help new users get started when first coming to the product. (completed)
2. Help recurring users to manage their projects. (completed)
Redesign the "library" page that exhibite all the pre-trained models
1. Help users discover models that may be of interest to them(completed)
2. Help users to quick search their needed model(completed)
Designer's Goal (Next Step)
1. Monitor the metrics to see if this design improves the page view efficiency and increases the developer's interest in exploration.
2. Futher Inspect current issues and forecast potential risks followed by Heuristics principles
Fin.
Contact Me