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.

Product Overview

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.

Current Issue

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 Audit

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

Meet Our Users

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.

Competitive Analysis

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

Solutions

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.

Reflection

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.

Dashboard Redesign

Value Proposition

Product Overview

Current Issue

UX Audit

Meet Our Users

Competitive Analysis

Solutions

Reflection

Self Evaluation