Onboarding process for a Google Sheets extension: sidebar & landing page
Before
An optimized onboarding experience
Role: Product Designer
Duration: 3 weeks, October 2022
I redesigned the onboarding experience for
Background
Flowshot.ai is a Google Sheets extension that uses NLP technology to allow users to complete text cells based on examples provided by the user. The use cases are limitless, but some action types include generating textual descriptions, and extracting and sorting data.
The problem space
Landing page
Users are struggling to understand the value and functionality of the product.
Product (add-on):
Most users are only familiar with internet browser extensions. When it comes to add-ons for anything different, although a part of widely-used Google apps, users have little to no idea of how to install or open them. When given the opportunity to try the product for the first time, users are unsure how to go about it.
Users say that the add-on provides little guidance on how to get started
According to user feedback, the landing page invites to try a yet-unclear product
Redesigning onboarding for the Flowshot extension
When activated, the extension shows as a sidebar on the right-hand side of a Google Sheets document. It is a minimalist window that focuses the user's attention on its primary feature that is responsible for all the magic: the Generate button. However, the tradeoff of this minimalism is the lack of guidance for a beginner.
How user feedback helped us identify pain points and set priorities
The first post-release days were critical. Once the extension went online, there was an urgency to identify obstacles and decide which should be the first in line for the redesign. To do so, I tested the onboarding flow with four users. I asked them to rate the difficulty of the following actions on a scale of 1 to 5, 1 being easy and 5 - challenging:
-
Finding and clicking the CTA on the landing page
-
Installing the extension from a Google Maketplace
-
Opening the side bar for the first time
-
Using the extension in a blank file
-
Using the extension with a template
Test results
To identify which step was simple and which was challenging, I colour-coded the ratings in a Google Sheets file.
It is clear that step 4, using the extension in a blank file, is the most challenging. Therefore, it became priority #1.
Exploring solutions
From the usability testing, it was apparent that users struggled most when they found themselves with an empty Google Sheets file and the Flowshot sidebar open, but had no idea how to move forward. How can we encourage the users to play around with the product and become aware of its potential?
While observing users tackle step 4 of the usability testing, I noticed all of them struggling. My question to them was: if you needed help with that step, what would your actions be? According to their answer, they all into either one of the two categories:
It was evident that the extension was not self-sufficient in assisting its first-time users. Very soon, both groups encountered difficulties. Those difficulties either made it harder for users to use the product thus reducing their motivation to keep trying, or prevented them from understanding and using the product altogether.
Looking for help
To be fair, the sidebar does offer help. The box at the bottom of the extension consists of plain text and offers different types of assistance: links to documentation, use cases, and live chat. However, as I observed, it is ever so easy to overlook this element, and the difference between the types of help it offers might not be clear. As one of the users said during usability testing:
"Honestly, I was simply looking for a help icon."
Thus, users need to be able to quickly scan the extension for a familiar cue where they know they will find help.
The component offering help is lacking in usability
Copying examples
Some users attempted to copy examples from use-case templates on the landing page manually. In all cases they overlooked the column with the example(s) input, and therefore the output didn't behave as expected. The testees then had no way of knowing:
Neither assumption was a desired outcome.
The landing page offers links to templates that open as Google Sheets files, but none of the users was able to find them. This wasn't a perfect solution either, as the template files would open in a new window where the sidebar doesn't appear and would need to be re-opened manually. This process adds an extra complexity layer for a first-time user that we wish to avoid.
Google Sheets extension "Class Manager" opens templates in new tabs inside your current Spreadsheet
To find a viable solution for kicking off with a pre-made template, I analyzed competitors' onboarding flows. Among other Google Sheets extensions, I found one that addressed a similar need by opening templates in new tabs in the same Google Sheets file.
"Was it something I did wrong, or is there a bug?"
Deliverables
As a suggested solution, I prepared a high-fidelity prototype of a redesigned extension sidebar and a modal window that users can access at any time for help.
The sidebar will be divided into three sections by theme: controls, help and word count.
The modal onboarding window will address the two types of help users seek: additional information (use cases, FAQ) and templates. The former would redirect users to the landing page where they can find all useful explanations, and the latter would open a tab with a template inside an existing spreadsheet. Below is the detailed explanation of the redesigned extension sidebar.
Suggested solution: redesigned sidebar and modal onboarding window
Redesigning the Flowshot landing page
The landing page has a simple goal: to explain the product's functionality, and to convince users to try it. To this end, I defined three How Might We's:
How might we increase the scannability of the page?
How might we demonstate the product's functionality and value?
How might we prompt the user try the product?
While the former and the latter goals could be accomplished with visual hierarchy and clear CTAs (respectively), the answer to the second HMW required more investigating. This is what I learned by conducting five user interviews.
Two use cases
Claire, 41 y/o female
Works in a big HR department
Not so tech-savvy, but knows Sheets well
-
Knows exactly how to apply Flowshot in her work
-
Needs to convince her manager to purchase Premium
"I will need a clear explanation of how the extension works, and why the paid plan provides more value than the free one".
Tim, 30 y/o male
Freelancer working in a creative field
Interested in AI, bad at numbers and Excel
-
Has an idea of how he would use Flowshot
-
Wants to try for free to see if that suffies
"I would like to better understand the product's potential, as well as to know whether the free plan accommodates my needs."
Knowing all requirements (HMW's and both use cases), I mapped out the elements that called for change or addition, one by one.
Personas and HMW's translated into practical solutions
Use cases context
Before, use cases existed out of context. Users were informed that they were able to use Flowshot to "Generate", "Transform" and "Extract", but struggled to understand what that meant. In the new version, users are provided with types of actions they are able to perform with the extension, and then given specific examples such as generating product descriptions and extracting promotion data. That way, Tim is able to better understand what this product allows him to accomplish.
Plan pricing
Previously, the pricing section had several main issues: the free plan appeared to offer more perks, and the basic countable unit (words) wasn't explained to the user. The free plan offered up to 5,000 words, but how does one count them? Those aspects were addressed in the new design: both in the pricing section and in FAQ. Now Claire can confidently explain to her boss why the premiun plan is worth purchasing.
Tradeoffs and future steps
Simplified use cases visualization
Due to the time-sensitivity of this project, some aspects were left outside its scope. If I had more time, I'd emphasize creating use case videos in a friendlier format. While they would show the same functionality, I expect simpler visualization to feel less intimidating for users who aren't active Google Sheets users. I've already prepared a quick format to exemplify what I mean to the stakeholders:
_gif.gif)
Stakeholders got on board with video simplified visualization, but their production will be implemented after more immediate priorities.
Analytics
By the launch of the Flowshot's Sheets extension, the product didn't collect any analytics, which prevented effective data analysis. There is still much work ahead to test the applied changes on the usability and how they affect users' first impressions.