Drag to explore. Scroll or pinch to zoom. Open Help for keyboard controls.

Yan
OPEN
TO WORK
Let’s talk
Yan Fontão Boring view
All work

Case 029Mobile app design

Rollê

A Portuguese-language app for finding places, curators and activities, shown here with Curitiba examples. Its place pages mix practical details with stories and friends’ tips.

Contribution
Interface design
Project status
Interface design · Figma archive
Mockup of Rollê composed for this board from real screens of the project.
Mockup composed for this board from real project screens.

01

My contribution

Rollê is a Portuguese-language app for finding places, curators and activities. The examples in the file are set in Curitiba, and here I follow one of them, the Ópera de Arame theatre. The file holds 17 distinct phone screens and keeps earlier drafts on a separate page.

Full-screen photograph of the Ópera de Arame theatre with segmented progress bars, the place name, a rating and a dark panel with a short text and three highlights.
Ópera de Arame place page with a row of photos, four round shortcuts, two illustrated Sobre o local cards and the start of a Dica de amigo list.
A walkthrough of the design’s screens, not a recording: the brand opening, a place and its story. A place shown as a full-screen story. The place page, from the practical details to friends’ tips.

02

A listing that sounds like a recommendation

The place page starts with the essentials: name, rating, a row of photos with the next one peeking in, and four round shortcuts for Conheça, Horários, Info and Avaliações. Below that, the tone changes. Sobre o local uses plain lines such as “Rola show, peças e eventos” on cards with small ink drawings, and Dica de amigo collects short tips, like getting there close to sunset.

03

The same place as a full-screen story

The story screen gives the whole phone to one photograph, with segmented bars showing there is more to come. The reading stays at the bottom on a dark panel: one short paragraph about the place and three highlights. The photograph sets the place, and the text is short enough to read before moving on.

04

Black outlines with a coloured echo

Photos, cards and icon buttons share one treatment: a black outline with a thin offset shape in a second colour, such as blue, orange or pink. Headings use a serif, and the file keeps typography versions labelled Serif. Together they bring the app closer to a printed guide than to a listings app.

000

Instructions

Yan Fontão
Tap
Open a screen
Click
Open a screen
Drag
Look around the board
Wheel
Mouse zooms, trackpad moves, pinch zooms
− +
Pull back to see the whole board, or come closer
Arrows
In a case: ↑↓ change case, ←→ change media. On the board: move
Space
Open, or go back
Enter
Open
Esc Backspace
Back
Home
Back to the center, then the introduction
PgUp PgDn
Previous or next channel
Tab
Walk projects and links
R
Random project
0–9
Type a channel, 1–61
?
This page
Shortcuts

Music on the board

Files compressed and levelled for the web.

OPEN
TO WORK
Let’s talk

New message to Yan

Tell me who you are and I’ll get back to you.

000

About Yan

Hello, I’m Yan

Product Designer/ Design Engineer

Most products lose something between design and code. Mine don’t: I research the problem, design the product and ship the interface myself, so what you approve is exactly what your users get.

  • 2018started in software
  • UI + codedesign and implementation

Worked with Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

Brazil · Remote, hybrid or on-site

Portrait of Yan Fontão seated, in a green sweater and glasses, holding a microphone.
OPEN
TO WORK
Let’s talk
OPEN
TO WORK
Let’s talk
000

locked channel

Under NDA

Enter the code

Ask Yan for the code ↗
OPEN
TO WORK
Let’s talk
YAN FONTÃO Case studies