Claro E-commerce

I recreated the showcase pages for mobile, internet and TV plan.

About

About

We were tasked with redesigning the showcase pages for one of the largest telecommunications companies in Brazil. Following briefing sessions and research synthesis, the goal was to create clean, objective pages enhanced with subtle micro-interactions to make the experience more engaging.


A significant portion of the work focused on the design of card-based components, which serve as the primary structure for organizing and presenting information clearly and efficiently.

My role

My role

I was responsible for the full visual direction of the project and actively participated in ideation and research. A key part of my work involved studying references, narratives, and competitors to define the most effective way to structure information within card-based layouts.


Multiple design variations were explored and tested through to the prototyping stage to validate clarity, usability, and consistency.

Design Process

Design Process

As a fast-paced project, we had limited time for ideation and research. Even so, we were able to gather and synthesize the necessary insights to design pages that are informative, relevant, and focused on user needs.

The solution also leveraged a database provided by the client, which powers the content currently live on the site.

Mobile first

Mobile first

User research showed that the majority of conversions were made on mobile devices. Based on this insight, we adopted a mobile-first approach, prioritizing clear, accessible navigation and ease of use—even for users with limited familiarity with technology.

Wireframes

Wireframes

We designed wireframes that closely mirrored the final layouts, allowing us to define structure, hierarchy, and interaction behavior early in the process. This approach helped ensure accessibility requirements were considered from the start, while making primary calls to action immediately clear.


By documenting element behavior and user flow at this stage, we aligned design and development early on, reduced ambiguity, and accelerated decision-making throughout the project.

Micro interactions

Micro interactions

Micro-interactions were designed to make the experience more memorable by reinforcing a sense of direct manipulation and immediate feedback. Subtle animations and state changes help users understand the results of their actions, creating clarity and confidence as they move through the interface.


Rather than serving as decoration, these interactions support usability, guide attention, and add rhythm to the experience—enhancing engagement while keeping the interface lightweight and purposeful.