How did we do it?

Design Thinking Double Diamond Process + SCRUM

Exploring the current context

81%

Bounce rate

1%

Convertion rate

Outdated website: outdated prices and plans for all products

General information was prioritized over specific information

Large number of leads from natural persons and not companies

High number of vanishing points (user distractions)

We decided to make a blueprint so that we can visualize the relationships between the different services and components of the digital sales process — people, places, objects and processes. This helped us understand how the system worked.

After conducting 20 in-depth interviews, we created user personas (archetypes) with the information collected. In a way that allows us to identify and get to know users, and thus empathize more quickly with our users. The creation of personas is a technique that helps us answer questions when making decisions about the functionalities of the digital product.

Identifying the critical points

Once we understood how the Movistar Empresas system and the users worked, we were able to clearly see the critical points that we could improve through the creation of a digital product that responds to those needs: on the user side, showing relevant information and updated and on Telefónica's side, the portfolio of products and services.

Redefining the digital shopping experience

After having identified the end-user and Telefónica design challenges in the research stage, we decided to ask ourselves the following question: How might we? (HMW) with the aim of stimulating creative problem solving:

How could we rethink the current shopping experience in the digital channel, so that users have relevant and up-to-date information on Movistar Empresas' portfolio of products and services and thus avoid the churn of potential customers?

After this co-creation process, we use the Product Layers tool (core, expected, augmented) to understand the features and benefits of the product that will provide better value to current and potential customers. These layers also provide the basis for product differentiation and positioning.

This matrix allowed us to prioritize and define what features (expected layer) we were going to implement in the ideation and development process. Also, establish what features could be added in the future (augmented layer).

Product Layers Tienda Online Movistar Empresas

Defining Design Principles

Once the product features are defined, we define the design principles, which are considerations that form the basis of any good product. This helped us make better decisions in the ideation stage.

Inform users at all times

The user should find enough information to be able to make a purchase decision within the website.

The navigation and information architecture should be predictable.

Empathy to build trust

The user should have a more personalized search option.

Let us remember that new users do not have time, they are demanding when inquiring about what they are going to acquire and compare prices.

Focused on performance and conversion

The user should be able to generate a lead in as few steps and with as little friction as possible.

The form must be visible and request the most relevant data to generate the contact.

Envisioning Information Architecture (IA)

After defining the product layers and the design principles, we held workshops with current clients and non-clients of Movistar Empresas (extreme users) to devise the information structure that our product would have.

For this, we applied the cardsortting technique through Optimal Workshop, this tool allowed us to group, rank and categorize the contents so that they are understandable and recognizable by the end-user (responds to the mental model of the users). After processing the information, we define the following structure:

If we remember the Product Layers matrix, we prioritize 3 functionalities for the launch of this digital product:

Feature 2

Discover new plans and benefits

The end-user can find all the plans and the benefits of each plan and in each product. The information is displayed in an ordered and summarized way. Communication focuses on performance (price-benefit).

The user can also compare not only the price, but also the benefits, so that he can choose the ideal plan for his company.

High Fidelity UI

For the elaboration of the wireframes on high fidelity, we worked with the Design System and the Brand Book of Telefónica, to which components were adapted. As a final result everything was compiled in Figma:

Front-end and back-end: Bringing the design to life

Once we validated that the product complied with the appropriate web and usability standards, we began to layout. The technology used to develop the Movistar Business Online Store was ASP.NET MVC. The Online Store is hosted on Microsoft Azure.

Growth: Paid Ads

After 3 months, we were able to launch the Movistar Empresas Online Store. To do this, we used a social paid media strategy (Google Ads, Facebook Ads) where our goal was to create awareness among users while still obtaining qualified B2B leads.

To achieve this, on the paid side we used an open segmentation, since it was a new product and nobody had it in mind. On the Google Ads side, we use Search (list of B2B keywords for Movistar Companies). In Facebook Ads, we use the LDA (Lead Ad) and PPL (Page Post Link) format to drive paid traffic to the Tienda Online.

facebook

PPL / LDA

google

SEARCH

Impact: Design brings ideas to life

56%

Bounce rate

5%

Convertion
rate

Multi-product website where the entire product portfolio is displayed

Relevant and updated information aligned to performance (offer-price)

Form filter: better quality of qualified B2B leads