Vodafone

— working together since 2019

On Every Gen Z Pocket

  • Marketing Website

Work Type

Product Strategy

UX Design

UI Design

Front-End Development

Tech Stack

  • Divio

    Divio

    Divio
  • Docker

    Docker

    Docker
  • JavaScript

    JavaScript

    JavaScript
  • HTML

    HTML

    HTML
  • Sass

    Sass

    Sass
  • Storybook

    Storybook

    Storybook
  • Vue.js

    Vue.js

    Vue.js
  • TypeScript

    TypeScript

    TypeScript
  • GitHub Actions

    GitHub Actions

    GitHub Actions
Full project overview

Work Type

Product Strategy

UX Design

UI Design

Front-End Development

Tech Stack

  • Divio

    Divio

    Divio
  • Docker

    Docker

    Docker
  • JavaScript

    JavaScript

    JavaScript
  • HTML

    HTML

    HTML
  • Sass

    Sass

    Sass
  • Storybook

    Storybook

    Storybook
  • Vue.js

    Vue.js

    Vue.js
  • TypeScript

    TypeScript

    TypeScript
  • GitHub Actions

    GitHub Actions

    GitHub Actions

Background

Yorn, a Portuguese brand created by Vodafone, the multinational telecommunications company, has been connecting young people and students since 2000.

They reached out to Pixelmatters with two particular goals — improve conversion and prepare Yorn.net to be more flexible and scalable. 
The website needed to be redone from scratch to become more modern and modular, but above all, reflect a visual identity that speaks to younger generations like Gen Z.

Yorn website screens

Challenge

Rethinking Yorn's website experience for the younger generation was one of the main challenges. The entire onboarding experience had to change, so Yorn could speak the same language as Gen Z — digital natives that have grown with a smartphone in their hands.

Besides this, Pixelmatters had to build an easy-to-use and flexible website with scalable components giving more autonomy to the Vodafone's team later on.

Yorn User Persona Description

Working with Vodafone

Communicating, adjusting, collaborating. That was the reality from the get-go. Despite Vodafone already having a detailed briefing, we were part of the product's upcoming strategic decisions. Together, Vodafone and Pixelmatters' teams discussed requirements, fit and matched different deadlines, essential to the success of Yorn's new website.

Pixelmatters and Vodafone's teams collaboration

Redefining the user's journey

The conversion flow had to be flawless — Yorn.net had to turn users into customers. Redefining the users' journey changed Yorn.net's experience (and its conversion rate). After identifying the current website pain points, both teams defined an entire new conversion flow, with great support on wireframes. It was also necessary to specify all users' journey steps before reaching a final version.

Pixelmatters' conversion flow explorations.
Pixelmatters' conversion flow explorations.

Mobile-first it is

What else was crucial in finding our way to a remarkable online experience? Thinking mobile-first. The entire strategy had to go hand in hand with a generation always connected with their mobile phones — information hierarchy, navigation, and usability.

After each step of the mobile experience, we also defined the desktop counterpart, guaranteeing that the experience wouldn't impact bigger screens.

Yorn's partnerships area

Incredibly modular and scalable

Pixelmatters created, designed, and developed a components library that expressed our quality standards while providing complete flexibility and autonomy for Vodafone's team. 

Each component was reusable and adaptable to different states and scenarios, bringing high agility when creating new pages on Yorn.net.

Yorn's components

Beyond a technical decision

Being a component-oriented project, we had to find a technological solution to work smoothly as the bridge between Pixelmatters and Vodafone's teams. And Storybook was the perfect match.

Besides building UI components and pages in isolation, Storybook let us run QA tests and document the components used by Vodafone's team, connecting the dots on both teams' communication and collaboration.

Storybook as the technological bridge between Pixelmatters and Yorn's teams

A customized and detailed handoff

We chose different tools to ensure a successful handoff. On the one hand, Zeplin and semantic-release allowed us to deliver all components' design and source code to Vodafone's team — they could later use those same resources with Adobe Experience Manager, their content management solution.

Pixelmatters also created a style guide with every needed specification for possible future changes to the website's content, allowing Vodafone's Marketing team extra flexibility and autonomy.

Asset guidelines for the creation of the Website’s marketing materials.
Asset guidelines for the creation of the Website’s marketing materials.
  • Márcio Lopes
    Quotation marks

    When you talk to other creative agencies, they like to stand out. Pixelmatters presented a proposal based on what we as clients were looking for to overcome our challenges and not necessarily what they wanted to do.

    Márcio Lopes

    Digital Project Manager

Yorn different mobile tariffs

The result

We've entirely retransformed Yorn's website experience for one of the most relevant telecommunications brands in the Portuguese panorama — it's now scalable, modular, Gen Z tuned, and conversion-oriented.

Yorn new website