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