Product / UX / UI

Boto.io

Year

2022

Role

Lead Designer

Product

Boto.io

Boto.io is a no-code web3 automation platform built for crypto and blockchain enthusiasts. With the rise of automation, Boto opens the door for completely custom bots and automation for anyone with an easy to use, no-code, drag-n-drop canvas.

Red Lion Hotels Mockup

UX Analysis

Finding The Problems

Prior to joining Boto, there were no designers involved in the product. This lead to a development focused product that lacked a modern UI and smooth experience. Because of this, I immediately took a deep dive through the product to highlight all of the bad practices that could lead to a broken experience and frustrating users.

UX Analysis

Competitive Analysis

Comparing The Competition

We began analyzing the top competing automation and no-code platforms such as Make.com, Zapier, n8n.io, and many others by comparing the first-use journey, dashboard, canvas, ease of creation, as well as the overall desktop and mobile user experience of each competitor. By defining the strengths and weaknesses, as well as threats and opportunities of each product, we were able to begin ideating on improvements and future features for our no-code automation experience.

Competitive Analyisis

Exploration User Flow

Discovery and Sharing

While improving our overall product, we found that our users were very interested in sharing their custom creations for others to use. We also found that new users were not sticking around for very long because our website was rather limited on content in its early stages. By understanding these basic needs, I created a user flow to enhance exploration and sharing for both new and current users showcasing our product integrations, community-built recipes, and more, ultimately funneling them to the canvas to begin creating their own automation.

Block Ideation

Simplified Complexity

In order to make the Boto product more efficient for our users, it was important to take another look at our canvas and explore different ways to make it more intuitive and simplified, while allowing complexity for more advanced users. This included trimming down blocks to their core requirements, and rethinking the filtering system to allow for more advanced logic.

Design System

Creating a Consistent Experience

Because Boto was still in early development, it was important for me to create a design system as quickly as possible. With intentions to build product features rapidly, it needed to be adaptable, scaleable, and reusable. I created a system based on Atomic Design following ADA compliance and Vertical Rhythm standards. Not only did this make the overall design of Boto much more clean, consistent, and branded, it also allowed developers to build much more quickly, making our processes more efficient both for MVP features and full-version launches.

UX Step Bar

Results

Building Web3 Automation

The platform refresh for Boto.io not only brings a refreshing UI, but it allowed users to create their own automation much easier with an intuitive canvas. Users can also publish and share their bot recipes to the Botoverse for other Boto users try and use.

Red Lion Hotels Desktop Mockup
Red Lion Hotels Desktop Mockup
Red Lion Hotels Desktop Mockup
Red Lion Hotels Desktop Mockup
Red Lion Hotels Desktop Mockup

Explore All Projects