Case study — Improving signup flow for loyalty app.
This case study is about improving the sign-up / sign-in flow for a loyalty white-label application.
Problem Statement
App’s vision is to make customer loyalty valuable for all participants — brands, consumers, employees, and partners. This encompasses making it possible for users to access loyalty programs.
In this case study, I asked to propose a design for one of their most crucial functionalities: the signup/login flow for loyalty members of a client in their white-label mobile apps.
Design Process
For this project, I employed the double diamond process as a method for design thinking. This process is divided into four distinct stages: Discovery, Define, Develop, and Deliver.
- The Discovery stage is focused on researching and understanding the problem at hand, gathering information, and identifying the needs and wants of the users.
- The Define stage is where the problem is defined more clearly, and possible solutions are conceptualized.
- In the Develop stage, the solutions are prototyped and tested, and the best one is chosen.
- Finally, in the Deliver stage, the solution is implemented and delivered to the intended audience.
This process allows for a thorough and iterative approach to problem-solving, ensuring that the final solution is effective and user-centered.
Design Framework
For this case study, I considered the following framework.
Understand the Goals (Why)
The main goal is to create a signup/login flow for older users of loyalty program customers in easy steps without any pain.
“Design is the gap between what currently exists, and what you’re aiming for”
— Erika Hall
Objectives
- The signup/login process should be easy to understand and navigate for all users, including older users. This includes clear text and labels, intuitive navigation, simple forms, and minimal taps required to complete the process.
- The design should consider accessibility needs, such as larger text and high contrast for users with vision impairments.
- The design should prioritize the security of user information and account access, including options for password recovery and two-factor authentication if available.
- The app should be easily customizable to match the company’s branding and aesthetic. This includes options for custom color schemes, logos, and imagery.
- The design should be optimized for mobile devices, making it easy to use.
- The design should be tested with users, especially older users, to ensure that it meets their needs and is easy to use.
- Provide quick login and signup options with social networks and Google and Apple accounts.
Define the Audience (Who)
Defining the audience for an app is an important part of the design process as it helps ensure that the app is relevant and appealing to its target users.
“Designing for user personas is not just about satisfying their needs, it’s about creating a positive emotional connection with them.” — Steve Jobs
User Persona
As white-label app solutions we need to cater to a wide range of user demographics, ranging from 14–99 years, we need to consider especially older people (eg. 65+) to make it as easy as possible for them to sign up. So I created a persona based on this information for our exercise.
Understand the Contexts (When/Where)
The context of a loyalty app refers to the various situational and environmental factors that can impact the user’s experience. Some of the critical contexts that need to be considered when designing a loyalty app include the following:
- User Goals: Understanding why the user wants to sign up for the loyalty program is essential to design a signup process that is quick and easy to complete and that provides relevant information to the user.
- User Preferences: The user’s preferences, such as font size, color preference, and language, should be considered when designing the signup and login screens.
- Device Type: The type of device the user uses (e.g., smartphone, tablet, laptop) can impact the design and functionality of the signup and login screens, including screen size, processing power, and touch capability.
- Network Connectivity: The user’s network connectivity, including Wi-Fi, 4G, or 3G, can impact the app’s performance, and designers need to consider this when designing features that require a connection, such as real-time updates or push notifications.
- User Experience Level: The user’s experience level with technology and mobile apps should also be considered when designing the signup and login screens. For example, are they tech-savvy or first-time users?
- Privacy and Security: Ensuring the user’s personal information is protected and secure is essential when designing the signup and login screens. This includes using specific forms and encryption and providing clear and transparent privacy policies.
- User Input Methods: The user’s preferred input method (e.g., keyboard, touch screen) should be taken into account when designing the signup and login screens, and the forms should be designed in a way that is easy and intuitive to use on each type of device.
Ideation (What)
Regarding the ideation of the desired task, I want to list the things that should be considered in the design of the flow of signup/login pages, according to the research and best practices and patterns. We can use these ideas and needs in the user flow and design them as much as possible.
- Large, Easy-to-Read Text: Older adults may have vision impairment, so using large font sizes and high-contrast text can do reading and navigating the page more accessible.
- Straightforward layout: Older adults may not be as familiar with technology as younger users, so a clear layout can help reduce confusion and make the signup process easier to understand.
- Clear Instructions: Providing clear and concise instructions for each step of the signup process can help older adults understand what information is needed and what actions they need to take.
- Touch-friendly Buttons: Many older adults may have difficulty with fine motor skills, so designing touch-friendly buttons that are large and easy to press can make it easier for them to navigate the page.
- Provide Alternative Authentication methods: Older adults may not have difficulty typing on a tiny keyboard, so providing alternative authentication methods, such as voice recognition or picture-based authentication, can make the signup process more accessible.
- Make sure the design is Accessible: Use the accessibility guidelines such as WCAG to ensure the design is accessible for older adults with visual, auditory, or motor impairments.
- Use a Single-Column Layout: this layout streamlines the eye movement from top to bottom, making it easier on the eye than the z-shaped movement required in forms with multiple columns. Also, with a multi-column layout, we risk our users not noticing the second field in the same row.
- Consider a Multi-Step Form with One Question in Each Step: it reduces the amount of information the user has to process at a time, second, it gives more room in our form to increase the font size and spacing and still make it look visually appealing.
- Take Care of Field Labels and Hints: avoid replacing labels with placeholder text, because when the user starts filling a field, the placeholder text disappears, which strains the user’s short-term memory. In addition, some screen readers do not read placeholder text aloud.
- Make Sure Your Error Messages are User-friendly: Displaying the error message next to the field in question minimizes working-memory load for the user, as it allows them to easily locate the error and correct it.
- Show the Password Requirements before submission: If our service needs specific requirements for passwords, show them before submitting the form.
- Make the Button Disabled until all the required inputs are completed: This is another way to visually validate inputs before submission.
- Format Fields with Input Masks: To fix input problems use input masks on formatted data fields. Input masks automatically insert the correct format in the field.
User Flow Chart
Once I have established the ideation phase that meets the user’s needs, I can create a detailed flow chart to ensure all necessary elements are considered.
Benchmark
When it comes to benchmarking, many applications with many different approaches exist. I looked at the market’s best practices, realized their pros and cons, and got ideas from some of them. You can see some below.
Design — Touchpoint & Get Started
The first step to attracting customers and encouraging them to join the loyalty program can be in different ways. For example, I used the first step to onboard users. I encouraged them with impressive and beautiful illustrations and influential slogans to confirm their membership in the customer club by tapping on the Get Started button.
I could take the signing-up/sign-in structure into a single form like some of the apps I reviewed. Based on the existing persona, I decided that provide clear choices between login/signup to the user.
Let’s get started
Let’s start with the signup page. Again, based on the persona, I assume that the user is more comfortable with signup via mobile phone and SMS. So I put this option as the first option on this page. Next, the user can choose signup options with email and other accounts. The arrangement of buttons is based on the current application. As a rule, the priority of user selection and placement of these options should be based on data obtained from interviews, usability tests, and statistics.
We can obtain the country code based on the available data from the user’s phone and set the country code of the user’s mobile phone number as default.
In terms of agreements, based on ideas and best practices, let’s simplify the selection process and options for the user. By writing a clear copy-write and using the arrangements link, we can inform the user and reduce the cost of various choices and distractions.
SMS Verification
At this stage, immediately after the user tries to enter the phone number, we remove the rest of the options from the user’s view so that the focus and attention are only on the upcoming flow.
Using the default phone number registered in the user’s phone can help the user to speed up data entry.
In the user’s mobile phone number verification phase, the option to resend the SMS will be available.
Create Profile
After successfully verifying the phone number, the user enters the stage of completing his profile. At this stage, we will show the user an encouraging message at the beginning of the form to receive +100 points if the profile is completed so that the user is satisfied with the long registration flow and increases the chances of achieving the registration flow.
We divide long forms into short and related data based on our best practices and goals. After completing the personal information, we also ask the user to enter his email and postal code. The word (optional) is shown, and the continue button is active.
(in the current app flow, when the user signs up via mobile, we define the email field as optional, but in the reset password, we need the user’s email to send a link. So that should be fixed. In my case, I let the user sign in with a phone number, too, so they do not need to email to reset if they did not remember the password for login.)
In all stages and flows, wherever the form was not completed, and the user’s act was required to complete the form, I showed the continue button disabled.
It’s Done
The signup process by mobile phone number ends here, and the user successfully activates his user account and enters the dashboard page of the loyalty program. Since the purpose of this case was to focus on the signup flow, I briefly tried to redesign part of the dashboard page. Many improvements in terms of UX and UI can be made on this screen and the whole app.
How about Signup via Email?
Considering the importance of users’ email, sending a verification code to the user is advised. On the main page, when the user taps on the continue with an email option, our phone field will be removed, and the email field will be displayed instead. Therefore, like signing up via mobile phone, verification is also implemented in this process. Let’s go via email signup.
Creating a Password
The user has used the option to register by email, so the option to create a password is required in this flow. We can also help the user initiate a password by showing the requirements needed to define a secure password and their status. For this section, the user must be able to show or hide the password. As a result, the user can be relieved from re-entering the password.
Other steps are shared with mobile number registration. The only additional step in this section can be to activate the possibility of login in with Face ID.
Signup with other options
The signup or login process by social networks, Google, and Apple accounts is a specific and defined process. Like the current solution, I have used a particular flow for login in with these accounts.
Signing in
The sign-in touch point is on the same page as the onboarding; it is located in the upper right corner. If the user already has an account, he will quickly enter the login flow from this section. This process is also possible, like the registration process by e-mail, mobile phone number, and other accounts.
The default is based on the current status of the application; sign in through email. For this particular persona, it might be easier to log in with a mobile phone. But data, statistics, and research can help us in this field.
Again, for the user’s convenience and to keep the form clear, I divided the process into two steps. In the first step, the user enters his email. Here we can validate the user’s e-mail, and if the e-mail was not registered in the system, we could clearly warn the user that there is no e-mail in the system.
In the next step, the user enters his password. (unlike some patterns that display the login error as a combination of an email or password error, the user does not know whether the error is related to the email or the wrong password!)
Forgot Password
In the password entry screen, if the user enters a wrong password, in addition to displaying the error message clearly, the option to forget the password will be displayed. The password-forgotten flow is shown over the current flow. The user enters his email and taps on the send link. He will then see a clear message to check his inbox. Also, if the access of the user’s phone and the technical structure of the application allows it, we can make it easier for the user to continue the journey by placing a button to open the email app.
The return from this flow will also be toward the login page.
White Labeling
Since our product is a white-label product, we need to coordinate it with branding and customer guidelines. At first, it is necessary to think about this issue and the application’s structure. We assume that our loyalty application’s structure and information architecture are the same for all customers.
In this case, the only variable is branding guidelines for different customers. This variable can include color palette, typography, logo, etc.
As a result, the user interface and design system should be easily changed by adjusting the value of predefined tokens according to each customer’s branding.
“Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values in order to maintain a scalable and consistent visual system.” — Jina Anne
Design Tokens
Components: The modular, adaptable components that can flex to the needs of multiple brands and can be assembled into pages.
Brand themes: Sets of styling information specific to a brand or theme that handles color and typography.
A brand’s set of tokens can be turned into a token sheet making up our brand theme. Then components can reference a brand theme token sheet as the source of truth.
The colors used by components for every brand are governed by tokens. Tokens are a method of abstracting colors by role and brand theme. They specify a selection of color values that serve a role — or multiple roles — in the UI.
This allows us the flexibility to change component colors for each brand independently to better reflect correct brand expression with a bit more art direction.
A token is documented in four parts…
1- Brand theme: A set of unique tokens that make up a unique brand theme.
2- Token: The code identifier for a unique role. Tokens are universal and never change across themes. This is what keeps all our brands under one source of truth.
3- Role: The systematic usage of a token. Roles cannot be changed between themes. Here we specify how the token can be used beyond its name and even bake in accessibility criteria.
4- Value: The actual style (e.g. a hex code) assigned to a token. These can be changed for each brand theme with consideration of how they are applied.
Each white-label component would reference multiple tokens where color properties can be changed for each brand theme while retaining the same token identifier. However, remember tokens must be used consistently for their role and remain the same within each brand theme.
Accessibility
In white labeling, accessibility and its constant control in the design process are essential issues. Due to the diversity and different branding guidelines, it is necessary to focus as much as possible on accessibility issues and related standards.
For example, in the design of this case, I tried to implement accessibility in such a way that both branding guidelines and standards are respected. Below you can see the results of the accessibility test over the case designs with help of some Figma plugins.
Overall Improvements
To find solutions according to patterns and best practices and to optimize the registration and login flow, I registered and logged in to the current program several times to find out the negative and dark points of the user experience. Below, I will list some of the optimizations made on the UX & UI side.
- The signup/login page in the current design looks crowded, and the login options are scattered. In this matter, I moved all actions to the second layer and just shows only two options, log in and get started on this page. Also, using the onboarding slider on this page will provide space for the exclusive introduction of services by each customer or the introduction of the working methods and points in the loyalty program.
- Placing login and signup options on the next page allowed us to display the agreements section at the end of this page to the user. As a result, according to the existing patterns and best practices, we can reduce the cost of displaying the modal and its select and verify operation and direct the user’s attention to the main flow of registration and login.
- In the new design, the active option is listed at the top, and the rest are listed separately at the bottom. If the user continues with the active choice, we will hide the rest of the options so that the user’s attention is on the main flow.
- If there is access and support of the user’s phone, we used auto-fills in the entries (phone number, email, SMS verification code)
- I used large inputs with a borderline and displayed a label when the input was completed or filled. Also, thickening the borderline when completing the input helps the user know which information is requested.
- The option to resend the verification code was added to signup via mobile and email flow.
- The action of accessing and returning to the previous step is always available for the user so that if the user needs to edit the information, the user can do so.
- Due to the importance of email in password recovery, we need a verification code for email as well, which was added.
- Showing the list of password requirements and their status helped the user to create his password more easily and quickly.
- Some device features, such as Face ID for faster entry into the program are offered at the end of the signup flow by email.
- The login option with a mobile phone number was also added to this flow.
Measuring Success
I mentioned some improvements applied to the existing design and compared them with the new design. When measuring improvements, we can use UX KPIs, which usually require usability testing with real users and gathering data and statistics from analytics tools.
Some of the KPIs that we can apply to this case and measure successes are:
- Task Success Rate: This measures the number of correctly executed tasks and is used frequently. If a task has a clearly defined endpoint &– for example, filling out our signup form — we can measure the TSR.
- Time On Task: This describes the time a user needs to complete a task successfully, which is signing up or logging into the app.
- Error Rate: The number of errors that occur during a user’s interaction with the signing flow.
- Click/Tap-through Rate: The percentage of users who tap on a specific action or button.
- Net Promoter Score (NPS): A measure of customer satisfaction calculated by asking users how likely they are to recommend a product or service to others.
- The number of new users.
- Mistap rate.
All in One
I described almost all parts of the improvements with per-screen interactive prototypes. But for a better experience, now you can see all the prototypes in one place and walkthrough in app flows.
Thanks!
I want to thank you for reading this case study. You can read more case studies from my Portfolio Website and please stay connected with me on Medium, Linkedin, and Dribbble.
Want to know more about design forms?
Designing better sign-up screens
Four considerations when designing forms for older adults
Accessible Design: Designing for the Elderly
UX accessibility for the elderly — 12 principles
A guide to designing successful Login experiences
Designing UX Login Form and Process
How to Design Great UX for Sign Up Form
