Simyo

Simyo Responsive

De beste telecom-provider nu ook via tablet & smartphone

Klant: Simyo, Visual Design: Resoluut, Front-end development: TouchTribe, Periode: Najaar 2013, Contactpersoon: Evan Gelders

Waarom responsive?

Het aanbieden van een responsive website is voor je bezoekers én commercieel erg aantrekkelijk. Tijdens de verschillende fases van het koopproces worden namelijk verschillende formaten devices gebruikt. Simyo vroeg ons dan ook om de user experience van hun website voor deze schermformaten te verbeteren, zodat de conversie flink kon worden verhoogd.

Daarom responsive

Dit is wat de responsive site van Simyo opleverde in de maanden na livegang:

conversie funnel mobiel
overall conversie mobiel
overall conversie

Het responsive principe

Dezelfde inhoud en boodschap geoptimaliseerd voor alle schermformaten. Ontworpen vanuit het gebruik op een mobiele telefoon, maar net zo eenvoudig te gebruiken vanaf een iPad, laptop of desktop.

Responsive principe home


Afhankelijk van het schermformaat wordt de inhoud van de pagina naast elkaar, óf onder elkaar geplaatst. Doordat op mobiel de inhoud onder elkaar komt te staan, zal de gebruiker (meer) moeten scrollen om alle content te zien. Daarom is het belangrijk om goed prioriteit in de content aan te geven, en de belangrijkste content bovenin te plaatsen.

De responsive homepage

De vertaling van de homepage op mobiel naar de grotere schermformaten is een goed voorbeeld van de prioritering van de content die gunstig uitpakt.

Mobile first

Door eerst voor het mobiele schermformaat te ontwerpen, word je gedwongen om te focussen op welke content prioriteit heeft, én om de inhoud en structuur zo eenvoudig mogelijk te houden. De vertaling naar de grotere schermformaten levert vervolgens een echt ‘less is more’ resultaat op. De homepage is hier een goed voorbeeld van.

Winkelwagen

“More than half of e-commerce shopping sessions come from mobile these days, but only 10 percent to 15 percent of mobile purchases actually come from mobile devices”

~Bill Ready, CEO Mobile Payment Startup Braintree

in Techcrunch

De productpagina verfijnd tot in de details

Een degelijk responsive principe is een goed uitgangspunt, maar de verfijning zit ‘m uiteindelijk in de details.

Bundelkiezer

Op de productpagina’s zijn - naast het toegepaste responsive principe - een aantal elementen in detail verder verfijnd. Een voorbeeld hiervan is de bundelkiezer. Deze werkt op de verschillende formaten net even anders, maar het overzicht van het samengestelde abonnement blijft duidelijk.

Vergelijkingstabel productpagina

Vergelijkingstabel

Tabellen zijn een mooie uitdaging om responsive uit te voeren. In dit geval hebben we gebruik gemaakt van touch input op kleinere devices. Simyo kan hierdoor op de kleinere schermformaten door in de tabel te swipen nog steeds met andere providers vergeleken worden.

De bestelstraat: optimale conversie op ieder formaat

Het bestellen van een abonnement of simkaart moet voor ieder device zo eenvoudig mogelijk zijn.

Bestelstraat

Altijd een 'bonnetje' erbij

We zijn begonnen met een conversie-analyse van de huidige Simyo website, waarmee we de knelpunten in kaart brachten. Voor de bestelstraat hebben we het responsive principe vervolgens verder op maat gemaakt. Zo zorgden we ervoor dat het ‘bonnetje’ - de samenvatting van de bestelling - op ieder schermformaat goed toegankelijk is.

Wat er ook gebeurt, altijd blijven testen

Tijdens deze responsive vertaalslag hebben we het ontwerp constant getest. Daarmee konden we de website nóg verder optimaliseren om aan de wensen van de verschillende type gebruikers te voldoen.

MBTI quotes

Learnings uit usertests

Hiernaast zie je resultaten en quotes uit ons gebruikersonderzoek, die we ordenden in het MBTI-model. Dit model deelt verschillende type gebruikers in op basis van hun beslis-voorkeuren. Zo hebben sommige gebruikers al genoeg aan een eerste indruk van een pagina, om vervolgens over te gaan op aankoop. Terwijl andere gebruikers eerst alle details willen lezen. Hiermee hielden we bij het ontwerpen van alle schermformaten rekening.

Uit de gebruikerstest bleek dat onze oplossingen om de hoeveelheid informatie te presenteren op het mobiele formaat ook op grotere schermformaten beter werkten.

Een beduidend hogere conversie

Uiteindelijk is - naast het leveren van de best mogelijke service - conversie natuurlijk erg belangrijk. Door een scrum-aanpak ging de eerste release van de responsive website al na vier weken live, en waren de gevolgen in conversie al snel meetbaar. Dit is wat de responsive site van Simyo opleverde in de maanden na livegang:

conversie funnel mobiel
overall conversie mobiel
overall conversie