CASE STUDY
AUTOGRAPH
Verizon's Single-Sign-On Product
Autograph is Verizon’s Single Sign-On(SSO) and mobile identity product. It enables app developers to login/onboard customers faster while delivering a seamless user experience(UX). An analogy would be “Login with Facebook” except Autograph uses mobile number and the associated Verizon profile credentials.
The Challenge
Autograph’s user experience occurs in-between a merchant app’s login flow. Hence, our UX should be subtle in the merchant app’s login flow. Yet, deliver a fast and seamless onboarding experience.
The timeline set before us was 5 Months. We’d need to elevate the product and its design from the demo stage to a minimum viable product (MVP) with production-level quality for a pilot program with participating clients. The short timeline inspired us to take a Lean UX approach to work in tandem with the Agile methodology. This enabled us to learn about users and test our hypothesis fast.
What I did
The project just began when I joined the team in May 2015 as the sole UX designer in the team. I was responsible for user research, wireframing, prototyping, interaction design, branding and visual design for the project. I worked along with Nick Kulikaev, Gaurav Gupta, Saumitra Kumar and a team of engineers towards making a pilot production-ready design. I also relied on heuristic feedbacks from Oncue’s design team who advised us intermittently out of their goodwill and altruism.
As the UX designer I delegated between the product and engineering teams, executed and achieved the following:
-
Established a practice of user research to feed into product decisions.
-
Architected and delivered the final user experience of Autograph.
-
Designed the user research plan and assisted Gotomedia, a user research agency based in San Francisco, in conducting broad user research.
-
Designed the production-ready responsive UI designs for mobile, tablet and web platforms.
-
Developed a high fidelity prototype to be field-tested in Guerilla user tests.
-
Design lead to acquiring two clients for the pilot phase.
User Research
We started by partnering with Gotomedia, a user research agency, to conduct exhaustive qualitative user research. They had the logistics, reach, and manpower to recruit and conduct street interviews, diary studies, and one-to-one remote interviews in a short period of time. It helped us learn about the product-market fit, user needs, and later build user personas.
The Design Process
After the initial user research, we were on our own. We neither had the funds nor the time to engage a UX agency to assist us in our product development cycle. Hence, being the only UX designer on the team, I decided to follow a Lean UX model to go along with Agile product development.
The roadmap I choose was, to first draft a UX flow of a particular use-case, heuristically review it internally and iterate on the designs several times before finalizing the final flows. Then a high-fidelity prototype of the flow was to be created with the intended interaction design in place. Two exhaustive guerilla user tests were conducted to test the qualitative properties of the interaction design and the usability of the flow before handing over the design for production.
Approach to Solution
Out of the many ways the problem of login pain can be solved, we brainstormed how we, Verizon, can leverage existing technologies and bring in a meaningful solution. An exhaustive brainstorming session with engineers and product manager revealed that we can best tackle the issue with Phone Number. We envisioned to bring in a unique value proposition to solve the issue.
The ideal solution for us, was to use a mobile phone number to identify a user, as a user id, and then a one-time password (OTP), to be sent as a text message, to authenticate the user, like a typical password.
Using Mobile number to identify the user took away the need for a user’s input for identification and verification. As the mobile service provider already has user’s information, the only step where we needed user’s intervention was for their consent to sharing information with the merchant app. The whole flow significantly streamlines the Login process for our target user group. Below is a comparison of a conventional login mechanism as against Autograph’s.
Prototype & Guerilla User Tests
A low fidelity prototype was made to be taken out into the field for a Guerilla user test. It was the fastest cost-effective method for us to learn what features and design elements work and what don’t. The test provided a lot of valuable insights which would further shape the product and make it more streamlined. Some of the key observations were:
-
Users are highly motivated to move from a not logged-in state to a logged-in to begin engaging with the app which was their ultimate goal at that moment.
-
Most users were observed to be in “Flow,” while logging in, and were often resigned to the contextual details in the page such as branding, footer and instructional information.
-
Explicit intervention by bringing attention to contextual information of the users only caused friction and made users prone to dropping out of the flow.
-
Users attributed familiarity of the login process to the fast movement through the login process.
-
Users were explicitly resigned to issues like security and the degree to which their personal information was being shared.
Link to simplified Guerilla User Test report: http://tinyurl.com/hkg33fr
Literature Research
The literature of human-computer interaction, behavioural studies, and cognitive psychology was thoroughly researched and referenced so as to not miss any documented tacit behavioural attribute which may apply to the problem or solution we’re introducing. It was particularly helpful, along with various user research to make sensible cases for the product design decisions being taken. An instance of critical use of published research was seen when a legal sensitive decision was to be made for the permission screen.
Design Direction
Understanding the user’s expectations, the strategy of product and the core values we want to foster in our design helped me to develop a clear vision of what the characteristics Autograph’s UX should possess. I condensed it into guiding principles which would be a yardstick for sense-checking every product decision that would be made in terms of design and strategy
The User Experience
Users would ideally come across a “Login with Mobile” button in a merchant’s app, which would take them through consequent login screens of Autograph before landing the user back on the app’s home screen.
The autodetection of the one’s phone number, technically, depended on a variety of variables that may span across network type (cellular or wifi), network owner ( Verizon or other providers), user type (new user or existing user), etc. Hence, the user experience is modelled to best facilitate a similar cohesive experience throughout with little but necessary variations.
Best Case Scenario
Here a Verizon user is trying to login to Shutterfly app. Their phone number is identified and following profile information are shared with Shutterfly to facilitate a seamless one-tap login. Our research suggested that this scenario would be experienced by 80% of our total target user in the initial phase of launch. Jessica and John, from our persona 1 and 2 would ideally experience this flow.
Worst Case Scenario
Although we have mitigated the worst-case scenario to occur to 10% of our target users, it was still crucial for us to deliver a relatively better experience. In this case, the users are on a non-Verizon network or wifi and hence don’t have any profile information with Autograph to share with the merchant app. Hence, one has to input all the required information. Our secondary persona, Adam, would experience this flow.
Guerilla user tests supported our design philosophy of “One task per page.” Even though visually there are more steps that one would need to interact in, they carry less cognitive burden, the task is brief and its difficulty easy. All this facilitated users to seamlessly flow through the steps without hesitating or feeling uncomfortable with needing to fill many input fields.
We succeeded in facilitating a sense of choice, in the “Add Basic Info” screen which was anticipated to be a drop-off point for onboarding users. With choice, the users intuitively understood what was necessary and what not to provide in the input fields.
Responsive Design
Autograph was designed so that it can be used cross-platform. Developers can allow websites to allow a “login with mobile”
Guerilla User Test
The final design was a result of an exhaustive Guerilla user test which was conducted to gauge the usability of the user experience flow and to test some key special tracks we wanted to explore before finalising the flow for production.
Process
I reached out to seven people asking for their time in return for a Starbuck’s gift card. A verbal interview was followed by a usability test which included contextual observation. It was then followed by a brief interview before. The process was audio recorded. Notes taken during the interview process was tallied with the audio recording to be distilled into a set of findings that fed into our design iterations and product strategy.
Critical Decisions
Some scenarios were in the grey area where the user is identified using their phone number yet might not have any personal information on file. Verizon customers belonging to someone else’s plan with limited information on file were around 7% of the total users. We assumed the “Add Basic Info” page could become too taxing for the user and therefore, could become a big drop-off point.
A special track of user tests to learn the propensity of using the Autofill option
Hence, we ran a set of tests, where an additional option of filling the page with info from one’s Verizon profile was attempted. However, we learnt that the unfamiliarity of the button, its style and anxiety over its possible impact resulted in its low adoption by the users. Upon disclosing the button’s function, test takers expressed not seeing a value in it as they didn’t mind filling the mere three input forms. It was learnt that the length and input asked were not taxing, hence, not becoming a drop-off point.
Permission Screen in the existing Autograph flow
The Permission page was hypothesised to follow after the Login screen but was later moved out of the core flow and resides in an auxiliary path. The decision to move the Permission screen was a big decision for both the product and its legal compliance.
To make this decision, thorough research of published papers about permission models, contemporary design practices of social login and the guerilla user test was conducted to come up with a compelling product argument.
Johnson et al’s user-centered Permission model design was used to approach the issue. From our user tests, we observed a detailed permission list in-between the Login flow caused users to jump out of their “flow” and spend time analysing the permissions. Although it’d sound ideal, it was observed that interrupted the context of Login flow by bringing the attention of users to something they do not explicitly care about. We also learnt that users were more willing to share all the personal information if the context, that is the genre of app, is relevant. In the context of Shutterfly app, users were willing to share all the information as it helped minimize their task when checking out with a purchase.
Deliverables
The below image illustrates the detailed UX flow document created for the product team. It encompasses all the use-cases and details of interaction design and micro-interactions, to be built into the product.
However, due to a Non-Disclosure Agreement with Verizon the visual details have been redacted.
Fidelity redacted to comply with non-disclosure agreement with Verizon
Retrospective
-
Quantitative user research should feed into product shaping process to give a more tangible and definite direction to product strategy. In our existing process, it was the first time we approached a user research company to conduct research specific to users. Guerilla user tests, although brought in important feedback, they’re still susceptible to uncalculated biases and priming which are unaccounted for.
-
Prototype fidelity could’ve been better to better inform the test takers about the micro-interactions in the flow. An example would be the “Add mobile number” screen where users expected to tap the input field to begin typing yet the prototype was unable to avail so.
-
The existing design is developed for pilot production with two clients hence the button color is made customizable for them. It is not scalable yet and few further iterations and gathering of requirements would reveal how the product shapes and scales for all possible customers.