FreshBooks Trial

Experimentation to improve the signup experience.

UX
UI
VISUAL DESIGN

FreshBooks was looking to improve the in-app setup experience for new signups. Interviews suggested new customers were arriving with a beginner mindset, and we hypothesized that users were looking for direction when getting started in the app.

Setup Flow

The first touchpoint was the setup flow, which walks customers through filling in their company details. Analysis on this setup flow found signups were abandoning it, and the more tasks were added few signups completed it.

I was a Product Designer on a product team of engineers, a product manager, alongside data analysts and marketing managers. I was responsible for producing user flows, visual design and conducting usability testing.

The Problem

The first step was reorganizing the content into three major buckets: business details, company profile and their team. The team came up with several ideas to simplify the flow, but realized the existing “furniture” for the quiz (a small pop-up modal) was a major limitation for the content. It was rather clunky, as each field or question could only fit on a single page. We hypothesized the page counters were a barrier for new signups.

The original, old design.
Mapping the user flow from signup, through the setup flow, to landing on the dashboard for the first time. Users complete information in three major buckets: their business details, company profile and their team.
Wireframe variations of the setup flow exploring "full-screen" UI. The wireframes explore breaking the content into multi-step UI to break up the clunkiness.
Mobile web wireframes exploring patterns beyond dropdown menus.

Final Design

Our hypotheses was a cleaner, more organized flow would allow users to progress through quickly, and reduce the amount of up front effort. We created a clean, simple fullscreen design that would allow for more flexibility of content, resulting in trimming the content from 8 to 3 pages. The hierarchy of the page was improved with a crisper, larger headline style and the addition of a hover state for the drop-down menus. As this was the first touchpoint in the app, extra attention was given to the page load animations. An illustration of a business growing on each page was used as a completion marker users finishing the flow.

The flow was condensed into 3 pages.

Outcomes

The team measured task completion rates. After a few months in the market, we found the new flow had similar completion to the old flow. In reflection, we realized we were trying to solve two problems at once by adjusting both the overall experience and the finer UI details at once. However, we were able to reduce the volume of content, moving from 8 pages to 3 and made important usability improvements to the UI for the team to iterate on.

Trial Dashboard

We knew engagement on the dashboard in early trial was low, from customer insight that the dashboard reports weren't useful when empty. There was some small tiles asking for basic invoice template setup, but they went largely ignored. We hypothesized a trial version of the dashboard could present get-started tasks and activate/introduce features until the dashboard metrics were populated with their information.

Design

The team aligned on two core ideas to explore - gamification and education. As many new customers need to manage their billing immediately, we stuck with the original actions of completing an invoice template and reformatted the tiles to look more like a task list, and used a success donut to encourage completion. We also introduced an educational tile to explore new features. We found new customers had questions about what their clients could see or do in the app, so as part of the solution included how-to resources. Clients was selected as the first topic as it was a building-block action to jumping into several workflows.

Outcomes

We validate our hypotheses using an A/B test in the market using Optimizely. Our test on the setup tiles saw a 50% improvement with completion rate when we added the success donut and used the new layout, which we rolled out as a launchpad pattern elsewhere in the platform. We found that users who saw the education tile added clients more quickly than the group that had no tile at all, although it was not a runaway success. If we were to run the Client tile test again, selecting a feature less closely correlated with major workflows might help us evaluate the success and efficacy of the widget.