Product Tour — Zoho Sprints

New users were struggling to orient themselves in Sprints. The interface is dense — work items, sprints, filters, creation tools, settings — all visible at once. The PM wanted a guided tour that walks users through the key sections of each page.

My manager passed the task to me. The brief: help users understand what each part of the interface does, without pulling them out of the product.

Large bold text overlaid directly on the interface with a circular spotlight highlighting the target element. Carousel navigation with dots, Skip, and Next/Prev buttons.

Pros: High visual impact. Impossible to miss. Clear spotlight draws the eye exactly where it needs to go.

Cons: Extremely intrusive — covers the entire page. Users can't interact with the product during the tour. The overlay text competes with the actual UI underneath, making it hard to connect the explanation to the element being explained.

A smaller card anchored near the highlighted UI element. Each step shows a wireframe screenshot preview, title, description, and a step counter (e.g. "1 of 4"). Previous/Next navigation buttons.

Pros: Less intrusive than the full overlay. Users can still see most of the interface. The screenshot preview gives context.

Cons: The card floats without a strong visual connection to the element it's explaining. The wireframe preview is small and abstract. With 4 steps, the card needs to jump to different positions on screen — which can feel disorienting.

A two-column card: bullet-point explanation on the left, screenshot preview on the right. Anchored near the relevant UI element with a clear pointer. Includes a "Go to help" link for users who want to learn more, plus Skip Tour and navigation controls.

Why this won:

• Best balance of context and space. The split layout gives room for both a text explanation and a visual reference without overwhelming the screen.
• Text + visual pairing. Users see what the feature does (bullet points) and where it lives (screenshot) simultaneously. No guessing.
• Non-intrusive but present. The card doesn't cover the whole page, but it's prominent enough that users won't accidentally dismiss it.
• "Go to help" escape hatch. Power users who want deeper documentation can jump straight to help docs without finishing the tour.

After picking Option 3, I pitched an addition: animated illustrations for each step. Instead of a static screenshot, the right panel would show a minimal animation of the action being explained — like the Create button being clicked and the resulting screen appearing.

The team liked it, but it was dropped. Creating custom animations for every step across every module didn't fit the timeline. Screenshots shipped instead — still effective, just less delightful.

Once we committed to the split-panel direction, I spent the rest of the week iterating on layout, navigation, and typography.

Iteration 1 — Base split layout with Previous/Next text buttons and a step counter ("1 of 2"). Functional but the text buttons felt heavy, and the counter didn't scale well visually.

Iteration 2 — Added "Skip Tour" as a clear exit option. Refined typography and spacing within the card. The navigation still used text buttons, which felt cluttered alongside Skip.

Iteration 3 — Replaced text buttons with arrow icons. Added dot pagination to show progress. This reduced visual noise and made the navigation feel lighter.

Iteration 4 — Spacing and type refinements. Tightened the card padding, adjusted line heights, and balanced the two columns so text and screenshot feel equally weighted.

Iteration 5 (Selected) — Final polish. Clean card with bullet points, screenshot preview, "Go to help" link, dot pagination, and arrow navigation. Design finalized in 1 week.

Implementation took 3 weeks because the tour had to work across every module — Projects, Backlog, Board, Timesheet, Reports — each with its own steps and screenshots.

Core design shipped intact. The expandable bullet list (green panel) was an engineering addition that worked well with the original layout.

Explore the extremes first. Three very different options gave the team a real choice. Without trying the aggressive overlay and the detached tooltip, we wouldn't have been confident in the middle ground.

Pitch high, ship what's practical. The animation idea was worth proposing even though it got cut. It showed the team what the ceiling could look like.

Design for scale. A tour that works on one page but breaks on another isn't useful. The component had to be flexible enough for every module while still feeling like one experience.