top of page

How to create an inclusive, accessible and transparent signup screen?

LEE - Signup form.jpg

THE PROJECT

LEE is a native app designed to bring together queer youth and more experienced adults and allies from the community to aid with their own experience and help queer young people in certain areas of life.

 

These relationships will empower and improve the personal well-being of the youth. The goal of the program is to answer questions related to gender and identity; improve educational results, economic opportunities, and social inclusion; and address subjective needs related to legal support, housing, health, family formation and many more. 

The app addresses two main groups: Mentees (16-27 years) and Mentors (18 years and older). The goal is to make sure that the design of the app is appealing to both (age) groups. 

At the same time, the design of the app should reflect the following three main points: Safety and security, inclusivity, and accessibility.

THE CHALLENGE

Creating signup formats that are inclusive and accessible. What criteria need to be considered?

Be inclusive  - Ask for names users want to be addressed with

What if we need to ask for users' legal name? 

 

Be transparent about the reason why the information is required and offer users the option to call them by the name they actually want to use, using the chosen name within the product or any marketing material. 

 

Some banks and financial corporations like Mastercard are already working on improving the experience of account holders who are not cisgender

Be accessible - provide examples to reduce user errors

Use form input label: to tell the user what sort of information they have to enter

Use placeholder text: it is similar to a label but is meant to provide an example of what you should enter

Summarize: the label tells you that this is an email address input field, while the placeholder gives you an example of a properly formatted email address

mail format – 1.png

There are two main differences in the data requirements for Mentees and Mentors.

For Mentees:   Aiming to create a safe space, LEE requires:

  • Only user name without legal name

  • Only month and year of birthday, without the exact day 

For Mentors:   Because they have a high level of responsibility, LEE requires:

  • Legal name and user name

  • Complete birthday data 

I examined 4 possible versions using common UX/UI patterns. The example demonstrates well that "common" doesn't always mean "the most inclusive" - yet. As UX designers we have an influence and can change that.

 

First the overview, each example will be demonstrated below.

Signup format.jpg

Version 4

Version 1

Version 2

Version 3

Signup_format_–_1.jpg

Version 1

  • Commonly used patterns in a birthdate field are:  “mm/dd/yyyy” or “dd/mm/yyyy.”

  • For a group of users it is not intuitive that “mm” stands for month and “dd” stands for day - users often get confused by this or they ignore it. 

  • The format presented on the left side makes that clear BUT users might wonder whether they need to use leading zeros (e.g. 09) for the month or day number. This makes user think about the input format and slows them down.

Signup_format_–_2.jpg

Version 2

  • This format doesn't tell users if they need to start with day or month. Not intuitive, not straightforward. 

How does that look like for mentees?

  • It might be even more challenging for mentees, since we only ask for month and year but don't ask for the explicit day.

  • How do they know what to start with?

Signup_format_–_5.jpg
Signup_format_–_3.jpg

Version 3

  • We all know the scrolling format. The experience is especially memorable for those who don't belong to GenZ but to older generations...neverending scrolling, missing the year, scrolling back, scrolling back and forth until we find it! 

  • In the case of a birthday field the user has to scroll through 3 different select menus. Scrolling until finding the right data might lengthen the process and cause frustration.

Signup_format_–_4.jpg

Version 4

  • The most accessible solution offering separate strings for the date with clear written labels, added placeholder text demonstrates the right format to add.

How does that look like for mentees?

  • Instead of 3 strings, only 2 strings with clear labels and placeholder text

Birhtday mentee 4.png

The product and registration process for mentors is in the testing phase. Results will be demonstrated when usability testing is completed.

bottom of page