Onboarding Users to UserOnboard.com

User Onboarding (verb): the process of increasing the likelihood that new users become successful when adopting your product.

This project is still ongoing and currently under construction, but you can see samples of the designs here: Onboarding Expert Review page, Lifecycle Email page.

Case study highlights

  • How I beat out more experienced designers to land the project, without a portfolio.

  • The challenges of designing for a personal consulting brand vs. a product company.

  • The thought process - sketches, diagrams, tradeoffs, and how I brought Samuel Hulick's unique voice to the forefront.

You have an awesome product that promises to add tremendous value to your users’ lives. But it will remain an unfulfilled promise if you can’t guide uninitiated users into raving customers. Your future customers, like everyone else, has many demands on their time and attention. So how do you show them how amazing your product is, with as little friction as possible?

That’s where Samuel Hulick and UserOnboard.com comes in. Because onboarding sits at the top of the funnel, a poor onboarding experience makes every part of a company work harder:

  • Marketing teams have to acquire more visitors to keep refilling a leaky funnel.
  • Sales & support teams have to spend their days hand-holding confused signups.

By draining resources from the product, experiments and progress will slow and growth will suffer. Removing this bottle neck can mean the difference between surviving and flourishing.

Introducing Samuel Hulick, Onboarding Extraordinaire

Any product designer with a passing interest in UX will have come across Samuel’s teardowns. In every teardown, he deconstructs the steps from the landing page to setting up and using a product. It looks simple and elegant when a company gets it right ( Slack, Peach ). Or, it can be wildly entertaining (his commentary that is) when products make new signups jump through extra hoops before they even glimpse the product’s value (*cough*, Tidal).

My first introduction to Samuel’s work was during the development of version 2 of STEMN (GitHub for science & engineering). After devouring through half a dozen teardowns, I got hooked, and have been a fan ever since. So you can imagine my delight when he tweeted:

How often do you get an opportunity to work with one of the best in UX? While other designers were tweeting him links to their portfolios, I chose to take what I learned from Samuel and apply it. One lesson that’s always stuck with me was not to sell features, or in my case, myself (my portfolio). Rather, I needed to sell Samuel on the awesome version of himself he could become (the benefits).

useronboard-mario

Sell the dream, not the features. (Credit: Features vs. Benefits)

The next two nights, I sketched out various designs and quickly built a fun landing page. Drawing from other concepts in his book, "The Elements of User Onboarding", I made sure to appeal to the “emotional elephant” by giving it a Mario theme, and spreading eye-catching faces throughout.

Fun business proposition: wanna become fire-balling Mario?

useronboard-proposal

Fun business proposition: wanna become fire-balling Mario?

A few days later, I heard the good news!

hired-email

It would be awesome indeed

Samuel really liked the proposal page, and wanted me to inject that same personality and “punch” to UserOnboard.com.

In our initial chat, I prepared a bunch of questions to make sure we’re on the same page. But rather than get into the nitty gritty details, Samuel assured me that he’d prefer I use my creative freedom and judgement.

“When in doubt, go slightly overboard. It’s always easier to scale it back than it is to turn it up.”

A mission to onboard

UserOnboard gets a healthy amount of traffic, driven largely by the email lists. Whenever a new teardown comes out, Samuel would receive a wave of inbound requests for consultations. Back then, he’d point them to the corresponding page to explain the service.

The old Onboard Expert Review page

browser old-oer-page

The old Onboard Expert Review page

The consultation pages were brief outlines of the services offered. Samuel pointed out that they didn’t establish clear expectations of what clients were getting, and it was also missing the trust element that they will be “really well taken care of.”

The motivation behind the redesign was to set the right expectations. Clients are making an investment in their brand, their product, and their customers. The page needed to instill a high degree of confidence on their ROI and the quality of service they can expect. The page needed to answer questions and objections that arise, while keeping them engaged, and ultimately, converting to customers.

Challenges designing for a personal brand

Designing for a personal brand posed a different set of challenges to designing for a company. The product isn’t an app or interface that customers interact with, but Samuel Hulick himself. It can’t feel generic, but must be very personal, considerate, and authentic instead. The website needs to look and feel like you’re having a conversation with Samuel.

There are other considerations when designing for consultation services too. How do you address the FAQs of a few, on the same page, while not losing the attention of everyone else?

Finding Samuel's unique voice

To find the voice and look & feel that is uniquely Samuel’s, I pored over his book, teardowns, survey results, video deep dives, and a couple episodes of his podcast with Robert Graham, Successful Users, and identified elements that stood out: annotations, memes, and humor (more on those later).

With these unique values and elements guiding the design, I sketched out some initial concepts, some more overboard than others:

Some early concepts

sketches-ph

Some early concepts

