Onepanel
Open Source Integrated Development Environment Redesign
Client Project
The open and extensible IDE for computer vision
Role
UX Research, UI Design
Team
Nathan Weber
Olivia Lammers
Kevin Sedayao
Client
Onepanel
Duration
2 Weeks
Onepanel provides an open and extensible integrated development environment (IDE) for computer vision that enables scientists and developers to prepare, build, train and deploy models at scale. Machine learning scientists can use Onepanel for model building/training, automated labeling, data processing, hyperparameter tuning and workflow orchestration.
They are looking to expand within the machine learning field with a focus on creating an extensible development environment that matches the look and feel of the current market convention. My team worked with Onepanel to redesign their current IDE and improve machine learning and computer vision workflows.
Current Onepanel IDE
Problem Statement
Onepanel is a one of a kind within the machine learning community being a one stop shop for comprehensive and extensible model training and data annotation. By supporting any application that runs Kubernetes, Onepanel has been rapidly growing in the machine learning market.
Where they run into issues is with screen crowding, cognitive load and oversimplification of processes due to a complex and divided UI. We worked with Onepanel to create an IDE that addresses these pain points.
a way to monitor training pipeline performance while working in multiple environments so that ML scientists can decide how to allocate computational resources efficiently.
a way to see relationships between testing environments and data pipelines so that users can minimize time spent looking for information.
The Business Goals
Brand Refresh
Improve the functionality and look of UI elements to create cohesion
Workflow Integration
Integrate workflows, workspaces and major task within one cohesive “panel.”
Expansion
Build a community around the IDE. Focus on increasing GitHub and community engagement.
Our Team Design Process
As a team, we utilized the double diamond design process to articulate each step in our redesign and make data driven decisions along the way. We used these methods and systematic tools to perform research, articulate insights, ideate on potential solutions and test and implement our designs. These tools helped our team reach a deliverable solution though not all are represented in this case study.
User Interviews
To better understand our problem, we conducted a series of user interviews with our client, Onepanel and with data scientists within the machine learning community. The client kickoff meeting helped situate ourselves with the problem at hand. We caught a glimpse of what Onepanel does, success metrics, communication preferences, and extensive context into machine learning and how Onepanel aims to improve their IDE.
To be able to empathize with our users, we conducted a series of user interviews with machine learning scientists. In addition, we conducted a contextual inquiry to evaluate how the users interacted with the current site. We were able to gather insight into the users’ needs and pain points.
Interview Insights
Performance Visibility
ML developers and scientists expect to see how their models and training pipelines are performing
Flexible Workflows
Developers want tools to adapt to their existing workflow, not adapt their workflow to the tools
Community Driven
Machine Learning and AI are increasingly trending online, with many people eager to break in
Heuristic Evaluation
After performing a few rounds of user interviews and gaining important insight, we moved on to analyzing the current Onepanel IDE. As it stands, the team's internal developers and consistent users with the site are most familiar with the functions and main user tasks associated with the IDE. However for our team and new users, the current UI conventions added a layer of difficulty to the already niche process. Therefore, we performed a heuristic evaluation based on Nielsen’s 10 Usability Heuristics to evaluate the current system. The most evident heuristic violated are described below.
Visibility of system status
Unclear where the user is within the existing site
Namespaces tab is not labeled in the same way as other global navigation elements
Namespaces tab makes it look like user is on that page, conflicting with the bar under Workflows
Recognition rather than recall
Critical workspace details are hidden beneath the fold, out of the user's sight
Button's location in bottom right corner violates existing UI conventions, so the user doesn't expect for it to reveal key info
Use of logo rather than clear text label makes the button's action ambiguous
Competitive Analysis
We used a competitive analysis to identify other machine learning businesses that either directly or indirectly compete with Onepanel. We wanted to identify their IDE's and determine what works well and what doesn't. The competitive analysis helped dictate some of the design patterns we later used in our redesign.
User Persona
After synthesizing our research on the current IDE market and becoming more acclimated with Onepanel's own IDE, we started to narrow in on our target user base. Therefore, we created a user persona which not only embodies our target user group but also addresses the pain points and user goals outlined through our research. The persona helped us develop our problem statement and a solution based framework going forward.
User Pain Points
Machine learning fails silently and time is wasted which can be costly
Jumping between multiple platforms and tools can be time consuming and confusing
Wants to see overall accuracy and loss function while a model is running
Solution Hypothesis
Interface Consolidation:
Consolidate interface to minimize tab flipping and reduce cognitive load
Flexible Workflow:
Enable users to do the same action multiple ways
Sketches
As a team we conducted a series of design studios based on our solution hypothesis to develop early iterations of the new IDE. We wanted to include components consistent with typical IDE convention such as a left rail nav, a large canvas to perform model training within, and multiple tabs to switch between workflows or workspaces simultaneously. We then came together collectively as a group and agreed on certain features, aspects and visual aesthetics that were carried over into our low-fi wireframes.
IDE Sketch V1
IDE Sketch V2
IDE Sketch V3
Low-Fi Wireframes 1st Iteration
We moved forward with our sketches and created our first iteration of low-fi wireframes in Figma. I was responsible for redesigning the dashboard/landing page and the flows for creating workspaces and workspace templates. We combined each of our delegated components and designs to form the whole cohesive IDE. Shown below are the first versions of our design before our preliminary design critique with Onepanel.
Workspace Templates
Creating a Workspace
Executing Workflows
Low-Fi Wireframes 2nd Iteration
After our first handoff with our client, we received feedback that helped direct us towards Onepanel’s goal. Two of the main focuses were to redesign the dashboard so users can access it anytime during their work session and to remove the right panel accordion dropdowns during the workflow execution stage. The client also highlighted that the workflow and workspace model initialization be structured to fit a different form structure. We workshopped together to improve our designs based on the feedback.
Launchpad (aka dashboard)
Workflow Canvas
Typography and Branding
Before moving onto the hi-fi wireframes, we needed to create guidelines for our typography and branding. These guidelines are based on a mix of google’s dark theme material design and Onepanel’s existing branding.
Components
By utilizing a dark mode UI, we needed to create aesthetic and visual consistency between buttons, forms, tabs and various other components. Listed below are a few of the reusable components used in the IDE redesign.
Final Wireframes and Prototype
Workflows
Workflows allow you the ability to execute and run models. At first glance, you can view the status of previously ran or currently running workflows. If you want to execute a workflow, simply click 'Execute Workflow' to start initializing parameters. Onepanel allows users to select a variety of templates or you can create one from scratch. To do so, simply click 'Templates' within the main panel to view or edit. Once a model is initialized and executed, the work canvas will populate and start to run.
Workspaces
Similar to Workflows, Workspaces allow you to execute an external environment within the the IDE as long as its running Kubernetes. In this example, you can launch CVAT to perform image annotation once you initialize your workspace. Once the workspace is initialized and ran, it will launch within the canvas space.
Add a New Canvas
The tab bar grants flexibility to a user by customizing workflows and workspaces to their liking. If a user wants to view multiple screens at a time, they can either duplicate a tab or split the canvas space by columns or rows. A new tab bar will display within the new canvas. The opportunities are near endless with the amount of canvas spaces you can create, allowing flexible workflows and workspaces.