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 046Web app and dashboard design

Manaus Mais Humana

A Portuguese dashboard and login for the nonprofit Manaus Mais Humana, organized around donations, goals and neighbourhoods. Every figure on the screens is a sample value.

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

01

My contribution

Manaus Mais Humana is a Portuguese web dashboard for a nonprofit, with a login, a home screen for donations and goals, and a small visual guide.

This case shows how the screens are organized. The amounts, counts and dates on them are sample values, not results.

A walkthrough of the design’s screens, not a recording: the sign-in and the dashboard home.
Manaus Mais Humana dashboard with a blue icon menu, a yellow summary card with a donut and an illustration of houses, three green progress bars, charts and a right column of transactions.
The home screen puts the summary card first, then goals and transactions.

02

One warm card reads first

The home screen opens with a yellow card: the amount raised, people benefited and food baskets donated on the left, a donut comparing the amount with the goal in the middle, and a small illustration of houses and a person on the right. It is the only large area of warm colour on the page, so it reads before anything else.

Goals follow as three plain progress bars with their counts at the end of each line, and monthly and neighbourhood charts continue below. A right column lists transactions as cards with date, place, name and amount, and the mint green of the progress bars returns in the +ADICIONAR FUNDOS button beneath it.

Login screen with the Manaus Mais Humana logo, email and password fields, a blue button and a Google option, beside a tinted photograph of two hands reaching for each other.
The login keeps one column of fields beside a photograph of two hands.
Dark navy sheet of interface parts: buttons, side-menu states, a transaction item, a map, a neighbourhood list, charts, progress bars, the transaction column and the summary card.
The parts of the home screen, collected on one sheet.

03

The entrance and the parts behind it

The login keeps one column of fields: email, password with a visibility toggle and a link for a forgotten password. ENTRAR is the solid action, the Google option comes after an OU, and creating an account is a last line of text. A photograph of two hands, tinted from yellow to teal, fills the other half with the palette of the dashboard.

A guide sets the two typefaces, Muli and Montserrat, along with the colours and the logo. A second board separates buttons, side-menu states, the transaction item, charts, the progress bar, the map and the list, which shows how the home screen is assembled.

Dark navy guide with the Muli and Montserrat type scales, a set of colour swatches and the logo.
The typefaces, colours and logo used across the screens.
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

Channel 46 Web app and dashboard design

Manaus Mais Humana

A Portuguese dashboard and login for the nonprofit Manaus Mais Humana, organized around donations, goals and neighbourhoods. Every figure on the screens is a sample value.

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

A donations dashboard that keeps the goal in sight

Screens from the original Figma design files. All figures are sample values.

My contribution

Manaus Mais Humana is a Portuguese web dashboard for a nonprofit, with a login, a home screen for donations and goals, and a small visual guide.

This case shows how the screens are organized. The amounts, counts and dates on them are sample values, not results.

A walkthrough of the design’s screens, not a recording: the sign-in and the dashboard home.
Manaus Mais Humana dashboard with a blue icon menu, a yellow summary card with a donut and an illustration of houses, three green progress bars, charts and a right column of transactions.
The home screen puts the summary card first, then goals and transactions.

One warm card reads first

The home screen opens with a yellow card: the amount raised, people benefited and food baskets donated on the left, a donut comparing the amount with the goal in the middle, and a small illustration of houses and a person on the right. It is the only large area of warm colour on the page, so it reads before anything else.

Goals follow as three plain progress bars with their counts at the end of each line, and monthly and neighbourhood charts continue below. A right column lists transactions as cards with date, place, name and amount, and the mint green of the progress bars returns in the +ADICIONAR FUNDOS button beneath it.

Login screen with the Manaus Mais Humana logo, email and password fields, a blue button and a Google option, beside a tinted photograph of two hands reaching for each other.
The login keeps one column of fields beside a photograph of two hands.
Dark navy sheet of interface parts: buttons, side-menu states, a transaction item, a map, a neighbourhood list, charts, progress bars, the transaction column and the summary card.
The parts of the home screen, collected on one sheet.

The entrance and the parts behind it

The login keeps one column of fields: email, password with a visibility toggle and a link for a forgotten password. ENTRAR is the solid action, the Google option comes after an OU, and creating an account is a last line of text. A photograph of two hands, tinted from yellow to teal, fills the other half with the palette of the dashboard.

A guide sets the two typefaces, Muli and Montserrat, along with the colours and the logo. A second board separates buttons, side-menu states, the transaction item, charts, the progress bar, the map and the list, which shows how the home screen is assembled.

Dark navy guide with the Muli and Montserrat type scales, a set of colour swatches and the logo.
The typefaces, colours and logo used across the screens.