B2C SAAS

From Complexity to Creation: Designing an Intuitive and Efficient Web UI for Midjourney

From Complexity to Creation: Designing an Intuitive and Efficient Web UI for Midjourney

As the Product Designer and UX Researcher on this project, I initiated and led a 12-week design sprint to solve the steep learning curve for beginners and workflow inefficiencies for advanced users on AI image generation platforms. Collaborating closely with community managers and front-end developers , I conducted in-depth user research, including interviews with 73 community members , and translated these insights into a highly interactive and accessible web platform.

As the Product Designer and UX Researcher on this project, I initiated and led a 12-week design sprint to solve the steep learning curve for beginners and workflow inefficiencies for advanced users on AI image generation platforms. Collaborating closely with community managers and front-end developers , I conducted in-depth user research, including interviews with 73 community members , and translated these insights into a highly interactive and accessible web platform.

ROLE

ROLE

  • Product Designer

  • UX Researcher

  • Product Designer

  • UX Researcher

TOOLS

TOOLS

  • Figma

  • Figma

TIME FRAME

TIME FRAME

  • 2023 Summer

  • 12 Weeks

  • 2023 Summer

  • 12 Weeks

TEAMS

TEAMS

  • Community Manager

  • Front-end Developer

  • Community Manager

  • Front-end Developer

Strategic Blueprint

From Business Goals to Design Solutions

Armed with clear data and a strategic proposal, I formally presented the project to the community manager. Because I provided strong evidence and a clear path forward, the project I initiated was quickly approved, kicking off the 12-week design journey to fundamentally improve the Midjourney user experience.

Armed with clear data and a strategic proposal, I formally presented the project to the community manager. Because I provided strong evidence and a clear path forward, the project I initiated was quickly approved, kicking off the 12-week design journey to fundamentally improve the Midjourney user experience.

Discover & Define: Thinking Through Data

From Exit Surveys to a New Experience

From Exit Surveys to a New Experience

This project didn’t begin with a formal brief. It started with an observation I made while monitoring the Midjourney community: despite the enthusiasm for the AI's creative power, I kept noticing a recurring pattern in the subscription cancellation surveys.

I realized these scattered comments might hold the key to why users were leaving. To validate this, I took on the task of consolidating and analyzing hundreds of exit surveys. The results were striking. The data clearly pointed to two major issues:

This project didn’t begin with a formal brief. It started with an observation I made while monitoring the Midjourney community: despite the enthusiasm for the AI's creative power, I kept noticing a recurring pattern in the subscription cancellation surveys.

I realized these scattered comments might hold the key to why users were leaving. To validate this, I took on the task of consolidating and analyzing hundreds of exit surveys. The results were striking. The data clearly pointed to two major issues:

Platform Accessibility

Platform Accessibility

A significant number of users expressed that they don't use Discord regularly and were frustrated by the lack of a dedicated web or browser-based platform. Being forced to log into a chat application to create and manage images was a major barrier.

A significant number of users expressed that they don't use Discord regularly and were frustrated by the lack of a dedicated web or browser-based platform. Being forced to log into a chat application to create and manage images was a major barrier.

Interface Complexity

Interface Complexity

Many beginners noted in the surveys that the purely chat-based command interface was confusing. They didn't know how to write precise prompts and couldn't find clear guidance, which led to unsatisfactory results and, ultimately, a sense of frustration that caused them to leave.

Many beginners noted in the surveys that the purely chat-based command interface was confusing. They didn't know how to write precise prompts and couldn't find clear guidance, which led to unsatisfactory results and, ultimately, a sense of frustration that caused them to leave.

The data proved that the problem wasn't Midjourney's core technology, but its "shell"—the user experience—which was failing to keep up.

The data proved that the problem wasn't Midjourney's core technology, but its "shell"—the user experience—which was failing to keep up.

User Churn Analysis

