PROJECT
How user-centered design solved critical usability barriers in systems engineering
Systems Engineering
B2B SaaS
Desktop
cliff notes
Overview: I redesigned key user workflows for an AI-powered diagramming platform, creating intuitive onboarding, hybrid AI-manual editing capabilities, and transparent progress communication to empower systems engineers in complex technical projects.
Challenge: Systems engineers struggled with project creation friction, lacked direct editing control over AI-generated diagrams, and couldn't understand AI processing status during complex tasks.
Solution: A comprehensive UX redesign featuring guided onboarding flows, multi-modal editing tools combining AI assistance with manual control, and real-time progress indicators for AI transparency.
Impact: Improved user task completion rates, increased user control and confidence in AI-generated outputs, and enhanced overall platform usability for technical users.
DATE
March 2025- Ongoing
MY ROLE
Product Designer
TOOLS AND TECH
Figma
Figma Make (AI)
Claude AI
Trello
Clickup
CORE TEAM
1 Product Designer
1 CTO
2 Front End Engineers
Step 1: research and inspiration
I conducted beta tests with 5 systems engineers to identify usability gaps and improvement opportunities.
The testing sessions revealed consistent pain points across users, with clear themes emerging that informed our product iteration roadmap:
"I don't know what to do after I uploaded my documents. I don't see a clear next step"
"I wish that I could go in and change what the AI developed"
"Is the AI still working on something? I can't tell if it is loading or not working."
I took these findings and built a strategic design roadmap to address each core usability challenge. Most of the painpoints observed could be grouped into three categories:
Project Creation Friction:
Users struggled with the initial project setup process, leading to abandonment and frustration
Limited Manual Control: Users wanted direct editing capabilities rather than relying solely on AI for diagram modifications
AI Transparency Gap: Users couldn't tell if the AI was processing their request or had encountered an error during complex tasks
User Problem
Systems engineers need to create complex technical diagrams efficiently, but struggle with tools that either require extensive manual work or, in the case of AI-powered solutions, provide unclear interfaces, limited editing control, and unreliable feedback - resulting in frustration and reduced productivity in critical engineering projects.
Step 2: Solutions and design strategy
Step 3: design!
From Blank Slate to Guided Experience
The Problem:
Poor information architecture: No clear visual hierarchy or progressive disclosure
Lack of user guidance: Missing contextual help and wayfinding elements
High cognitive load: Users experienced decision paralysis at the critical first-use moment
The Solution:
Guided onboarding flow: Created step-by-step prompts that walk users through document upload and initial chatbot interaction, eliminating guesswork
Progressive disclosure design: Structured the flow to reveal information and options at the right moment, reducing cognitive overload
Side navigation progress tracker: Designed a persistent sidebar showing current step, completed actions, and remaining tasks to provide clear wayfinding
Clear call-to-action hierarchy: Established visual priority for next steps, making the path forward immediately obvious to users
Empowering User Control Through Direct Editing
The Solution:
Hybrid AI + manual workflow: Integrated manual editing tools with AI capabilities, allowing users to switch between conversational and direct editing modes
Interactive toolbar system: Created toolbar that enables direct manipulation of diagram without requiring AI conversation
Left navigation tree control: Designed a hierarchical navigation panel where users can reorder, add, or delete parts, actions, and requirements through drag-and-drop and right-click interactions
Familiar interaction patterns: Implemented standard engineering software conventions (keyboard shortcuts, right-click menus, hover states) to reduce learning curve
Real-time visual feedback: Added immediate visual responses to user actions across both the diagram canvas and navigation tree
Creating Transparency in Complex AI Operations
The Problem:
Extended processing times: Complex systems engineering diagrams require significant computational time
No processing feedback for complex tasks: Users had no visual indication that the AI was actively working on their complex diagram requests, which could take several minutes to complete
Processing vs. error confusion: Users couldn't distinguish between long processing times and system failures or timeouts
Abandonment during processing: Users would refresh the page or leave the platform while the AI was still successfully working on their request
The Solution:
Real-time progress sidebar: Added a progress panel in the sidebar that displays current AI processing status and breaks down complex tasks into visible steps
Task completion indicators: Implemented checkmark feedback system that provides satisfying visual confirmation as individual sub-tasks are completed during processing
Progress communication: Created informative status updates that set appropriate expectations for processing time and complexity
Visual reassurance system: Established consistent visual language that builds user confidence by showing active progress rather than empty waiting states
step 4: implementation
1
Stakeholder presentation: Facilitated a design review meeting where I presented each solution with supporting rationale to the development team
2
Feedback integration: Gathered technical feasibility feedback and implementation concerns, then iterated on designs based on team input
3
Alignment confirmation: Ensured all stakeholders understood the user problems being solved and agreed on the design approach
4
Comprehensive annotations: Added detailed specifications to all design frames explaining functionality, interactions, and edge cases + created specifications that bridged the gap between design vision and technical execution, helping engineers understand both the "what" and "why" behind each design decision
AI Assisted Design Process
Throughout this project, I leveraged AI tools to enhance design efficiency and prototype quality:
This integrated AI workflow allowed me to focus more strategic time on UX decisions and user research rather than mechanical prototype creation, ultimately delivering higher-quality design solutions in shorter timeframes.
Step 5: learnings and next steps
Current Status and Next Steps
This project represents an ongoing iteration cycle focused on continuous user validation and improvement:
User-centered roadmap:
Prioritizing future features and improvements based on direct user feedback and observed behavior patterns
Business Alignment: Balancing user needs with strategic business objectives to ensure sustainable product growth
Agile Design Process: Maintaining rapid iteration cycles that allow for quick pivots based on new learnings and market feedback
Upcoming Validation Phase
1
Second round of beta testing: Planning comprehensive user testing sessions to validate current design solutions and identify remaining usability gaps
2
Design decision validation: Testing key UX hypotheses around onboarding flow, manual editing tools, and AI transparency to measure solution effectiveness
3
Pain point discovery: Conducting user research to uncover additional friction areas that may have emerged or remained unaddressed
Understanding A Specialized User Base
Highly technical users require deeper research: Systems engineers represent a sophisticated user group who will become expert users, but understanding their specific workflows and mental models requires extensive, ongoing research beyond initial beta testing
Domain expertise impacts design decisions: Each research session reveals new layers of complexity in how systems engineers approach technical problems, informing more nuanced UX solutions
Technical Domain Learning
SysML complexity requires continuous education: Systems Modeling Language and systems engineering principles are highly complex domains that directly impact interface design decisions and user interaction patterns
Domain knowledge enhances design empathy: The more I understand about systems engineering workflows, the better I can anticipate user needs and design more intuitive solutions
Startup Process Challenges
Balancing speed with design quality: The fast-paced startup environment creates tension between rapid feature development and maintaining consistent user experience standards
Establishing design process in engineering-led culture: Working to implement design review processes and UI pattern consistency while engineers build features quickly to meet business deadlines
Cross-functional collaboration evolution: Learning to integrate design thinking into engineering-first workflows without slowing down product velocity
