Achter de schermen: de nieuwe moneybird.nl

Afgelopen woensdag hebben we de nieuwe moneybird.nl website gelanceerd. De ervaringen, achtergronden en totstandkoming van de nieuwe website deel ik graag met jullie in dit artikel.

Fris, licht en in balans

Ondanks de prima resultaten van de vorige website hadden we al enige tijd ideeën de website te verbeteren. We zochten naar een eenvoudigere boodschap en presentatie. Minder productgericht, meer oplossingsgericht.

In de levenscyclus van de vorige website zijn er veel features bijgekomen in Moneybird, waaronder inkomende facturen, offertes, de iPhone App, etc. Voor iedere feature werd er telkens een pagina toegevoegd aan de tour en kreeg de frontpage er weer een item bij. Telkens maar blijven toevoegen is de garantie voor een grote wirwar. Door met een frisse blik te herstructureren zorg je ervoor dat de boodschap naar de gebruiker kort en bondig blijft.

Inmiddels is Moneybird een veel volwassener product dat veel meer doet dan alleen facturen sturen. In de nabije toekomst zullen we Moneybird nog meer uitbreiden. Daarom is de titel “De eenvoudigste manier om facturen te sturen” vervangen door “Plezier in je financiële zaken.”.

Om de diversiteit van de verschillende onderdelen binnen Moneybird visueel te ondersteunen, hebben we Sjoerd Boerrigter van Trendwerk gevraagd iconen te ontwerpen.

Binnen een tijdspad van slechts enkele weken zijn we van ruwe schets, definitieve schets naar prachtig gestyleerde icons gegaan. Hieronder enkel scans van de schetsen en het eindresultaat.

Schetsen voor Moneybird iconen

Definitieve schetsen van Moneybird iconen

Definitieve iconen Moneybird

Inmiddels gebruiken we de icons al een tijdje in de zogenaamde “Empty states” van de Moneybird applicatie (het scherm dat je krijgt wanneer er nog geen factuur, offerte, contact of periodieke factuur is). Vanaf nu pronken ze ook op de frontpage en de tour.

Daarnaast heeft Trendwerk ons logo een flinke restyle gegeven.

Moneybird logo

Ervaringen en referenties

De diversiteit van gebruikers en toepassingen van Moneybird is ongekend. Het lukt ons niet om een branch op te noemen waarin Moneybird geen gebruikers heeft. Toch krijgen we regelmatig de vraag: “Is Moneybird geschikt voor mij?”. De vorige pagina met gebruikerservaringen beperkte zich tot het weergeven van een Twitter feed met een gebrek aan uitstraling en persoonlijkheid.

De nieuwe ervaringen pagina beantwoord de vraag “Ik ben tekstschrijver, is Moneybird geschikt voor mij?” en geeft onze gebruikers een gezicht.

Onze gebruikers over factureren met Moneybird

Nogmaals dank aan iedereen voor de fantastische inzendingen. Er zijn nog een paar plekjes over op de pagina, dus mail gerust je foto en verhaal!

Openheid en transparantie

Vorige jaar hebben we telefonische support geïntroduceerd. De grootste les die we daarvan hebben geleerd is dat gebruikers graag weten wie we zijn. Hoe is Moneybird ontstaan? Waar zijn jullie gevestigd? Zijn jullie experts? Door de telefoon op te nemen en een conversatie aan te gaan kom je er echt achter wat de vragen van onze gebruikers zijn. De belangrijkste vragen “over ons” hebben we samengevoegd in de nieuwe over ons pagina.

Kortere stap tot conversie

Tot enkele maanden geleden had het aanmeldingsformulier 7 invoervelden. We hebben dit weten te beperken tot 5 velden waardoor het aanmeldingsformulier korter is.

Op de oude versie van de website ging het aanmelden in twee stappen:

  1. Op de pagina met pakketten & prijzen klikt de gebruiker door naar het aanmeldingsformulier
  2. Op het aanmeldingsformulier (hieronder) vindt de aanmelding plaats

Oud aanmeldingsformulier factureren met Moneybird

Het aanmeldingsformulier hebben we geredesigned zodat het direct de transparantie biedt van een eenvoudig aanmeldproces. De onderstaande Mock-up is na een ruwe schets uitgewerkt op papier en later in HTML/CSS.

Mock-up voor aanmelden online factureren

Pas veel later in het traject is de uiteindelijke styling gedaan.

Prijzen en aanmelden Moneybird account

Om de gebruiker focus te geven tijdens het invullen van het formulier vervaagt de achtergrond zodra de gebruiker begint te typen.

Focus op aanmelden voor online factureren

Exit Mephisto, eigen blog software + Disqus

Een van de grootste frustraties van de vorige website was de blog software Mephisto die z’n eigen leven leidde. Naast de website was er een eigen Ruby on Rails applicatie waarin Mephisto draaide. Mephisto had zijn eigen templates, zijn eigen database, zijn eigen login. Verander je een menu item op de website, dan had de Mephisto template ook een update nodig. Even snel de laatste artikelen van het blog op je frontpage uitlezen, dan was een extra databaseverbinding of Ajax request vereist. Onhandig, inflexibel en vooral onnodig. Daarom hebben we besloten om een eenvoudige backend voor beheer van nieuwsberichten te maken waarbij we hebben gekozen voor Disqus voor het beheer en distributie van reacties en trackback vanuit social media.

Tech

Naast de content en structuur hebben we ook de kans aangegrepen om nieuwe tools te gebruiken. De nieuwe website draait op Ruby on Rails 3, daarnaast verwelkomen we Compass (inclusief Sass, Blueprint en Lemonade) in onze ontwikkelomgeving.

What’s next?

De eerste resultaten van de nieuwe website zijn goed. In de komende weken zullen de website op diverse plekken gaan A/B testen met behulp van zoals Google Website Optimizer of Visual Website Optimizer om het maximale eruit te halen.

Deel dit artikel op je favoriete social netwerk