Baldwin bouwde de eerste versie van de webshop voor Smappee in 2013. Gebaseerd op de bestaande branding, werkten we een design uit en verzorgden we de productfotografie. Bij het development kwam heel wat maatwerk kijken. Smappee tovert je huis om tot een slimme, energiezuinigere woning. De Smappee energiemonitor bezorgt je realtimegegevens over je energieverbruik en het bijhorende kostenplaatje.
Webshop: smappee.com
Op naar meer groei
In de daaropvolgende jaren kende Smappee een sterke groei. Het product gamma werd uitgebreid: naast de intiële monitor voor elektriciteitsverbruik, kwamen er nog twee andere monitors op de markt: een monitor voor de opbrengst van zonnepanelenen een monitor voor gas- en waterverbruik. De slimme technologie van Smappee werd bekroond met enkele belangrijke awards en het bedrijf haalde intussen meermaals de internationale pers.
De groei van Smappee vroeg om een hertekening van de huidige webshop, met het oog op:
- Een grotere gebruiksvriendelijkheid
- Een goede visibiliteit voor elk product
- Een goede vindbaarheid in Google
Een uitdaging voor het Baldwin marketing team
In september 2015 richtten we binnen Baldwin een eigen marketingafdeling op. CMO van Smappee, Karen Smessaert, zag in de nauwe samenwerking van marketeers en developers binnen hetzelfde bedrijf een opportuniteit, en besloot om ook op online marketing vlak met Baldwin samen te werken.
Onze marketeers gingen de uitdaging aan: de webshop werd onderworpen aan een uitgebreide usability studie, waarbij elk facet van gebruiksvriendelijkheid onder de loep werd genomen.
Op basis van deze studie werden er wireframes uitgetekend, die illustreerden hoe de nieuwe pagina’s er konden uitzien. Het bestaande design werd op heel wat vlakken geoptimaliseerd:
Based on this usability study, we drew wireframes, illustrating what the new pages could look like. We improved the initial design on many counts:
De navigatie als houvast
De navigatie is een van de belangrijkste elementen van een website. Het is de wegwijzer en de houvast van de bezoeker. De Smappee webshop heeft een duidelijke primaire en secundaire navigatie. De primaire navigatie bevat een overzicht van alle Smappee producten, waardoor de bezoekers op elke pagina een overzicht over het product gamma behouden.
Storytelling pagina’s per product
Op de bestaande webshop werden de installatie en de voordelen van de originele energiemonitor uitgelegd met behulp van geanimeerde illustraties. In het nieuwe design werd er voor elke monitor zo’n ‘storytelling pagina’ voorzien. Deze pagina’s bevatten alle nodige informatie om als landingspagina’s voor de online marketing campagnes te fungeren.
Focus op gebruiksvriendelijkheid in de webshop
Hoewel het product aanbod van Smappee vrij beperkt is, is de product structuur toch complex. De Smappee energiemonitor is wereldwijd te koop, en moet dus geleverd worden met de plug die de klant in zijn land nodig heeft. In landen waar meerdere plugs gebruikt worden, zoals Denemarken, moet de consument zelf de geschikte plug kunnen selecteren. Het moest voor de gebruiker gemakkelijker worden om een geschikte keuze te maken: de juiste monitor met de juiste plug.
In overleg met de klant opteerden we voor een overzichtspagina die in enkele bulletpoints een kort overzicht van elk product geeft, zodat de consumenten de verschillende monitors kunnen vergelijken. Voor meer informatie over één monitor, kan de bezoeker doorklikken naar een detailpagina met meer informatie en een installatie video.
Een responsive design
Responsiveness was ook heel belangrijk voor Smappee. Op de bestaande webshop was enkel de homepagina en Smappee Pro pagina mobile responsive gemaakt. Het aantal gebruikers op smartphone en tablet nam toe. Om de gebruikservaring voor deze bezoekers te optimaliseren, is de nieuwe versie van de webshop volledig responsive gemaakt.
Referenties als trustbuilder
Naarmate de populariteit van Smappee groeide, werd de Energiemonitor opgepikt en getest door heel wat kwaliteitskranten en professionele publicaties. Deze referenties zijn echte trustbuilders voor het relatief onbekende product en verdienen daarom een centrale plaats op de webshop. Naast een eigen pagina, kregen ze ook een plaats onderaan elke storytellingpagina.
Een succesvolle implementatie door de design en development teams
De wireframes dienden als een blauwdruk voor de redesign van de webshop. Na goedkeuring van de klant werd het nieuwe ontwerp ontwikkeld.
Voor de referentiepagina maakte ons design team eerst een gedetailleerd ontwerp. De storytelling pagina’s werden gebaseerd op een bestaand ontwerp, en de optimalisatie van de e-shop pagina’s werd gebaseerd op de wireframes.
Een goede samenwerking tussen de marketing en development teams en een nauw overleg met de klant waren de sleutel tot het slagen van het project.
Webshop: smappee.com