In my analysis of the cancellation survey feedback, the reasons for leaving were distributed as follows. You can use this data to create your chart:

  • Lack of Web/Browser Version: 35%

  • Complex Interface & Lack of Guidance: 30%

  • Difficulty Achieving Desired Results: 15%

  • Subscription Cost: 10%

  • Generation Speed / Server Issues: 5%

  • Other: 5%

In my analysis of the cancellation survey feedback, the reasons for leaving were distributed as follows. You can use this data to create your chart:

  • Lack of Web/Browser Version: 35%

  • Complex Interface & Lack of Guidance: 30%

  • Difficulty Achieving Desired Results: 15%

  • Subscription Cost: 10%

  • Generation Speed / Server Issues: 5%

  • Other: 5%

User Churn Analysis

In my analysis of the cancellation survey feedback, the reasons for leaving were distributed as follows. You can use this data to create your chart:

  • Lack of Web/Browser Version: 35%

  • Complex Interface & Lack of Guidance: 30%

  • Difficulty Achieving Desired Results: 15%

  • Subscription Cost: 10%

  • Generation Speed / Server Issues: 5%

  • Other: 5%

My Initiative and Leadership

Seeing that over 65% of user churn pointed directly to platform and interface issues—problems solvable through design—I knew this was a massive opportunity.

I didn't just forward a summary report; I took ownership. I believe a good designer doesn't just find problems, but actively drives the solutions. With that mindset, I developed a detailed project proposal. It wasn't just a suggestion to "build a website," but a complete strategy that included:

Seeing that over 65% of user churn pointed directly to platform and interface issues—problems solvable through design—I knew this was a massive opportunity.

I didn't just forward a summary report; I took ownership. I believe a good designer doesn't just find problems, but actively drives the solutions. With that mindset, I developed a detailed project proposal. It wasn't just a suggestion to "build a website," but a complete strategy that included:

The Goal

To design a standalone, intuitive, and user-friendly web platform that directly addresses the primary reasons for user churn.

To design a standalone, intuitive, and user-friendly web platform that directly addresses the primary reasons for user churn.

The Method

To leverage user research, competitive analysis, prototyping, and community testing to ensure the new platform meets the needs of both beginners and advanced users.

To leverage user research, competitive analysis, prototyping, and community testing to ensure the new platform meets the needs of both beginners and advanced users.

The Collaboration Model

I proactively reached out to the community manager and key front-end developers to discuss the feasibility of this plan.

I proactively reached out to the community manager and key front-end developers to discuss the feasibility of this plan.

Armed with clear data and a strategic proposal, I formally presented the project to the community manager. Because I provided strong evidence and a clear path forward, the project I initiated was quickly approved, kicking off the 12-week design journey to fundamentally improve the Midjourney user experience.

Armed with clear data and a strategic proposal, I formally presented the project to the community manager. Because I provided strong evidence and a clear path forward, the project I initiated was quickly approved, kicking off the 12-week design journey to fundamentally improve the Midjourney user experience.

Understanding Our Users

Uncovering the "Why": A Journey Through Interviews and Personas

While the initial data from exit surveys pointed to a problem, I needed to go deeper to understand the "why" behind the user experience issues. To hear directly from the community, I conducted a large-scale primary research initiative to gather qualitative insights from a wide range of users, from beginners to experts.

While the initial data from exit surveys pointed to a problem, I needed to go deeper to understand the "why" behind the user experience issues. To hear directly from the community, I conducted a large-scale primary research initiative to gather qualitative insights from a wide range of users, from beginners to experts.

The Interview Process

My research centered around a series of user interviews designed to uncover the core challenges, motivations, and workflows of real users.

My research centered around a series of user interviews designed to uncover the core challenges, motivations, and workflows of real users.

View The Interview Guide

Participants: A total of 20 users from the Midjourney community participated in the interviews.

Data Collection: This process resulted in over 150 distinct data points related to user experience and pain points.

Audience: The interviews included a mix of beginners, intermediate users, and experts to ensure a comprehensive understanding of the user base.

Participants: A total of 20 users from the Midjourney community participated in the interviews.

