Case study
Brand in Hand: enabling mobile-first store creation
Transforming WooCommerce's mobile app from a management tool into a complete store creation platform, for the growing segment of mobile-first, non-technical merchants.
Overview
While WooCommerce's mobile app saw 8,000 monthly installs and 100,000 product creations, it was primarily a management tool, not a creation platform. This left a growing segment of mobile-first, non-technical merchants underserved.
Our aim was to transform it into a complete store creation platform, making it accessible to mobile-first merchants. The project reached 80% completion before pausing due to shifts in company strategy.
Problem statement
In the rapidly evolving eCommerce landscape, WooCommerce faced mounting challenges in the mobile space. Despite enabling store management, our app lacked critical store creation capabilities that competitors excelled at. The challenges manifested in several ways:
- Limited mobile experience. Users couldn't visualize their site during onboarding, missing the crucial first impression of their brand's potential.
- Market position. Our absence from key app store search terms like "online store" significantly impacted visibility and user acquisition.
- Competitive disadvantage. Platforms like Shopify, Wix, and Squarespace offered intuitive mobile experiences that appealed to non-technical merchants, a growing segment we underserved.
- Mobile usage trends. With smartphone users reaching 5.25 billion in 2023 (a 98% increase from 2016), the industry increasingly demanded mobile-friendly solutions. Our current offerings only partially addressed this shift.
Target audience & research
Our target audience was mobile-oriented, non-technical merchants seeking to establish online businesses without needing extensive development skills. These included novice entrepreneurs starting in e-commerce and seasoned business owners transitioning to digital platforms. We aimed to provide a simple, intuitive, and user-friendly mobile platform, letting them create and manage online stores easily.
The goal was to serve a customer segment similar to WooCommerce Express and the new assembler, focusing on simpler use cases. This focus positioned us to compete effectively with platforms like Shopify and better cater to the needs of merchants seeking streamlined eCommerce solutions.
Hypothesis
A well-designed mobile store creation experience will drive merchant success and platform growth. By enabling basic site and brand setup functionality in our mobile apps, we expected to increase free trial subscribers, particularly among merchants without development experience. This approach should facilitate smoother free-to-paid conversions and accelerate time-to-first-order, indicating successful merchant activation.
Success metrics: free trial subscription rate, free-to-paid conversion rate, days to first order, store completion rate via mobile.
Design process
Our journey began with an ambitious vision of creating a comprehensive mobile store. The initial flow encompassed AI-assisted business description, theme selection, and customization. However, technical constraints led us to refine our approach. We adapted the flow to prioritize three essential features:
- Streamlined account creation and trial setup.
- Focused theme selection with preview capabilities.
- Basic store customization through an intuitive menu system.
Streamlined account creation
Managing the lengthy setup process was a key challenge in creating a mobile store. Unlike web platforms, where users can multitask during installation, mobile users needed a more engaging experience.
Working with engineering, we developed a solution: when merchants start their free trial, we begin store creation in the background while they complete profile questions. By the time users reach the progress bar, their store is typically 50% complete. This approach significantly reduced perceived wait times while maintaining necessary setup steps.
This behind-the-scenes processing transformed a potential friction point into a seamless experience, keeping merchants engaged throughout onboarding.
Focused theme selection with preview
To simplify theme selection, we curated a small set of store-oriented themes as an initial test. Rather than building new preview functionality, we leveraged the existing Jetpack app's capabilities to show layouts across different devices, optimizing development resources.
User feedback revealed the theme preview needed improvement. The preview button's original placement below the main CTA wasn't optimal for user flow. We relocated it to just below the title, simplifying the preview process and letting merchants quickly switch between pages while reviewing themes.
Basic store customization
Technical constraints significantly shaped our customization flow, particularly around API limitations. We discovered that theme customization needed to happen after store creation was complete, attempting it earlier would cause technical issues. This led us to rearrange the customization step to follow store creation, and to optimize the flow to maintain user engagement during technical processes.
Conclusion
While our initial vision encompassed extensive store customization options, technical constraints led us to make strategic compromises. We embraced these challenges and developed a focused solution prioritizing essential merchant needs.
Although the project paused at 80% completion due to shifts in company strategy, our design work successfully laid the groundwork for enabling merchants to launch stores efficiently through a mobile-first approach. The streamlined account setup, enhanced theme preview experience, and intuitive customization flow demonstrated how technical constraints could drive creative solutions.
Looking ahead, opportunities exist to further refine the experience through advanced customization features and emerging technologies like AI-driven recommendations. The foundation we built provides a framework for creating more robust and personalized store creation experiences as market demands and technical capabilities evolve.
Despite its premature conclusion, this project showcased our ability to navigate technical challenges while maintaining focus on merchant needs. The resulting design solutions proved that thoughtful prioritization and creative problem-solving could deliver compelling mobile-first experiences, even within technical constraints.
Credits
This project was shaped through close collaboration with engineering teams and team lead, turning technical constraints into opportunities while maintaining focus on essential features. Regular feedback loops enabled innovative solutions for store creation and theme previews.