Tinkl
Role
UX Designer
Type of Project
Real client Project
Project Duration
One weeks
“We are not disabled by our bodies, but by society’s failure to accommodate them”
“Disability is not a personal trait; it’s a mismatch between a person and their environment,”
The Problem: Breaking mental Model
Tinkl is a progressive web application dedicated to helping individuals locate safe and accessible bathrooms in the Twin Cities area, focusing on serving trans, non-binary, and gender-nonconforming communities. Despite its commendable mission, Tinkl faced usability challenges that could impede user satisfaction and inclusivity.
Key issues identified included design inconsistencies, difficulty locating essential features, insufficient feedback after user actions, and a misalignment between the app's design and users' mental models regarding bathroom accessibility.
The Process
01. Discovery
02. Define
03. Ideate
04. Prototype
Discovery
Define
Ideate
Prototype
01. Identifying the Usability Gaps 🖼
Unveiling Usability Challenges
Tinkl is a progressive web application that helps users locate safe and accessible bathrooms in the Twin Cities area, primarily serving trans, non-binary, and gender-nonconforming communities. While the app had a strong mission, usability challenges made it difficult for users to efficiently find and contribute information.
What Wasn't Working?
Through an initial evaluation, we uncovered key usability issues:
Inconsistent Design Language – Buttons and layouts varied across screens.
Unclear Navigation – Users struggled to find and filter bathroom locations.
Lack of Feedback – Actions like adding a location provided no confirmation.
Limited Filtering Options – Users needed more criteria like gender-neutral, single-stall, or wheelchair-accessible options.
Discovery
Define
Ideate
Prototype
02. Understanding User Struggles Through Research 🎤
To gain a deeper understanding of how users interacted with Tinkl, we conducted:
Cognitive Walkthroughs – Mapping key user tasks and identifying where usability broke down.
Moderated Usability Tests – Observing real users interact with the app while thinking aloud.
User Interviews – Asking targeted questions to uncover frustrations and needs.
Through this process, we confirmed that users wanted a smoother, more intuitive experience, with greater control over their search and contribution process.
Discovery
Define
Ideate
Prototype
03. Designing an Intuitive & Inclusive Experience 🎯
With clear usability pain points in mind, we brainstormed solutions to enhance accessibility, clarity, and engagement. The key design improvements included:
Revamped Navigation – A cleaner, more intuitive layout that highlights essential features upfront.
Consistent UI Design – A cohesive design language across all screens for a seamless experience.
Advanced Filtering System – Custom filters for bathroom types, accessibility features, and user ratings.
User Reviews & Community Contributions – A space for users to share their experiences and mark bathrooms as safe.
Clear Visual Feedback – Adding confirmation messages and interactive elements to enhance usability.
Discovery
Define
Ideate
Prototype
04. Iterating on the Experience
Before
After
Made the dropdown button more noticeable with clear feedback, such as highlighting the selection when clicked and showing a visual change when hovered over (on the website, not the phone).
This will help users easily identify their choice and provide a smoother interaction.
Fixing the login page so it adheres to the mental model, and also for the button to be picked up by Eye-gaze software.
I cleaned up the bathroom card for better readability and added an "Open Now" indicator so users can quickly see if the bathroom is open or closed.
Additionally, I fixed the Design card by left-aligning all elements, and improved the Information Architecture for a more intuitive layout.
Handoff: Bridging Design & Execution
To ensure a smooth transition to development, I focused on three key resources:
01
02
Created a collection of reusable UI components with detailed specs to maintain consistency during the build.
03
Provided developers with precise measurements for margins, paddings, and element sizing to minimize guesswork.
Recorded a detailed walkthrough explaining key interactions, design rationale, and how each component should behave.
Reflection: Designing for Impact
Redesigning Tinkl was an opportunity to enhance an already impactful product and make it truly user-friendly. One key takeaway was that small usability improvements can make a huge difference in accessibility and engagement.
💡Things that stuck with me after this project
Clear and consistent UI builds trust.
A streamlined handoff process reduces implementation errors.
Inclusive design should be proactive, not reactive.
By refining usability, consistency, and accessibility, Tinkl now better serves its mission of creating safer, more inclusive spaces for all.