Tacks iOS Mobile Log In
BACKGROUND
Logging in to sites and applications is common practice for users. Authentication affords users far more customization and personalization and has become standard fair for all service-based products. This project explored the complexity and variation of workflows for this common user task.
STEP 1
Understanding the problem through research
To better understand the log in mobile experience and to help identify potential pain points, I mapped out an end-to-end user journey. After comparing the user paths, I was able to start addressing the pain points and brainstorming how the app could resolve those issues through simplistic design.
STEP 2
Defining user journeys
Successful Login
Users want an easy way to access their account without spending a lot of time entering credentials and verifying login information.
Unsuccessful Login
Users need to be notified of credentials that were entered incorrectly and have the opportunity to fix those errors to ensure a successful login experience.
Credential Recovery
Users need an efficient way to recover or reset their forgotten credentials with minimal verification.
New User Account
New users should have an intuitive experience creating and verifying a new user account without spending a lot of time outside the application.
Alternate Login
Users want the convenience of using other means to access their account, specifically Google login.
STEP 3
Defining the user flows
To better understand the login mobile experience and to help identify potential pain points, I mapped out an end-to-end user journey. After comparing the user paths, I was able to start addressing the pain points and brainstorming how the app could resolve those issues through simplistic design and an intuitive process.
STEP 4
Ideating through sketching
In order to quickly test my designs, I designed some paper prototypes that demonstrated user flow and how I addressed potential pain points. The low-fi prototypes allowed me to assess if I was addressing the correct problems without wasting resources and time.
STEP 5
Using class crits to improve the designs
Two rounds of designs were edited before creating a prototype of the final designs. After receiving feedback on the first round of designs, I found gaps in the overall user flow of my application such as loading states. I chose to create an inactive button state to prevent user errors on both incomplete form fill-in and loading screens. I also bolded secondary actions to let users know that actions can be taken on them, especially when those actions are plain text.
STEP 6
Presenting work with figma
KEY TAKEAWAYS
The first experience a user has with your application is the account login or creation process. It is important to minimize user errors, provide multiple options for both logging in and creating a new account and create a simplistic and intuitive linear path for your user to follow.
