Enhanced User Experience Through Accessible Form Design

With the rapid growth and expansion of Taptap Send (TTS), user experience become mission critical the our app’s performance and business success. However there was a critical roadblock – the existing forms were still the initial MVP designs with significant usability issues. This degraded the user experience, caused substantial customer dissatisfaction and and business impact.

Users were confused about mandatory and non-mandatory sections, instructiosn were unclear, and the interaction experience was suboptimal. This case study details the redesign process of our forms to improve accessibility, enhance user experience, and drive product-led growth.

Enhanced User Experience Through Accessible Form Design
Enhanced User Experience Through Accessible Form Design

Role

Product Design, UX/UI Design

Tools

Figma, Mixpanel, Useberry, Google Meet

Industry

Fintech

Role

Product Design, UX/UI Design

Tools

Figma, Mixpanel, Useberry, Google Meet

Industry

Fintech

Friction Points // A Leaky User Journey

Data analysis painted a pretty clear picture: a 35% drop-off rate during registration and a 22% decrease in conversion rates, pointing directly to poorly designed forms. The design of the forms created bottlenecks in the user journey, severely affecting user satisfaction and business performance.

User interviews and usability testing confirmed our suspicions – the forms were a usability nightmare. People were confused, frustrated, and just plain giving up. Issues ranged from confusion distinguishing between mandatory and non-mandatory fields, to struggles with unclear form instructions and more. The overall lack of accessibility was quite apparent. These issues created a bottleneck in the user journey, impacting user satisfaction and was directly hurting our app’s growth.

High Drop-Off Rates

Users were abandoning the registration process at an alarming rate, indicating significant usability issues that needed to be addressed urgently.

Low Conversion Rates

A decrease in conversion rates suggested that users were struggling with the form fields, leading to fewer successful registrations and transactions.

Absence of Clear Instructions

The forms lacked clear instructions, resulting in user errors and an overall frustrating experience.

Enhanced UX Accessible Form Design - Friction Points

Understanding the User Story

To fully understand user challenges with our forms, we undertook a comprehensive research and analysis process. We started with an in-depth look into user behaviour within the forms themselves. Click maps highlighted areas where users were getting confused or frustrated, while drop-off rates at specific sections pinpointed potential usability issues. Analyzing user interaction patterns also provided valuable insights into how users were navigating the forms, helping us identify any clunky or confusing workflows.

Going beyond the data and spoke directly to our users to gather qualitative data – the human stories behind the numbers. These conversations helped us understand their experiences in their own words, uncovering their frustrations and specific pain points regarding form interaction. A common theme was the lack of clear instructions and the confusion between mandatory and non-mandatory fields were significant roadblocks for users.

Finally, we validated our findings through usability testing sessions. Here, we observed users directly interacting with prototypes of the redesigned forms. This real-time observation allowed us to pinpoint exactly where users were encountering difficulties and identify any usability issues we might have missed in the previous stages.

By combining data analysis, user interviews, and usability testing, we were able to comprehensively understand user struggles and tailor our redesign efforts to address their most pressing needs.

Accessibility: The Untapped Growth Engine

The combined findings from our research informed the design direction, with accessibility taking center stage. Accessibility became this golden opportunity we hadn’t even considered. Prioritizing accessibility as the redesign focus made it a crucial element for a better user experience and app growth.

By ensuring accessible form design for all our users, we aimed to create a more inclusive and user-friendly experience within the app. Accessibility wasn’t just the “right thing to do” – it became a strategic lever for product-led growth.

Redefining the User Experience // Designing for All

Our primary goal was to resolve the usability issues while ensuring the forms were accessible to all users. The redesign addressed core issues and incorporated accessibility best practices, transforming the user experience.

Component Library Documentation

We started by building a comprehensive library and documentation of existing form components to set the foundation for the redesign. This library included detailed descriptions of each component, its intended use, and its interaction patterns. By documenting the components, we were able to identify the scope of the redesign effort and ensure that no element was overlooked. This step was crucial in maintaining consistency and clarity throughout the redesign process.

