Nuubi | Edona's Portfolio

Team

I worked with Yifan Wang, a UX designer & Yanjun Li, a developer

Tools

Figma, FigJam

Deliverable

Web Design

Timeline

March - May 2024

My Role

UX Designer responsible for UX research, ideation, visual design, prototyping

✦ "Designing for accessibility is designing for ourselves. We could lose a limb, go blind, deaf, or develop

cognitive impairments. In fact, it’s almost a guarantee that if we live into old age, we can expect to experience

sensory, motor or cognitive deficits at some point." ✦

- some designer on reddit

Overview

Ensuring onboarding accessibility at Nuubi through WCAG compliance and best practices.

Edona, help us ensure our mobile designs meet WCAG standards before converting them to desktop. Help us fix accessibility issues, foster inclusivity, and avoid potential legal problems.

The Nuubi Team

Nuubi is an edTech app that uses gamified peer learning to increase student retention in universities. I was tasked with converting mobile designs to desktop designs, but first needed to understand the key accessibility issues in our current mobile designs. As the company partners with large universities, complying with WCAG has become critical. Our mobile onboarding process revealed some accessibility issues that must be addressed to avoid potential legal risks (although unlikely) and ensure inclusivity. Nuubi’s goal shifted to prioritize accessibility.

Problem: Our current designs failed to meet WCAG and accessibility standards, straying away from Nuubi's core value, reducing inclusivity and potentially causing legal issues (although unlikely). Key issues included overwhelming password requirements, disappearing placeholder text, poor color contrast, and very small text sizes.

Solution: Implementing progressive disclosure for password requirements and replacing placeholder text with persistent labels will improve general accessibility. Additionally, adjusting text sizes and color contrast aligns with WCAG 2.0 and 2.1 guidelines, improving readability for all users, particularly those with visual impairments.

Design Process

Discovery & Defining

I discovered accessibility issues including pre-mature password requirements, disappearing placeholders, poor color contrast, and small text sizes.

Problem Space

Yifan and I conducted a heuristic evaluation and reviewed user interview feedback

We relied on heuristic evaluation and user interviews to identify and validate accessibility issues and improvements.

Why This Approach:

Time Constraint: With limited time and resources, heuristic evaluation provided a quick and efficient method to identify potential usability and accessibility issues.

Key Findings

Premature Password Requirements

The presentation of all password requirements has the potential to overwhelm users with cognitive issues.

Although premature password requirements doesn't violate WCAG, the cluttered interface is not standard for users with cognitive impairments. The UI was especially cluttered in the mobile version.

Yifan and I also found that it was industry standard to present the password requirements when the password input field was triggered.

Unnecessary Placeholder Text

The placeholder texts present vanished upon user input and a lot of the times wasn't used properly, like for hints. Also, placeholder text is generally bad for accessibility for a few reasons:

1. The default light-grey color of placeholder text has poor color contrast against backgrounds. This problem aligns with WCAG 2.0 Success Criterion 1.4.3 Contrast.

2. Users with cognitive or motor impairments are more heavily burdened. Disappearing placeholders increase the memory load.

3. Not all screen readers read placeholder text aloud.

https://www.nngroup.com/articles/form-design-placeholders/

Very Small Text Sizes

Text sizes were found to be too small, making content difficult to read and interact with, especially for users with visual impairments. This violates WCAG 2.1 Success Criterion 1.4.4: Resize Text, which requires that text can be resized without loss of content or functionality.

Many of the mobile text sizes were around 12px. There were several text size complaints from the user interviews conducted.

While WCAG doesn't specify minimum text sizes, it emphasizes the importance of ensuring that text is resizable, has sufficient contrast, and allows for adjustments to spacing.

Identifying the Root Cause

Neglect of Accessibility in Initial Design

The root cause of these accessibility issues lies in the initial design phase. As a startup, there was an oversight in prioritizing accessibility, leading to inconsistent adherence to accessibility guidelines across different screens.

Understanding Consequences of the Problem

Neglecting accessibility standards compromises legal compliance and inclusivity

Why does this problem matters? While it's unlikely in this scenario, it's worth noting the potential impact if accessibility issues persist. Ignoring accessibility standards could lead to legal consequences under regulations like the ADA and Section 508. Non-compliance not only undermines Nuubi's commitment to inclusivity but also risks excluding users with disabilities.

Ideating

I explored progressive disclosure for premature password requirements and removing placeholder text altogether for input fields.

After identifying the key accessibility issues in our onboarding process, I brainstormed and developed concepts to address these problems.

Progressive Disclosure for Password Requirements:

Concept: Display password requirements progressively as users interact with the password field, rather than all at once.

Rationale: Progressive disclosure is a UX technique that defers advanced features and information to secondary UI components. Although I am not deferring the password requirements to a secondary UI, I am displaying the password requirements in the same UI but deferring their visibility until user interaction. This approach reduces cognitive load, ensuring users are not overwhelmed by information. By initially showing a simple prompt and revealing detailed requirements only when the user clicks on the password field, we reduce cognitive overload and keep the UI uncluttered.

Before

After

Persistent Labels Instead of Placeholder Text

Concept: Remove placeholder text and use persistent labels that remain visible even when the user starts typing.

Rationale: The previous input fields didn't pass WCAG AA and AAA contrast requirements, and the labels often didn't provide useful information. Placeholder text disappears upon input and isn't always read by screen readers, reducing accessibility.

Before

After

Increasing Text Sizes

Concept: Increase the text size for all form fields and instructional text.

Rationale: Larger text sizes improve readability for users with visual impairments and meet WCAG 2.1 Success Criterion 1.4.4 (Resize Text). I changed the text size of any 12px text to 16px for better visibility.

12px 16px

Design

Yifan and I designed signup screens with business and technical constraints in mind to house the changes we made.

In this phase, Yifan and I developed and evaluated three design ideas for the signup screen, considering various constraints and feedback from different stakeholders. This included designing three different variations of the signup screen, evaluating the pros and cons, and considering design constraints. While these changes may seem minor individually, collectively they contribute to a more accessible experience.

1

First Design Rejected

Design 1 was rejected because the colors didn't match the mobile design, violating the constraint to maintain consistency. Additionally, the design didn't leave space on the left side for marketing purposes as required.

2

Second Design Rejected

The main issue with this design was the need to expand the box to fit all the content, along with the outdated clipart. While our design lead aimed to keep the clipart, Yifan and I suggested a more contemporary alternative. Design lead eventually agreed with Yifan and I on the clipart.

3

Third Design Approved

The third design successfully addressed the requirements of both the marketing and design teams by providing ample white space and accommodating content effectively. Its alignment with mobile designs and adherence to industry standards made it the preferred choice.

Impact

The changes mitigated legal risks and fostered inclusivity by adhering to WCAG.

In the education sector, prioritizing accessibility through WCAG compliance not only fosters inclusivity for users with disabilities but also mitigates potential legal risks related to not complying wtih WCAG. While legal implications may not be immediate as the product hasn't launched, adherence to WCAG standards ensures future compliance and underscores Nuubi's commitment to inclusivity in education.

Compliance with WCAG 2.1 Success Criterion 1.4.4: Resize Text

My design efforts have impacted Nuubi by aligning with industry standards. Notably, the changes in password requirements ensure compliance with WCAG 2.1 Success Criterion 1.4.4: Resize Text.

Compliance with WCAG 2.0 Success Criterion 1.4.3: Contrast

Additionally, the elimination of placeholders altogether resolves the issue of WCAG 2.0 Success Criterion 1.4.3 Contrast.