a new Login & sign-up experience for Quip
Spearheaded and shipped the complete overhaul of Quip's sign up and sign in flow
Role
Design lead
Time
2020 (5 months)
Tags
Branding, research, UX
Intro
In a space as competitive as document editing, first impressions mean everything. Done well, they establish early trust within the user as well as set expectations for how the product should maximally be used. An adequate onboarding flow will establish a cohesive product image—allowing the user to understand what they are using aesthetically. A clever onboarding flow will seamlessly inform the user of the nuances of the product—meaning, it will fully take advantage of this singular, mandatory experience.
At the time I joined Quip, they were quite early into a new era of branding/product identity. What I knew to be a fantastic product was severely undermined by an outdated/underwhelming onboarding flow.Not only was the flow unseemly, it did little to persuade the user that this product was worthwhile.
The complex world of signing up
The first step in the process was to audit the various branches of the sign in, joining, and sign up flows, beginning with the most basic new user experience, to the complex joining flow for high-security organizations. What we initially considered to be a relatively simple rebranding/reskinning turned into a large scale mapping of permissioning. All in all, we found and mapped out over 12 major flows, each with several variations. We isolated the most general screens that spanned across these flows and identified all the possible branching versions. For example, for legal reasons, a new user signing up in Argentina was not required to submit their phone number (though we required this for every other country). This created a branch in what we designated the profile setup screen (see below). We kept a detailed record of all the copy and field variations to ensure any changes we made in one flow was consistent in the other branches of that flow as well.
After mapping out all the distinct flows, I began to review the copy, graphics, input fields, and general user education. I found that the graphics no longer represented the since updated UI and the user education was gravely misrepresented. Most extreme was the awkward, sometimes grammatically incorrect copy. It promised features that no longer existed (free trials), quoted statistics that were several years outdated, and chose adjectives that came across as odd (spiffy).
I worked with a graphic designer, copywriter, and UX engineer to extract the string variations from the screens we identified earlier. String variations were one of the major sources of branches. We did this so we could quickly identify and rectify small copy changes in the code without redesigning the entire interface. The interface we could address with new CSS based on the most recent branding.
To assess areas of improvement, I performed a cognitive walkthrough of all the primary screens we isolated. Above is an example of one such walkthrough.
I worked with a graphic designer, copywriter, and UX engineer to extract the string variations from the screens we identified earlier. String variations were one of the major sources of branches. We did this so we could quickly identify and rectify small copy changes in the code without redesigning the entire interface. The interface we could address with new CSS based on the most recent branding.
To assess areas of improvement, I performed a cognitive walkthrough of all the primary screens we isolated. Above is an example of one such walkthrough.
Working with the legal team
Our extensive mapping stage allowed us to reduce redundancy in a lot of our legacy code. Many unique flows were created for events or for specific companies that had since phased out of use. We found that a lot of the unique variations of these flows sometimes permeated into the more general flows (i.e. asking users to answer questions we technically didn’t need or use). Thus, we were able to use this as an opportunity to narrow our data collection down to the essentials. This was especially useful for our legal team as it gave them an opportunity to surface more specific terms and also eliminate legacy terms: win-win.
The results
Flexibility and Variation
The extensive variations of the situations we were attempting to cater to lead to a very exhaustive array of screens that, to the naked eye, seemed insignificantly different. To us and our legal teams, they represented customers from different countries, companies, use case, and accounts. We must have designed at least 50 different sign on screens with slightly different arrangements
.png)