Angela W. Parsons - SF Full Stack Product Designer
Portfolio of Angela W. Parsons - SF Full Stack Product Designer
2@2x.png

Website Creation Onboarding

zenfolio 2.0 onboarding 

Zenfolio 2.0 Website CreationOnboarding 

Introduction

Zenfolio is one of the oldest, as well as largest all-in-one solution for photographers offering services ranging from website builder, to photo hosting & client proofing, to eCommerce. 

Over the years, traffic coming from mobile devices have increased to about  50% of Zenfolio's overall traffic. People who start the free trial on mobile have also increased 100% YOY. In Zenfolio 2.0 redesign, we needed to optimize the mobile experience as much as possible in order to capture the ongoing trend in mobile consumption. We designed the onboarding with a mobile first experience in mind in terms of minimalism in interaction as well as information needed. In order to keep development time and cost low, we designed the onboarding to work responsively across all devices. The overarching goal of the onboarding is to get photographers as close to a live website as possible by the end. By getting just enough information from the onboarding process, Zenfolio makes photographers a populated Homepage, About page and Contact page by the end, which is enough for a photograph to go live with their website should they choose to. 

For more in-depth understanding of why we need a complete redesign of Zenfolio, read the introduction in this post here

mobile.png

01.  Start Free Trial

The new onboarding is specifically for the Portfolio Plan, as Pro Plan and Advanced Plan will onboard to the original app. We separated out the plans onto their own separate landing pages, so once a user is on the specific plan page, they enter tunnel visions and the only action they can take is to start free trial.


02. Choose a Template

Once they start trial, they are immediately brought onto the template overviews page. We did extensive user testing on the mental model of photographers in regards to templates. We found that irregardless of the genre of photography photographers major in, they primarily describe their template needs in terms of structural layout terms, followed by the appropriateness of that specific layout as exhibited in different types of photos. Most of the times, photographers wants clean white background to display photos, occasionally, a photographer may wants a neutral background or a dark background as a base. On the template overviews page, we put layout filters on the left, and image & background change controls on the right, to allow photographers to quickly drill down to the template they would like.


03. pick a template

Once a photographer clicks into a specific template to view full size demo. They are able to be able to view the mobile version of the template, change template background, and change the default display photos among genres such as Wedding, Landscape, Portraits, Events, and Products. 


04. sign up

I am a huge proponent of using social logins to allow users to quickly gain access to the app, as most of us have a Facebook or Gmail account, and social login is able to quickly pull in lots of  valuable information into the app. In the end we retained a separate email & password account creation field aside from just social logins, as photographers may want to keep their business activities separate from their personal account. 


05. Website info

The next step in account registration asks for very simple information that allows Zenfolio to create populated About and Contact page for the photographer after onboarding, which gets them one step closer to a publishable live website. 


06. Add Images

Internal stats have shown us that users who sign up initially with more than 5 images converts much higher in the original app. Adding images is a required step in the onboarding as we want users to be engaged with the product right from the get-go, and we want users to finish onboarding with a presentable homepage. Adding images is the last step in onboarding, as this step is the most taxing on one's mental resources. If there is any reason a user may want to take a break during the process, we have enough information at this point to email them and prompt them to finish later. We designed adding images with a drag & drop interface reminiscent to other dominant players' drag & drop interface leveraging familiar paradigms as not to reinvent the wheel. We incorporated integration with Dropbox and Google Photos as possible places where photographers are likely to store their images aside from their local drive.