froes.design
01
02
03
01
02
03
hello@froes.design
in/froesdesign
@pedrofelipefroes

Froes designs & codes visuals, products, and systems.

designer interested in building, coding, and scaling visual design systems since 2016.

former founding product designer at Perspective, principal product designer at Instapage & design lead at Avenue Code.

currently based in São Paulo, Brazil.

01
Designing Perspective
Designing Perspective
2022 – 24
03
Rebranding Avenue Code
Rebranding Avenue Code
2019
Designing
Perspective

an AI-powered app to capture your life, reflect on your moments, and get perspective on who you are.

Perspective users can capture moments via audio, text, or pictures, and reflect about them via prompts and personalized experiences generated with AI.

the iOS app had over 100 paying subscribers after release, with weekly product updates and hundreds of user moments created.

brand identity
mobile app design
product design
←→
→←
Hand holding the Perspective app with a picture Moment being displayed.
Perspective logotype.
Perspective as seen in iOS App Store.
Perspective iOS App Icon.
Picture of a girl with red flying hair with the Joy emotion badge on top.
Perspective emotion symbols grouped together in perspective.
Shades of green representing the sentiments grouped under Joy.
Man holding baby with care with Care emotion label on top.
Man walking into sunlight with the Surprise emotion badge on top.
Blue-colored circles around the the theme Family with a New Highlight.
Text entry overlaid with layers forming a lock icon to simbolize Perspective’s users privacy.
Pink audio wave with Gratitude emotion label on top.
Phones in perspective with full-screen moments open.
iPhone mockup with Perspective app displaying its home screen.
Waveform colored via Perspective sentiment algorithm.
Statement with sentence "Discover your life’s Highlights" alluding to Perspective AI summarization of moments.

more coming soon.

credits

I was Perspective’s founding designer, responsible for designing the product UI, UX, and visual identity.

great collaboration with Austin Walper (CEO), Dalmar Hussein (CPO), Graeme Douglas (Founding Machine Learning Engineer), Mario Ianotta (Founding iOS Engineer), and Nicolai Doreng-Stearns (Product Designer Advisor).

produced at Perspective from 2022 to 2024.

Block
Design
System

a conversion-driven landing page design system rooted in continuous optimization created for Postclick, an Instapage startup.

a flexible library of 18 modular landing page sections ⸺ blocks ⸺ with interchangeable designs, allowing machine learning to determine which styles drove the highest conversion rates.

landing pages created with Postclick’s MVP achieved 16% average conversion rate and 56% average conversion lift, leading to over 500 million conversions across 3M post-click experiences.

design systems
front-end development
product design
←→
→←
A grid of landing page blocks from Postclick’s Block Design System in the Postclick platform.
A slide about Postclick’s Block Design System Design Principles. The slide reads “What makes a block a block?”
A slide about Postclick’s Block Design System Design Principles. The slide reads “Scalability / Measurability / Modularity / Interchangeability.”
A phone and two tablets with blocks from the Block Design System. Blocks’ responsiveness are represented across the devices’ screen sizes.
1/3 mockup displaying the interchangeable properties from a block.
2/3 mockup displaying the interchangeable properties from a block.
3/3 mockup displaying the interchangeable properties from a block.
Diverse phone mockups displaying variations of the layout of a Hero block, all with the same content.
GIF showing diverse Hero styles from the same HTML block.

a single HTML block could change its visuals via a pool of styling options, such as interchanging between dark and light modes, copy and image positioning, sharp and circular radius, or bigger and smaller typography scales.

A collection of landing page templates using components from the Block Design System is displayed in the Postclick platform.
View from the Postclick SaaS Platform where user goes through layout recommendation.

users could assemble landing pages from an existing library or customize their blocks styling via the Postclick SaaS platform.

Slide from the second version of the Block Design System. The slide reads “Block Design System 2: Atomic Design.”
Slide from the second version of the Block Design System. The slide reads “Design and development.”
Slide from the second version of the Block Design System. The slide reads “Ions.”
Slide from the second version of the Block Design System. The slide reads “Atoms.”
Slide from the second version of the Block Design System. The slide reads “Molecules.”
Slide from the second version of the Block Design System. The slide reads “Organisms.”
Slide from the second version of the Block Design System. The slide reads “Blocks.”
Slide from the second version of the Block Design System. The slide reads “Templates.”
FIgma files displaying the Atomic Design structure from the second iteration of the Block Design System.
Figma sheet describing the Button component from Block Design System.
Figma sheet describing the Call-to-action component from Block Design System.
Figma sheet describing the FAQ Item component from Block Design System.

feedback from the Postclick platform MVP shaped an improved version of the Block Design System, leveraging TailwindCSS, React components, and Atomic Design.

Phone displayed one of the landing pages from the Block Design System. The page has light background.
Phone displayed one of the landing pages from the Block Design System. The page has dark background.
Phone displayed one of the landing pages from the Block Design System. The page is displayed in a notebook desktop.
Group of phone mockups in perspective. Each phone has a different variation of a landing page created with the Block Design System.
Presentation slide featuring Block Design System performance metrics.
Presentation slide featuring half of the Block Design System team.
Presentation slide featuring half of the Block Design System team.

