AI as Design Assistant

Revolutionizing the UX workflow with AI-powered insights—automating the tedious, enhancing creativity, and delivering pixel-perfect designs in record time.

25% increase in approval process.

95% users said this tool will be useful and help in productivity.

30% reduction in cart abandonment

40% faster transition from wireframes to high-fidelity mockups

Faster page loads and improved ease of scanning information

90% accuracy from generative AI models compared to manual editing

Case Details

Business Impact

100M+

Project Overview

I led the redesign of a core requisition page for a procurement tool, transforming it into a modern, intuitive interface with a streamlined layout that enhances data visibility and efficiency.

The project aims to create an AI-powered design assistant that enhances the UX design process by automating repetitive tasks, optimizing accessibility, and offering intelligent design recommendations. The tool integrates with Figma to assist designers in creating high-fidelity designs more efficiently while maintaining creative control.

Problem Statement

Users were hampered by a cluttered, outdated design that required excessive scrolling and offered limited editing capabilities, making it difficult to quickly access essential information.

UX designers often struggle with time-consuming manual tasks such as refining layouts, ensuring accessibility compliance, and iterating based on feedback. These inefficiencies slow down the design process, making it harder to meet deadlines and maintain consistency. Additionally, collaboration challenges in Figma can lead to misaligned decisions, overlooked design principles, and inconsistent user experiences.

[Business Spend]

[Educational]

Technology

[My Role]

Lead Designer

[Platforms]

Desktop and Mobile

Desktop

[Timeline]

January 2024 - Present

October 2024 - December 2024

View Live Project

End to End Design Process

Persona

Bella Chiu

Senior UX Designer

Age: 30

Location: San Francisco

Tech Proficiency: Advanced

Gender: Female

Role

Creating wireframes, prototypes, and high-fidelity designs

Ensuring accessibility and usability standards are met

Managing design iterations based on feedback from peers and leaders

Frustrations

Time-consuming iterations: Making repetitive changes manually slows down workflows

Lack of smart recommendations: Figma lacks built-in AI assistance for design improvements

Inconsistent feedback loops: Hard to track design changes and integrate feedback effectively

Strategy and Approach

[01] User Research

[01] User
Research

Conduct interviews with UX designers to understand common pain points in Figma.

Gather feedback from design teams on workflow bottlenecks.

Analyze how designers currently use AI-powered tools (if any) and identify gaps.

[02] Early Ideation and Roadmap Planning

[02] Early
Ideation

Brainstorm AI-driven solutions to automate repetitive design tasks.

Define key use cases for AI assistance in UI/UX design.

Sketch initial workflows on how the AI will integrate seamlessly into Figma.

[03 Design Solution]

[03 Design
Solution]

Build a plugin that analyzes designs and provides intelligent suggestions.

Implement a feature that converts low-fidelity sketches into high-fidelity designs.

Introduce a design assistant that helps with accessibility checks and layout refinements.

[04] Testing & Iteration

[04] Testing
& Iteration

Conduct usability testing with a group of designers to measure effectiveness.

Gather qualitative feedback on how AI-driven suggestions impact workflows.

Mapping user flow + AI Suggestions

Sketching out solutions

Applying AI-UX Concepts

Low-fidelity mockups and early testing

AI Powered Features

Sketch to High Fidelity

AI converts low-fidelity wireframes or sketches into polished, high-fidelity designs.

Upload your designs to get mockups instantly

Quick and Easy

Saves time

Sketch to High Fidelity

AI converts low-fidelity wireframes or sketches into polished, high-fidelity designs.

Upload your designs to get mockups instantly

Quick and Easy

Saves time

Sketch to High Fidelity

AI converts low-fidelity wireframes or sketches into polished, high-fidelity designs.

Upload your designs to get mockups instantly

Quick and Easy

Saves time

Sketch to High Fidelity

AI converts low-fidelity wireframes or sketches into polished, high-fidelity designs.

Upload your designs to get mockups instantly

Quick and Easy

Saves time

AI-Powered Design Fixes

Instantly detects design flaws, suggests improvements, and ensures accessibility compliance.

Get accessibility checks

Get Alignment Checks

Get more suggestions from AI

AI-Powered Design Fixes

Instantly detects design flaws, suggests improvements, and ensures accessibility compliance.

Get accessibility checks

Get Alignment Checks

Get more suggestions from AI

AI-Powered Design Fixes

Instantly detects design flaws, suggests improvements, and ensures accessibility compliance.

Get accessibility checks

Get Alignment Checks

Get more suggestions from AI

AI-Powered Design Fixes

Instantly detects design flaws, suggests improvements, and ensures accessibility compliance.

Get accessibility checks

Get Alignment Checks

Get more suggestions from AI

AI Driven Inspirations

Sometimes it's really hard to find similar designs, AI analyzes and shows more such similar designs.

Easyily get similar designs

Drag and Drop to modify

Saves time

AI Driven Inspirations

Sometimes it's really hard to find similar designs, AI analyzes and shows more such similar designs.

Easyily get similar designs

Drag and Drop to modify

Saves time

AI Driven Inspirations

Sometimes it's really hard to find similar designs, AI analyzes and shows more such similar designs.

Easyily get similar designs

Drag and Drop to modify

Saves time

AI Driven Inspirations

Sometimes it's really hard to find similar designs, AI analyzes and shows more such similar designs.

Easyily get similar designs

Drag and Drop to modify

Saves time

Key Learnings