Product Labs
A live, interactive product demo that lets users explore YugabyteDB's distributed database features in action.
Overview
YugabyteDB Aeon had been on the market since 2022 and was entering a growth phase.
While we had strong technical features, the prospects don't have any way to explore, understand and immediately experience the three core value propositions of yugabyteDB within the product. They have to rely on a lot of external material to even figure out how to do them.
We want to shorten time to value for our users by using interactive and engaging product demos that tell a valuable story. Users can easily experience key capabilities and also use the lab as a launch pad to familiarize themselves with the product.
My Role
Lead Product Designer
Team
Product Manager
5 Engineers
Timeline
Q4 2023
STEP 1
Discover & Define
End-to-End User Flow Mapping
When I was first assigned to this project, the user flows was unclear to me. So I first mapped out the end to end flow to create a mental picture of the whole project.
Scope Alignment
Then I use existing product components to quickly build a flow to share my vision with the team.
Using a couple iterations of the end-to-end user flows, the team was able to align on the project scope:
STEP 2
Ideate & Design
Guided Tutorial
The guided tutorial is a step-by-step walkthrough that helps users learn about YugabyteDB’s capabilities through a relatable story. It’s a great way for us to show off our core features in a structured, hands-on way. I played around with a few layout ideas and landed on one to share with the team. The one I picked is a tried-and-true format that a lot of learning platforms use—it’s simple, effective, and lines up well with what we’re trying to do: help people get up to speed with YugabyteDB.
Layout Exploration:
Winner:
STEP 3
Validate
The validation for this project involved multiple rounds of peer reviews and usability tests using a clickable prototype. I was able to discover multiple small usability issues that were oversighted and quickly addressed them.
Some highlights here:
Finding 💚
The tutorial conveys valuable details, yet its text-heavy format reduces readability and ease of following.
Solution 💚
Apply text formatting techniques and used a microcopy UI component to enhance readability. Use multiple UI states to stagger the information shown to users.
STEP 4
Hand Off
I collaborated closely with engineers, using key mockups and interactive prototypes to clearly communicate user flows and interaction patterns, ensuring smooth implementation.
Outcome