Sometimes I’ll sketch out specific sections, focusing on the specific message I want to convey. Other times, I’ll explore completely new interfaces to explore the narrative as a whole. These early sketches allowed me to see things that work, the ones that don’t, and also keep the ones that need more work.

Shades of gray

Next, I created grayscale wireframes of the most promising ideas. I’ve found that sketches, though quick and easy to iterate, didn’t always capture the relative scale between different elements and text. Wireframes are a great way to piece together the structure and spacing needed to create a cohesive and compelling narrative. Working in grayscale also allowed me to focus on getting the structure of the story right, without getting distracted with picking the right color palette just yet.

Working in grays

grayscale-designs

Working in grays

Copy

“Punchy” copy was written in parallel to the wireframe designs. This made sure that A) the text sections were given sufficient space, and B) the overall narrative flowed into a compelling pitch.

As Joanna Weibe of Copyhackers says, “the best messages don't come from inside your head, ...the best messages come from the people who have bought your solution." Skimming through the treasure trove of Samuel’s survey results, I pulled out some gems to the question "what's your biggest challenge regarding onboarding right now?":

"Getting users to our 'aha' moment faster." (repeated by two respondants)

"Helping users figure out how to get started with our product without making them feel stupid."

And my favorite: "Making sure the process is smooth enough so even my mum would not have any questions or concerns (Love You, mum!)"

What I made

Over several calls and iterations, here's a sample of the various pages in the design overhaul. The Onboarding Expert Review page (under construction):

Book an Onboarding Expert Review!

made-oer

Book an Onboarding Expert Review!

While Samuel and UserOnboard.com are synonymous with onboarding expertise, how the new Lifecycle Emails product fits with the existing brand was less clear. The Lifecycle Emails page therefore addressed the “what” and “why” in more detail:

Lifecycle Emails page design

made-le

Lifecycle Emails page design

Taking a closer look at specific elements that stood out:

Annotations

To the unacquainted, these callout boxes are like speech bubbles, straight from Samuel’s mouth. To UserOnboard subscribers, these are the familiar commentary that draw our attention to particular elements or ideas. Often colloquial and in first person, this dialogue not only grabs attention, but conveys a more personal level of communication. Rather than one of thousands of customers, here, he’s addressing you directly, and you have his fullest attention.

Have a friendly chat with Samuel

annotations

Have a friendly chat with Samuel

Humorous copy, memes & emojis

Humor, when used correctly, is an important device to take hold in someone’s memory. This is especially true of larger sales, where the reader is not the decision maker or may not be ready or to make the purchase.

Samuel does this well in his teardowns with a nice balance of memes and humorous commentary. In the designs, I recreated some of these elements in the form of annotations, memes, emojis and copy.

gatsby

We get down to business, and we have fun at the same time.

Testimonials

Why should people believe what you say? Anyone with a modicum of business sense will visit the site with a healthy dose of skepticism. The best way to resolve these trust issues is with social proof. Don’t believe what I say, sure, but look at what my other happy clients have said.

An early concept used a carousel of testimonials above the final call-to-action. Based on Samuel’s experience, carousels didn’t work very well, and gave some great feedback on the power of faces spread throughout the page.

Faces are lightning rods for attention and add an emotive, human-to-human punch.

testimonial

Faces are lightning rods for attention and add an emotive, human-to-human punch.

The FAQ Dilemma

Product FAQs are often boring and relegated to a separate page. As Samuel himself alludes to in Elements of User Onboarding,

“banish FAQ pages from your website… The end goal is not to quarantine frequent questions, it is to address them so thoroughly that they’re no longer being frequently asked in the first place.”

I addressed most of the Samuel’s FAQs in the places they arose, but there were some logistical concerns that didn’t fit the scheme of the page:

“What do I need to do to get started?”

“What should I do with my Lifecycle Emails?”

“Do you review prototypes?”

If the FAQ was to take up real estate on the main page, it must be engaging. It can’t be your run of the mill text Q&A.

Selecting from a few layouts, I ended up going slightly overboard with the messenger FAQ, knowing we could always dial it back if necessary. The Facebook messenger layout is one that most are familiar with, and it’s an interaction limited to friends. In the same way, Samuel is your friend, and this is the level of personal service that you can expect.

Injecting some facebook friendliness

faq

Injecting some facebook friendliness

What I learned (so far)

When in doubt, go overboard

This was great advice from Samuel right from the start. The more I remind myself, the more I’ve come to realize how well it applies to all aspects of design. Especially in the early stages, it allowed me to challenge the norms of conventional product pages to create something that’s unique to Samuel’s brand.

Emphasize benefits over features

Where relevant, I’ve attempted to frame solutions in terms of benefits to the user first. In proposal page to Samuel, I emphasized how many more fans and customers he could reach with a fancy new site. In the consulting pages, even when sections were descriptive in nature (FAQ, the consultation process), I’d keep the users’ desired outcome in mind.