Enhanced UX Accessible Form Design - Component Library Documentation

Design Variations and Internal Testing

Initial form design variations were created and tested internally. These prototypes were integrated within the app to ensure alignment with other app elements. The internal testing phase allowed us to refine the designs based on feedback from team members, ensuring that the final design would be both functional and aesthetically pleasing.

Accessibility Optimisation

Forms were meticulously designed to comply with WCAG guidelines. This ensured they were usable by people with disabilities, including those with visual impairments (enhanced color contrast, screen reader compatibility), mobility limitations (keyboard navigation), and cognitive impairments (clear and concise language).

Enhanced UX Accessible Form Design - Accessibility Optimisation

Interaction Improvements

Micro-interactions were added to form fields, enhancing user engagement and providing valuable feedback during interactions (e.g., success indicators, error messages). This feedback loop empowered users to self-correct mistakes and complete forms seamlessly.

The dropdown design was changed to swipe-up modals, providing a more intuitive interaction. Additionally, form fields were designed to give users clear, concise instructions and the ability to correct errors easily.

Enhanced UX Accessible Form Design - Interaction Improvements

Clarity and Differentiation

Visual cues like asterisks and color coding were incorporated into the designs to clearly distinguish mandatory from non-mandatory fields, simplifying form completion and reducing errors. Enhanced instructions were also provided, ensuring that users had all the necessary information to complete the forms correctly.

Enhanced UX Accessible Form Design - Clarity and Differentiation

Enhanced Instructions

User-friendly instructions were integrated alongside each form field, providing clear guidance and reducing the need for guesswork. Instructions were concise, avoiding technical jargon, ensuring ease of understanding and comprehension.

Enhanced UX Accessible Form Design - Enhanced Instructions

Multi-Language Support

Initially, the forms supported only English, despite the app having users across eight different languages. By integrating multi-language support into the form field design, users can now effortlessly switch between languages, with form labels, placeholders, and instructions dynamically adapting to their language preference.

The forms were adapted to support eight user languages, with labels, placeholders, and instructions dynamically adjusting based on user preference. Arabic, a right-to-left language, was seamlessly integrated, ensuring a consistent experience for a global user base.

Enhanced UX Accessible Form Design - Multi-Language Support
Impact

Growth Through User Delight

The redesigned forms resulted in a significant improvement in user experience and key metrics. With the much smoother user experience, our users were way less likely to get stuck and abandon the transfer journey midway (drop-off rates fell!), and more users were successfully signing up and completing transactions (conversion rate increased).

This meant good things for our business growth, and happier customers who didn’t need to fight with confusing forms. The new design also meant fewer headaches for our customer service team. With clearer forms, users encountered fewer issues, leading to a drop in support tickets freeing up the team’s time and boosting their overall efficiency.

Learnings

Accessibility as a Strategic Advantage

The form design project was a real eye-opener for the team. Starting with a focusing on user needs, and by putting accessibility at the forefront of the design process, we ended up creating a way better experience for everyone. It wasn’t just about ticking accessibility compliance boxes; we actually impacted business performance by enabling a new group of users who might not have been able to use the app before.

Conversion rates improved because users could actually complete tasks without getting confused or frustrated. Drop-off rates during registration also also reduced.

Accessibility isn’t just a nice thing to do, it’s a smart business decision that can help you reach a wider audience and grow your user base. By smoothing out those pain points in the user journey, we created a more engaged user base, which ultimately meant more happy customers and a chance for even more growth.

Conclusion

Redesigning the forms was a win-win! By making the forms accessible, we created a smoother experience for everyone. This not only boosted user satisfaction (happy users are the best kind!), but it also helped us reach a wider audience and grow the app.

Focusing on accessibility is a smart move – it’s good for users and good for business, so why not just do it!