ONBOARDING

PURPOSE

One of PicMonkey’s initiatives was to improve the Ease of Use. As we added more features to the Editor, the UI became more complicated and became harder for new users to onboard. The Product Manager and I predicted that if we improved the onboarding experience, we could improve conversion. The existing onboarding experience was not effective, the experience did not cover essential features to create a design. We were also seeing users quickly going through the tips from FullStory observations and we were getting user feedback on things that were covered in onboarding.

To kick off the project we identified some goals for this project:

• Understand user intent and guide users through successful first time experience by covering essential features

• Make a good impression, demonstrate value of product

• Teach users where to go when they need help

• Establish patterns that allow for expansion (Design System)

We determined what KPIs we would monitor to measure success:

• Onboarding completion rate/abandonment rate

• Bill-through conversion rate

• Engagement Rate

• Customer feedback

MY ROLE

• Lead UX design, visual design and research efforts

• Partnered closely with Product Manager on defining MVP

• Collaborated with Dev team in Austria

• Partnered with UX writer

• Helped QA team with bug bashing

• Post release monitoring

PROCESS

INSPIRATION

I partnered closely with the product manager during the initial kick-off. We agreed to do a data pull - to see what features were getting the most usage, what the customer support log book looked like, go through old research from the team. We also ran a quick new customer first session survey to get qualitative data. I also conducted a competitive analysis on the side to see what kind of best practices were out there.

Moderated Test

We felt that we needed more data and I proposed that we run a moderated test with participants who have A) never used PicMonkey before and B) had little to no design experience. We turned off onboarding and had participants create a Holiday card using PicMonkey using one of our design templates with no help. This test helped us figure out what basic features we need to go over for our beginner users to have a successful first time experience.

We learned that beginner users need help with basics, they need help with the selection model (select a layer first, then make edits to the layer) as well as understanding what layers were. The average Ease of Use rating was 3.125 (1 - very difficult, 5 - very easy)

We felt that a guided walkthrough approach would be worth trying but also allowing the ability to skip onboarding for experienced users.

Onboarding: Moderated test summary - Round 1

Onboarding: Moderated test Round 1 usability issues list

EXECUTION

From the moderated test, we determined we need to show users how to:

• Easily replace an image on their content by drag and drop

• Edit text

• Add a graphic and transform/move the graphic

• Give brief explanation of layers and layers panel.

Using PicMonkey Design System, I mocked up the first iteration. I also made sure components met accessibility standards. I updated components that failed to meet the contrast ratio. Designs and prototypes were created in Figma.

Moderated Test Round 2

To validate that the experience I designed was effective, I wanted to run the same exact moderated test but this time, the participants would go through the proposed onboarding prototype before creating their card. I tested with the same participant profiles.

The proposed design proved success with a few minor tweaks that needed to be made. We observed significantly less usability issues. The average Ease of Use rating went up to 4.5 (previously 3.125) and even though I tacked on an extra 4mins to go through the onboarding experience, the average test session duration decreased from 33:12 to 29:55.

Onboarding: Moderated test summary - Round 2

Dev Handoff

I met with the development team a few times during the process to go over the flow and allow them to ask questions and bring up any technical issues. I also provided detailed documentation and worked closely with the UX writer to make sure the steps were clear.

UX Flow Documentation

New UI Patterns Documentation

RELEASE

The project was released 03/29/2021. We monitored usability issues and cut fast follow tickets. We also have been monitor data, checking the success KPIs defined during kick off and also monitoring customer feedback.

In-app help was on the roadmap next for the Ease of Use initiative and learnings and patterns established in this project were used to help with the project.