<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1639164799743833&amp;ev=PageView&amp;noscript=1">
Diagram Views

User Onboarding Process: Guiding Visitors Through Your Website

Britney Na Interaction Designer
#Design, #Design Advice
Published on October 9, 2024
ai-cms-use-case

We offer some tips on how to design a website in a way that helps users intuitively understand how to use it to accomplish their goals.

What is the User Onboarding Process? 

 
User onboarding is the process that introduces people to a website or app and teaches them how to use it.
 
You can think of it as a website or app trying to make a good first impression. The goal of this process is, at the least, to introduce important, new features and help users become comfortable using the website or app as soon as possible.
 
At best, it wants to create a lasting first impression so that users remember and want to keep coming back to it. When you compete with so many similar service offerings, that first time the user opens may be the only chance you get with the user.
 
So, how can website designers ensure users can easily enjoy the websites they created? Here are a few tips on how to create a positive website onboarding process:

Tell a Story

Ideally, the user onboarding flow of a website should be like telling a story, one that includes an introduction, a problem to be solved, and an eventual solution.
 
While storytelling is not a new revolutionary concept, the key point to remember is to focus on telling the story that users may find interesting: how your service/product will change their experience, what questions they may have, or where in the process they may need help or feel hesitated to move on. You want your story to answer what users want to know and build on it to excite them about your offerings. Too often, I see websites focusing on stories that you, as a service provider or stakeholder, want to tell.
 
While it is nice to know the whole history of your company or how great your service/product is, the faster you can get to what value users can receive from your service/product and answer their practical questions, the more they will be willing to browse and learn about your company.
 
Imperfect Foods is a great example that tells an interesting story of how buying ugly produce works. Through imagery, infographics, and words, the site introduces the concept of buying ugly produce, focuses on the positive impacts we can create, and convinces the user that signing up for their delivery system is not just about getting food delivered, but about being part of a greater movement to change society.
 
imperfect produce
Imperfect Produce Homepage

Make it Personal

How can you encourage people to not only use your site once but keep coming back for more? Making the experience personal and focusing on a user’s journey through your site will differentiate you from other sites and make the user’s website experience memorable. Utilizing content personalization is one way to add this personal touch, but it can also be accomplished simply by using direct words that users feel most comfortable with.
 
It can be daunting to think you can order eyeglasses online. Though I’ve been wearing glasses since 5th grade, everything about trying out frames and selecting my eyeglasses online seemed so foreign and intimidating when I tried it the first time. Warby Parker does an excellent job of making that seemingly overwhelming task a more enjoyable and unique online experience. That is achieved through asking questions from the users’ perspectives (e.g., “What’s your face width?” instead of “We offer three width options.”), using the voice and tone of a warm, friendly eye doctor speaking to you through simple copy and hand-drawn visuals, and asking one question at a time like an actual conversation.
 
Warbey Parker screenshot
Warby Parker has an easy-to-follow and personalized eyeglasses section process based on what the user prefers.
 
marcus by goldman sachs

Make it Bite-Sized

Don’t overwhelm users! This means that users shouldn't feel inundated with the amount of personal information being asked the first time, and the sign-up process should be clear to users as to where they are in the process and what info they need to provide.
 
Marcus by Goldman Sachs keeps the bank account opening process (see the image to your left) feel simple and easy to understand by indicating the steps involved in opening an account, noting where the user is in the process, asking as few questions as possible, and also, clearly stating why they are asking.

 

Use Visual Design to Offer Contextual Help

carvana

Another factor that makes the Marcus by Goldman Sachs banking process seem easy is its carefully designed user interface. It is intentionally designed with plenty of whitespace and devoid of colors, graphics, or additional related content to keep the user’s attention on the task. The visual design of a site can provide users with a great deal of contextual clues. A site that is cluttered with extraneous information can lead to confusion, so it is best to remove anything that is not essential, and use spacing to dictate the pace at which users experience the site.

Carvana’s visual design not only makes the site interesting and aesthetic but also provides better contextual help than words can alone. Financing is not an easy topic to cover, but this page breaks down the information well with clear headings to highlight key points, concise descriptions that get to the core message, and supporting color-curated illustrations. Plenty of whitespace also visually helps users not feel overwhelmed as they scroll down the screen to view.

Use Wayfinding

Wayfinding means designing the guiding paths that users should take when completing the tasks they want to accomplish, including navigation elements, call-to-action blocks, related content and links, etc. This is not just for the user onboarding process but one of the basic web design principles. However, I think it’s worth mentioning again as part of the onboarding experience.
 
What would happen if users do not want to interact with your onboarding steps? There are always users who prefer to “jump to the main content” and skip any kind of user onboarding help. Or users have come back to the site after a long time, so they are not technically “new customers” and do not wish to be helped. For this reason, if you ever consider adding a new page for the onboarding process to help users browse faster, I’d recommend taking a good look at your site’s Information Architecture first and see what you can improve.
 
It can include clearly defined navigation elements like section menus or breadcrumbs that show users exactly where each page fits into a site’s structure, giving them a clear indication of where they are, where they’ve been, and where they can go next. This type of easy-to-understand site navigation is essential for helping users learn.
 
In addition to clearly defining a site’s information architecture, it is a good idea to provide users with a visual indication of where they are within a site and what they should do next. This can include using unique color schemes for different sections of a site or providing clear calls-to-action (CTAs) that show what steps can be taken next. This concept is known as information scent, and it is used to help users intuitively understand how to use a site.
 
City of Naperville breadcrumb example
For a large website like the City of Naperville, the breadcrumb path and the section navigation are critical to helping users know where they are within a section of the website.

At Diagram, we emphasize user-centered design in the websites we create. In the Discovery step of the website design process, we work with a website’s users to determine how they use the site, the steps they follow when trying to find information or accomplish a task, what frustrations they experience, and how to help them achieve their goals. This gives us invaluable insights into how to create a design that incorporates the ideas described above to provide an ideal user experience.
 
Do you have any questions for us about user experience, onboarding, discovery, or any other aspect of the design process? We'd love to hear from you!