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

Website Creation App

Zenfolio 2.0 Website Creation App

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. 

Since Zenfolio's inception over a decade ago, Zenfolio have grown drastically more complicated and feature rich, however the entire user experience is disjointed with inconsistent actions and expectations throughout the product. Also in the last decade, Zenfolio, as a representation of the photography industry itself saw its user base split into two distinct camps. On one hand, Zenfolio have high-volume /enterprise level photographers who care about speed, reliability, workflow integration, and data accuracy above everything else. Zenfolio's feature richness caters to these high-volume photographers slightly better. On the other hand, majority of the market consist of entry-level photographers who don't have much volume. However, their developed aesthetic eye as well as access to the latest and the greatest technologies have trained them to expect best in class in terms beautiful user experience. 

Zenfolio was not converting these younger photographers and is loosing to best in class players such as Squarespace, Pixieset, etc. Due to tremendous tech debt accrued over the last decade, in order to attract and convert these young and hip photographers, Zenfolio needed to design and develop a 2.0 version with the best user experience on a separate tech stack.


User Research
Competitive Research
Information Architecture
UX flow
Low fidelity prototypes

My Role

I spent close to half a year at Zenfolio being intimately involved with this project. Initially I was the sole Product Designer on the team responsible for all forms of user research and the initial UX & UI prototype. I was joined midway through the project by a fellow Product Manager, and a junior designer who helped in executing the high fidelity revisions. This project was developed rapidly with weekly executive presentations consisting of the President of the company, and major stakeholders in departments ranging from Marketing, Product, Engineering, Accounts & Customer Service. 


Retain the best from the past

CS help desk data
Internal survey
Zenfolio Forum

First thing I did prior to starting this project was to attempt to learn from the past, retain the best, and forget the rest. After a decade plus in operations, the company had treasure trove of information both internal as well as external to draw from in terms of what was working, and what was not working. Some of the sources of information I looked into were time and issue worked on by Customer Service,  internal survey to Zenfolio employees soliciting anecdotes in regard to the product, and nuggets of gold from Zenfolio forum.


Refining Target persona

Craigslist Survey
User Interview
Persona Development

One of my first task upon joining Zenfolio involves an extensive interview with 30+ photographers which resulted in the creation of 3 distinct archetypal personas for the product team in order to help guide and develop user stories.

The first thing I did while working on this project was to further develop the key persona - Alex, especially flushing out the persona in regard to preferred services. I proceeded to solicit target photographers on Craigslist via a survey. After getting submission from 60+ photographers, followed by handful more in-depth phone conversations with select few . I was able to have a clearer qualitative, as well as quantitative understanding of our target persona in regard to competitive choice, the terminologies they were using to identify their field of photography, as well as broad general understanding of the templates they were choosing to exhibit their work.

Initial response from 60+ people who have replied via Craigslist 


Competitor IA
Competitor UX
usability test
Competitor Forum
User blog reviews

COMPETITIVE LANDSCAPE - SQUARESPACE VS. WIX

After having  a refined persona for 2.0, bulk of my research with the aid of our admin assistant, went into understanding everything about the best in class competitors. We spent time understanding and documenting their product philosophy, their product features, their information architecture, and their user flow. We also  performed usability testing on these competitors via UserTesting.com to see how users performed key tasks that were common across the board.

The interesting observation in regard to Squarspace vs Wix  lies in the flexibility of the website creation part, and the final resulting site creation. Whereas most users found Squarespace  to be a bit confusing to use and a lot more restrictive in terms of customization options when compared to Wix, the end resulting website  tends to be much better user experience for websites created with Squarespace when compared to Wix. Studying these two best in class players provided the foundational framework to think

Competitive Analysis


buy-a-feature.png

Focus Group
Buy a feature game

VALIDATION & FURTHER PROBING

Concurrently while all the research and analysis is going on, the Executive team have been meeting weekly generating very high level product requirements. The next steps involved in moving the project forward requires validating these high level requirements and assumptions, synthesizing useful research information, and flushing out the details in order to commence the design process. We conducted two focus groups consisting of about ~6 photographers each. We solicited photographers from Craigslist, followed by phone calls to vet photographers who were close match to our target persona also using competitor products. 

Both sessions we tried to gain additional understanding into fundamental key assumptions in the areas of:

  1. Their photography business needs & intent
  2. Competitive choice and path to conversion
  3. Photography workflow
  4. New Relevant trends

We broke up the two sessions focusing on two separate part of the scope. The first session was focused on website creation, the second session was focused on eCommerce. Both sessions we played "buy a feature" game to help prioritize MVP features as well to assess monetization potential of any additional features. 

Here is the first focus group's complete agenda circulated among all the key stakeholders prior to commencing . 

Here is the first focus group's summary learnings.

ZenFocus 2.jpg

Keyword Research
Competitive Research
Card sorting

Information architecture

Getting the IA right involves couple of ingredients. In terms of honing in on the keyword terminologies we looked to competitor's site, organic keywords people were searching for to get to competitor site based on Google's Keywords Planner, as well as competitor's paid keywords based on information from Spyfu. In terms of honing in on categorization as well expected logical flow and outcome, we used online card-sorting tool with photographers matching target persona via UserTesting.com. The final IA was further validated with past focus group participants we have established solid relationship with.


high level concepts

Initially we started with three main high-level concepts.  The first option was having all content as well as settings control in a global location. Obviously option one would not scale much for most types of body content. The second option was having all content as well as settings control reside locally a la WYSIWYG style. The second option would risk certain settings getting duplicitous across the board. The third option I explored having a mix of global and well as local configurations. Content would be configured locally, and settings would live globally. We further performed usability test on all the options via UserTesting.com, though most users found option two - the WYSIWYG style editables to be the most  intuitive, we still went with option three as all WYSIWYG would make editing global settings way too confusing. 

1global.png
2wysiwyg.png
3amixed.png
3bmixed.png

Interaction FLowS

After rounds of iterations based on user testing as well as internal stakeholders approval, here is the complete prototype with critical interaction flows that are necessary for creating a portfolio website such as:

  • Adding new content
  • Page management
  • Image management
  • Logo management
  • Watermark management
  • Site SEO management