FEBRUARY 2017
CLIENT: adidas Digital Experience | Mobile Apps Team
ROLE: Lead UX Designer
DELIVERABLES: Concept, flows, wireframes, UI & development review, user testing.
DELIVERABLES: Concept, flows, wireframes, UI & development review, user testing.
The adidas Mobile Team had created a User Authentication SDK for mobile apps, without an interface and based on the login and registration flows designed by the CRM team. I was asked to look into this flow and make a proposal to improve the SDK.
IN SHORT
To login or register, a user was prompted with a screen where he had to choose one of the those alternatives. If the user chose to log in but had no account, an error would be displayed, and vice versa.
To create an adidas account, a user had to fill in 8 fields (email address, name, last name, date of birth, gender, country, password, confirm password) and actively tick 2 checkboxes (agreeing to T&Cs). Hence, there was a high number of drop outs during the registration process.
Also, registration or login via a Social Network would still prompt a user to create a password and fill in missing registration form fields, or type in a password if they already had an account not linked yet to the Social Network.
PROPOSAL:
1. Find out which information is strictly mandatory to create an adidas account.
2. Propose alternatives to gather that information in a way that requires less user input.
3. Look at all existing account types and simplify the 16 login and registration scenarios, so that all verifications and account linking processes are done in the background, without needing user input.
4. Create a modal visual interface for the new flows, that could be reused by all future adidas apps.
DESIGN DIRECTION
GENERAL DESIGN PRINCIPLES
✓ Simple
✓ Short
✓ Task-oriented
DESIGN OBJECTIVES
- Achieve an intuitive and self-explanatory email authentication process.
- Reduce time / effort spent in general form-filling process, specially registration.
- Simplify tasks and present them individually, one at a time.
- Let the system present the right flows, rather than asking the user to pick a flow.
- Store data that could be shared with other adidas apps (i.e.: profile / login credentials) to automate future logins.
- Polish the interface and pay attention to micro-interactions. The UI must be perceived as leading-age (clean, elegant, simple), while still following the 2016 adidas design guidelines of boldness and immediacy.
PATTERNS
To achieve our design objectives we wanted to create new, fully branded UI components based on the latest industry patterns. For the flows, we explored a language of user guidance and fluidity that relies on animation and movement to convey progress and changes of state. See some examples below.
INPUT FIELDS GUIDELINES
DISTINCTIVE STATES
OUT OF FOCUS / ON FOCUS / VERIFIED
____________
REDUCE TYPING MISTAKES
PREDICT INPUT
SUGGEST CORRECTIONS
____________
PROVIDE GUIDANCE
____________
ALLOW USERS TO VERIFY INPUT
NO DEFAULT MASKED FIELDS
____________
CONDENSE INPUT
SIMPLIFIED CONTROLLERS
DOB is not mandatory to create an adidas account, but knowing if the user is over the legal age is.
FORMS
NEW REGISTRATION FLOW
ON-FOCUS MODE
• Registration was reduced to 2 steps: age validation & password.
• Form completion is now done step by step. The user focuses on a single element at a time.
• To start the authentication flow, the SDK requests the user's email address (be it through the email field or a social network), checks if the user has an existing account or not, and display the appropriate flow to continue.
.
IN AND OUT OF FOCUS MODE
• All forms are by default presented on-focus mode. This means, the first field is in view and active.
• Users can get out fo the focus mode at any time by tapping anywhere outside of the field or swiping on any direction.
• A form overview will then be presented. To get back to "editing mode", they can simply tap on a field.
NEW EMAIL LOGIN FLOW
ON-FOCUS MODE
SOCIAL LOGIN FLOW
Social Login is meant for users who do not want to fill in forms.
Adidas accounts associated to the email address of the Social Network are now linked in the background.
SHARED CREDENTIALS
By storing the user's credentials during the first app login/registration,
we can provide a simpler sign-on method to access more adidas services.
USER TESTS
BACKGROUND
I run qualitative, un-moderated, remote usability studies in order to test our design assumptions and observe if:
- Users could walk through login & registration smoothly.
- Guidance given in each screen and UI element (as well as quick-type suggestions) are enough for users to fill in the required data successfully and finish the process painlessly.
- Login & Registration duration was reduced.
- Movement and animation used through out the flow will lead users to instinctively know how to get back to a previous fields.
- There's is actually no (or a minimal) learning curve. User’s should not be stuck in a screen trying to figure out what to do next.
KEY FINDINGS
- Registration took users from 20” to 35”. Less than a third of the time it took them to complete the original form.
- All users found the registration flow to be very clear, quick and simple.
- Users under 30 did not notice the fields guidance at first, as they started typing right away and only checked the fields for instructions/errors once they are finished typing.
- Users over 30 noticed guidance in both (email and password) fields, and found it extremely useful.
- Shared credentials screen was the user's favourite feature. Login with one tap.
- Although there is no back buttons on the flow, users intuitively tapped outside of the current field or swiped back to get to the previous step.
- Users thought the UI was unique, yet not too different from regular OS. “It feels like a premium version of it”, a user said.
- The usage of movement, elements and transitions communicated a modern and stylish interface, which was associated to a luxury brand / high-end product (there was no adidas logo or mention of the adidas brand anywhere in the test builds).
USER TEST CLIP
FULL REGISTRATION IN 23"
USER TEST CLIP
EMAIL PROVIDER SUGGESTIONS
"I really really like that"
USER TEST CLIP
AFTERTHOUGHT ON EMAIL SUGGESTIONS
"I really like it. I think it's silly we still need to type the email providers every time while there's very few most people use"
USER TEST CLIP
GETTING IN AND OUT OF FOCUS
USER TEST CLIP
THOUGHTS ABOUT UNMASKED PASSWORD FIELD
"I think it's great. It saves time as you don't accidentally mistype something,
and if you're concerned with security, you have the option to mask it right there"
USER TEST CLIP
THOUGHTS ABOUT THE UI
"The fields seem very clean, modern" "It sends the message it's a luxury app, representing a high end-product"