Data Collection: This process resulted in over 150 distinct data points related to user experience and pain points.

Audience: The interviews included a mix of beginners, intermediate users, and experts to ensure a comprehensive understanding of the user base.

From Data to Insights: The Three Core Themes

After analyzing the interview data, I synthesized the 150+ data points into 9 key insights, which I categorized into 3 core themes. These themes became the foundation for my design strategy.

After analyzing the interview data, I synthesized the 150+ data points into 9 key insights, which I categorized into 3 core themes. These themes became the foundation for my design strategy.

Bringing the Insights to Life: User Personas

To ensure these user insights remained at the heart of the design process, I developed two key personas. These personas embody the goals, needs, and frustrations of the primary user groups identified in the research.

To ensure these user insights remained at the heart of the design process, I developed two key personas. These personas embody the goals, needs, and frustrations of the primary user groups identified in the research.

Competitive Analysis

Identifying Gaps in User Guidance, Platform Accessibility, and Workflow Smoothness

To provide a clear direction for my design decisions, I conducted an in-depth analysis of major competitors, including Google Gemini, Adobe Firefly, and Stable Diffusion. My goal was to identify their common strengths and core weaknesses in workflow, user guidance, and overall experience. This analysis ultimately distilled into the following four key insights, which directly shaped the design strategy for our new platform:

To provide a clear direction for my design decisions, I conducted an in-depth analysis of major competitors, including Google Gemini, Adobe Firefly, and Stable Diffusion. My goal was to identify their common strengths and core weaknesses in workflow, user guidance, and overall experience. This analysis ultimately distilled into the following four key insights, which directly shaped the design strategy for our new platform:

No competitor has perfected the balance between powerful, high-precision creative control and a truly intuitive, beginner-friendly user experience.

No competitor has perfected the balance between powerful, high-precision creative control and a truly intuitive, beginner-friendly user experience.

The most effective platforms provide some form of visual feedback, such as style options or output previews, which helps reduce the user's cognitive load and guesswork.

The most effective platforms provide some form of visual feedback, such as style options or output previews, which helps reduce the user's cognitive load and guesswork.

Heavy reliance on text-only commands and complex parameter syntax creates a high barrier to entry and is a major source of friction, particularly for new users.

Heavy reliance on text-only commands and complex parameter syntax creates a high barrier to entry and is a major source of friction, particularly for new users.

A unified workspace is a key expectation. Forcing users to switch between different applications or windows for creation and organization leads to a fragmented and inefficient workflow.

A unified workspace is a key expectation. Forcing users to switch between different applications or windows for creation and organization leads to a fragmented and inefficient workflow.

Design

A Component-First Approach: Building the Design System

My user research and competitive analysis made one thing clear: to solve the core user frustrations, the new platform needed to be highly interactive, visually guided, and incredibly intuitive. Traditional low-fidelity wireframes, with their simple grey boxes, would not be sufficient to test the complex interactions or validate whether the visual clarity was enough to reduce user confusion."

Therefore, I made a strategic decision to bypass static wireframes and adopt a component-first design approach. Instead of drawing lines, I began building a system.

My user research and competitive analysis made one thing clear: to solve the core user frustrations, the new platform needed to be highly interactive, visually guided, and incredibly intuitive. Traditional low-fidelity wireframes, with their simple grey boxes, would not be sufficient to test the complex interactions or validate whether the visual clarity was enough to reduce user confusion."

Therefore, I made a strategic decision to bypass static wireframes and adopt a component-first design approach. Instead of drawing lines, I began building a system.

To ensure speed and consistency. Building a reusable component library from the start was essential to stay on track within our 12-week project timeline.

To ensure speed and consistency. Building a reusable component library from the start was essential to stay on track within our 12-week project timeline.

To enable better testing. This method allowed me to build realistic, high-fidelity prototypes quickly, which was crucial for getting meaningful feedback on the complex "Unified Workspace" concept.

To enable better testing. This method allowed me to build realistic, high-fidelity prototypes quickly, which was crucial for getting meaningful feedback on the complex "Unified Workspace" concept.

