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

Synergy Insurance Affiliates

A web and mobile platform for insurance affiliates, with prototype pages for Super Admin, Admin and Agent roles. It follows goals, sales, agents and campaigns by office and includes a form builder.

Contribution
Role-based user flows, desktop and mobile UI
Project status
Interface design · Figma archive
Synergy presentation cover from the original design file.
Presentation cover from the original file.

01

My contribution

I worked on the user flows and desktop and mobile interfaces for Synergy Insurance Affiliates, archived under Media Base / Base Media. The design covers Super Admin, Office Admin and Agent roles, with separate prototype pages for each role in both formats.

The material shown here is a Figma design and prototype set. The desktop screens share the Super Admin menu. Names, photos and figures are sample content used to demonstrate the interface; the case makes no claim about production usage or business results.

A walkthrough of the design’s screens, not a recording: the dashboard, affiliate performance, the leaderboard, campaigns and the form builder.
Grey wireframe of a super admin overview page.
Wireframe of a super admin overview.

02

From roles to information hierarchy

The user flows cover three roles: Super Admin, Office Admin and Agent. From the dashboard, the Super Admin flow branches into goals, affiliate performance, financial analytics, the leaderboard, affiliate offices and forms.

The grayscale wireframes make the hierarchy visible without relying on branding: summary measures, comparisons and detailed records occupy distinct areas. In the finished interface, Analytics, Management and Account separate monitoring from actions that change the operation. A performance check and an administrative task therefore have different destinations.

Grey wireframe of a financial analytics dashboard.
Wireframe of an analytics dashboard.

03

Start wide, then choose an office

The first decision is the scope of the question: how is the network performing, and which office needs a closer look? The dashboard starts with renewal, lapse, retention and sold policies, then places the Goal Score and weekly revenue alongside that overview. The design keeps the network context visible before moving into an individual office.

Affiliate Performance repeats that reading for one office, chosen in a selector at the top. It adds coloured tiles for leads, sales and close ratio and a row of spend figures, and the right column follows the choice: the leaderboard becomes Agent Leaderboard - Office.

Synergy dashboard with a left menu, four rate tiles, a Goal Score gauge, a revenue line chart and a right column of notifications and the agent leaderboard.
Operation Overview puts the main rates, the goal and the week’s revenue on one screen.
Affiliate Performance with an office selector, rate tiles, coloured tiles for leads, sales and close ratio, a row of spend figures and a revenue chart.
The same reading for one office, with leads, sales and spend added.

04

A ranking with the reasons beside it

The Agent Leaderboard gives the top agents large cards with leads, sales, conversion rate and a week of sales activity. Yellow marks first place, and the row of cards carries on behind the right column. The table below lists every agent, with bill rate, CPA, spend, sales, leads and conversion rate on one row.

A short version of this list stays in the right column, under Notifications, on most desktop screens, so the ranking and the latest sales and leads remain in view during other tasks.

Agent Leaderboard with cards for the top agents, each with a sales activity chart, above a table of agents with bill rate, CPA, spend, sales, leads and conversion rate.
Cards for the top agents sit above a table that compares everyone.

05

Campaigns by share of sales

Campaign Overview pairs a table with a donut showing each campaign’s share of sales. Conversion rates carry a coloured dot, from red at the lowest to green at the highest, which helps weak campaigns stand out in a long list. A filter narrows the view by office, and a switch turns editing on.

Campaign Overview with a table of campaigns, coloured conversion rates, a filter by office, an Editing switch and a donut chart of each campaign’s share of sales.
A table and a donut compare campaigns by share of sales.
Grey wireframe of a form builder page.
Wireframe of a form builder.

06

Forms built inside the product

The form-builder wireframe gives the document and its editing tools separate spaces. The finished design keeps that split: questions occupy the main column while the right panel adds content. Form Builder, Settings and Preview distinguish editing a question, configuring the form and checking the result.

Forms work like a small editor with three tabs: Form Builder, Settings and Preview. Each question holds its own answer type and mandatory switch, and every block can be duplicated or deleted. The notification column gives way to a panel for adding questions, titles, images, videos and sections or importing questions, with Copy Link and Save Form at the top.

Form Builder with a section block, a question block with answer type and a mandatory switch, and a panel of actions for adding questions, media and sections.
The form builder keeps its add actions in a side panel.

07

The same operation on a phone

The mobile design prioritises the same operational questions with less simultaneous detail. Goal progress stays visible, tables show fewer columns, and adding a form element moves from a permanent side panel to a floating action. The task remains available while the layout changes around the smaller screen.

On a phone, a floating bar of five icons reaches the main areas, and the rates rearrange into a two-by-two grid above the Goal Score. Under Goals Settings, tabs separate affiliates and agents, and each goal is a card with its target, weekly or monthly status, a progress bar and an edit pencil.

The leaderboard keeps its yellow card and trims the table to the first columns. The form builder stacks into one column, with a floating plus button where the desktop has its side panel.

Phone dashboard with four rate tiles in a two-by-two grid, a Goal Score gauge and a floating bar of five icons.
Goals Settings on a phone with Affiliates and Agents tabs and cards for weekly and monthly goals, each with a progress bar and an edit icon, plus a New button.
Phone screen with a yellow card for the top agent showing leads, sales, conversion rate and a sales activity chart, above a ranked table and a floating icon bar.
The phone dashboard keeps the rates and the goal in the first view. Goals are editable cards, followed by week or month. On a phone, the leaderboard keeps the top card and trims the table.
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 33 Web app and dashboard design

