UX design with Google Docs and Sheets
Crafting a user onboarding flow

Welcome, reader👋
Today, I’m gonna share with you all, the methodology and logic behind our onboarding strategy in Transifex.
Or to make it sound a bit more cinematic — this is the story of a team, lost in a styleguide, with a raw map of elements but without direction — without a system.
This is the story of them who left aside divergence, debate & uncertainty and followed the path of syllogism and modular logic to conquer the onboarding experience of the product.
And done all these with the power of a document and a spreadsheet.
Not long ago we created an ✌️awesome new feature called Task Management for our users and made an outstanding improvement visually and functionally to searching and filtering in the editor.
To release these and many other features and enhancements, we needed a plan to notify users about the changes in the UI, to educate and walkthrough in the new behaviour and to provide the high-level concept behind this major alteration of their workflow, why we decided to go in that direction and importantly what benefit they will get from this change.
Although this might seems an easy task, it was not. Why?
At first we had to decide what elements should we use, what components we had in our quiver, decide for the positioning, the pages that are affected, what should we show when a new change comes, when is the time to re-think and change a component, what are the technical limitations, not to mention copy, supporting help material, documentation entries and so on…
As a result for long time and in many cases we planned, discussed, designed, validated and after that planned, discussed, designed, validated and after that …
That was our initial onboarding strategy, it was not that bad, it worked, people were notified for new changes, they used and loved the new improvements but it didn’t feel streamlined and agile right?
So we started re-framing our own model, re-questioning our own process.
Re-framing our model didn’t include design at all. We didn’t introduced a new component, we didn’t question our own styleguide. All the parts were there for us to use. But the core thing that was absolutely missing was the structure, the plan and the interconnection between all.
What we did?
We created a document, a simple Google Document which would be the source of truth for our strategy.
We could possibly create a doc where we could explain the rationale behind onboarding, perhaps document components, provide some past example and mockups to choose.
But is this approach modular, scaleable in a design system? Maybe not..
I could have started by looking around, gathering materials, articles, any kind of source and paradigm of good and bad onboarding UIs.
But I didn’t want to look around. I didn’t want another component in our Design System, I didn’t want another bad example to compare.
To be honest I wasn’t looking for answers. I was desperate of questions.
So I started asking questions!
The Ws of Onboarding (and a H)
☞ What is user onboarding?
☞ Why do we use onboarding?
☞ When is needed?
☞ What UX patterns we use?
☞ Where have we use onboarding?
☞ How we use UX patterns?
With these questions in hand i started writing possible answers. After a lot of refinement I ended up with the following study of Onboarding principles.


It’s worth mentioning that this doc includes and explains the patterns one by one. There are screenshots and examples of components we use.
But the main concept to be scalable is that this strategy is based on abstraction and intention of the onboarding experience, so for every change of a component or a pattern or interaction — the core logic is not affected.
With all these questions, patterns and scenarios in a document a schema emerged which provided a common vocabulary between all stakeholders.
That new form of communication was liberating.
We skipped a step; the thinking.
With the logic defined, the development as well (since we had all the patterns ready to be used) and design too — it became a matter of choice and decision.
So how this applied to our process. Let’s take a not so hypothetical deployment.
In the question “Do we need onboarding for feature X” the team will cite the onboarding blueprint and decide if onboarding is needed (that will assist PO and Customer Success Managers orchestrate any public update through email, blogpost, documentation), when is needed (which will help interaction designers plan the timing and frequency of the onboarding), what’s the type of change (that will help designers and frontend engineers to not reinvent the wheel and apply reusable components).
Problem solved, right? And it is.
A major part of negotiating, debating inside a team is gone. Everyone is in the same page, they all have a clear path to follow.
For every puzzle; a citation to the doc is able to move things forward, unlock a process and deliver things in a consistent way.
Below some conversations that we had in the past and how we converse today and how we solve unknowns and uncertainties.

But something’s missing from the above structure.
Something truly crucial. What’s that?
Copy is the king
You hear a lot about this, but it’s true. We know the power of copywriting, we know that good UX writing can increase engagement, brand awareness and retention.
So in our methodology we find out what the variable was. For our process it was (is..) copy. And how you stitch all parts together.
You just need one more doc — a copywriting spreadsheet.

Let’s try all the above in a real life example here in Transifex.
Recently we released & improved our filtering & searching mechanism and behaviour in the Editor, with new capabilities, an entirely new UI, improved keyboard support and lots of more goodies.
In the phase of releasing to our users the onboarding was important part of that release. So how did we handle it?
With the following spreadsheet 🎉

So instead of hand-off mockups, designs, mark-down documents or every other supporting material and discussing over them again & again — in a single spreadsheet we declare:
1. The pattern
2. The copy
3. Any additional/supporting info (e.g. a what’s new entry)
And what about iterations? Iterations are done on that spreadsheet, there is practically no need for extra mockups.
Everyone is welcomed to put comments on the copy but the core elements, structure and behaviour is already optimised for the end user in the onboarding blueprint.
And what about user journeys and flows. How to we solve this problem. How easy or hard it is to have a overview of paths the user follows without diving into any design exercise.
With our internal flowchart library it is easy to have the path and touchpoint of the user journey. When we have this map we can discuss for each point what pattern we use.
Here’s an example. To decide what onboarding techniques we’re gonna use — it was a 15 minutes call.

So before you think of a new onboarding technique or component, before you see all these great onboarding experiences — try investing your time by answering the 5 Ws and a H and create your own onboarding strategy plan which will be aligned with your system and styleguide.
Sources
Following are a few references, articles and content I gathered that helped me understand, shape and evaluate my hypothesis (aside from my colleagues who’s done the most hard part of evaluating and critic my logic :)
- https://www.appcues.com/blog/why-user-onboarding-is-the-most-important-part-of-the-customer-journey-by-2-6x
- https://material.io/guidelines/growth-communications/onboarding.html#onboarding-quickstart
- https://www.shopify.com/partners/blog/mobile-app-onboarding
- https://www.appcues.com/blog/user-onboarding-ui-ux-patterns
- https://medium.com/@CraigUXHour/10-user-onboarding-best-practices-for-retaining-your-new-and-existing-users-ee19be9f51c8
- https://www.smartsheet.com/top-user-onboarding-experiences
- https://www.reallygoodux.io/blog/google-hangouts-new-user-onboarding
- https://www.reallygoodux.io/blog/yotpos-hands-on-user-onboarding