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