the block library launched to a select group of Instapage clients and we maintained a constant feedback loop with them.

process
01
discover:

understand the problem, develop POCs, and work with machine learning and design teams to explore how to classify and store block data.

02
define:

reduce scope from 400 to 18 blocks exploring style inter-changeability via CSS custom properties to deliver multiple outputs from a single block.

03
develop:

designing and developing blocks, as well as SaaS platform tools to control block styling, versioning, and page layout.

04
deploy:

test landing pages and gather users’ feedback, leading to the development of an improved version of the system.

credits

I was the leading designer of the project during its 1st and 2nd versions, responsible for the block design system maintenance and consulting on front-end architecture.

ongoing collaboration with Nicolai Doreng-Stearns, André Mértens, Ivan Aleksic, and mentoring of Vitória Feitosa. 1st version collaborators include Mike Perla, Martin Lasarga, Uldis Leiterts. feature development by Nathan Friemel, Kelvin Campos, Arcadio Quintero, Dawson Turechek, Jacob Trump, Jonathan Rodrigues, and Matheus Garcia.

2nd version collaborators include Diego Makarausky and Evan Dierlam. feature development by Nathan Wheeler, Adrian Haynes, Emerson Silvério, Josh Mabry, Joel Corrales, Justin Green, Matheus Franco, Bruna Vaz, and Murillo Carvalho.

produced at Instapage from 2020 to 2022.

Rebranding
Avenue
Code

refreshing Avenue Code brand with diversity, cohesiveness, and scalability in mind.

the updated brand identity featured a vibrant color palette and a new typeface, better representing the IT consulting company across business decks, social channels, digital content, and office artwork.

post-rebrand, employee engagement increased, contributing to reducing attrition and improving the company’s Glassdoor page.

brand identity
motion design
print design
←→
→←
Animated Avenue Code logo.
Key artwork for the rebranding campaign featuring Avenue Code services as subway stations connected by colorful subway lines.
Mood board from explorations with rebranding visuals.
Subway maps from São Paulo that served as inspiration for the rebranding.

Avenue Code’s brand history motivated exploring urban-inspired visuals from cities where the company has an office, like New York, San Francisco, and São Paulo.

Cover slide from the Avenue Code Brand Guide featuring the company logo and the subway key artwork.
Slide from the Avenue Code Brand Guide featuring the header Our Voice.
Slide from the Avenue Code Brand Guide featuring a quote from Carl W. Buehner. The quote reads “They may forget what you said – but they will never forget how you made them feel.”
Cover slide from the Avenue Code Brand Guide describing the company’s voice.
Cover slide from the Avenue Code Brand Guide featuring the Avenue Code logo sizing guide.
Slide from the Avenue Code Brand Guide featuring the brand signature mood board.
Slide from the Avenue Code Brand Guide featuring Trust, one of the brand moods.
Slide from the Avenue Code Brand Guide featuring the brand typeface, Overpass.
Artwork created to decorate meeting rooms names as if they were subway lines. The label reads “Paraíso Training Room,” a subway station from São Paulo.
An Avenue Code employee badge mockup decorated with subway lines.
Key artwork for the rebranding campaign featuring Avenue Code services as crosswalks lanes with people walking over them.
Artwork created to decorate meeting rooms names as if they were subway lines. The label reads “Ana Rosa Booth,” a subway station from São Paulo.
Animated Avenue Code Design Week logo.
Crosswalk artwork applied over one of the walls of Avenue Code São Paulo office.
Key artworks applied in notebooks with Avenue Code logo on the side.

We scaled the new visual identity through brand guidelines, presentation templates, office apparel, notebooks, digital media, and office artwork.

Colorful cards featuring Avenue Code eight brand moods.
Grey t-shirt featuring one of Avenue Code brand moods, ”Trust.” The t-shirt reads “Trust is our Monday Morning Mood.”
Photo of a hand holding eight cards, each colored with a different color from Avenue Code new brand guide. Each card describe one of Avenue Code eight brand moods.
BW photo of Avenue Code brand rollout event.

special brand assets were created for the rebranding rollout campaign, such as cards and tees featuring each one of the eight company promoted values.

process
01
research

understand the company’s history, brand, values, and pain points through interviews and secondary research to define the project’s goals and metrics.

02
ideation

design mood boards and explore colors, typography, and patterns to represent the refreshed themes and values.

03
implementation

create and scale brand guidelines to develop an identity system that spans from digital to physical spaces.

04
rollout

finalize and launch a campaign to celebrate the brand refresh and engage employees with the new brand.

credits

this project was co-led by myself in close collaboration with the Director of Creative Services and the Head of Design of Avenue Code.

research and brand concept: Holly Camponez, Bernardo Matos, and Pedro Froes. visual identity system management: Pedro Froes. visual & motion design: Pedro Froes, Marina Ferreira, Esdras Lopes, and Aurelízia Lemos. landing pages and email development: Pedro Froes and Sthefanie Mingall. rollout campaign: Avenue Code Marketing and HR.

produced at Avenue Code in 2019.