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.​​​​​​​

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.

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.

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.

Redefining the users' 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.

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.

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.

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.

A customized and detailed handoff

We chose different tools to ensure a successful handoff. 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.

Summing it Up

Today, Yorn (and Vodafone) keeps turning younger generations into loyal customers, standing out in the telecommunications sector, led by the purpose of connecting people and building the digital societies of tomorrow.