NEW ONBOARDING FLOW & DEMO SITES

PRODUCT MANAGEMENT

While at Format I worked with a talented team of researchers, designers, and engineers to conceptualize and execute a total overhaul of the marketing demo sites as well as the user onboarding flow. This project resulted in a 3x increase of marketing demo sites as well as an increase in FTPCs and a reduction in time to convert. 

 

My Role

As product manager of this project I assisted a multidisciplinary team  for almost a year to overhaul our demo sites as well as the demo site user flow. I assisted with user interviews and prototype testing and worked extremely closely with the design and development teams to manage execution.

 

The Project

What started as an attempt to correct a disjointed onboarding experience quickly turned into a joint marketing and product effort to completely overhaul the demo sites and onboarding flow.

Only a few months into this role with Format it was obvious that the onboarding flow needed to be improved. Format had pivoted from a once "creative" website builder specializing in anything from fine art to photography portfolios to a website builder focused almost solely on photography portfolios. The existing demo sites—built as 18 distinct and different themes—did not reflect this pivot nor had they been updated in years which created a dated and extremely disjointed experience.

The team used the extensive research done by the internal team to identify the six main sub categories of photography that our clients specialized in. We then researched the nuances of each category to create a framework and structure for the demo sites. What once was 18 disjointed and disconnect demo sites became 72 unique sites, each focused on a particular style of photography and developed with sample content in mind that matched the style of photography. We also created a back-end structure for the new sites so they would continue to be built off of the 18 existing themes by using a series of styles and creating a parent<>child internal architecture to ensure that we did not increase the effort to maintain the new demo sites, as theme maintenance was already an ongoing challenge for the team.

While tackling and produce the new demo sites, I worked closely with the product desgin and engineering team to overhaul and improve the onboarding user experience. Format is built by offering a series of themes to their users. Each theme has a variety of design variations that can be set by the user. The issue with the existing onboarding is that the design variations used on the demo site did not translate to the site builder, this meant a user would see a demo site but after going through onboarding would be left with a site that looked nothing like the one they signed up with full of imagery that did not exist on the demo site and full of lorem ipsum. With the new sites full of relevant content and imagery, we were able to move ahead with creating an onboarding flow that identically mirrored the demo site. 


The team spent the first part of the project shipping small enhancements to the existing UX all planned to support the new flow. Elements like allowing a user to rename, delete, and copy a page from the main page view were added in support of this project. This approach allowed us to ship really valuable user experiences often while allowing the design team time to create all the new demo sites and create the new onboarding back-end architecture.

Once the all of this structure was in place, the team then began to execute the final phase of this project: the onboarding flow. The design team created an elegant approach to a "choose your own adventure" style of onboarding to support the two main mental models of how our users built their portfolio sites: creating new pages or starting with example pages. Creating new pages automatically bulk deleted all of the sample pages; designed for the advanced user who already knows what they want in their site. The start with example pages option was the first step into the new onboarding flow. This flow allowed the user to create an identical copy of the demo site, therein giving them a useful base structure for their new portfolio. Each demo site was designed to give a new user the confidence to quickly spin up a portfolio site by providing them content that could be gently edited and then used. For example, each site offered a short bio page that could easily be used with a few quick edits. All imagery provided was creative commons licensed and was meant to provide inspiration for a user's portfolio design and structure.

After almost a year we launched a thoroughly QA'd project (led by moi) with analytic tracking off to the world. After watching the conversion rate climb for the users who selected to use sample pages we decided to permanently implement that flow.

Learnings

This was such an exciting project and I learned so much working on it. The actual technical solution for supporting over 40 new sites without burdening the technical team was extremely complex and I learned a lot throughout the execution. We built a robust back-end management system for all the new sites which made it incredibly easy to keep them updated going forward. The most challenging part of this project was to create the site duplication in a way that supported the complex plan and feature matrix to ensure features were properly paywalled and that duplication would not accidentally open higher tier features.

This project taught me a lot about scope management and staggered releases and working with literally an entire company to execute a blue-sky type of project. Although this project was long, we were able to fit in so many smaller enhancements along the journey that positively improved the customer experience and enhanced business metrics. Ultimately this project taught me that anything is possible if you have a great team and a realistic plan. On launch, I created a illustration to highlight the tremendous effort of the team and thank everyone for their contributions.

Using Format