Accessibility enhancements for ESB PosLite sign-up screen

Overview

This project was focused on enhancing the accessibility and user experience perspective of the ESB PosLite mobile screen.

The initial design had many usability issues that could affect people with disabilities and decrease overall user experience.

Key Issue

Accessibility concern

The page failed to fulfill WCAG standards, with a low-resolution logo, inadequate visual contrast, white space, font sizes, and weights.

Complex registration

The users encountered more friction while signing up for the original design. Mobile screens have limited real estate;

Inputting more data can overwhelm users and make the process feel daunting.

New design solution

Accessibility standpoint

• The primary orange button with a white label and slightly muted black font on a white background pass the AAA standard.
• Using color strategically to create enough contrast for color-blind users.
• Using white mode as a default interface to cater to people with low vision, color blindness, and cognitive disabilities as a way to improve visibility
• Writing in plain language to prevent confusion for people with ASD and dyslexia.
• A 48px height is applied to all input fields and buttons to optimize for touch interaction and improve accessibility for users with motor impairments.

User experience perspective

• The smallest font size is 16px for easy reading and more accessibility.
• The background is off-white for ease of eyes and reducing stress.
• Using Helvetica typeface to reduce friction.
• Solid color background to allow accessibility for all users.
• Designing only one-page sign-up for faster completion, reducing cognitive load, and minimizing drop-off.

Conclusion

This project points out the necessity of bringing accessibility and user experience into account throughout the design process. The sign-up page was improved by making small but effective adjustments that made it more accessible and user-friendly.