Synergy Insurance Affiliates

A web and mobile platform for insurance affiliates, with prototype pages for Super Admin, Admin and Agent roles. It follows goals, sales, agents and campaigns by office and includes a form builder.

Contribution
Role-based user flows, desktop and mobile UI
Project status
Interface design · Figma archive
Synergy presentation cover from the original design file.
Presentation cover from the original file.

Goals, offices and agents in one working view

Screens from the original Figma design files, with sample data.

My contribution

I worked on the user flows and desktop and mobile interfaces for Synergy Insurance Affiliates, archived under Media Base / Base Media. The design covers Super Admin, Office Admin and Agent roles, with separate prototype pages for each role in both formats.

The material shown here is a Figma design and prototype set. The desktop screens share the Super Admin menu. Names, photos and figures are sample content used to demonstrate the interface; the case makes no claim about production usage or business results.

A walkthrough of the design’s screens, not a recording: the dashboard, affiliate performance, the leaderboard, campaigns and the form builder.

From roles to information hierarchy

The user flows cover three roles: Super Admin, Office Admin and Agent. From the dashboard, the Super Admin flow branches into goals, affiliate performance, financial analytics, the leaderboard, affiliate offices and forms.

The grayscale wireframes make the hierarchy visible without relying on branding: summary measures, comparisons and detailed records occupy distinct areas. In the finished interface, Analytics, Management and Account separate monitoring from actions that change the operation. A performance check and an administrative task therefore have different destinations.

Grey wireframe of a super admin overview page.
Wireframe of a super admin overview.
Grey wireframe of a financial analytics dashboard.
Wireframe of an analytics dashboard.

Start wide, then choose an office

The first decision is the scope of the question: how is the network performing, and which office needs a closer look? The dashboard starts with renewal, lapse, retention and sold policies, then places the Goal Score and weekly revenue alongside that overview. The design keeps the network context visible before moving into an individual office.

Affiliate Performance repeats that reading for one office, chosen in a selector at the top. It adds coloured tiles for leads, sales and close ratio and a row of spend figures, and the right column follows the choice: the leaderboard becomes Agent Leaderboard - Office.

Synergy dashboard with a left menu, four rate tiles, a Goal Score gauge, a revenue line chart and a right column of notifications and the agent leaderboard.
Operation Overview puts the main rates, the goal and the week’s revenue on one screen.
Affiliate Performance with an office selector, rate tiles, coloured tiles for leads, sales and close ratio, a row of spend figures and a revenue chart.
The same reading for one office, with leads, sales and spend added.

A ranking with the reasons beside it

The Agent Leaderboard gives the top agents large cards with leads, sales, conversion rate and a week of sales activity. Yellow marks first place, and the row of cards carries on behind the right column. The table below lists every agent, with bill rate, CPA, spend, sales, leads and conversion rate on one row.

A short version of this list stays in the right column, under Notifications, on most desktop screens, so the ranking and the latest sales and leads remain in view during other tasks.

Agent Leaderboard with cards for the top agents, each with a sales activity chart, above a table of agents with bill rate, CPA, spend, sales, leads and conversion rate.
Cards for the top agents sit above a table that compares everyone.

Campaigns by share of sales

Campaign Overview pairs a table with a donut showing each campaign’s share of sales. Conversion rates carry a coloured dot, from red at the lowest to green at the highest, which helps weak campaigns stand out in a long list. A filter narrows the view by office, and a switch turns editing on.

Campaign Overview with a table of campaigns, coloured conversion rates, a filter by office, an Editing switch and a donut chart of each campaign’s share of sales.
A table and a donut compare campaigns by share of sales.

Forms built inside the product

The form-builder wireframe gives the document and its editing tools separate spaces. The finished design keeps that split: questions occupy the main column while the right panel adds content. Form Builder, Settings and Preview distinguish editing a question, configuring the form and checking the result.

Forms work like a small editor with three tabs: Form Builder, Settings and Preview. Each question holds its own answer type and mandatory switch, and every block can be duplicated or deleted. The notification column gives way to a panel for adding questions, titles, images, videos and sections or importing questions, with Copy Link and Save Form at the top.

Grey wireframe of a form builder page.
Wireframe of a form builder.
Form Builder with a section block, a question block with answer type and a mandatory switch, and a panel of actions for adding questions, media and sections.
The form builder keeps its add actions in a side panel.

The same operation on a phone

The mobile design prioritises the same operational questions with less simultaneous detail. Goal progress stays visible, tables show fewer columns, and adding a form element moves from a permanent side panel to a floating action. The task remains available while the layout changes around the smaller screen.

On a phone, a floating bar of five icons reaches the main areas, and the rates rearrange into a two-by-two grid above the Goal Score. Under Goals Settings, tabs separate affiliates and agents, and each goal is a card with its target, weekly or monthly status, a progress bar and an edit pencil.

The leaderboard keeps its yellow card and trims the table to the first columns. The form builder stacks into one column, with a floating plus button where the desktop has its side panel.

Phone dashboard with four rate tiles in a two-by-two grid, a Goal Score gauge and a floating bar of five icons.
The phone dashboard keeps the rates and the goal in the first view.
Goals Settings on a phone with Affiliates and Agents tabs and cards for weekly and monthly goals, each with a progress bar and an edit icon, plus a New button.
Goals are editable cards, followed by week or month.
Phone screen with a yellow card for the top agent showing leads, sales, conversion rate and a sales activity chart, above a ranked table and a floating icon bar.
On a phone, the leaderboard keeps the top card and trims the table.