Onboarding with Google sign up
The project
Background
- The existing onboarding process for brands hasn’t been updated in years, and feels very outdated.
- The existing form is quite long, and asks a lot from the user before getting to creating their account.
- This project has been divided into 2 initial phases. Phase 1 of this project consists of quick wins to get existing accounts connected to Google accounts for faster sign in. Phase 2 (shown here) is a larger project to update the onboarding form so users can sign up with Google.
- Press Loft has 2 main user groups; brands / agencies and media members (journalists, bloggers, influencers etc.) These 2 groups currently have 2 different onboarding forms with different URLs.
- We are working towards merging these forms into one, but to simplify this project we will be keeping them separate for now.
- This project shows the current designs for the brand and agency side of onboarding.
- I started with desktop designs for our brand and agency side as sign ups mainly come from desktop devices (as Press Loft is a work tool that’s often used in an office environment).
- This project also starts to explore how the onboarding could work to include integrations like Shopify (as these types of integrations are coming soon to Press Loft).
Brief and key objectives
- Update the onboarding process to include an option to sign in with Google
- Create a faster and more streamlined sign up experience for all user groups
- Allow faster sign in for existing users
- Keep existing users signed in for longer
Deliverables
- New onboarding form for brands
- New onboarding form for agencies
- New page for users to manage account connections
Key tools and skills
- Competitor analysis
- Heuristic analysis and usability review
- Hotjar analysis
- Analysis using Google Analytics and Redash statistics
- Designing and prototyping on Figma
Analysis of current sign up process
Research
Inspiration from other platforms' Google sign up experiences
Below are some examples of websites that offered Google sign up that I considered to be successful.
Key points about the above examples to take note of going forward:
• All of the examples hide the main site menu to avoid distraction.
• They start with very little content / options on the page, and expand as the user moves through the form.
• Most include some benefit selling copy, but keep it quite simple.
• The Google button is always branded and recognisable.
Wireframes
Based on the key findings from competitor research, I created these basic wireframes for the initial sign up screen.
Designs
The new design splits the form into a few steps, allowing us to better show different content to different types of users.
Screen 1
• More modern design which includes Press Loft’s new branding and gradient.
• Simplified benefit selling section with only 3 key points, and some visuals on brands and publications that use us. Due to strict copyright, publication logos can’t be displayed on the site - only names.
• Doesn’t require user to check the T’s and C’s box. This is something we would check with legals.
Small link to switch account / user type if you’ve arrived at the wrong page.
• The promo code needed to be kept but as it’s usually pre-filled by the URL, I placed it below the main form but can be edited if needed.
• Kept the messaging about ‘No credit card needed’.
Simplified form allows us to capture email address and re-target via email to complete their account if the process is not completed.
Continue with Google
• Clicking the ‘Continue with Google’ button opens Google’s ‘choose account’ modal.
Continue with email
• Clicking into the email form and entering an email expands the form to include a password and ‘Start free trial’ button.
Screen 2
At this point, we need to take some information from the brand or agency to set up the account.
Screen 3
Our ‘upload’ UI has been added into the onboarding process / form, embedded into the page. It was previously shown as a modal that had to be accessed from a ‘how it works’ type page which was unnecessary and added extra clicks into the onboarding process.
Error handling
Google is pretty good at handling errors in its own modal / UI. But we could display these errors in Press Loft UI.
Responsive designs
The smaller screens don’t include the benefit selling gradient sections as they would have to display underneath the main actions. This could cause the user to be distracted from the main task, as mobile users are easily distracted.
Tools to analyse post launch
Analysis going forward
I will use the following tools going forward to monitor the outcome of this project:
- Google Analytics and Tag Manager
- Hotjar recordings (and other tools)
- Our own recorded stats on Redash