← Back

Settings Screen Redesign — Zoho Sprints

Sprints 2.0 was redoing everything except settings. I didn’t think “it works fine” was good enough for a page people hit constantly.

TL;DR

Visual redesign only — no settings moved, no behavior changed. Profile got real visual weight, related options grouped under clear headers, everything matched 2.0 tokens. I advocated to include it in the launch instead of deferring it. Shipped with Sprints 2.0 to 50K+ users; eng implemented in under a week using existing components.

Vipin — Product Designer Design Lead — Review & Direction Sprints 2.0 Team — Engineering
Impact
  • Shipped with Sprints 2.0 launch
  • 50K+ users
  • Under 1 week eng implementation

Key Takeaways

  • Nothing added or removed. Same settings, same places — just organized so you don’t have to read every label.
  • Profile is where people go first. It finally looked like the most important thing on the page.
  • The layout later became the template for settings in other Sprints modules.
Settings screen redesign overview

The Problem

Sprints 2.0 was getting a full visual overhaul. Settings was on the cut list — “it works fine.” I pushed back. It’s one of the most visited screens in the product, and every row had the same visual weight. You had to read every label to find anything.

What Was Wrong

Old UI of Settings screen — flat layout with no visual hierarchy

Nothing was broken. The layout was just flat. Profile — the thing people open first — looked identical to everything else. No grouping, no landmarks. You read the whole page or you gave up.

I looked at settings in other Zoho products. The ones that worked gave the most-used block the most weight. Ours didn’t.

Constraints

Pure visual lift. No settings moved, no behavior changed. Had to match 2.0 tokens and ship in two weeks alongside the rest of the launch.

50K+ users already know where things live. Moving rows around would’ve meant support tickets, not better UX. The win was hierarchy, not re-architecture.

How It Evolved

Early iterations
Later iterations

Started with profile — card treatment, avatar, name, email up front. Then grouped related settings under headers with consistent spacing. Same radius and type as dashboard and board so it felt like one product, not a leftover screen.

Final Design

Final redesigned settings screen
  • Profile up front. Card with avatar, name, email — what people actually open settings for.
  • Grouped sections. Related options under headers. Each block reads as its own thing.
  • Landmarks, not labels. Scan by section title instead of reading every row.
  • Room to grow. New settings slot into existing groups. Eng said that made implementation faster.

Before & After

Before
Old settings UI — flat, no hierarchy
After
Redesigned settings — grouped, scannable

After Shipping

Settings screen live in production

Shipped with 2.0. Eng had it live in under a week — existing components, no custom builds.

The grouped layout later became the default for settings in other Sprints modules.

What I Took Away

Push for the boring screens. Settings rarely gets portfolio love, but people hit it when something actually matters. Worth fighting to include in a launch.

Hierarchy beats novelty. Same rows, different order of importance. That was the whole redesign.

Design for the person implementing it. Existing components meant fast ship and a pattern others could reuse.