How I Created A Prototype For T-Mobile To Gather Valuable Lessons — A Case Study
by Sander Crombach
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.
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.
When T-Mobile bought this new product ‘Thuis’, they also ‘bought’ the already existing webshop that came along. But because it belonged to another brand, it doesn’t suit T-Mobile of course.
So I designed a new webshop prototype to gather lessons how to make a better one. And to study if we could create a sales funnel that has a more ethical approach to selling this new product to the T-Mobile customers.
But how do you create a prototype you can learn from? There are 4 steps to creating valuable prototypes:
STEP 1: Understand the product and the market
STEP 2: Develop new ideas you want to test
STEP 3: Designing the prototype
STEP 4: Test and learn
STEP 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.
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.
STEP 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.
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?).
STEP 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.
After drawing enhancements on them together, optimise your design and make sure the entire flow has all the ideas you want to test.
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.
STEP 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.
If you enjoyed this article and would like to read more articles like this in the future, don’t forget to click the 👏
Sander Crombach is an award winning Senior Digital Art Director and UX / Visual Designer. He designs user centric brand identities, digital products and virtual experiences. Visit his portfolio, follow him on Instagram and connect with him on LinkedIn.
