Mobbin: Interface and the library model
I used Mobbin's UI as the model for a library structure that displays all the user flows and screens.
Rival: Speed Up the Research and UX Process with a UX Competitor Tool
A benchmarking tool that runs UX research and analysis, and builds screens in minutes to speed up the UX research phase.
How can we make the UX research and validation phase faster?
- Product design
- UX design
- System design
- Prototyping
Its purpose is simple: speed up the slowest, most manual part of product design, UX research and analysis, and make it easier to study how the best UX practices actually apply to whatever you're building.
- Role
- Product Designer, sole designer
- Timeline
- 1 month
- Design Team
- Sole Designer
- Tools
- Problem
Checking flows and recording a platform takes a lot of time.
One part of my job is to check references and see how other companies made specific things (a checkout, an onboarding, etc.). During this process I use Mobbin for the UX, but sometimes Mobbin doesn't have the screen reference that I need, or I need to make a diagnosis and record the whole flow of the current platform and show the flags and the fixes that need to be made. That usually takes a week to get something solid.
How do I know the UX the AI makes is valid?
One issue I have with platforms like UX Pilot is the prompting: if you provide a very generic prompt it can hallucinate. This happens with any AI tool, and you don't know where it took that specific flow from, or even if it would work or convert.
How do I know the number of screens needed to prototype a feature?
During budgeting, a part I always struggle with is how many screens a specific feature will have, and how many variations and states?
Of course, it's expensive, and sometimes when you do it, the client doesn't have the budget.
- Approach
I needed to build a tool that allows me to do that UX research faster, using a screen recording system while I'm advancing in other areas
Record Sessions
I needed a recorder like OBS that, while I'm navigating, can record and detect my steps during the process.
Import screen to Figma
Once the session is finished, take those records and pass them to Figma clean so I can see how everything is connected
Show it as a UX flow
I need to see not just the screen but also the actions to get there.
See all the user flows I made
Have an area where all the UX flows live, similar to what Mobbin does.
- Proposal
Create a Chrome extension and a Figma plugin that connect and send information from the extension to the Figma file.
I got this idea based on how other companies usually extract information, studying how they use a Chrome extension as a bridge that collects information and sends it to their platforms.
- Information Architecture
Rival works by generating a snippet that a designer can paste into the Rival plugin.
After the session is recorded using a Chrome extension, Rival creates a snippet that is used in the Figma plugin. The plugin takes that data and assembles a user flow board with every screen and how they connect.
This splits it into two pieces: a lightweight capture layer, and a separate Figma plugin that takes care of the visualization.
- User capture layer on the Chrome extensionCreate a snippet in the extension
- Export to the Figma pluginFigma plugin generates the visual
- Design System
I work with a shadcn Figma base, then build out in React and review in Storybook, where each story runs an accessibility check.
I already have a design system structure in Figma that adapts based on the brand mode. I recycled the semantics and primitives and adapted them for this specific project, and created the specific components that I didn't have.
- Core Flows
In order for the product to succeed, I divided the flow into 4 parts.
These 4 parts were the onboarding for context, the Chrome extension, the Figma plugin and the UX library with all my UX reports.
Onboarding process
Set up the rules for what the objective of the AI is. The AI will go to the site, do the recording and gather the information in the background.
Execute the Extension
You can also go to a specific site and run a capture with the Chrome extension.
Import to Figma
Once the AI has finished, it will provide a JSON file that you can paste into the Figma plugin, and the plugin will create a user flow with all the information collected and map out the experience.
UX Library
You can check all the flows you have collected, delete, edit, or import just the flows you need to work on.
- Research
During the research, I used a similar structure for the complete development:
Builder.io: Figma bridge
Their open-source Figma HTML tool showed me how the component tree could get rendered into real Figma nodes.
Waalaxy: Chrome extension model
I used it to understand how the whole infrastructure works, from the platform to web capture. That helped me create a Chrome extension that works with the platform and then calls the Figma plugin.
Loom: Recording UX
I used it because, at the beginning, the tool relied on a recording system that we later discarded, since it wasn't the best option.
- New updates and iterations
After finishing the core loop of the flow and testing, the tool was already collecting key information in the snippet during every exploration. This opened up opportunities to build more features on the basic structure, such as building components from the extracted information and screens, and a UX analysis tool to analyze different types of flows.
- New improvements
Using the same base, I started developing the following features.
New Feature 1: Analysis Suite
Each screenshot goes to an AI model one at a time with a fixed system prompt that says “you're a senior product designer, return JSON.” It comes back with a name, purpose, what the user does there, key elements, which shadcn components are on it, and what the next step is. This is the text summary of every screen.
With this base we can create the following analyses:
Heuristic: Nielsen-style usability findings per screen, scored
Feature list: Inventory of every feature the competitor has, grouped
Information architecture: Sitemap and nav structure
Journey map: Emotion curve and stages, rendered in FigJam
New Feature 2: UX Pilot prompt creation
The Autoflow prompt turns a captured flow into one paste-ready text prompt for UX Pilot's Autoflow mode, which generates a multi-screen wireframe set from a single description.
New Feature 3: Build Wireframe command
I created a /build-screen command that rebuilds the captured screen as a React page in your own design system, not a copy of theirs.
It reads screen_NN.structure.json, the DOM capture with every node's tag, pixel rect, resolved CSS, and text.
- Final Design
Rival is now able to do in-depth UX analysis of any web app or mobile app. I use it daily to create user flows that come with their code ready to go. The build command is the best part, since it compares against my own design system and rebuilds the captured site with my own components.
- Outcome
A tool that can provide UX analysis of every flow and create React screens in real time from a base in minutes.
Rival has cut my UX research and prototyping from 2 to 3 days of feature lists and UX analysis down to hours. I can build and ship faster using a system and a set of commands that work from public information on the platforms I want to learn from.
- What I would do differently
Polish the UI and its UX for everybody to use.
Even though Rival has been an amazing tool, it's not perfect. The UX analyses are great, but if the user flows lack information, the results fall short too. Also, copying a JSON file and pasting it into Figma can be tedious, and for a commercial release that step isn't clear enough. I would definitely clean up the UX and make it pick out the most important information, since sometimes it extracts irrelevant details.