Presentation

Improving UI and UX

My roles:

  • UI/UX Designer

  • Product Designer

  • UX Researcher

Case Study:

ComfyUI - Personal Project

Duration:

  • 5 days

Overview

Problems

Solutions

Lack of status bar

Confusing icons

Cluttered UI in some parts

Confusing menu bar

Not user friendly

Redesigning icons

Simplification

Adding a status bar

Removing some elements

Redesigning menu bar

New Design for ComfyUI Main page

Empathize

Run a Usability test - Downloaded ComfyUI and started using it to generate images.  
Also searched for ComfyUI's user reviews on the internet.

Target Users: Technical and Nontechnical Artists

Users' Problems:

  • Confusing icons

  • Cluttered UI

  • Confusing menu bar

  • Not user-friendly

Business Objectives:

  • Increase user satisfaction and user engagement

  • Achieving a user-friendly product

Goals:

  • Improving UI and UX on the main page

How might we make ComfyUI more user-friendly?

Define

Competitive Audit:

Unreal Engine, Maya, Blender, Davinci Resolve, Nuke, Photoshop, Houdini

Brainstormed Solutions:

  • Adding a status bar

  • Redesigning the menu bar

  • Clearer icons

  • Simplification

Prioritized features using the Impact/Effort matrix

Ideation

Original ComfyUI Main page (Before)

User Journey Mapping:

  • Identified key pain points

User Flows & Storyboards:

  • Visualized task flows (Generating AI Image in ComfyUI)

Wireframes:

  • Low-fidelity sketches of different versions of redesigning ComfyUI's main page 

Wireframes Ideas

Design

Design System:

  • Created Design System and UI components, ensuring consistency, brand conformity, and accessibility.

Design

ComfyUI main page mockup:

Design

  • Clearer design for icons

  • Added Status Bar

  • Collapsible nodes

  • Separated the Workflow projects from the main menu

  • Added a star spark button for Updates and Bug fixes

  • Simplified the overall design

Key Features:

Design

Test & Iteration

Conducted rounds of usability testing with iterative improvements

Before

After

Outcomes

The success of the design can be summarized as:

  • User-friendly product

  • Positive user feedback

  • Scalable

  • Conducting A/B testing to evaluate design effectiveness.

  • Collaborating with stakeholders to review and gather feedback on the design.

  • Preparing detailed documentation and assets for engineering handoff to ensure smooth implementation.

Next Steps

Presentation
Elham Sepehrjou

Let's make a UXciting future!

UI | UX | Product Designer