Duration: May-Jun 2024 (2 months)
Authentication Recording 85% Faster Without External Tools
- Industry Research
- UX/UI Design
- Prototype
- Usability Testing
OVERVIEW
Users needed to record multi-step login flows to enable authentication scanning. The original solution required a Chrome extension, manual recording, saving as JSON, and uploading to the platform, a process that was time-consuming, rigid, and prone to user error.
TEAM & TIMELINE
I collaborated with:
Scratch to Development: 2 months.
PROBLEM STATEMENT
PROCESS
1. Identifying user needs
User Frustration
Installing a browser extension and uploading JSON manually
Lack of Flexibility
Minor changes required full re-recordings
Efficiency Bottleneck:
Friction slowed down onboarding and POCs
2. Journey Mapping & UX Objectives
Fast Setup & Workflow
Quickly configure authentication flows with minimal steps. No external tools required, making the process efficient and straightforward.
User-Friendly Interface
Intuitive design that simplifies the creation and editing of authentication flows, perfect for non-technical users.
Expert / Non-Expert
Supports both expert users with advanced customization and non-experts with simplified options, ensuring everyone can work efficiently.
3. Researching Industry-Standard Recording Tools
To create an intuitive experience, I researched industry-standard recording tools to understand how they structure their interfaces. The goal was to design a familiar and easy-to-adopt layout.
Recording tools typically place action buttons at the bottom, keeping them visible yet unobtrusive.
Design Exploration & Dilemma
My first design aimed to mimic linear recording with a side by side layout. However, internal testing revealed that it overwhelmed users and made editing harder.
Based on user needs and dev input, we pivoted toward a modular dual mode editor.
First Design (Early Concept)
Design Dilemma: Is single screen good enough?
In the early design, I tried to merge both recording and editing into a compact modal. The goal was speed and simplicit, but in practice, it backfired.
The space felt tight, users struggled to understand what was happening, and editing complex flows became painful.
This led to a critical shift:
1. Full screen Recording Mode → immersive, focused on capturing flows without distractions.
2. Full screen Editing Mode → clear space to review, adjust, and manage complex authentication steps.
Final Version (Selected UX/UI)
| Final version surfaces fields for quick edits |
| Advanced users get code-level control |
| 2 steps = less visual overload |
| Early concept optimized for development reuse, but users found it unclear that steps couldn’t be edited during recording, leading to confusion and a disjointed flow |
Solution Overview
🎥 Built-in Intuitive Recorder
Allows users to record, restart, and manage authentication flows directly within the platform, with a smooth step-by-step onboarding process for easy adoption.
🛠️ Basic & Advanced Editor
- Basic Mode for quick and simple setups.
- Advanced Mode for detailed customization of authentication flows.
Design Iteration: Evolving Error Handling for Scalability and Clarity:
Option 1: A single grouped message with one undo – clean, but lacks precision.
Option 2: Repeating identical full error messages with individual undo, granular, but visually noisy.
Option 3 (Selected): Condensed modular error rows with contextual undo, balances readability and control.
✅ Option 3 was selected for its alignment with design system principles and scalable structure.
Highlighting precise code locations empowers experienced users to confidently and efficiently resolve issues, while allowing others to easily revert to the previous version with a simple redo.
Final Prototype
The Bright Security Editor eliminates the need for re-recording by allowing users to:
✅ Edit credentials and update values
✅ Seamlessly switch views using segmented tabs for better navigation.
✅ Use an advanced code editor for precise modifications.
✅ Copy and export code for greater flexibility and control.
🚀 Eliminates 100% of unnecessary re-recordings
TAKE IF FROM THEM...
See what our CS Engineer and VP of R&D have to say about this feature.
Thanks to this feature, 2 important POCs were successfully won, showcasing the value and impact of the new design.
OUTCOME
The new dashboard resulted in substantial improvements:
- 100% reduction in re-recordings: Users no longer need to re-record authentication flows for minor changes, streamlining the process.
- 30% Faster Setup: Users completed setup and recording tasks 30% faster compared to the previous method.
- 100% Reduction in Recorder-Related Support Calls:With the streamlined process and built-in editor, all issues related to re-recording were resolved, eliminating any calls to customer support about the recorder.
