FV

CARDS REDESIGN

  • 2023

    e-commerce project

    2023

    e-commerce project

    2023

    e-commerce project

    2023

    e-commerce project

    2023

    e-commerce project

ABOUT THE CLIENT

Telecom Argentina is a leading telecom company in the country, offering mobile, internet, TV, and cloud services. Its ecommerce platform provides a seamless way for users to purchase devices, accessories, and service bundles with flexible payments and exclusive online offers.

Company size

21000 employees

Industry

Ecommerce - Telco

ROLE

Product designer

RESPONSIBILITIES

System Design

User Interface Design

TEAM

3 Product designers

1 Product owner
1 Bussines analyst

FIRST, THE PROBLEM

WHAT WE HAD?

The card had issues and didn't adapt well to changes, for examplo we couldn't test improvements like product scarcity for boosting sales. Also, the design remained unchanged for a long time, and the "Precio especial" (special price) was added later.

DESKTOP

1

The focus is lost from the main card due to the attention points.

2

The "lanzamiento" (Launch) tag should grab the user's attention more and stand out above the card.

3

They lack an order, and depending on their content, they will create more spacing between the internal components.

4

The name doesn't carry much weight within the card and doesn't grab the user's attention.

5

Having both the financing and the name results in a lot of text lines.

MOBILE

1

The internal spaces break even more than on desktop.

2

The 'promotions' repeat senselessly.

3

The cards have a very vertical composition, not making use of the internal spaces.

4

The price is not understood correctly.

In this e-commerce, they aim to foster customer loyalty among multi-service customers by offering a "precio especial" (special price). And this, having up to 3 prices for a product, was the biggest problem we had

"3 out of every 10 people complained in the NPS survey that the price they were charged was not the one they were entitled to."

THE RESEARCH AND BENCHMARK

THE RESEARCH

AND BENCHMARK

I looked into e-commerce sites nationally and internationally to see how they displayed products and understood positioning logic. We considered "progressive disclosure" to gradually reveal products instead of showing everything at once.

For design, we took mobile measurements as the primary reference since we needed to fit the cards in a small space. Additionally, mobile accounted for 84% of the web traffic at that time.

  • Allow more text

  • The accompanying items are not noticeable due to their size.

  • Images appear too small.

  • Larger images, the product stands out

  • Increased visual presence.

  • Long scroll

  • Doesn't allow showcasing as many products, and navigation isn't easy.

  • It's similar to what we have today.

  • Allows displaying more cards, hence more products.

  • The cards take up space in pixels from the sides due to their size; this could be avoided.

🧐

And... what would happen if we stop using cards?

FIRST EXPLORATIONS

INITIAL TEST

With these initial explorations, and in collaboration with the design team, we decided to test a hypothesis that we formulated based on the designs: "If the Special Price is encapsulated next to the corresponding price, people will understand it as an exclusive price for certain customers".

$147.999

12% Off

$ 129.999

Precio especial

$116.499

We opted for a design similar to the one above for testing, prioritizing user feedback. Using the Maze tool, we tested hypotheses related to the card design with 1,147 users on the E-commerce platform. This involved open-ended questions, a 5-second test, and a choice between two options to measure user perception.

From a product perspective, we not only had to address the issue of the "special price" but also consider potential future functionalities that would be added. With these ideas analyzed and defined, we have to design the final component.

FINAL DESIGN

1

We concluded that the "cards" format was unnecessary on mobile, as the spaces between them were not effectively used, and mobile behavior naturally directs users to the individual product detail pages.

Slide to see the changes

1

We concluded that the "cards" format was unnecessary on mobile, as the spaces between them were not effectively used, and mobile behavior naturally directs users to the individual product detail pages.

Motorola Edge G30

128 GB

$ 147.999

Hasta 3 y 6 cuotas sin interés

Hasta 9 cuotas en tu factura

Motorola Edge G30

128 GB

$ 147.999

Hasta 3 y 6 cuotas sin interés

Hasta 9 cuotas en tu factura

Adding prices

Adding colours

Adding launching tag

Adding promotion items

Adding last units tag

Desktop

Mobile

TAP ANYWHERE TO INTERACT

  • Thanks for watch

    Thanks for watch

    Thanks for watch

    Thanks for watch

    Thanks for watch

    Thanks for watch

RESULTS

With the new design we achieved a 38% increase in the number of users who accessed the product details directly. While this increase can be attributed to various factors, such as product pricing or better deals compared to competitors, we believe that the new design helped differentiate hierarchies and highlight the benefits the store offered.


One of the primary challenges we faced was understanding the pricing that corresponded to each user. After implementing the cards, we noticed a 12% improvement in usability according to the NPS survey, and we have not received any complaints about incorrect price charges to date.

INCREASE THE STARS

UX DESIGN - 2021

Arise as the necessity to increase and enhance the engagement of individuals in the reviews in the app store.

See other

projects

CARPOOLEAR APP

DISCOVERY - 2022

Research and redesign of the journey creation flow based on user needs for a carpooling app.