Affinidi's onboarding

Affinidi's onboarding

Affinidi's onboarding

Increasing onboarding completion rate with 40%

Implementing passwordless authentication and user management can be complex. This case study breaks down how we designed an intuitive onboarding process that guides users smoothly through these technical challenges.

Implementing passwordless authentication and user management can be complex. This case study breaks down how we designed an intuitive onboarding process that guides users smoothly through these technical challenges.

Implementing passwordless authentication and user management can be complex. This case study breaks down how we designed an intuitive onboarding process that guides users smoothly through these technical challenges.

user research

usability testing

ux strategy

UI design

onboarding

Saas

developer tools

Summary

Goals and challenges

  • Designing an onboarding flow that is useful for two types of users with conflicting needs

  • Increasing efficiency and decreasing the complexity of implementing an auth solution

Results

  • An onboarding flow that increased the implementation of an auth solution from days to minutes

  • Increased the completion rate of the onboarding drastically

My role

  • User research

  • UX strategy

  • UX/UI design

  • Usability testing

Feedback

“Although a lack of experience required me to go back and forth in the process, this onboarding would highly improve efficiency and, moreover, the collaboration between me and developers.” - Product manager

Learning

A product manager has different prior knowledge than a developer and therefore different requirements. Considering this during the research phase, and keeping the research insights seperate until making the conclusions, helps to take into consideration these different requirements. For this case, as simple as a “skip” button helped developers to quickly dive into the deeper functionality of the product, before finishing the whole onboarding.

Background

Background

Background

Background

Affinidi’s Auth Solution

Passwordless authentication solutions and user management systems are essential for service developers, enabling users to log in and manage accounts and user data. This feature is an essential part of Affinidi’s mission to provide tools that build safe and privacy preserving apps.

Building this part is crucial for every service, often time-consuming and requires technical knowledge. Affinidi aims to increase efficiency, and clarifies the process. In order to achieve this, we deconstructed the technical requirements and designed an onboarding that guides service developers through the implementation, tailored to their requirements, in a matter of a couple steps.

Challenge

Two different users have conflicting needs: the product manager with less prior knowledge would like to learn and experiment more to understand how it works and what they need specifically for their project, whereas an experienced developer knows what they need upfront, and is more interested in the more advanced functionality of the product before they devote their time. The challenge is to find the right balance between the two users, so that it is still useful for both backgrounds, through understanding their individual needs.

Hypothesis

By providing a tailored onboarding flow that deconstructs technical requirements into comprehensible steps, we can enable both developers and non-developers to effectively implement authentication solutions, thus reducing the complexity and time required for implementation.

Approach

We conducted benchmarks, interviewed both developers and product managers, and performed usability tests on early-stage prototypes. This helped us translate complex technical concepts of authentication solutions into comprehensible steps and guide users logically through the onboarding process.

Research

Research

Research

Research

Design brief

In close collaboration with experts, users, and the development team, we deconstructed technical requirements and translated them into a design brief. My role involved benchmarking similar solutions to identify best practices for onboarding flows, focusing on commonly used taxonomy and features to enhance user experience.

Design brief

In close collaboration with experts, users, and the development team, we deconstructed technical requirements and translated them into a design brief. My role involved benchmarking similar solutions to identify best practices for onboarding flows, focusing on commonly used taxonomy and features to enhance user experience.

Project roundup

Project roundup

Project roundup

Project roundup

User flow

Based on insights from experts, stakeholders, and benchmarking, we scoped down the project to an envisioned user flow with several setup options.

Lo-fi wireframes

From low to high fideltiy

Sketching screens from the flow helped me better understand concepts, visual representation, and possibilities. Using our design system, we skipped mid-fi wireframes and directly designed hi-fi mock-ups.

Hi-fi designs

We designed screens for each step in the onboarding using mostly existing components, keeping a backlog of components that might need to be added in future implementations.

Solution

Solution

Solution

Solution

STEP 1: CHOOSE YOUR TECHNOLOGY
STEP 1: CHOOSE YOUR TECHNOLOGY
STEP 1: CHOOSE YOUR TECHNOLOGY
STEP 1: CHOOSE YOUR TECHNOLOGY

