Login flows

Create and validate multiple login flows for an app with a targeted audience of seniors and individuals with the need of a personal safety alarm.

Role

UX/UI designer

Industry

Welfare tech

Duration

3 months

Mockup picture of a login screen of an app
Mockup picture of a login screen of an app
Mockup picture of a login screen of an app

Disclaimer
The mockups and some of the findings presented in this project have been revised to maintain client confidentiality.

Introduction

The login flow is often the first interaction users have with a service, making it a critical moment for shaping their overall experience. A smooth and intuitive login process is essential for user satisfaction. If logging in is difficult or overly complicated, users may become frustrated and may choose not to return, impacting both user retention and engagement.

User research and wireframing

The process began with research and analysis of common login methods used in applications and websites relevant to our target audience. Based on this, I developed a hypothesis that our users would prefer familiar login methods due to their limited interaction with technology in daily life. To clarify the design requirements and explore potential login options, I created user flows, wireframes, and sketches.

These initial concepts were presented and validated in collaboration with the development team. Once the designs were approved, I moved on to creating clickable prototypes in Figma, which were used in upcoming user tests to refine the login experience.

Screenhot of flow charts of loggin in to the app
Screenhot of flow charts of loggin in to the app
Screenhot of flow charts of loggin in to the app
Wireframe that shows required steps to start call.
Wireframe that shows required steps to start call.
Wireframe that shows required steps to start call.

User testing

The test session consisted of three stages: an initial survey, user testing, and concluding interviews. It was conducted on-site at two locations. The participants, all within the targeted audience, had little to no experience with the app. Each participant was provided with a phone installed with the Figma app to test the prototype in a mobile environment, ensuring an accurate feel.

The usability test included four predefined scenarios with instructions on how to log in to the app. Each participant received a randomly assigned scenario with instructions. During the test, participants were asked to verbalize their thought process and choices at each stage of the prototype.

Scenario 1

You have previously created an account on the website. You provided your phone number, chose a username, and created a password. You have now downloaded the app and need to log in for the first time.

How do you proceed?

Scenario 2

When creating your account on the website, you notice that you can link your mobile BankID for easier verification and login to the app. You have the app downloaded on your phone and need to log in for the first time.

How do you proceed?

Scenario 3

A relative of yours has created an account and invited you as an alarm contact. You have received an SMS with the invitation and want to start using the app.

How do you proceed?

Scenario 4

A relative of yours has created an account on the website and added you as an alarm contact. Your friend has provided you with printed instructions with a QR-code to get started.

How do you proceed?

Two mockups of login screens
Two mockups of login screens
Two mockups of login screens
Two mockups of login screens
Two mockups of login screens
Two mockups of login screens

Results

After the test session, I transcribed the recordings of the interviews and converted them into raw data. Using an inductive coding system, I analyzed the data, letting codes and themes naturally emerge during the process. These codes were then grouped into two main themes: positive experiences and negative experiences. I also summarized the results from the initial survey, calculated SEQ scores for the different scenarios, and created tables and charts to visualize the survey results.

Positive themes

During user testing, many participants expressed strong preferences regarding login methods. In the first test session, five participants consistently favored BankID, citing its simplicity, security, and widespread use in other services they interact with regularly. Similarly, in the second user test, four participants noted that BankID was the most convenient option due to its ease of use. This indicates that 9 out of 17 participants preferred BankID as their method of choice.

One participant emphasized BankID’s essential role during an interview following Scenario 2, stating: “Since using BankID is essential for tasks like paying bills, it becomes a natural choice for many people. It's not unusual to have a BankID today.”

Another key insight from the tests revealed that the target audience feels more confident when using services with clear and straightforward flows. Familiarity with similar services reduces users’ fear of making mistakes, especially given their limited technical skills.

To enhance user confidence and trust, it is crucial to provide clear labels and recoverable flows. This approach ensures users feel secure in their interactions, reduces anxiety, and promotes a smoother overall experience.

+

Clarity

+

Prefferences

+

Recognition

Negative themes

The negative themes identified can be categorized into two main areas: frustration due to limited technical skills and the fear of making mistakes, both of which are common concerns among the senior audience when interacting with apps.

The most significant negative feedback was related to the QR code login method. One participant specifically expressed discomfort with QR codes, stating that they did not understand how they work.

Another common issue expressed by several test participants was the challenge of memorizing passwords and usernames, particularly given the varying requirements across different services.

-

Frustration

-

Requires technical skills

-

Fear of making mistakes

SEQ-score

Scenario 1

4,25

Scenario 2

6

Scenario 3

5,5

Scenario 4

5,25

Outcomes

To address the needs of the targeted audience, it is essential to offer users the option to choose their preferred login method. This approach enhances user satisfaction by streamlining the login flow based on their technical skills.

Most users prefer a login method they are already familiar with, as recognition plays a significant role. While many users are accustomed to username and password procedures, this method can be inconvenient due to the need to remember passwords. To improve satisfaction, we allow users to save passwords within the app or easily recover forgotten passwords, making this method more user-friendly.

The most preferred login method in this test was BankID. It is recognized as secure and is frequently used by the target audience, who find it both familiar and reliable.

Conversely, QR codes were the least favored method. While QR codes can streamline the login process for experienced users, they may pose a challenge for those less familiar with them. Despite this, we chose to include QR codes as they are becoming more prevalent in everyday life, which could increase their acceptance among seniors in the future.

To address the needs of the targeted audience, it is essential to offer users the option to choose their preferred login method. This approach enhances user satisfaction by streamlining the login flow based on their technical skills.

Most users prefer a login method they are already familiar with, as recognition plays a significant role. While many users are accustomed to username and password procedures, this method can be inconvenient due to the need to remember passwords. To improve satisfaction, we allow users to save passwords within the app and to easily recover forgotten passwords, making this method more user-friendly.

The most preferred login method in this test was BankID. It is recognized as secure and is frequently used by the target audience, who find it both familiar and reliable.

QR codes were the least favored method. While QR codes can streamline the login process for experienced users, they may pose a challenge for those less familiar with them. Despite this, we chose to include QR codes as they are becoming more prevalent in everyday life, which could increase their acceptance among seniors in the future.

Mockups of two devices showcasing diffirent login methods, with a background of a senior picking flowers.
Mockups of two devices showcasing diffirent login methods, with a background of a senior picking flowers.
Mockups of two devices showcasing diffirent login methods, with a background of a senior picking flowers.

Copyright 2024 by Daniel Forsberg

Copyright 2024 by Daniel Forsberg

Copyright 2024 by Daniel Forsberg