Inclusive Web Page Iteration
Enhancing inclusivity by transforming the binary into a comprehensive information section.
Desktop
The website's mission is to assist college students in securing employment after graduation by providing a comprehensive repository of resources aimed at guiding users towards success.
The Problem
The website’s users encounter a dedicated webpage on interview clothing options that is categorized by gender, but lacks inclusion for non-binary individuals.
The Solution
By researching inclusive options and current trends, I crafted a page layout that removes the necessity to specify any gender.
Role
Collaborative Researcher
UX Designer
UI Designer
Project Type
Design Sprint
Modification
Original Design
What to Wear Accordions
The initial webpage adhered to a binary gender setup, segregating content into male and female sections. These categories further detailed all clothing articles historically associated with men or women, specifying how each item should appear and fit based on gender. It's worth noting that the men's category held a higher position than the women's category, inadvertently creating a subconscious bias.
Concepts
Storyboards and sketches were compiled to pinpoint users' primary paths (red routes) and expedite the creation of digital mock-ups, streamlining the design process.
No Accordions, No Tables
The original webpage utilized accordions with headers for Men, Women, and Gender Neutral, containing tables with descriptions and specifications for each clothing article tailored for interviews. Additionally, external links provided further details on wearing each item appropriately.
However, the extensive use of separate tables for each clothing item resulted in an endless accordion, causing accessibility issues for screen readers.
To address this, a straightforward improvement is to eliminate the accordions and reorganize the content for better accessibility and user experience.
Align with Design System
The header hierarchy in the design system employed titles with Font Awesome icons to delineate sections. This structure enhances content readability, facilitates smoother scanning for screen readers, and ensures mobile-friendliness by allowing content to stack based on the viewport.
Research
Ensuring that the designs catered to user needs, we reached out to a diverse range of demographics representing potential users of the web pages.
Interviews
Conducting interviews with the Office of Community, Equity & Diversity and the Student Advisory Board, which comprises students from various demographics (including the student body president, an athletics scholar, an arts Merit student, and more), yielded valuable feedback on what elements were essential for them to feel represented and secure within the community.
Findings
Interviewees highlighted that the designated "Gender Neutral" section, intended as a middle ground or catch-all, was inadvertently creating a category of "other," leading to feelings of alienation. Furthermore, this section had redundancies within the "Men's" category and failed to encompass the possibility that clothing articles traditionally marketed towards women were overlooked.
Updated Build
After feedback was collected, a second ideation of the red routes and layouts was developed.
All events are listed with corresponding dates and times. Beneath each event, buttons are strategically placed to direct students and employers to their respective registration pages, ensuring a seamless experience for each user type.
Grid System
The Clothing, not the Person
Rather than categorizing content into gender and gender-neutral modules, the focus would shift solely to the clothing article without any gender implication. This approach empowers users to select clothing pieces based on their preferences, ensuring the website doesn't dictate who should wear what.
Conclusion
Guidance from the Office of Community, Equity & Diversity and the Student Advisory Board resulted in a more inclusive section of the website dedicated to evolving forms of expression. To enhance user experience, this website section underwent a UI update for greater simplicity and accessibility.