To streamline developer handoff. Designing with a modular system from day one made the final product easier for our front-end developer to understand and implement.

To streamline developer handoff. Designing with a modular system from day one made the final product easier for our front-end developer to understand and implement.

The result is a robust design system that serves as the foundational library for all current and future development. It is organized into two main pillars: Foundations (which define the core visual language like colors and typography) and a Component Library (which contains all reusable interface elements).

The image below offers a snapshot of these key elements, showcasing the building blocks that came together to create the final, intuitive user interface.

The result is a robust design system that serves as the foundational library for all current and future development. It is organized into two main pillars: Foundations (which define the core visual language like colors and typography) and a Component Library (which contains all reusable interface elements).

The image below offers a snapshot of these key elements, showcasing the building blocks that came together to create the final, intuitive user interface.

Validation & Iteration: How User Feedback Shaped the Final Design

The high-fidelity prototype was not the final step. To ensure the design was truly effective and intuitive, I conducted a round of usability testing, gathering feedback from users and key stakeholders. The goal was to identify any remaining points of friction and validate my core design concepts. This process led to several key improvements that directly shaped the final product.

The high-fidelity prototype was not the final step. To ensure the design was truly effective and intuitive, I conducted a round of usability testing, gathering feedback from users and key stakeholders. The goal was to identify any remaining points of friction and validate my core design concepts. This process led to several key improvements that directly shaped the final product.

From Design to Code

Detailed Specifications: As shown in the image, I provided precise measurements for spacing, padding, and layout structure using Figma's developer-focused tools. This defined exactly how each element should be positioned.

Detailed Specifications: As shown in the image, I provided precise measurements for spacing, padding, and layout structure using Figma's developer-focused tools. This defined exactly how each element should be positioned.

Wrap-Up

Closing the Loop: Reflections & The Road Ahead

From Design to Code

This project was a valuable lesson in balancing simplicity with functionality to meet the needs of both beginners and experienced users. I learned that providing clear visual feedback and creating a consolidated, streamlined workflow are two of the most powerful levers for improving user engagement and efficiency.

If I were to do it differently, I would involve the front-end developer even earlier in the concepting phase. While our collaboration was successful, having their technical perspective during the initial brainstorming for the three UI concepts could have helped us identify potential constraints or opportunities even sooner.

This project was a valuable lesson in balancing simplicity with functionality to meet the needs of both beginners and experienced users. I learned that providing clear visual feedback and creating a consolidated, streamlined workflow are two of the most powerful levers for improving user engagement and efficiency.

If I were to do it differently, I would involve the front-end developer even earlier in the concepting phase. While our collaboration was successful, having their technical perspective during the initial brainstorming for the three UI concepts could have helped us identify potential constraints or opportunities even sooner.

Next Steps & Future Vision

While this project successfully solved our primary design goals, a key part of the product development process is capturing valuable ideas that arise along the way. Throughout our research and internal discussions, we received additional user feedback and brainstormed many new concepts with the development and community teams.

While this project successfully solved our primary design goals, a key part of the product development process is capturing valuable ideas that arise along the way. Throughout our research and internal discussions, we received additional user feedback and brainstormed many new concepts with the development and community teams.

Community as a Learning Hub: Evolving the gallery into a space for interactive learning and tutorials.

Community as a Learning Hub: Evolving the gallery into a space for interactive learning and tutorials.

Gamified Onboarding: Making the first-time user experience more engaging and less intimidating.

Gamified Onboarding: Making the first-time user experience more engaging and less intimidating.

Full Accessibility (WCAG): Implementing a light mode and ensuring WCAG compliance to make the tool inclusive for all users.

Full Accessibility (WCAG): Implementing a light mode and ensuring WCAG compliance to make the tool inclusive for all users.

Book a call, and I’ll take care of the rest

Book a Call

Book a call, and I’ll take care of the rest

Book a Call

Book a call, and I’ll take care of the rest

Book a Call