← All work
2024Oficina Reserva

Oficina Reserva:from e-commerceto app

The first app for a menswear brand already strong online: benchmarking, MVP, an atomic design system published as a library and the UI for every screen.

Role

Senior Product Designer

Tools

Figma and FigJam

Scope

Benchmarking, flows, design system and UI

Platform

iOS and Android

Oficina Reserva app home
Home
Collection editorial screen
Collection
Product page
Product
Product search
Search
Empty bag with suggestions
Bag
Some screens from the brand's first app, live since July 2024. Screens in Portuguese.
The problem

A menswear brand strong in e-commerce, with no app to bring customers closer and make mobile shopping simpler.

What I did

Benchmarking, MVP flows and wireframes, an atomic design system published as a Figma library, the UI for every screen and the handoff to development.

Before → after
Before: the brand sold only through its website.After: an app in both stores, with 19K+ downloads and a system that speeds up every new screen.
01 · Context

A brand ready to leave the browser

Oficina Reserva is a Brazilian menswear brand known for its modern look and quality. With strong e-commerce sales, the next step was an app to boost engagement, simplify buying and strengthen loyalty.

Discovery and product strategy were already set. I joined as Senior Product Designer to turn that strategy into a product: MVP definition, visual system and every screen.

02 · Benchmarking

How other brands speak to a male audience

I analyzed direct and indirect competitors looking at three things: the visual elements that position the brand, the components that highlight key actions, and the interactions that shorten the path to purchase.

Clickable presentation of the product listing benchmark. Open in Figma ↗
03 · Flows and wireframes

Deciding the MVP before drawing the first screen

With the PO and the product team, I designed the app's flows and wireframes. That is where the MVP became clear: only what was essential to the strategy and to the shopper's needs.

Map of the app flows and wireframes
User flow and wireframes.
04 · Design system

An atomic system, published as a library

I built the design system on atomic design. Tokens for color, type and spacing at the base; atoms such as buttons; molecules such as form fields; and organisms such as navigation bars.

I published it as a Figma library, so every project file drew from the same source and every update reached all screens at once.

The design system in Figma: browse the tokens and components. Open in Figma ↗
05 · UI

Every component designed for when things go wrong, too

I organized screens by feature and designed the edge cases of every component: empty lists, errors, loading states and permissions. Each screen and interaction shipped with documentation and handoff, which kept the design intent intact through implementation.

Profile screens, with states and documentation. Open in Figma ↗
06 · Results

Launched in July 2024, in both stores

Before

The brand sold only through its website.

After

A consistent app on iOS and Android, with strong adoption for a new product.

Metric: downloads since launch on July 7, 2024.
19K+downloads since launch
2platforms, iOS and Android, with the same experience
1Figma library as the single source of the system
4system layers: tokens, atoms, molecules and organisms
07 · Learnings

What I took away

  • Craft lives in the details nobody asks for. Edge states are what separate a pretty screen from a product that works.
  • System first, screens second. With the library published, every update became faster and more consistent.

What I would do differently: define analytics events together with the components, to measure each flow from launch.