Case Study — Método OBA · Tutory
Método OBA is a police-exam prep mentorship from Minas Gerais, Brazil, that runs on Tutory. I redesigned its student dashboard from diagnosis to a PHP theme: better use of space, clearer icons and simpler navigation, from desktop to phone. The prototype below works: click around.
Click around: the menu, trophy and ☰ all work. The data is fictional, and the interface is in Portuguese, as it is for the students.
01 — New experience
More room to breathe, less noise and a look that feels like Método OBA. Students open the dashboard and see what matters first: their rank, today’s missions and their progress.
01 — On the phone
What improves: Built for the phone
The desktop menu stayed pinned next to the content, squeezing it on the small screen. I reworked the menu for a more natural experience on the phone.
Is the minimum touch target. The new design respects how people naturally use a phone screen.
02 — On desktop
What improves: Polish and breathing room
Colors, type, icons and menu redesigned, with room for each piece of information to breathe.
Users read about 20% of the text on a page, on average. Good design is led by visual hierarchy.
02 — The rank
Students climb the ranks, from Recruit to Colonel, as they progress. Now the background, cards and icons change with the rank, and at the top the photo becomes a player card.
Aesthetic-usability effect
What looks good feels easier to use.
Chevrons up to 1st Sergeant and stars for the officers, in both themes.
Gold from 80% correct answers up, silver from 60% and bronze below that.
Rank-tinted 3D icons in cozy and line icons in tactical, replacing the emojis.
03 — On the phone
The ☰ opens the items as blocks, like in an app.
Jakob’s law
Students expect the dashboard to work like the apps they already use every day.
Cozy
Tactical
04 — Breathing room
Every block has its own padding, and the same rhythm repeats from desktop to phone. The screen feels light, and students read without effort.
Design-leading companies grow revenue at nearly twice the rate of their industry.
8-point grid
Spacing starts at 8 px, with 4 px half-steps to fit the phone well.
Golden ratio
People tend to find what follows this proportion more beautiful, even without noticing.
Rhythm
Repeated spacing makes a screen easier to read, and what reads effortlessly looks better.
With space between blocks, students find each piece of information right away. On the phone, the finger hits the target.
65%of connected Brazilians use the internet only on their phone.Cetic.br · TIC Domicílios 2025
A well-crafted dashboard suggests a well-crafted method. Students feel the value before reading a single number.
46%of comments about a site’s credibility were about its look. It was the most-cited criterion.Stanford · Consumer WebWatch, 2002
The same spacing, corners and icons on every screen. Students learn the dashboard once and recognize the rest, and nothing looks improvised.
50 msis enough to judge how good a screen looks. Simple, familiar ones come out ahead.Lindgaard et al., 2006 · Google Research, 2012
Where it stands
The project is in the redesign stage. Next comes validation with Método OBA.
The new dashboard experience, on desktop and phone. It’s what this page shows.
83%On average, a redesign improves a product’s key performance indicators by an estimated 83%.Nielsen Norman Group
Método OBA reviews the proposal and approves what goes into the first version.
Método OBA students use the prototype, and I fix whatever isn’t clear.
5 studentsalready reveal about 85% of usability problemsNielsen Norman Group
The theme is already in the platform’s code, behind a switch that’s off. After validation, it goes on in preview and then for everyone.
The new dashboard live for every Método OBA student.
Delivery · Design engineering
I didn’t just hand over screens. I covered the whole design engineering path: the strategy, the visual system, the coded prototype and the theme built in PHP, inside the platform, ready to be switched on in stages.
Design and code came from the same hands. Nothing gets lost in a handoff, and every decision on this page already has its place in the product.
25diagnosis points, D01 to D25
Before designing, I mapped the dashboard in 17 documents: student context, tokens, gamification, voice, diagnosis and strategy, with a spec for each of the 16 components. The principle behind it all: the rank is the theme.
9live screens on this page
The prototype runs on the same HTML and CSS as today’s dashboard, with the platform’s Bootstrap and jQuery. What you click here is already the road to production, not a drawing for someone else to reinterpret.
60cases checked against the JS version
I proposed and built per-mentor themes: a manifest says what each one loads, and a per-environment switch turns the theme on at three levels, off, preview and on. Off is the default, so merging changes nothing in production. Medal, streak and grouped menu moved out of JavaScript and now come ready from the server.
−43%off the 3D avatar: 532 to 303 KB
The 3D avatar only loads on capable computers, runs in a Web Worker so the page never freezes, and falls back to a light PNG if it fails or lags. Icons and logo in WebP, self-hosted fonts, and the login loads only the CSS it needs, checked in CI.
Outcome
Tools
I take it from diagnosis to a prototype you can click, with design and code, ready to validate with the people who use it.