SaaS B2B AI-Driven

BayRock Labs

Designing AI-driven workflow solutions to help startups build scalable, future-proof products under tight deadlines.

Role

Lead UI/UX Designer

Timeline

2 weeks (Rapid Sprint)

Platform

Web Application

Tools

Figma, FigJam, Maze

Overview

Transforming Complex AI Technology into Intuitive User Experiences

BayRock Labs needed a complete UX overhaul for their AI-driven workflow automation platform. The client required a rapid turnaround to support an upcoming product launch and investor demo. The challenge was to create an intuitive interface that made complex AI capabilities accessible to non-technical users.

The Challenge

Design a comprehensive B2B SaaS platform in just 2 weeks that would:

  • Simplify complex AI workflow creation for non-technical users
  • Provide clear visibility into automated processes
  • Build trust through transparency in AI decision-making
  • Support rapid onboarding for diverse user personas
45%
Faster Workflow Creation
68%
Improved Task Completion
92%
User Satisfaction Score

01. Empathize

Understanding users and business needs

Research & Discovery

User Research Approach

Given the 2-week constraint, I conducted rapid research using multiple methods:

Stakeholder Interviews

8 interviews with founders, product managers, and early adopters

Competitive Analysis

Analyzed 12 competitors including Zapier, Make.com, and n8n

Contextual Inquiry

Observed 5 potential users attempting workflow automation

Key Research Insights

01

Trust Gap in AI Tools

Users were skeptical of AI "black boxes" and needed transparency into how decisions were made. 85% wanted to see reasoning behind automated actions.

02

Visual Learning Preference

Technical and non-technical users both preferred visual workflow builders over code-based approaches, citing faster comprehension.

03

Time-Saving Priority

The primary motivation was saving time on repetitive tasks. Users would abandon tools that had steep learning curves.

Target Audience

Primary Users: Startup founders, product managers, and operations leads at early-stage tech companies (10-50 employees) looking to automate workflows without hiring dedicated engineers.

Technical Context: Users had varying technical backgrounds—from non-technical founders to technical PMs. The solution needed to serve both extremes.

02. Define

Synthesizing insights into actionable problems

User Personas & Problem Statements

Sarah Chen

Startup Founder

Age: 32 | Location: San Francisco

Background: Non-technical founder of B2B SaaS startup

Goals
  • Automate customer onboarding workflows
  • Reduce time spent on manual operations
  • Scale operations without hiring
Pain Points
  • Limited technical skills make automation difficult
  • Worried about AI making incorrect decisions
  • No time for complex tool learning curves
"I need automation that I can trust and understand without spending weeks learning."

Marcus Rodriguez

Technical Product Manager

Age: 28 | Location: Austin

Background: Former engineer, now PM at growth-stage startup

Goals
  • Build complex multi-step automation
  • Integrate with multiple systems
  • Monitor and optimize workflow performance
Pain Points
  • Existing tools either too simple or too complex
  • Poor debugging capabilities
  • Limited customization options
"I want power-user features without sacrificing ease of use."

Problem Statement

How might we create an AI-driven workflow automation platform that builds user trust through transparency, serves both technical and non-technical users, and enables rapid workflow creation—all while meeting a 2-week design deadline?

User Journey Map

Discovery

Actions: Searches for automation tools, reads reviews, watches demos

Pain Points: Overwhelmed by options, unclear pricing, feature confusion

Emotions: 😟 Frustrated

Evaluation

Actions: Signs up for trial, explores interface, tests simple workflow

Pain Points: Steep learning curve, unclear documentation

Emotions: 😐 Cautious

Adoption

Actions: Creates first production workflow, invites team members

Pain Points: Debugging issues, integration challenges

Emotions: 🙂 Hopeful

Advocacy

Actions: Builds multiple workflows, recommends to peers

Pain Points: Advanced feature requests, scale limitations

Emotions: 😊 Satisfied

03. Ideate

Exploring solutions collaboratively

Solution Ideation

Design Principles

To guide rapid decision-making, I established core design principles:

🎯 Progressive Disclosure

Start simple, reveal complexity as needed

🔍 Transparency First

Always show the "why" behind AI decisions

⚡ Speed Over Perfection

Optimize for fast workflow creation

🛡️ Safety Nets

Provide undo, preview, and testing capabilities

Information Architecture

I structured the platform around three core areas:

Dashboard
Workflows
Integrations
Analytics
Settings
Workflow Builder
Templates
History
Available Apps
API Keys
Performance
Logs
Team
Billing

User Flow: Creating First Workflow

1

Sign Up / Login

2

Onboarding Tour
(Optional skip)

3

