Redesign Settings: IA + Accessibility Focus

Overview

The user settings and profile pages were developer-designed with no clear structure or logic. Users struggled to find where to change information, settings were not grouped, and the cognitive load was high. My goal was to redesign the information architecture and accessibility while keeping the backend untouched.

Challenges

• Disorganized and ungrouped settings made it difficult for users to locate options
• Accessibility features were unclear and buried
• Users had to reload the page to switch between organizations, causing confusion
• Ten years of conflicting opinions and ad-hoc feature additions created complexity

Research

I gathered user feedback from Reddit discussions, internal tickets, Solutions Engineers, and surveys. Key findings showed users could not find settings easily, the grouping caused cognitive overload, and organization-specific reloads were frustrating.

Approach

Key Innovation

Applied cognitive accessibility concepts like the "black box" idea so only categories were visible at first, reducing on-screen clutter. This progressive disclosure pattern specifically helps neurodivergent users by maintaining context while minimizing cognitive overload.

Process

1. Analyzed the existing API response and compared it with competitors to find structural and naming patterns
2. Brainstormed and grouped settings on a whiteboard, refining category names over several iterations to one-word labels
3. Created wireframes on paper, then high-fidelity designs in Sketch, followed by interactive prototypes
4. Validated accessibility with AxeDev Tools and screen readers to ensure color contrast and proper code structure
5. Combined profile and settings pages into a unified interface while maintaining backend logic
6. Coded the redesigned structure with accessible patterns in Vue/SCSS
7. Used production testing with feature flags to identify bugs and refine user flows
8. Added missing settings and improved post-release accessibility based on user tickets

Results

Impact

• Users could locate and understand accessibility settings easily in a single organized view
• Reduced confusion and cognitive overload through clear categorization and progressive disclosure
• Improved accessibility awareness and adoption across the user base
• Received praise from users and internal teams for clarity and usability
• Successfully addressed ten years of legacy technical debt and conflicting design decisions

Tools & Methods

• Sketch for high-fidelity wireframes and prototypes
• Whiteboard ideation and pen & paper sketching
• AxeDev Tools and macOS screen readers for accessibility testing
• Vue/SCSS for component implementation
• Feature flags for safe production testing
• Production analytics for validation