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

Autopost.ai

Interface design for a web app that generates articles with AI for WordPress sites, covering the dashboard, setup, the article editor and light and dark modes.

Contribution
Product flows and interface design
Project status
Interface design · Figma and Dribbble archive
Autopost presentation cover from the original design file.
Presentation cover from the original file.

01

My contribution

Autopost.ai is an English web app for generating articles with AI and preparing them for a WordPress site. My work here covers the interface from the first setup to the screen where an article gets reviewed and scheduled.

The Dribbble shot titled AI Content and SEO Generator shows the same product, so its screens are folded into this case. Usage figures, names and article titles are sample data.

A walkthrough of the design’s screens, not a recording: onboarding, the dashboard and its dark theme.
Autopost.ai dashboard in light mode with a sidebar, two Generate with AI actions, usage costs, subscription info, three counters and a bar chart of tokens by model.
The dashboard puts article creation beside plan and usage.

02

Bring plan and usage into view

The dashboard starts with the two things someone comes to do: create several articles at once or create a single one. Both sit at the top of the first column with the same Generate with AI button, while counters for articles, topics and words run across the top of the second.

Below them, usage costs per model, subscription details and a chart of tokens by model answer the question that comes with any paid AI tool: how much has been used so far. Manage subscription sits with the plan, so a check can turn into an action on the same screen.

The same dashboard in dark mode, with white buttons, lilac headings and pale chart bars.
Dark mode keeps the layout and moves the emphasis.

03

Connect the models first

Setup happens over the blurred dashboard, so the product is already in sight behind the form. The Setup your APIs step asks for one key each for Midjourney and GPT-3. Under each field, a single line says where to sign in and links to the key, and Back and Next keep the step inside a sequence.

Setup your APIs dialog over a blurred dashboard, with fields for Midjourney and GPT-3 keys, helper links and Back and Next buttons.
The setup step says where each API key comes from.
Laptop on a concrete ledge showing the article editor: generation settings on the left, an article about running a marathon with its illustration in the centre and publishing settings on the right.
The editor sets up, reviews and schedules a generated article.

04

Review before it goes out

The article editor has three columns. The left one holds the topic and the generation settings, such as word count, article type and tone. The centre shows the generated article with its image. The right one decides what happens next: publish, save as draft, schedule or schedule automatically, with a choice of author, social accounts and a button to regenerate.

Back in the list, tabs and labels separate published, scheduled, draft and generating articles, and an article still generating shows its progress on the card.

Floating laptop on a dark slate background showing the Articles screen, with cards marked published, scheduled, generating and draft.
The article list labels each card by status and shows progress while generating.

05

Explore both surface treatments

The screens exist in light and dark. The layout stays the same while the emphasis moves: in dark mode the buttons turn white, the headings go lilac and the chart bars turn pale, so the indigo of the light version does not have to carry the contrast on its own.

Tilted collage of light Autopost screens: the editor, a grid of draft articles, the dashboard, generation settings, the help center and a welcome card.
From the AI Content and SEO Generator shot: editor, drafts, dashboard and settings together.
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 36 Web app and dashboard design

Autopost.ai

Interface design for a web app that generates articles with AI for WordPress sites, covering the dashboard, setup, the article editor and light and dark modes.

Contribution
Product flows and interface design
Project status
Interface design · Figma and Dribbble archive

See it on Dribbble

Autopost presentation cover from the original design file.
Presentation cover from the original file.

An interface for generating and publishing articles with AI

Screens from the original Figma design file and Dribbble, with sample data.

My contribution

Autopost.ai is an English web app for generating articles with AI and preparing them for a WordPress site. My work here covers the interface from the first setup to the screen where an article gets reviewed and scheduled.

The Dribbble shot titled AI Content and SEO Generator shows the same product, so its screens are folded into this case. Usage figures, names and article titles are sample data.

A walkthrough of the design’s screens, not a recording: onboarding, the dashboard and its dark theme.
Autopost.ai dashboard in light mode with a sidebar, two Generate with AI actions, usage costs, subscription info, three counters and a bar chart of tokens by model.
The dashboard puts article creation beside plan and usage.

Bring plan and usage into view

The dashboard starts with the two things someone comes to do: create several articles at once or create a single one. Both sit at the top of the first column with the same Generate with AI button, while counters for articles, topics and words run across the top of the second.

Below them, usage costs per model, subscription details and a chart of tokens by model answer the question that comes with any paid AI tool: how much has been used so far. Manage subscription sits with the plan, so a check can turn into an action on the same screen.

The same dashboard in dark mode, with white buttons, lilac headings and pale chart bars.
Dark mode keeps the layout and moves the emphasis.

Connect the models first

Setup happens over the blurred dashboard, so the product is already in sight behind the form. The Setup your APIs step asks for one key each for Midjourney and GPT-3. Under each field, a single line says where to sign in and links to the key, and Back and Next keep the step inside a sequence.

Setup your APIs dialog over a blurred dashboard, with fields for Midjourney and GPT-3 keys, helper links and Back and Next buttons.
The setup step says where each API key comes from.
Laptop on a concrete ledge showing the article editor: generation settings on the left, an article about running a marathon with its illustration in the centre and publishing settings on the right.
The editor sets up, reviews and schedules a generated article.

Review before it goes out

The article editor has three columns. The left one holds the topic and the generation settings, such as word count, article type and tone. The centre shows the generated article with its image. The right one decides what happens next: publish, save as draft, schedule or schedule automatically, with a choice of author, social accounts and a button to regenerate.

Back in the list, tabs and labels separate published, scheduled, draft and generating articles, and an article still generating shows its progress on the card.

Floating laptop on a dark slate background showing the Articles screen, with cards marked published, scheduled, generating and draft.
The article list labels each card by status and shows progress while generating.

Explore both surface treatments

The screens exist in light and dark. The layout stays the same while the emphasis moves: in dark mode the buttons turn white, the headings go lilac and the chart bars turn pale, so the indigo of the light version does not have to carry the contrast on its own.

Tilted collage of light Autopost screens: the editor, a grid of draft articles, the dashboard, generation settings, the help center and a welcome card.
From the AI Content and SEO Generator shot: editor, drafts, dashboard and settings together.