Paving The Way For Mobile-First Website Creation

01. OVERVIEW

This case study showcases how I navigate constraints of mobile dimensions, to empower user design capabilities. Discover the path to an untapped market with my E2E App idea for mobile-first website building.

02. ROLE

The Full Scope

Solo MVP requiring a full range of research, UX design, and UI design — from initial background research to iterative design thinking.

Approach

Useful - Mobile website creation offers a wider userbase. Who wouldn't want to be able to create their own website?


Usable - You don't need to be a web developer or a technical artist. Accessible to everyone, including beginners!


Desirable - Fun to use, allowing for powerful creative control and exploration.

03. KEY CHALLENGES

Bridging Power and Simplicity

Challenge 1 - Website Creation Is Clunky

Most web builders rely on modular, rigid block structures, which limits creativity and reinforces the notion that website design must be clunky and constrained.

Challenge 2 - Limited Screen Space

Mobile devices face limited screen space and processing power, making desktop-style toolsets overwhelming and mobile web design nearly impossible.

21 times more space than my phone!

Solution - Image Creation Through AI Prompting

Mobuild offers a fluid solution, breaking away from the rigidity of block-based builders and the limitations of mobile devices by introducing generative AI editing and text-based prompts. This lightweight, reference-driven approach eliminates the need for cluttered toolbars or complex block stacking, minimizing screen space demands and processing power while allowing users to guide the AI naturally. The result is a more fluid, intuitive experience that makes professional-grade, mobile-first web creation practical and efficient for everyone.

04. PROCESS

User-Centered, Iterative, AI-Focused

My design process was iterative, adapting to findings through continuous refinement. Early on, I saw AI as a way to bridge gaps between user challenges and solutions. This flexible approach kept decisions evidence-based, user-centered, and effectively executed from concept to final product.

What's Important?

Background Research

  • Mobile-first web builders are rare, likely due to poor execution rather than lack of demand, leaving the space underdeveloped.

  • Competitor tools validate user interest, but mobile remains secondary instead of a primary workflow.

  • Generative AI shows strong potential, though current workflows still require refinement to feel seamless.

User Research

  • Accessible – Beginner-friendly and simple to navigate, it lowers the barrier to entry for web creation.

  • Capable – Regardless of screen size, professional websites can now be created from anywhere.

  • Fluid – Flexible, AI-driven approach that adapts to user needs while creating a seamless design experience.

Bringing Mobuild To Life

UX

1

Challenge - Prevent screen clutter while supporting complex, gesture-based interactions.

Hypothesis - AI image generation through a minimalistic toolbar.

2

Challenge - Conveying capability and context with minimal user effort.

Hypothesis - Project/page viewing screens paired with template selection options.

UI

3

Challenge - Avoid clashes between Mobuild and user-created site designs.

Hypothesis

  • Simple, glassy visual style

  • Clearly distinguishable button placement

  • Use of overlays for added clarity

05. DESIGN DISCOVERY

Exploring Pin Based Image Generation

Low-Fidelity Wireframes

Early designs needed to explore how Mobuild could stand out from stereotypical AI-based design apps by giving users more meaningful control. The approach focused on empowering users without requiring advanced art or technical skills. By placing pins on the canvas, they could target specific locations and pair them with image descriptions, making AI feel approachable and precise. At this stage, testing showed the product to be viable, though it also revealed clear difficulties—such as the learning curve around pin placement and AI prompting—that needed refinement in later iterations.

(1) Click to place pin -> (2) Prompt for a visualization -> (3) Edit then add pin -> (4) Confirm to save pins

Visual Improvements + Concept Refinement

High-Fidelity Prototype

During this phase, I expanded interfaces to better fit user experience while refining the interactive concepts.
Using tools like Claude, Cursor, and Figma plugins, I rapidly generated templates for users to select from. Templates supported clearer visual thinking, and faster usability feedback when users first started to understand AI pin edits.

New Page Creation

Create a new blank webpage, or review relevant templates to start with one of your choosing.

Adding and Editing Pins

Select anywhere on your screen to place a pin for visual prompting. Use reference material to assist visual prompting capability.

Publish Pins in Groups

Save time and gain a better judgement of how your prompts will change the website visuals. Edit multiple pins before applying.

Pin-Prompting Imagery

Is A Difficult Concept

Usability Testing

Usability testing revealed that while templates helped users imagine what their projects could look like, the pin-based AI creation system remained a major barrier. The tool itself was extremely powerful—capable of addressing user needs while overcoming constraints like screen size, computing power, and rigid web-building systems. But that power also introduced hidden complexity. Users found the concept of “pins” confusing; although the UI appeared simple, the underlying logic was unfamiliar and made it hard to connect actions with outcomes. This caused hesitation, and insufficient context for effective use. Initially, I hoped templates would solve this learning curve, but it became clear that a more intentional teaching approach was necessary—a pivotal realization in the design process.

06. ITERATIONS

Training User Capability

Wizard Flow

The pin prompting wizard transformed onboarding by turning a confusing process into a guided learning experience. Sequential steps and real-time examples gave users the context they previously lacked, helping them connect inputs to outcomes. This reduced hesitation, built confidence, and shifted onboarding from a barrier into a foundation for deeper exploration and trust in the system.

  • Broke tasks into sequential, digestible steps.

  • Clarified AI concepts through real-time examples.

  • Increased user confidence and reduced friction during onboarding.

07. KEY OUTCOMES

AccessibleCapable Fluid

Lower Barrier for Entry
Users without technical or artistic skills could now create modern, professional-looking websites directly from their phones.


Capture Untapped Market
Research confirmed that the lack of mobile builders stemmed from poor execution, not lack of interest — unlocking a large, untapped market.


Powerful and Simple To Use

Cleared major obstacles like smaller screen sizes and reduced processing power, yet also improving user potential.


Fluid Web Building
Introduced a fluid creative control that gives users greater freedom to explore design directions — compared to standard rigid web building.

Next Steps

-> Enhance onboarding context: Refine the pin-based wizard with more on-screen context.


-> Version History: Reverting to save points and ability to remove published pins


-> User testing at scale: Run larger usability studies to validate adoption patterns and uncover edge cases.


-> Broaden accessibility: Train AI model on a11y and WCAG for user creations and fine tune Mobuild.


-> Long-term vision: Bridge users who want to start on mobile and seamlessly continue on other platforms.

—Kyle Hummel