Freelance Senior UX / CX / Product Designer & Digital Strategist
PROJECT 10/14

T-Mobile — Brand new sales funnel to buy a fixed telecom package for at home, for one of the biggest mobile communications companies on the planet.

keyvisual_portfolio.jpg
 

Role
Interaction Design
UX / Visual Design
Conceptual Design

Creative Fields
Concept
UX
Visual Design

Credits
Hired by creative agency Motorrr

Special thanks to
Paul Verduin and Tamara Zeenny

 

Brand
Early 2017 T-Mobile Netherlands bought a new product from Vodafone called ‘Thuis’ (which means ‘home’ in English); a fixed telecom package for at home.

Project
I was hired by T-Mobile (and creative agency Motorrr) to design a new webshop for this new product. The goals of this new version are to generate more conversion, to be completely mobile friendly and to be more ethical and transparent towards the customers.

This new webshop is not live yet, it’s currently being tested. But this case study is a showcase how to create a prototype in the design process to test and gather valuable lessons for further development.

 

















 

0_productc.jpg
 

When T-Mobile bought this new product ‘Thuis’, they also ‘bought’ the already existing webshop that came along. Because it was made for a different brand, it does not quite fit T-Mobile.

I designed a new sales funnel prototype to gather lessons how to improve it. Plus to research if we could create a sales funnel that could be more transparent in selling this new product to T-Mobile customers.

But how do you create a prototype you can learn from? There are 4 steps to creating valuable prototypes:


S T E P   0 1
Understand the product and the market

S T E P   0 2
Develop new ideas you want to test

S T E P   0 3
Designing the prototype

S T E P   0 4
Test and learn
 

 
 
 T-Mobile Thuis headquarters in Amsterdam

T-Mobile Thuis headquarters in Amsterdam

 The product - T-Mobile Thuis router to receive internet + television channels at home

The product - T-Mobile Thuis router to receive internet + television channels at home

 

















 

bordvast2.jpg
 

S T E P   0 1

Understand the product and the market

The first step is getting to know the product and the market it is in. The guys from T-Mobile Thuis did a great job in explaining everything to me. The market, the new product, the existing webshop. You need to know what you’re dealing with in order to create a prototype you can actually gather valuable lessons with.

 

 
 
 How the market works in one 'simple' drawing...

How the market works in one 'simple' drawing...

 
 


To create a new and better webshop you also have to research the existing one. So the next thing I did was analyzing all the current pages and funnels that already existed, and how they are connected.


This results in an overview of all the pages and funnels and how they are connected, visualized into a big flowchart. Making such a flowchart makes it easier to understand the current webshop and how it works. And — very important — how it can be improved.

 
 
 Flowchart I made of their already existing webshop

Flowchart I made of their already existing webshop

 























 

IKEA_klein2.jpg
 

S T E P   0 2

Develop new ideas you want to test

The big question is of course which features this prototype should have you want test results from? Which features in the current webshop could be improved and perhaps could be eliminated or added? It’s time to develop some ideas to optimise the new flow to base your prototype on.

To give you a couple of examples, I’ll tell you about the ones we wanted to test.

What did we want to learn with our prototype?

A) We wanted to create a very easy to use mobile friendly webshop.

Buying this product is very complex with a lot of product options and different scenarios, depending on where you live and what speed your neighborhood/city has to offer. So there are dozens of different ways you could use this webshop flow and some of those ways can take quite some time to complete. A lot of room for frustration with the target audience.

For this prototype, I came up with a digital version of the IKEA route. If you want to explore all the options the package has to offer (all the possible TV channels you could add, the ability to record TV programs etc.) you can take the ‘long’ route. This route gives you a lot of info about all the extra options, in a visually appealing way. But if you just want a plain product without all the extra’s you can skip all of that by using the ‘short’ route and go directly to the cash register. Or in this case — cause it is a webshop — the checkout.

As you can see in the illustration at every point in the ‘long’ route you can go directly to the end, using the shortcuts. We want to test if this works well for both ‘customer types’, so we can serve a bigger audience.
 

 
 
 Concept of the new flow, based on the routes in IKEA

Concept of the new flow, based on the routes in IKEA

 


B) What we also wanted to test is a more transparent and customisable shopping cart. One with which the customer constantly can change their choices and make them feel they are truly in control of what they’re buying. We really wanted to create a flow in which you can change every choice, anytime.
 

 
 


C) And last but not least we also wanted to test if big visuals and animated gifs — which could sometimes appear in the ‘long’ route — would help in finishing the flow, giving more clarity and therefore making it easier and less frustrating buying the product (maybe it could even be fun?).
 

 
 

















 

3_newsketchesnewwebsite2.jpg

















 

4_new_modulargridsystem4b.jpg
 

S T E P   0 3

Designing the prototype

With all these ideas in mind, it’s time to make the puzzle. To design a new modular grid system that fits all of the ideas and to design the screens so they can be used to make the prototype.

What really helps in this process is printing overviews of all the screens on big papers (for example A0) and hanging them on the wall.

Discuss these overviews with your client (and if you work together, with colleagues) and draw enhancements on them together. This way you can collect ideas from multiple people with multiple expertizes and be sure you’re all on the same page. A sales person from the client side looks at it from a different perspective than the UX designer who is being hired. Plus it becomes easier to see the big picture of the entire flow.

 
 
 Designing the screens

Designing the screens

 Printing the flow and drawing on it helps improving your prototype

Printing the flow and drawing on it helps improving your prototype

 
 



After drawing enhancements on them together, optimise your design and make sure the entire flow has all the ideas you want to test.

 
 Sketch file in which I designed the entire flow with all the different options

Sketch file in which I designed the entire flow with all the different options





















 

7b_designingscreenswithsystem.jpg





















 

8c_printingthescreensandimprovethembydrawingonthem2.jpg
 

When all the screens are final, make exports and import them in a prototype tool, like Invision. There are also other tools, but I used this one.

Create links, overlays, footers and all the other necessary elements until all the screens are connected with each other and the prototype is reading to be used for usability testing.

 
 
 Invision tool with which I created the prototype

Invision tool with which I created the prototype

 

















 

prototype_design1.jpg

















 

simple-mockups2.jpg
 

S T E P   0 4

Test and learn

You’ve now created a prototype you can test. Gather persons who represent your target audience and invite them to use your prototype. Watch them closely how they use and react to it.

The UX designer or creative agency could do usability testing, using tools like Lookback. Or you can hire a professional usability testing company, like Blue Mango Interactive or Braingineers (who actually use brainwaves to see how people react).

Use these lessons to optimise your product and you’re taking a big step towards a final product which you can be sure off will reach your goals.

 























 

clickdemo1.jpg



In need of an experienced designer? Let's do a project together!

 
profielfoto.jpg