Web Application Design
Web Application Design
Seamless User Authentication and Billing Experience
Seamless User Authentication and Billing Experience
Seamless User Authentication and Billing Experience
Hatari's Authentication and Billing process seamlessly integrate into its user-friendly interface, providing a secure and efficient experience for users navigating payment and verification.
Hatari's Authentication and Billing process seamlessly integrate into its user-friendly interface, providing a secure and efficient experience for users navigating payment and verification.
Hatari's Authentication and Billing process seamlessly integrate into its user-friendly interface, providing a secure and efficient experience for users navigating payment and verification.
Summary
Summary
01
Role
Product designer, product, product strategist and interaction designer
02
Overview
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
03
Challenge
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
04
What I did
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
05
Takeaway
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
01
Role
Product designer, product, product strategist and interaction designer
02
Overview
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
03
Challenge
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
04
What I did
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
05
Takeaway
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
01
Role
Product designer, product, product strategist and interaction designer
02
Overview
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
03
Challenge
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
04
What I did
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
05
Takeaway
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
01
Role
Product designer, product, product strategist and interaction designer
02
Overview
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
03
Challenge
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
04
What I did
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
05
Takeaway
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
The Design Process
The Design Process
Introduction
Introduction
The why
The why
The why
The why
During the design of the web app named "Hatari" it was decided that the app would need to have it's own onboarding flow unlike the other apps at Voyance. Additionally, we decided to introduce new features such as team management and subscription options to cater to evolving user needs.
During the design of the web app named "Hatari" it was decided that the app would need to have it's own onboarding flow unlike the other apps at Voyance. Additionally, we decided to introduce new features such as team management and subscription options to cater to evolving user needs.
Target audience
Target audience
Understanding and identifying the users
Understanding and identifying the users
Understanding and identifying the users
Understanding and identifying the users
Understanding the unique needs and challenges of Hatari's target users – banks, fintechs, and online businesses – was foundational to our approach. We applied user centered design principles to ensure that every aspect of the authentication and billing sections catered to the specific requirements and preferences of these stakeholders.
Understanding the unique needs and challenges of Hatari's target users – banks, fintechs, and online businesses – was foundational to our approach. We applied user centered design principles to ensure that every aspect of the authentication and billing sections catered to the specific requirements and preferences of these stakeholders.
User research
User research
Talking to potential users
Talking to potential users
Talking to potential users
Talking to potential users
Given the complexity of the financial industry and the sensitive nature of the data involved, thorough user research was imperative. We conducted in-depth interviews with representatives from banks, fintech companies, and online businesses to gain insights into their pain points, workflows, and expectations regarding risk and fraud prevention tools. Additionally, we analyzed user feedback and support tickets related to Hatari's existing authentication and billing functionalities to identify areas for improvement.
Given the complexity of the financial industry and the sensitive nature of the data involved, thorough user research was imperative. We conducted in-depth interviews with representatives from banks, fintech companies, and online businesses to gain insights into their pain points, workflows, and expectations regarding risk and fraud prevention tools. Additionally, we analyzed user feedback and support tickets related to Hatari's existing authentication and billing functionalities to identify areas for improvement.
In the comprehensive user research step several valuable insights could be gathered. Here's an itemized list of the learnings:
In the comprehensive user research step several valuable insights could be gathered. Here's an itemized list of the learnings:
In the comprehensive user research step several valuable insights could be gathered. Here's an itemized list of the learnings:
In the comprehensive user research step several valuable insights could be gathered. Here's an itemized list of the learnings:
User Pain Points: we identified some user pain points regarding their experience with onboarding, team management and subscriptions on other platforms. Some of these are confusion during login, difficulty managing subscriptions, or unclear billing statements.
User Pain Points: we identified some user pain points regarding their experience with onboarding, team management and subscriptions on other platforms. Some of these are confusion during login, difficulty managing subscriptions, or unclear billing statements.
User Preferences: Understand user preferences regarding authentication methods (e.g., password-based, biometric authentication) and billing preferences (e.g., preferred payment methods, frequency of billing cycles).
User Preferences: Understand user preferences regarding authentication methods (e.g., password-based, biometric authentication) and billing preferences (e.g., preferred payment methods, frequency of billing cycles).
User Expectations: Determine users' expectations for a seamless onboarding experience, including desired features, information clarity, and ease of use.
User Expectations: Determine users' expectations for a seamless onboarding experience, including desired features, information clarity, and ease of use.
Security Concerns: Understand users' concerns regarding data security and privacy in the authentication and billing processes, addressing any fears or uncertainties through transparent communication and robust security measures.
Security Concerns: Understand users' concerns regarding data security and privacy in the authentication and billing processes, addressing any fears or uncertainties through transparent communication and robust security measures.
Brainstorming
Brainstorming
Conducting an inhouse design thinking workshop
Conducting an inhouse design thinking workshop
Conducting an inhouse design thinking workshop
Conducting an inhouse design thinking workshop
Collaborative design thinking workshops were conducted with cross-functional teams comprising designers, developers, product managers, and domain experts. These workshops fostered creativity, ideation, and alignment on the design objectives and priorities. Through brainstorming sessions and design exercises, we generated innovative ideas and solutions to address the identified user needs and pain points.
Collaborative design thinking workshops were conducted with cross-functional teams comprising designers, developers, product managers, and domain experts. These workshops fostered creativity, ideation, and alignment on the design objectives and priorities. Through brainstorming sessions and design exercises, we generated innovative ideas and solutions to address the identified user needs and pain points.
High Fidelity Design
High Fidelity Design
Onboarding
Onboarding
Onboarding
Onboarding
The onboarding process was redesigned to guide users smoothly through account setup, providing clear instructions and explanations of key features. Interactive tutorials were included to familiarize users with the app's functionality.
The onboarding process was redesigned to guide users smoothly through account setup, providing clear instructions and explanations of key features. Interactive tutorials were included to familiarize users with the app's functionality.
High Fidelity Design
High Fidelity Design
Team management
Team management
Team management
Team management
New team management features were introduced, allowing users to create and manage teams within the app. This included features such as assigning roles and permissions, sharing files and documents, and communicating within the team.
New team management features were introduced, allowing users to create and manage teams within the app. This included features such as assigning roles and permissions, sharing files and documents, and communicating within the team.
High Fidelity Design
High Fidelity Design
Subscriptions and Billings
Subscriptions and Billings
Subscriptions and Billings
Subscriptions and Billings
The subscriptions and billings section was revamped to provide users with transparent pricing plans and billing options. Users could easily upgrade or downgrade their subscriptions, view payment history, and manage billing details from a centralized dashboard.
The subscriptions and billings section was revamped to provide users with transparent pricing plans and billing options. Users could easily upgrade or downgrade their subscriptions, view payment history, and manage billing details from a centralized dashboard.
Takeaways
Takeaways
What I learnt from this
What I learnt from this
What I learnt from this
What I learnt from this
As we journeyed through designing and implementing Hatari's authentication and billing sections, we uncovered some valuable lessons.
Firstly, diving into user research helped us grasp the diverse needs and wishes of our users, allowing us to shape our design to fit their unique requirements.
Secondly, taking small steps and refining features based on user feedback proved crucial in making sure our final product met users' expectations and provided a smooth experience.
Moreover, working closely as a team—designers, developers, and product managers—was vital in turning our ideas into functional features that truly worked. And let's not forget the importance of being open, clear, and secure in our authentication and billing processes. This not only built trust with our users but also kept them satisfied and coming back for more.
In essence, our journey highlighted the power of putting users first, working together, and keeping communication transparent to create meaningful and effective solutions.