Guided Tour | Marco Vinicius

01

Project at a glance

The problem: Lengthy tutorials made learning a specific topic time-consuming. Long blocks of text and controls placed far from the instructions made it harder to read and navigate.
My contribution: UX/UI design, information architecture, UX writing
What I delivered: Six tutorials reorganized into thirteen short, topic-focused paths to make learning easier and less time-consuming.

02

My role and project context

Company: Nelogica
Role: Product Designer · UX/UI
Collaboration: Development team, with weekly design handoffs.
Scope: Restructuring onboarding content and navigation for a trading platform.

03

The challenge

The trading platform includes tools such as order entry, order lists and portfolio tracking. Guided tours needed to introduce these capabilities without packing too much information into one sequence.

The interface review revealed too many steps and long text blocks. Instructions appeared at the top of the screen, while the next button sat at the bottom, requiring attention to shift between two areas.

Original interface and proposed design

Guided tour modal with text and navigation controls together

Drag the divider to compare, or use the arrow keys.

04

Design decisions

Organize learning around individual goals

Why it mattered: The previous flow grouped too much information into long tutorials.
What I did: I organized the content into “Getting Started” and “Market Tools”, restructuring six tutorials into thirteen focused paths.

Bring instructions and controls together

Why it mattered: Instructions and the control for the next step were placed far apart.
What I did: I redesigned the modals to place instructions near the controls and revised the copy to make each step more direct.

Move directly into high-fidelity design

Why it mattered: The main scope concerned text layout and the division of steps.
What I did: Drawing on the interface audit and benchmarking, I used high-fidelity designs to review changes to the content and interface.

05

The solution

Guided tour organized into short, focused learning paths — Content divided into short paths, each addressing a specific learning goal.
View larger image

Guided tour modal with instructions and navigation controls together — Instructions and navigation controls brought together in the modal.
View larger image

Celebration screen at the end of a guided tour — Completion screen offering paths to continue learning.
View larger image

06

Learning experience outcomes

Before · full section

~10 min

An extensive walkthrough of the tool.

Now · per topic

2–3 min

Focused on one question or task.

Focused learning

Six extensive tutorials became thirteen short paths. Users choose the topic they need without going through the tool’s entire introduction.

Quick refreshers whenever needed

Paths lasting 2–3 minutes make it easier to revisit a topic and refresh a specific point. The content also supports users during their work, without repeating a long tutorial.

Engagement with less friction

Short, focused steps reduce friction when starting or returning to a tutorial. After completing a topic, users find suggestions for other paths and can keep learning at their own pace.

07

Lessons learned

Content is part of the interface

The work involved dividing and organizing instructions as well as designing modals.

Decisions tied to the problem

Bringing text and controls together addressed friction identified in the interface review.

Learning in stages

Focused paths organized onboarding around smaller goals and gave users a clear next step at the end of each tutorial.