Affinidi’s Authentication and User Management Solution — Simplifying the onboarding experience
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.
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.
Problem statements
Implementing authentication solutions is crucial for safe and data-empowering services. However, meeting the requirements of existing tech stacks and previous design decisions is difficult and requires extensive knowledge and experience.
Developers and product managers have different knowledge bases, resulting in varied requirements.
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.
Project background
Responsibilities: UX design, user testing, design systems, illustrating
Deliverables: Research and usability tests summary, high fidelity mockups, design system components
“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
During this project, I learned about the value of benchmarking similar digital products and their UX patterns. It saved a significant amount of time guessing and proved to be an essential step distinguishing from competitors.
Research
The 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.
Benchmarking
I benchmarked eight onboarding flows from direct and indirect competitors. Auth0’s flow stood out for its:
Clear explanation of the value proposition.
Deconstruction of technical requirements into comprehensible steps.
Logical description and illustration of each step.
Providing both a visual representation of the login box, alternated by the actual code on the side, which was extremely insightful during setup.
User flow
Based on insights from experts, stakeholders, and benchmarking, we scoped down the project to an envisioned user flow with several setup options.
Designs
Wireframes
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.
STEP 1: CHOOSE YOUR TECHNOLOGY
The API calling code snippets of the authentication solution will be adjusted to your existing tech stack.
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.
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.
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.
Usability testing and results
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!