⚡️ Fastlane UX

A bridge between code and design

🧑‍💻🤝👨‍🎨

by Shishi 🦌

Product workflow

Conventional path

Tech-first path

The Challenge

Key Areas for Improvement

  • 🚫 Reducing Rework
  • ⚠️ Ensuring Product Quality
  • 🧩 Creating Predictable Flow
  • 🗣️ Facilitate Communication

Introducing Fastlane UX

Build right, faster, and eliminate rework.

What It Is What It Is NOT
👍 Short, async step 👎 Bureaucracy
👍 Source of truth 👎 Meetings

How Fastlane UX Works

  1. Understand and refine user stories.
  2. Create user flow diagram + UI wireframes.
  3. Iterate with feedback.
  4. Include it in the Idea Draft / Tech Design.

Why This Matters

  • 🚫 Catches UX/flow issues early
  • 🐛 Prevent critical bugs
  • 🧭 One clear "source of truth"
  • 🚀 Shipping Velocity
  • 🤝 Partner Trust

The tools

  • 📖 User Stories
    describe what users need
  • 🔄 User Flow
    step-by-step journey
  • 🖼️ Wireframes
    visual layout/mockups

Tools

User Stories: User Needs

User-focused descriptions of the sysmtem's features.

  • 👤 As a [user type]
    Who needs this?
  • 🎯 I want to [action]
    What do they want to do?
  • 💡 So that [benefit]
    Why do they need it?
👤 As a developer,
🎯 I want to quickly sketch user flows
💡 so I know what to do before coding.

User Flows

Diagrams that show how users move through your system to complete tasks.

  • 🗺️ Map the journey
  • 🔄 Identify paths
  • 🚫 Find edge cases / errors

Mermaid: Our Source of Truth

A text-based tool for generating diagrams and charts.

  • ✏️ Easy to Edit
  • 🔗 Integration-Friendly
  • 🤖 Boosted by LLMs

🔗 Mermaid docs
🔗 Mermaid playground

Mermaid live

Standard Shapes and Meanings

Mermaid Intent Type Description Shape
[/…/] UI Trigger UI action initiated by user (click, submit, etc.) Parallelogram
[\…\] UI Prompt Request for user input or confirmation Parallelogram alt
[…] System Output UI feedback shown to user Rectangle
[[…]] Processing System logic or computational task Double rectangle
{…} Decision Condition or branching logic Diamond
(((…))) Error Error state or user-facing error message Double circle

Mermaid Shapes

    A[/ UI Trigger /]
    B[\ UI Prompt \]
    C[ System output ]
    D[[ Processing ]]
    E{ Decision }
    F((( Error )))

Example flow

flowchart TD
    A[Displays login form]
    B[/Enter credentials and click 'Submit'/]
    C[\Request agreement of T&C\]
    D[[Validate credentials]]
    E{Is valid?}
    F['Welcome!' message]
    G((('Invalid credentials')))

    A --> B
    B --> C
    C --> D
    D --> E
    E -- Yes --> F
    E -- No --> G
    G --> A

AI-Assisted Workflow

Sequence Diagram to Flowchart Conversion

We can use AI to translate technical sequenceDiagram into user-centric flowchart.

The Process

  1. Sequence diagram as input
  2. Ask the LLM for helping
  3. Polishing, make it simpler

🔗 Prompt

User Flow Example: Private Senders flow

User Flow Example: Output (Flowchart)

FigJam: Collaboration Space

An online collaborative whiteboard.

  • 🎨 Visual and simple tool
  • 🤝 Real-time collaboration
  • 🧑‍🤝‍🧑 Good for non-tech people

FigJam

🔗 User Flow Standard FigJam Board

Wireframing for Non-designers

The Three Core Ideas

  • 📝 Functional sketch
  • 🔲 Simplest shapes
  • 🎯 One goal for each screen

Excalidraw

Wireframes (1/3): Define the Screen's Purpose

What is the main goal? Display, collect, process?

Define

Wireframes (2/3): Draw content Mobile-First

Simple shapes, use shades of gray. Mobile forces to keep it simple.

Define

Wireframes (3/3): Connect Your Screens

Make self explanatory flows. Use arrows if needed.

Connect

Wireframing Best Practices

👍 Do This

  • Keep it simple
  • Annotate Smartly
  • Collaborate

👎 Avoid This

  • Design details
  • Over-explaining
  • Visual perfection

Excalidraw: Our Wireframing Tool

Why Excalidraw?

  • ✏️ Sketch-like Feel
  • ⚡ Speed & Simplicity
  • 🆓 Free & Accessible
  • 🔗 Easy Sharing
  • 🚫 No Design Temptations

🔗 excalidraw.com

Excalidraw

Excalidraw Cheatsheet

  • Select Tool: V or 1
  • Rectangle: R or 2
  • Circle/Ellipse: O or 4
  • Arrow: A or 5
  • Line: L or 6
  • Text: T or 8

🔗 Excalidraw Cheatsheet

Toolbar
Advanced

Bonus: Mermaid to Figma Plugins

Not fully compatible yet 😞
but can help a little bit.

🔗 Plugins

Plugins







Thank You 🦌💜

Questions? Comments? Concerns?

🔗 Additional Resources

⚡️ Fastlane UX
🪨 User flow standard
😎 Wireframing for Non-designers
🎨 Excalidraw Cheatsheet
📦 User flow AI generated example

- A proccess - A tool's set - Knowledge

- Catching misalignments *before* code is written - Preventing critical usability issues from reaching late stages - Giving the development team the clarity they need to build with fewer blockers - Talk with the designer, give it context

A proposal to build right, faster, and eliminate rework by introducing a simple clarity step. What It Is: - A short, async, pre-development step to ensure everyone is aligned - Focuses on creating a single "source of truth" for user flows What It Is NOT: - A new layer of bureaucracy - More meetings - A design-heavy process

- Answer questions - Avoid blockers - Reduce back-and-forth

- Any tool - Live in idea draft / tech design

- Especially useful when working from engineering specs - Focus on user perspective, not backend APIs

## Supplementary Notes - **1. Send Details:** User provides recipient's public address and ETH amount - **2. Stealth Processing:** Wallet checks stealth meta-key, generates stealth address, sends ETH, publishes ephemeral key - **3. Privacy Benefit:** Observer cannot link transaction to recipient's main address

- Functional outline, not visual design - Focused on structure, not aesthetics - One primary purpose per screen

Do This: - Keep it simple: Avoid any visual design - Annotate Smartly: Only add notes necessary for understanding - Collaborate: Share sketches early for quick feedback Avoid This: - Design details like colors or specific fonts - Over-explaining obvious elements - Getting caught up in visual perfection

- Sketch-like Feel: Reinforces "low-fidelity" aspect - Speed & Simplicity: Intuitive interface, quick drawing - Free & Accessible: Browser-based, no complex setup - Easy Sharing: Export as images or share live canvas links - No Design Temptations: Keeps focus on essential layout - Reinforces "not a design" aspect - Keeps focus on essential layout and function

This slide is already concise and practical - keeping all shortcuts visible for reference during wireframing sessions.

⚠️ These plugins are experimental and far from perfect, but they can speed up the process.