.png){kind=small}
Reimagining website creation
Adapting a complex tool for mobile
We had proven that the new 'Journey' concept was increasing our user success rate and satisfaction significantly on desktop devices. Now, our design challenge was to translate our key learnings from desktop to mobile devices while simultaneously applying a "mobile-first" approach with respect for the unique limitations, user behavior, and opportunities that come with designing for smartphones and tablets.
Guided website creation on mobile
Considering the success and learnings from our new desktop 'Journey' concept, how might we enable users to quickly and easily create great-looking websites on mobile devices, without any prior knowledge or experience?
50% increase in LTV
We didn't just replicate the success from desktop - we exceeded them. The new mobile Journey design significantly increased the quality of our users' websites and user satisfaction, along with the lifetime value of new users. We measured a 50% increase in the latter.
The starting point
In 2019 we completely reimagined the process of creating a website. Our old “template” was replaced by our new Journey concept where users created their website through a series of “guided tours”. The signup flow doubled as the first guided tour, letting new users create a Home page and pick the visual design of their website before even creating an account.
After signing up, additional guides tours would lead the users through the creation of an About page, a Contact page, connecting their social media accounts, etc. In every tour, the user would do something (e.g., enter their business name and contact information), and then see a preview of the website they were in the process of creating. Do something, see a preview, do something, see a preview, repeat.
After testing and iterating on desktop, we increased the lifetime value of new users by more than 40%. With those results and a stable version of our desktop product, we decided to move on and apply our learnings to mobile.
Phase 1: Research
To kick off the project, I planned and facilitated a small workshop for us to ask questions. Everyone on the Design team wrote down questions about/for our users after which we discussed and prioritized the most important ones.
Customer Question Board
We used the Customer Question Board to categorize our questions into qualitative vs quantitative, and attitude vs behavior. Our prioritization and question classification helped our UX Researcher and me make a research plan.
I collaborated with our Data Scientists to answer our most quantitative research questions and created a user survey in collaboration with our UX Researcher. She also conducted a series of user interviews while I oversaw the process and gave feedback along the way.
Key quantitative insights
- Our mobile and desktop users are fairly similar in terms of distribution between business users, bloggers, and other.
- Many of our mobile users use their phones as their main or only device for creating/editing their websites.
- Most of our mobile users use smartphones, very few use tablets.
Key qualitative insights
- Many of our mobile users are in the comforts of their homes, relaxed, and seated when creating and editing their websites.
- Many users like to use their mobile devices to upload images to their websites.
- Designing for desktop on a mobile device is much harder than vice versa - but many mobile users don’t even think about it.
In addition to the above, lots of little insights as well as product- and design-specific questions were brought into the following design process.
Phase 2: Design Sprint kickoff
I planned, facilitated, and simultaneously participated in a Design Sprint to kick off the design process. The CEO, CTO, CPO, Developers, and Customer Support employees participated at various stages throughout the week. This ensured co-ownership of the project and created the strongest-possible foundation based on different perspectives and domain knowledge.
Part 1: Research recap
Our UX Researcher and I recapped the key insights from the initial research and quantitative data. This informed our further prioritization and design decisions. Everyone took notes.
Part 2: Defining our KSFs and design challenges
The Design & Research team collaborated on created a full User Journey Map of the existing desktop version of our ‘Journey’ concept. We used this to pinpoint Key Success Factors and the design challenges associated with translating them from desktop to mobile. The latter was also based on an understanding and discussion of general mobile design principles, something I’ve written about here.
Key Success Factors:
- The user only needs to “provide information” rather than “create a website” - we handle the latter behind the scenes.
- The preview provides immediate feedback on every user action and input.
- Our guidance, example texts, and tips make it clear what to do and how to reach the goal.
- Alex (our mascot) and the associated font make the process feel less scary.
Key challenges to solve:
- Shorter attention span and more distractions.
- Smaller screens mean less space for guidance and editing.
Part 3: Picking our focus
Through dot voting and a team discussion, we chose the following as the key, overarching challenge to solve first: How might we include all the elements that make our desktop solution a success without cluttering the interface, overwhelming our users on much smaller screens, or compromising on the time-to-completion?
With this challenge in mind, we narrowed our focus to the onboarding flow where desktop users create their account, a Home page, and select the visual style for their new website. We chose this because the challenge would be just as evident here as everywhere else, and because we needed users to have a great experience in this first touchpoint with the product for the rest to even matter.
Part 4: Inspiration and ideation
With our main challenge and focus area defined, everyone on the Design team gathered inspiration from relevant apps and digital products. I also brought in the CEO, CPO, and others for a wider and more varied selection of inspiration.
Afterwards, everyone shared their findings with screenshots and the “key ideas” of each. All of this served as inspiration in our subsequent ideation and sketching exercises where everyone got time to form their ideas on their own and also share and learn from each other.
Part 5: Prototyping and testing
After sharing, remixing, and voting on our design ideas, we decided on two promising concepts to pursue further. We managed to create clickable Figma prototypes and get some quick user feedback on both before the weekend.
Our learnings from these tests informed our next round of iterations where we also refined the designs and prototypes further. This process continued over the following weeks.
Phase 3: Iterative prototyping and testing
After our Design Sprint, we continued the iterative process of prototyping, user testing, evaluation, and adapting the design to our new learnings.
I regularly invited key stakeholders from the company to observe the user tests live in a separate room. This helped us get a variety of perspectives on what users did and said, and further strengthened the shared sense of ownership across departments in the company.
Throughout the process, the two concepts prioritized in our Design Sprint merged into one with the best ideas from each. This was the final solution design we went ahead with.
Phase 4: Implementation
After landing on a well-performing prototype and the smallest possible scope for implementation, I collaborated closely with our PM and team of Developers to implement the new concept.
KPIs and test plan
We also defined a set of KPIs and ways to measure the success of the concept post-launch. Many of these were of course compared to desktop as well as the existing mobile product.
In addition to the traditional signup, conversion, and retention rates, our KPIs included:
- Bounce rate on specific steps in the flow. Since users “create something” and then see a preview of their website, we were worried that the very first preview would feel empty and disappointing and cause users to bounce.
- Number of steps skipped. How often do users skip a step? And which ones?
- Time spent on each step. Do users seem to rush through the process or take their time to create good websites?
- Quality and quantity of written content. Are users able and willing to write high-quality content on their smartphones?
- Image uploads vs use of Pixabay. Do users have the website visuals they need on their phones or do they opt for stock photos?
- Overall website quality. What’s the quality level of the websites our mobile users create? Compared to user websites created on desktop devices and websites created with the old mobile platform.
We measured the performance on these KPIs through quantitative tracking and manual user website reviews.
The quantitative data helped us pinpoint UX issues that were fixed immediately, as well as clues and questions to explore further through qualitative research and user testing.
Outcome
The purpose of this project was to learn from the KSFs that made Journey so successful on desktop devices, while designing for the unique needs of our mobile users and the mobile-specific challenges and limitations. Because of this, we made certain decisions that differentiated the mobile design from the original desktop version. A few of the most significant ones are highlighted in the presentation below.
After a few UX tweaks and bug fixes, we achieved a stable version of the new product and were able to measure its performance.
In addition to our users creating much nicer websites, we also measured an increase in user lifetime value of almost 50% compared to the old mobile product. This result was unheard of in a company that had been making tweaks and optimizing for 1-2% gains for years.
