Leonora E-commerce

The brief

Grupo Leonora sells stationery, office and craft supplies under its own brands — among them Leoarte, Leotack, Letron and Jocar Office — to businesses that buy in quantity. The brief was a complete redesign of the B2B store. It had to work like a trade counter, not a shop window: prices only for registered customers, a minimum order, credit and points on the account, a sales representative behind each customer, and a way to put together a quote instead of paying at once.

B2B was the focus. The consumer store (B2C) came later as a project of its own, built on the same design system and inheriting its patterns, without a design of its own.

What I did

Two roles, one after the other and then side by side.

The design, end to end. Research, wireframes, an atomic design system and the complete UI in Figma: the header and menus, the home, department and product pages, the basket, the sign-up and the login, on desktop, tablet and phone, every state drawn.

The build, as e-commerce tech lead. The store was developed — front end and back end — almost entirely by Econverse, an agency in São Paulo; I helped with parts of the front end. I led the execution on Leonora's side: running the project, the developers' schedules and the priorities, and keeping what was built true to what was designed.

The header

The header changes with who is looking. A visitor who isn't logged in sees the whole catalogue and the way in — Enter or sign up — with a line in the top bar saying why prices are missing. A customer who is logged in gets the trade counter: their open quote, the minimum order, their credit and points along the top, and a basket button that shows its value as well as its count.

On a phone the header is three rows on arrival — the logo with the account and the basket, the search, and the highlights as chips — and folds to the search and the basket once the page scrolls, so the two things a buyer comes back for stay in reach.

Departments and menus

Two ways into the catalogue sit side by side in the second row: Departments, which opens a mega menu over the page, and the departments themselves — School supplies, Office, Crafts, Computing — with the brands and the week's highlights (Black Friday, launches, best sellers, lowest prices) after them.

In the mega menu the departments run down the left in the brand's blue; hovering one lists every category it holds, alphabetically, in columns. On a phone the same structure becomes a drawer: the account at the top, then the highlights, then each department as a row that opens in place, and the routes to a quote, a representative and the help centre at the foot.

The pages

The home page leads with the brands as circles and the campaigns as banners, then rails of products — launches, lowest prices, a row for each brand — each card with its code, its price, a quantity stepper and the button to add it. The department page puts the filters beside the grid on a desktop, and as chips above it on smaller screens. The product page keeps the price, the quantity and both actions — Add to basket and Add to quote — above the fold, with the description and the technical sheet (packaging, case and master-carton quantities, the sales multiple) below.

On a tablet the pages keep the desktop's order in a single column, with the rails and banners scrolling sideways.

The basket

The basket opens as a drawer over whatever page the customer is on, so adding to it never takes them away from the catalogue. Its first line is the one a trade customer needs: how much more it takes to reach the minimum order, with a bar that fills as they add. Each item keeps its stepper, the breakdown of the total opens on request, and Finish order sits at the foot with the total beside it.

The presentation ends the purchase at the drawer: there are no checkout screens on the board. The checkout was VTEX's own, with extra validations added for trade orders.

Logging in with a CNPJ

Trade customers don't have a password to forget. The login page offers the two doors side by side — I already have access and I want to sign up — and logging in starts with the company's CNPJ. The store sends an access code to the email on the account, shown half-hidden so the customer knows where to look, and the code opens the session.

Each way it can go wrong has its own state and its own way out: a CNPJ that isn't registered offers to sign up; a wrong code says so, offers to try again and points to support.

Signing up

Signing up is six short steps, numbered and listed down the left so the customer always knows how far they are: the company, the person responsible, the address, the sales representative, the legal terms, and a confirmation with the way to log in. The address comes from the company's registration with the Receita Federal and is shown to be checked, not typed — a lookup Econverse built as designed. The representative is picked from a list, or the customer says they don't have one.

Campaigns and brands

The same system carried the store's campaigns and its brands' own pages: Leo Friday, the Black Friday campaign, and a page for Letron, the electronics line, with a section on the gaming market.

The team

A redesign this size is a lot of people. At Grupo Leonora:

• Tulio Rocha — head of e-commerce, leading the whole project.
• Me — leading the execution: the design, and the build as e-commerce tech lead, with a hand in the front end.
• Guilherme Fleck — graphic design.
• Soraya Galdino — who knew the internal processes best, and helped shape the design so it spoke to the company's own systems.
• Thiago Marquezini and José Roberto Kretzer — the group's IT.

And at Econverse, who developed the front end and the back end and gave support: Pedro Píramo, the CEO and lead developer, and Lázaro Almeida, in charge of the communication between Leonora and Econverse.