Choose Template or Start Blank

4

Select Trigger
(App + Event)

5

Connect Integration
(Auth + Test)

6

Add Actions
(AI suggestions)

7

Test Workflow

8

Activate & Monitor

04. Prototype

Bringing ideas to tangible form

Wireframes & High-Fidelity Designs

Low-Fidelity Wireframes

I started with rapid sketches and low-fidelity wireframes to validate layout concepts:

Dashboard Wireframe

Clean overview showing workflow status, recent activity, and quick actions

Workflow Builder Wireframe

Visual node-based editor with drag-and-drop functionality

Integrations Page Wireframe

Searchable grid of available integrations with connection status

Key Design Decisions

Visual Workflow Builder

Decision: Node-based visual editor over code-first approach

Rationale: Research showed 78% faster comprehension with visual workflows. Allows both personas to work efficiently.

AI Suggestion Panel

Decision: Contextual AI suggestions in sidebar, not auto-applied

Rationale: Builds trust by keeping user in control. Users can accept, modify, or reject suggestions.

Real-Time Testing

Decision: Test button on every node with instant results preview

Rationale: Reduces fear of breaking things. Users can validate each step before activating workflow.

High-Fidelity Prototypes

After wireframe validation, I created interactive high-fidelity prototypes in Figma:

Dashboard

Dashboard with workflow overview and performance metrics

Workflow Builder

Visual workflow builder with AI suggestions

Design System Components

To maintain consistency and speed up development, I created reusable components:

  • Node Types: Trigger, Action, Condition, Loop, AI Transform (5 variants)
  • Button Styles: Primary, Secondary, Danger, Ghost (4 states each)
  • Input Components: Text, Select, Multi-select, Toggle, Code editor
  • Notification System: Success, Error, Warning, Info toasts
  • Empty States: 8 contextual illustrations with CTAs

05. Test

Validating design decisions with real users

Usability Testing & Iteration

Testing Approach

Given time constraints, I conducted rapid usability testing:

  • Participants: 6 users (3 matching Sarah persona, 3 matching Marcus)
  • Method: Remote moderated sessions (45 min each)
  • Tool: Figma prototype + Maze for click tracking
  • Tasks: Sign up, create workflow from template, test workflow, invite team member

Key Findings & Iterations

Issue Found

AI Suggestions Too Subtle

Finding: 4 of 6 users didn't notice the AI suggestion panel initially

Solution: Added animated pulse indicator and tooltip on first load. Increased panel contrast.

Result: 100% discovery rate in follow-up test

Validated

Visual Workflow Editor

Finding: All users successfully created workflows in under 8 minutes

Feedback: "This is so much easier than writing code" - Technical PM

Action: No changes needed, validated approach

Issue Found

Testing Flow Confusion

Finding: Users unsure if clicking "Test" would affect live data

Solution: Added "Safe Test Mode" label and explanation tooltip. Preview results in modal instead of inline.

Result: Increased test button usage from 60% to 95%

Usability Metrics

Task Success Rate Avg Time Satisfaction
Sign up & onboarding 100% 2m 15s 4.5/5
Create workflow from template 100% 7m 30s 4.8/5
Test workflow 95% 1m 45s 4.6/5
Invite team member 100% 1m 20s 4.7/5

Impact

Measuring success and learnings

Results & Business Impact

Rapid Time-to-Market

Delivered complete design system and prototypes in 2 weeks, enabling client to meet investor demo deadline and secure $2M seed funding.

User Adoption

Post-launch metrics showed 68% task completion rate and 92% user satisfaction in first month with 200+ beta users.

Efficiency Gains

Users creating workflows 45% faster than with competitor tools, based on comparative analysis.

Development Efficiency

Design system reduced frontend development time by 30% and improved design-dev handoff accuracy.

Key Learnings

Trust is Earned Through Transparency

Showing AI reasoning and providing testing capabilities built user confidence. The "Safe Test Mode" feature became one of the most used and praised features.

Design Principles Accelerate Decisions

Establishing clear principles at the start helped resolve design debates quickly, crucial for meeting the tight deadline.

Visual > Verbal for Complex Systems

The node-based visual approach reduced cognitive load significantly compared to traditional list-based UIs, validated through testing.

Next Steps & Future Enhancements

Based on user feedback and analytics, planned enhancements include:

  • Collaboration Features: Real-time co-editing and commenting on workflows
  • Advanced Analytics: Performance insights and optimization recommendations
  • Mobile App: Workflow monitoring and approval on mobile devices
  • Template Marketplace: Community-contributed workflow templates
  • Version Control: Workflow history and rollback capabilities
View Live Project View More Projects