Settings Screen Redesign — Zoho Sprints
Redesigning the settings experience as part of Sprints 2.0
Key Takeaways
- Visual redesign, not re-architecture — all existing settings and behaviors stayed the same
- Profile section given proper visual prominence as the most-used area
- Clear section grouping with defined hierarchy made the page scannable
The Problem
Sprints 2.0 was getting a full visual overhaul, but the settings page was marked low priority — "it works fine." I pushed for it to be included. It's one of the most visited screens, and every setting had the same visual weight. Users had to read every label to find anything.
What Was Wrong
Everything worked, but the layout was flat. Profile (the most-used section) looked the same as everything else. No grouping, no hierarchy — you had to read every label.
I looked at settings pages in Zoho's other products (Projects, CRM, Mail). The best ones gave the most-used section the most visual weight. Ours didn't.
Constraints
Pure visual redesign — no settings moved, no behavior changed. Had to match the 2.0 design language and ship in 2 weeks.
50K+ users already know where everything is. Moving settings around would cause confusion and support tickets.
Other screens (dashboard, board view, backlog) were being redesigned simultaneously. The settings page had to feel like the same product.
2-week timeline. No room for scope creep or re-architecture — this had to be a visual lift that engineering could implement quickly.
How It Evolved
Started with the profile section — gave it proper visual weight since it's where users go most. Then grouped related settings under clear headers so the page is scannable. Kept everything consistent with the 2.0 patterns used elsewhere in the product.
Final Design
- Profile section elevated — given a card treatment with avatar, name, and email prominently displayed. This is what users look for first.
- Clear section grouping — related settings grouped under headers with consistent spacing. Each group is visually distinct.
- Scannable layout — find what you need without reading every label. Section headers act as landmarks.
- Scalable structure — new settings can slot into existing groups without breaking the layout. The engineering team confirmed this made their implementation faster.
- 2.0 consistency — same card radius, spacing tokens, and typography as the rest of the redesign.
Before & After
After Shipping
Shipped with the 2.0 launch. Engineering implemented it in under a week because the specs used existing components — no custom work needed.
The layout later became the template for settings screens in other Sprints modules.
What I Took Away
Push for the boring screens. Settings doesn't get attention, but it's where users go when something matters. I advocated for including it in the launch instead of deferring it.
Same content, different hierarchy. Nothing was added or removed. The redesign just organized what was already there. That made the entire difference.
Think about who builds it next. Used existing components so engineers could ship fast, and future designers could extend the pattern without starting over.