Re-design:
Webshop Fruity
Probleemstelling
Bij Fruity wilde men een nieuwe website en een directe koppeling naar de webshop. De oude website bleek gedateerd en te beperkt te zijn.
Men wilde ook een beter ontwerp voor de structuur van de website en de informatie die op de website zichtbaar moest worden.
Hierbij valt te denken aan allerlei informatie over producten, het bedrijf en het bestelproces, maar ook aan informatie over
verschillende soorten fruit en de voedingswaarde hiervan.
Oplossing
Voor Fruity is een webshop ontwikkeld die bezoekers inzicht biedt in alle producten die men te bieden heeft, maar
tegelijkertijd ook de landingspagina van het bedrijf vormt. Er zijn dus geen aparte website en webshop meer, maar
één webshop waar alle nodige informatie zichtbaar is.
Hierbij is vooral goed gekeken naar het informatieontwerp, omdat men producten aanbiedt voor verschillende doelgroepen. Maar ook omdat men graag duidelijke informatie wil bieden over verschillende soorten fruit en een duidelijk inzicht wil geven in de troeven van Fruity. Dit zorgt ook voor een handigere navigatie en een snel inzicht in wat de website te bieden heeft.
Het volledige visuele design is ook herzien en opnieuw ontworpen. Dit is verworden tot een luchtige, frisse stijl die gebruikers aanspreekt. Veel foto's van fruit zijn opnieuw gemaakt en zorgen zo voor een pixelperfecte weergave.
Het bestelproces is ook aangepakt zodat gebruikers makkelijker een keuze kunnen maken en een bestelling kunnen doen.
Hierbij is vooral goed gekeken naar het informatieontwerp, omdat men producten aanbiedt voor verschillende doelgroepen. Maar ook omdat men graag duidelijke informatie wil bieden over verschillende soorten fruit en een duidelijk inzicht wil geven in de troeven van Fruity. Dit zorgt ook voor een handigere navigatie en een snel inzicht in wat de website te bieden heeft.
Het volledige visuele design is ook herzien en opnieuw ontworpen. Dit is verworden tot een luchtige, frisse stijl die gebruikers aanspreekt. Veel foto's van fruit zijn opnieuw gemaakt en zorgen zo voor een pixelperfecte weergave.
Het bestelproces is ook aangepakt zodat gebruikers makkelijker een keuze kunnen maken en een bestelling kunnen doen.
Resultaat
De nieuwe website van Fruity is een succes gebleken voor het bedrijf. Ik heb begrepen dat in het half jaar na de
live-gang van de website, de omzet is gestegen met ruim 30%. In ieder geval blijkt uit testen dat de nieuwe website
beter te gebruiken is dan de oude webshop, die gescheiden was van de website van Fruity. De eigenaren van Fruity zijn
blij verrast met de nieuwe webshop en gaven aan de nieuwe visuele stijl op te willen nemen in andere marketinguitingen.
Werkwijze
Voor dit project werkte ik binnen een klein multidisciplinair team samen met een team bestaande uit een
Front-end developer, een Back-end developer en de product owner. We werkte met een losse Scrum-aanpak met
sprints van 2 weken, waarbij geen dagelijkse stand-up’s waren.
Samen met de productowner ging ik in gesprek met de eigenaren om hun wensen en eisen duidelijk te krijgen. Hierna heb ik een nieuw informatieontwerp en interfaceontwerp ontwikkeld. Vervolgens heb ik in overleg met de eigenaren en de productowner een nieuwe visuele stijl ontwikkeld.
Samen met de productowner ging ik in gesprek met de eigenaren om hun wensen en eisen duidelijk te krijgen. Hierna heb ik een nieuw informatieontwerp en interfaceontwerp ontwikkeld. Vervolgens heb ik in overleg met de eigenaren en de productowner een nieuwe visuele stijl ontwikkeld.
Hierbij heb ik verschillende kleurenpaletten samengesteld en deze toegepast op het interfaceontwerp
om tot verschillende ontwerpen te komen. Deze zijn voorgelegd aan de eigenaren
waarna zij een keus maakten.
Uiteindelijk heb ik een prototype ontwikkeld op basis van de gekozen visuele stijl en uitgevoerde gebruikerstesten. Dit prototype heeft weer model gestaan in een kleine gebruikerstest om het geheel te testen. Na enkele kleine aanpassingen was het prototype voltooid en ben ik de Front-end Developer gaan ondersteunen in de verdere ontwikkeling van de webshop.
Uiteindelijk heb ik een prototype ontwikkeld op basis van de gekozen visuele stijl en uitgevoerde gebruikerstesten. Dit prototype heeft weer model gestaan in een kleine gebruikerstest om het geheel te testen. Na enkele kleine aanpassingen was het prototype voltooid en ben ik de Front-end Developer gaan ondersteunen in de verdere ontwikkeling van de webshop.
Informatie Architectuur
Door de grote hoeveelheid informatie, onderwerpen en functionaliteiten, bleek een goed informatieontwerp cruciaal voor
het slagen van de website. Door eerst een logische structuur te ontwikkelen, kon ik een plan maken voor een sitemap en
de navigatie en dit testen door middel van card sorting testen en tree testing. Uit deze testen kwamen zeer verschillende
perspectieven van mensen naar voren. Uiteindelijk heb ik een informatiearchitectuur kunnen ontwikkelen waar zowel gebruikers
als eigenaren mee konden leven.
Samen met een fotograaf is overlegd op welke wijze producten en fruit zouden worden afgebeeld. En hoe we mensen in beeld konden brengen op de website. Een groot deel van de foto's is uiteindelijk toegepast in het product dat live gegaan is.
Samen met een fotograaf is overlegd op welke wijze producten en fruit zouden worden afgebeeld. En hoe we mensen in beeld konden brengen op de website. Een groot deel van de foto's is uiteindelijk toegepast in het product dat live gegaan is.
Information Design
Een goed informatieontwerp moest zorgen voor een duidelijk inzicht in verschillende onderdelen van de website.
Zo is er natuurlijk informatie zoals prijzen en namen van producten, maar ook allerlei informatie over fruit te vinden.
Door informatie duidelijk in groepen op te delen en overzicht te bieden, heb ik mooie pagina's kunnen ontwikkelen
die heldere informatie bieden over alle onderwerpen die te vinden zijn op de webshop.
Mooie afbeeldingen en tabellen ondersteunen de stukken tekst en bieden overzicht. En het gebruik van kleur scheid verschillende onderdelen op pagina's. Al bij al is er een overzichtelijke en heldere website ontstaan.
Mooie afbeeldingen en tabellen ondersteunen de stukken tekst en bieden overzicht. En het gebruik van kleur scheid verschillende onderdelen op pagina's. Al bij al is er een overzichtelijke en heldere website ontstaan.
Interface Design
Uiteraard heb ik voor de webshop een interfaceontwerp gemaakt. Hiervoor heb ik mij gebaseerd op
een gedegen onderzoek naar alle informatie en mogelijkheden die de eigenaren van Fruity wilden verwerken. Daarnaast
zijn de informatiearchitectuur en het informatieontwerp heel belangrijk geweest om te bepalen waar ik welke onderdelen
zou plaatsen.
Door verschillende ontwerpen steeds te testen kon ik op iteratieve wijze komen tot een sterk interfaceontwerp. Het interfaceontwerp is tot stond gekomen door eerst te schetsen en vervolgens specifiekere uitwerkingen te maken in Axure RP. Zodoende zijn ook onderdelen zoals de navigatie uitgewerkt.
Door verschillende ontwerpen steeds te testen kon ik op iteratieve wijze komen tot een sterk interfaceontwerp. Het interfaceontwerp is tot stond gekomen door eerst te schetsen en vervolgens specifiekere uitwerkingen te maken in Axure RP. Zodoende zijn ook onderdelen zoals de navigatie uitgewerkt.
Visual Design
De eigenaren van Fruity besloten de oude huisstijl los te laten en vrij baan te maken voor een compleet nieuwe stijl.
Door te experimenteren met verschillende kleurenpaletten in de interface, ben ik tot enkele totaal verschillende ontwerpen gekomen.
Deze heb ik voorgelegd aan de eigenaren en de productowner, waarna zij hun voorkeuren uitspraken. Vervolgens heb ik deze stijlen
voorgelegd aan een kleine groep testpersonen. Vervolgens heb ik een klein aantal op elkaar gelijkende stijlen die het best scoorden
bij de testpersonen geadviseerd aan de eigenaren.
Uit deze stijl is het huidige ontwerp voortgekomen. Deze stijl kenmerkt zich door frisse, lichte kleuren en kraakheldere, aantrekkelijke foto's van fruit. Kleurverschillen zijn slim ingezet om onderdelen te scheiden of beter zichtbaar te maken, maar gelijk ook om de website een fris en kleurig uiterlijk te geven.
Uit deze stijl is het huidige ontwerp voortgekomen. Deze stijl kenmerkt zich door frisse, lichte kleuren en kraakheldere, aantrekkelijke foto's van fruit. Kleurverschillen zijn slim ingezet om onderdelen te scheiden of beter zichtbaar te maken, maar gelijk ook om de website een fris en kleurig uiterlijk te geven.
Folders
Eerder had ik voor Fruity al folders ontworpen. Deze werden verspreid onder bedrijven en particulieren die potentiële klanten zouden zijn.
Echter kun je op folders lastig zo'n grote hoeveelheid informatie kwijt als op een website.
Voor de folders heb ik een herontwerp gemaakt op basis van de nieuwe stijl van de webshop. Per onderwerp is er een aparte folder ontwikkeld. Hierdoor is het makkelijker om de specifieke personen de juiste informatie te bieden zonder een overload aan informatie te veroorzaken.
Voor de folders heb ik een herontwerp gemaakt op basis van de nieuwe stijl van de webshop. Per onderwerp is er een aparte folder ontwikkeld. Hierdoor is het makkelijker om de specifieke personen de juiste informatie te bieden zonder een overload aan informatie te veroorzaken.
Responsive Design
Omdat de webshop altijd representatief en netjes over moeten komen op alle soorten apparaten, heb ik
bijgedragen aan het responsive maken van de webshop in SCSS. Door enkele slimme aanpassingen is de
webshop zelfs op mobiel heel overzichtelijk en makkelijk te gebruiken.
Hiervoor heb ik specifieke onderdelen opnieuw ontworpen omdat sommige onderdelen moeilijk responsief te maken waren vanaf desktop naar mobiel.
Hiervoor heb ik specifieke onderdelen opnieuw ontworpen omdat sommige onderdelen moeilijk responsief te maken waren vanaf desktop naar mobiel.
Prototype
Het eindproduct bestaat uit een compleet nieuwe website voor Fruity. Hier kunnen zowel bedrijven als particulieren
dozen fruit en los fruit bestellen. Er is ook veel informatie te vinden over alle soorten fruit in het assortiment.
Daarnaast zijn er op de website recepten te vinden voor smoothies, hoofdgerechten en desserts.
En natuurlijk allerlei informatie over het bedrijf zelf, hun troeven en over duurzaamheid.
Via de website is ook de webshop te vinden, waar zowel bedrijven en particulieren eenvoudig het assortiment kunnen bekijken en bestellingen kunnen doen.
Via de website is ook de webshop te vinden, waar zowel bedrijven en particulieren eenvoudig het assortiment kunnen bekijken en bestellingen kunnen doen.
Bekijk ook...
