Base · From a product grid to a brand experience

During my time at Fail Fast, I worked on the UX definition of a new brand experience for Base. The initial brief was to replace the direct entry into a product grid with a landing page that organized how people explored the catalog. Starting from a benchmark, I defined the content architecture, validated it with the client, and designed the wireframes. The scope then grew to include the related pages and a proposal for product cards and quick view. After the UI team’s visual work, I prepared the final prototype of the brand experience.

When users entered a brand like Adidas, they landed straight on a product grid. They could reach the catalog, but there was no landing page to introduce the brand and offer different ways to explore its range.

The brief couldn’t be solved just for Adidas: the logic had to work later for other brands, with different catalogs and content.

The main challenges were:

• Give each brand its own space for identity and context.
• Make the entry points by gender, sport, and category visible.
• Combine featured items, products, and brand content without losing the connection to the catalog.
• Define a flexible structure that didn’t depend on a single campaign or a fixed product selection.

The goal was to make it easier to move from the brand context to exploring relevant products.

I analyzed multi-brand ecommerce and sports retail sites that already offered this kind of landing page. I broke their pages down into sections and used color coding to compare what each piece of content did, how much space it took, and how it appeared on mobile and desktop.

The classification separated brand identity, local navigation and search, general or gender-based entry points, featured content, product recommendations, promotional content, and sign-up.

Criteria drawn from the analysis:

• Separate orientation from exploration. Breadcrumbs show where users are; the menu inside the brand offers paths to keep going.

• Offer several ways into the catalog. Gender, sport, and category let people start exploring from different points.

• Combine modules with different jobs. Featured items, category shortcuts, and product listings don’t play the same role.

• Separate structure from content. The logic had to hold even when the brand, the products, or the campaigns changed.

  Process

  References → section classification → criteria → content architecture → wireframes.

After the benchmark, I created a diagram that connected navigation, content types, and presentation options. The proposal separated required elements, like brand identity, from options that could vary, like a banner, video, carousel, or grid.

Local navigation included Home, Men, Women, Kids, Sports, and Deals. Each destination changed the context of the content: a general brand view shouldn’t show the same thing as a gender section or a specific sport.

The diagram also set out rules for applying it:

• Adapt the content to the selected brand, category, or gender.
• Use section titles that match that context.
• Suggest different presentation patterns depending on the section.
• Don’t show the deals module if the category has no deals.
• Let people explore a specific sport from the sports section.

A shared structure with adaptable priorities

At this stage, I didn’t have exact sales or search metrics. So the diagram didn’t fix a hierarchy as if it were already backed by that data: it proposed that the choice and weight of the content should follow what sold or was searched for most in each context.

We validated this architecture with the client before moving to wireframes. The diagram also included UI pattern suggestions from the benchmark, so the UI and development teams could see how to apply the logic.

With the architecture clearer, I designed the wireframes for the landing page and the related screens: “see all” views by gender, general sports grids, pages for a specific sport, deals, and search results.

The wireframes defined the order and relationships between modules: from brand identity and catalog shortcuts to featured items, best sellers, deals, and supporting content.

The work included mobile and desktop versions. The diagram itself already suggested tabs for desktop and a collapsed menu for mobile: different presentations that kept access to the same paths.

The point wasn’t to design isolated screens, but to keep a clear relationship between the brand entry point and the levels of catalog exploration.

Bringing purchase closer from the grid

I also defined a UX proposal for the product grid and cards. The wireframes included applied filters, sorting, and checking in-store availability, along with commercial information visible from the listing.

The cards brought together commercial information, stock, and quick-view actions to evaluate the product from the listing. On desktop, I proposed showing an alternative image on hover.

I defined two purchase paths depending on the options each product needed:

• Direct purchase: “Add to cart” for products that didn’t need a size or color choice.
• Purchase with variant selection: “See buying options” when that choice had to be made first.

That way, the card’s action adapted to what the product needed, instead of offering the same direct purchase across the whole catalog.

The quick view brought together images, summary information, and color and size selection. The proposal included a preselected color and enabled “Add to cart” once the required options were chosen. “See more details” kept access to the full product page. Because it opened over the grid, it kept the listing as the context for exploring.

I also explored different mobile layouts: one product per row, two columns, and a horizontal layout.

The wireframes went to the UI team, which defined the visual language and the high-fidelity screens. Then I took those screens to prepare the final prototype, connect the journeys, and make it easier to review with the client.

The prototype let us review the brand experience as a connected journey and served as the reference for development, with a light handoff.

The brand experience was implemented, and its entry point no longer relied only on a generic grid. The landing page added brand context, exploration paths, and modules connected to the catalog.

The current Adidas page on Base (opens in a new tab) shows the experience live, although its content and campaigns have changed since the project.

Context of the overall project: Fail Fast reports that the redesign exceeded its first-year sales targets (opens in a new tab). This is a shared result of the whole project, not something that can be attributed to this work alone.