Begin deze week hebben we een nieuwe MoneyBird website gelanceerd. Naar aanleiding van de oude website hadden we nieuwe ideeën gekregen om de structuur te verbeteren en de conversie omhoog te krijgen. Daarom begonnen we 2 week geleden aan een restyling van de website. Een leuk proces dat we graag met jullie willen delen!

De frontpage

Op de frontpage wilden we graag duidelijker enkele key facts van MoneyBird weergeven. Zodoende hebben we een aantal bullet points geïntroduceerd. Daarnaast is de call-to-action button duidelijker geworden. De onderkant van de pagina is rustig geworden en moet mensen verder de website in trekken voor meer informatie over ons product.

De oude frontpage

De nieuwe frontpage met de bullet points en nieuwe call-to-action

De uiteindelijke frontpage

Het is mooi om te zien hoe makkelijk het is om rust te creëren op de pagina door goed om te gaan met typografie. De uiteindelijke versie heeft minder verschillende fonts en kleuren en heeft een rustigere uitlijning van de tekst.

Tour

De oude tour van MoneyBird bestond uit één pagina met daarin 4 subitems met uitleg en een screenshot. Omdat we ondertussen meer informatie hadden gekregen over de elektronische handtekening en MoneyBird Post wilden we de tour opsplitsen in meerdere pagina’s. Daarnaast wilden we de screenshots op volledige grootte weergeven, omdat de oude screenshots pas scherp werden zodra je erop klikte.

De oude tour

De nieuwe tour met subnavigatie

Verbeteringen in subnavigatie

De uiteindelijke subnavigatie met de grijze achtergrond kleur

Hoewel de eerste twee versies van de subnavigatie prima zijn, waren wij pas tevreden met de versie met de achtergrond kleur. Op die manier werd de tour namelijk bij de rest van de website getrokken, omdat de andere pagina’s ook allemaal een grijs vlak hebben onder het menu en boven de fold.
Let ook op het omdraaien van de koppen in de laatste twee versies. Eerst was de kop boven het menu de belangrijkste, terwijl die kop op elke subpagina dezelfde tekst heeft. Later hebben we de kop die werkelijk de pagina omschrijft belangrijker gemaakt, dat gaf een stuk rust en duidelijkheid.

De prijzen pagina

Ook de prijzen pagina kon niet achterblijven bij de rest van de website. De oude tabel hadden we enkele maanden geleden geïntroduceerd omdat de oude tekstuele uitleg van de pakketten niet duidelijk genoeg bleek. De tabel heeft nu een grondige makeover gekregen waardoor nu veel duidelijker naar voren komt dat we twee pakketten aanbieden.

De oude prijstabel

De nieuwe prijstabel

Call-to-action en de signup pagina

We zijn afgestapt van de enorme call-to-action button en willen eens kijken of we met een subtielere variant meer mensen kennis kunnen laten maken met MoneyBird. Het is nu mogelijk om door de hele website te lopen met de ‘Volgende’ link onder aan elke pagina. Na de tour belanden de bezoekers op de prijzen pagina, maar aan de onderkant van elke pagina geven we ze ook de mogelijkheid om het gelijk zelf te proberen door een MoneyBird account aan te maken. Dat is nog steeds de beste manier om te ervaren hoe simpel we facturatie willen maken!

De oude call-to-action button

De nieuwe call-to-action links

Op de signup pagina hebben we ook een belangrijke verbetering doorgevoerd, namelijk het elimineren van afleiding. We zagen dat op de oude website veel mensen wegklikken naar andere pagina’s op de website, dus hebben we deze links weggelaten. Dit geeft een veel schonere signup pagina dan in de oude situatie.

Conclusie

Nu is het kijken wat de wijzigingen met de conversie ratios gaan doen. In ieder geval gaan we binnenkort ook starten met multivariatie testen op de website om de conversie ratios nog meer aan te scherpen.

We zijn benieuwd wat jullie van de nieuwe website vinden. Voel je vrij om een reactie achter te laten of ons te twitteren @moneybird.