Settings Screen Redesign
Improving clarity and scalability in a core configuration experience
The Settings screen in Zoho Sprints is a high-frequency area used by users to configure projects, permissions, and preferences. Over time, as new features were added, the screen had grown dense and difficult to scan.
I was asked to redesign the existing Settings screen to improve clarity and usability, while keeping all existing functionality intact.
Problem
Although the Settings screen was functionally complete, the experience was increasingly hard to use.
Key problems identified:
- No proper color importance to the profile side
- Weak visual hierarchy made it difficult to scan and locate specific settings
- Related options were not clearly grouped
- The layout did not scale well for future additions
Context & Constraints
- No formal PRD or UX brief was provided
- The task was to redesign the existing screen, not re-architect the experience
- All current settings and behaviors had to remain unchanged
- The redesign needed to align with existing product UI patterns
Design Approach
I focused on a heuristic-driven and iterative approach.
The key goals were:
- Improve information hierarchy
- Reduce cognitive load
- Make the screen easier to scan and navigate
- Create a structure that could scale as new settings were added
Understanding the Existing Screen
I started by auditing the current Settings screen to understand:
- How settings were grouped
- Which sections were more frequently accessed
- Where visual clutter and confusion occurred
This helped identify that the main problem was not the number of settings, but how they were structured and presented.
Iterative Exploration
I explored multiple design iterations, progressively refining the layout.
Across iterations, I focused on:
- Clear section separation
- Better alignment and spacing
- Stronger visual hierarchy through typography and grouping
- Consistency with patterns used elsewhere in the product
Each iteration improved clarity while preserving familiarity for existing users.
For the case study, I highlight a few key iterations that show how the structure and hierarchy evolved.
Final Solution
The final design delivered:
- A cleaner, more structured layout for settings
- Clearly defined sections and sub-sections
- Improved scannability without increasing visual noise
- A scalable foundation for future settings
The redesigned screen maintained functional familiarity while significantly improving clarity and ease of use.
Impact
- The redesigned Settings screen was shipped to production
- Improved usability and readability for a frequently used product area
- Provided a scalable layout for future feature additions