Vattenfall

Vattenfall

Improving data-dense E-commerce flows

 

Client
Vattenfall
Role
1 of 2 UX Designers
Industry
Utilities  ·  E-commerce
Timeline
2020  ·  8 mos
Client Vattenfall Role 1 of 2 UX Designers Industry Utilities · E-commerce Timeline 2020 · 8 mos

Vattenfall is on a mission to go fossil-free within one generation. To achieve this goal they provide a vast array of different products and services. The challenges lie in how to maintain the quality of these and how to grow and develop their ecosystem, build sustainable digital products, and align product teams on an enterprise level. With the starting point being their main sales channel.
 
 
 
 

Being 1 of 2 UX Designers

I provided a 60/40 ratio with my companion being 40/60, UX/Visual design. Together we formed the glue in an iterative design process, from analysis to synthesis, designing to prototyping, and preparing documentation for developer handoff. We moved steadily from analysing the under-the-hood Nuon.nl website (the predecessor of Vattenfall.nl) to rapidly prototyping and testing what it could look like in the future.
 
Primary call-to-action on the homepage of vattenfall.nl
Primary call-to-action on the homepage of vattenfall.nl

Approach from the business-side

With a team of between 7 to 15 internal and external experts, we focussed on improving conversion, engagement, and usability. Beforehand data was collected on how to reduce the number of steps, reduce time spent in the sales funnel and define an overarching framework for interconnected flows and additional products; district heating, solar panels, and electric charging.
 
Screens of a brand-new responsive design system
Screens of a brand-new responsive design system

Success metrics

Reduce time spent on tasks
Make workflows work for users to provide focus and save time.
Reduce time spent on tasks Make workflows work for users to provide focus and save time.
Reduce bounce rate
Remove probability of users leaving the flow for other touchpoints.
Reduce bounce rate Remove probability of users leaving the flow for other touchpoints.
Increase product-market fit
Make the sales flow a desirable tool for Vattenfall’s brand mission.
Increase product-market fit Make the sales flow a desirable tool for Vattenfall’s brand mission.
 

Develop conceptual UI models

The main principle of interaction design was to maintain a minimal design where focus and tranquility are central and the user is attracted and intrigued by a moment of choice in the form of a group of white tiles placed exactly in the center of the screen. In addition we shaped all different use cases, tasks and interaction flows, and create screen-level interaction designs and details.
 
A sales funnel that attracts, intrigues and delights
A sales funnel that attracts, intrigues and delights

Increased conversion for sales

Through multiple iterations of validation and testing we ensured value of the new salesflow concept. Firstly, a proof of concept was prototyped in Figma followed by user testing with a hand full of people through a indirect network of people with Clutch. Secondly, proposed design patterns and mechanisms connecting to the back-end were developed for test automation parallel to business analysis. Thirdly, a live beta version of the existing product provided oppotunities for A/B testing and continous develeopment with different experts.
 
Personalised flows for all of Vattenfall’s propositions
Personalised flows for all of Vattenfall’s propositions

Made with product-flows in mind

The renewed sales flow enables Vattenfall to reliably collect and aggregate business-critical data regarding users and their behaviour on their channels. A user interface was designed to meet the different needs of the internal legal, sales, brand, accessibility, privacy, technology, and marketing teams. As a result, other product teams adopted our components and learnings to continue building on. After being part of the ‘Digital Sales’ team for 9 months and designing the Salesflow, I joined the ‘Incharge’ team for 3 months to work on their benefit loading loyalty program.
 
Documentation in one tool across product teams
Documentation in one tool across product teams

Spearheaded the use of Figma

When I joined Vattenfall as an external employee, I noticed the sheer quantity of different knowledge storages. From a design perspective only having Sketch, Invision, Zeplin, Abstract, and multiple brand & media libraries to name a few. During their transition to Figma, I formed a group to synthesise knowledge to a shared Figma library (i.e. going from 7 to 2 tools). As a result, we managed to have research, design, and technical documentation in one place for all product teams.

Learnings

What I’ve learned is that having a strong vision for the future is important. However, it’s also critical to set measurable and tangible goals in much closer time (especially in big corporations). The key thing here is to have both. In order to align both business strategy with all the talented teams and individuals, you need both a distant vision that inspires you, and a closer plan that helps you get there.
 
“Julong has a deep understanding of user-centred design principles and methodologies and is able to apply this knowledge to every project he works on. He has a knack for conducting thorough research to gain a deep understanding of users' needs and pain points and uses this information to inform his design decisions. He also excels in project management, ensuring each project is completed on time and within budget. …” – Bas Wijsman, UX Designer & Brand Lead at Vattenfall

Credits

Remy LammersDesign Lead • Bas WijsmanUX/Visual Designer • Danielle HoekProduct Owner • Sanya NikulinSenior Frontend Engineer • Wessel TerpstraSenior Backend Engineer • Khurram KhanSenior Backend Engineer • Ehsan Azhar Backend Engineer • Sander BoetzerFull-stack Developer • Dirk-Jan HoekstraSAP Test Expert • Rob van den BergSenior Online Marketeer • Monique Van DamContent Manager • Mitchell FaberCRO Specialist • Jorg BoumanCRO Specialist • Marlous BeenDigital Analyst.

Home / Journal / Vattenfall

Next case

 
Ready to work together?
Ready to work together?

Find me on Linkedin or get in touch via e-mail.