Re-designing the onboarding experience for a B2B SaaS web-application.
Client & Role
- This is an early-stage startup that provides a B2B SaaS platform aimed at marketing agencies and eCommerce businesses.
- Secondary Research
- UX Design
- UI/Visual Design
Timeframe & Status
- May-Aug 2022 (Part-time)
Process
- Competitors Research
- Stakeholder Interviews
- User Flows
- Wireframes
- UI Design
Gaining user trust during sign-up and onboarding.
The client: Early-stage startup streamlines marketing data collection
This is an early-stage startup that provides a B2B SaaS platform aimed at marketing agencies and eCommerce businesses.
The application automates the tedious task of collecting marketing data from Facebook Ads, Instagram Ads, and Google Ads, unifies it and exports the data to Google Sheets every hour for effortless reporting.
Onboarding drop-offs
The company saw many drop-offs during the signup and onboarding process.
Keeping users informed to complete their tasks
The new onboarding guided the user in a friendly and helpful way to complete their task of setting up an Export.
It kept the user informed of the upcoming steps through improved user flow, clear copy and a simplified UI.
Results
.webp)
Deciphering user needs without direct access
I didn’t have direct access to users to do primary research, so I relied on the following methods to gather information and identify problem areas:
Talking to Stakeholders
Continues conversations with- and feedback from one of the co-founders with extensive experience in the field.
Feedback & Collaboration
I received feedback from the co-founder, a developer, and also sought feedback from a UX Writer.
Onboarding best practices
UX- & interaction design principles
Heuristic evaluation
Competitor research
Zeroing in on key user frustrations
Misaligned Expectations
Inconsistencies across the website, signup form, onboarding instructions, and application raise doubts about the credibility and reliability of the service and fail to meet the user’s expectations.
Trust Hesitation
Users are asked to connect their Google account and grant read and write access to their Google Drive without knowing if they can trust the product, causing many potential users to drop off at this stage.
Unclear Value
Users are uncertain of the value the application can bring them because they didn't receive the right guidance on how the product functions.
A look at the original design
Understanding the users
Digital marketing agencies
- Around 10 employees
- Super data-driven, uses paid advertising as the main part of their offering.
eCommerce businesses
- Around 10 employees
- Spend a lot of money on advertising across the main 3-4 advertising channels, typically Google, Facebook, and Instagram.
Seamless data integration for reliable reporting
- Have solid, trustworthy and dependable data.
- Have data available 24/7, pulled from all the ad networks they use.
- Have it set up in some reporting format they can show internally, or to clients.
Boosting revenue by reducing time spent on data collection
- A way to make better decisions and provide their clients with the highest quality service.
- To save time by automating the collection & analysis of campaign data. This increases efficiency (lost time = lost revenue).
Streamlining signup and onboarding
From researching onboarding best practices, I learned the following:
Get out of their way
Get out of the user’s way - remove obstacles like asking for credit card info, adding team members and unnecessary animations (don’t make people wait).
Keep them informed
Tell users why it’s to their benefit to comply with the actions you are setting out for them.
Be of value
Focus on your process for delivering value to your users.
Overcoming user concerns with Google Drive permissions
The company experienced significant drop-offs during sign-up, with the biggest issue being the Google permission request. This request scared people away as it asked for access to their Google Drive, with permission to read, delete, and overwrite documents. Additionally, they were losing potential users during the onboarding process.
.webp)
Immediate setup of first report to demonstrate platform value
The new user flow aims to guide users through sign-up and onboarding and get their first report set up immediately to show them the value of the platform. I provided useful information that is relevant to the current moment in the journey, along with primers that informs the user of the next steps and explain why we're asking for certain information.
This helps users feel more informed, safe, and in control.
1.webp)
Prioritising direct engagement with users' own data
The new user flow aims to guide users through sign-up and onboarding and get their first report set up immediately to show them the value of the platform. I provided useful information that is relevant to the current moment in the journey, along with primers that informs the user of the next steps and explain why we're asking for certain information.
This helps users feel more informed, safe, and in control.
Streamlining signup and onboarding
Sign-up page
I simplified the required text fields, and used the brand colours to help make it look coherent with the website.
I added copy to the right to remind potential users of the value the product can bring them.
Primer for upcoming action to gain trust
Added a primer modal after signing up to prepare users for the upcoming steps to connect their Google account. We let them know:
- What’s going to happen in the next step
- The reason why we need access to their Google Drive
- The benefit to them for
Data Explorer screen
After connecting their Google account, the user is taken to the Data Explorer where they are guided to connect their client’s ad accounts.
Status change of cards to show which accounts are connected. The guide also has a progress indicator to show the user how many steps there are, what has been completed and which steps are coming up.
Tooltips guiding user to set up their first report
After connecting the ad accounts, the user is guided to set up a report with the help of tooltips. Parts of the interface are disabled to help guide the user (for first-time users). They are enabled as the user completes the steps.
Part of flow to set up the export to Google Sheets showing error message
Export screen
After the export, they are taken to the Export page where they can manage all their previous exports.
Outcome
The new onboarding guided the user in a friendly and helpful way to complete their task of setting up an Export.It kept the user informed of the upcoming steps through improved user flow, clear copy and a simplified UI.
Annemari has been a great help in figuring out our new onboarding flow and making it so much better than it was. She built the entire new onboarding flow, and also had talks with the developers about what was feasible to code. Annemari is super pleasant to work with and always open to suggestions. She even got additional feedback on her Figma flow from other UX-people, so that it could be made even better. I would recommend Annemari any day!
Christian G. J. - Founder
Unfortunately, it was decided to shut the startup down before the new onboarding could be implemented and tested.
Valuable takeaways
I learned quite a lot while working on this project. I appreciated the opportunity to work on a real product, get to explain my design decisions to someone, as well as receive feedback.
Working in a team is always better. It’s good to have a sounding board and other perspectives. You learn a lot quicker, and it’s more fun.
An important lesson I learned was to document everything from the very beginning. In the beginning, I did not make notes of my decisions or the changes I made, and a few months later I have of course forgotten why I did some things the way I did them.
Collaboration
I asked for advice from a UX Writer and she gave me the following tips to improve the copy of the signup form and onboarding:
- Personalise the experience.
- Tell the user how the process will take, so they know what to expect. Show them the number of steps left and what has been completed.
- Onboarding is not the time for marketing. Focus on clear instructions. Get them started in the fastest way.
Navigating challenges beyond our control
- The one thing that users had a problem with, was something we could not control or change - Google asking for permission to edit the user’s Google Drive. I had to work with this constraint and find a solution to help the user understand why this was necessary.
- I didn’t have access to users and had to rely on stakeholders and secondary research to try and understand the problem and find solutions.
Take a look at another project
Teaching Children The Value Of Money In A Digital World