The API calling code snippets of the authentication solution will be adjusted to your existing tech stack.

The API calling code snippets of the authentication solution will be adjusted to your existing tech stack.

STEP 2: ADD YOUR SECURITY FEATURES
STEP 2: ADD YOUR SECURITY FEATURES
STEP 2: ADD YOUR SECURITY FEATURES
STEP 2: ADD YOUR SECURITY FEATURES

According to Affinidi’s mission regarding save data, service developers could select security features, providing multiple ways to secure their account and offering a user-friendly login.

According to Affinidi’s mission regarding save data, service developers could select security features, providing multiple ways to secure their account and offering a user-friendly login.

STEP 3: CHOOSE YOUR TYPE OF APPLICATION
STEP 3: CHOOSE YOUR TYPE OF APPLICATION
STEP 3: CHOOSE YOUR TYPE OF APPLICATION
STEP 3: CHOOSE YOUR TYPE OF APPLICATION

Depending on the type of app, Affinidi’s onboarding does the thinking and adjusts the code to the requirements of one of the four possibilities.

Depending on the type of app, Affinidi’s onboarding does the thinking and adjusts the code to the requirements of one of the four possibilities.

STEP 4: CUSTOMISE THE UI OF YOUR LOGIN
STEP 4: CUSTOMISE THE UI OF YOUR LOGIN
STEP 4: CUSTOMISE THE UI OF YOUR LOGIN
STEP 4: CUSTOMISE THE UI OF YOUR LOGIN

The onboarding provides a user-friendly design tool with a real-time example, making the outcome even more tangible.

The onboarding provides a user-friendly design tool with a real-time example, making the outcome even more tangible.

Conclusions

Conclusions

Conclusions

Conclusions

Prototyping and user testing

We defined hypotheses to test, focusing on users’ background knowledge and the appeal of our solution. We tested our hypothesis with eight participants, using a clickable prototype and a predefined interview guide.

Results

We found out that developers usually have more prior knowledge regarding the technicalities. They are drawn to using tools that increase the efficiency of their workflow. However, before walking through a whole onboarding, they would like to know more about the technical functionality of the service which allows them to tweak the code to their preferences. Advanced developers were eager to explore the dashboard and learn about the more advanced functionalities of the service. This resulted in adding a “skip onboarding” button and allowing users to continue the onboarding from the dashboard.

“The promise of a complete authentication and user management solutions in a couple lines of code sounds too good to be true. I’m suspicious that the service lacks controls, so most likely, I won’t finish the onboarding before I know what I can expect.” - Developer

Product Managers and less experienced developers, however, tend to complete the onboarding. Although they seem to struggle when they were not sure, the onboarding process enabled them to achieve their goals through trial and error more easily than direct coding. Moreover, it gives them valuable knowledge about the requirements of implementing authentication and user management solutions, supporting collaboration between roles in service development.

“The onboarding deconstructs the concepts of authentication and user management solutions. As a Product Manager, this is valuable because it enables me to understand developers better and take off workload from the developers.” - Product Manager

PM’s are eager to use tools that allow them to quickly prototype parts of their service to make it tangible and learn from it, without utilizing valuable time from developers.

Reflection

At the faculty of Industrial Product Engineering at Delft University of Technology, I studied user research theory, the creative and iterative processes of product design and developed an eye for product and graphic design aesthetics. Nevertheless, I hone most of my User Interface design knowledge and experience to Affinidi. Before this experience, I made graphic design decisions mostly based on a gut feeling. My mentors at Affinidi provided me the tools and theory to really understand and making substantiated (UI) graphic design decisions.

Working on this complex product challenged me to grasp the essence of the technology we offered. However, I now seek projects that are less abstract and easier for my parents to understand. Do you have anything in mind? Please don’t hesitate to reach out!

You got an idea?

Or if you feel like taking the lead.

Leave your email address here and I get in touch with you soon.

Socials

You got an idea?

Or if you feel like taking the lead.

Leave your email address here and I get in touch with you soon.

Socials

You got an idea?

Or if you feel like taking the lead.

Leave your email address here and I get in touch with you soon.

Socials

You got an idea?

Leave your email address here and I get in touch with you soon.

Socials