Felix Flos Webshop redesign

Klant
Felix Flos

FelixFlos.nl verkoopt zelf geproduceerde luxere sokken in het hogere marktsegment. In 2018 zette Ritu Ramlal, samen met zijn partner en mede-eigenaar Hedy Bootsma, de webshop in sokken op. Ritu benaderde mij als Freelance UX/UI Designer om het webshop design naar een hoger niveau te trekken.

Felix Flos Webshop re-design door Freelance UX-UI Designer Mr. Upside uit Voorburg - 02 - Homepage + Product Detail Pagina

Tools

Adobe Illustrator
Adobe Photoshop
Sketch
Invision

Diensten

Art Direction
UX/UI Ontwerp
Grafisch Ontwerp
Communicatieadvies
Brand Strategy

Maatschappelijk verantwoord ondernemen

Geluksbloem

De naam Felix Flos betekent geluksbloem in het Latijn. Ritu en Hedy geloven in de kracht van eerlijk delen en vinden dat iedereen een kans moet hebben om te ‘bloeien’. Hoewel dat wat zweverig klinkt, werkt Felix Flos verre van zweverig. Ze zijn, en blijven, een webshop waar sales belangrijk is. Maar wel met een duidelijke maatschappelijke missie.

Een beter onderwijs voor kinderen in India

Ze werken nauw samen met bedrijven en instellingen die ook bij willen dragen aan een betere wereld. Dit levert misschien niet altijd het meeste rendement op. Maar wel het beste gevoel.

In andere woorden: mooie, klassieke katoenen sokken voor de man en vrouw met klasse. Maar tegelijkertijd ook schoolgeld, schoolboeken en schoolbussen voor kansarme kinderen in India.

Stichting Parvati

Eén van de bedrijven waar Felix Flos mee samen werkt is Stichting Parvati. Stichting Parvati werd opgericht na twee maanden vrijwilligerswerk in India, door Jamilah Mohuddy. Het vrijwilligerswerk deed haar inzien dat onderwijs het belangrijkste middel is tegen armoede in de wereld.

Inmiddels is de stichting nu bijna 10 jaar actief in de meest zuidelijke staat van India, Tamil Nadu. Ze zet zich daar specifiek in voor kinderen in de armste laag van de bevolking en verbetering van hun onderwijs. Zodat uiteindelijk deze kinderen zichzelf, en hun families, uit de armoede kunnen helpen.

Lees hier meer over hoe Felix Flos samenwerkt met Stichting Parvati.

MTB Maastricht

Naast de Nederlandse Stichting Parvati werkt Felix Flos ook met (Nederlandse) bedrijven zoals MTB Maastricht voor de verpakking en distributie van de sokken.

Wordpress met WooCommerce

De webshop Felix Flos is te bekijken op www.felixflos.nl. De webshop is gebouwd op het Wordpress CMS. Gebruikmakend van het e-commerce platform WooCommerce. Webbouwer Flekto.nl tekende voor de technische ontwikkeling van de webwinkel.


Uitdagingen

Felix Flos werkte eerder met een webbureau voor het ontwerp, de bouw en het onderhoud van de webshop. Maar besloot in 2018 toch op zoek te gaan naar een andere partner.

Als Freelance UX/UI Designer reageerde ik op Ritu’s oproep op een platform voor Freelancers, met de opmerking dat ik waarschijnlijk niet de goedkoopste partij zou zijn. Dat hield Felix Flos niet tegen.

Felix Flos Webshop re-design door Freelance UX-UI Designer Mr. Upside uit Voorburg - 03 - Oude FelixFlos.nl webshop

Onvoldoende weerspiegeling van het merk

Het probleem met Felix Flos in 2019 was dat haar merkpositionering onvoldoende werd weerspiegeld in de webshop. En alle merkuitingen.

Felix Flos positioneert zich met haar producten in het hogere marktsegment. Tussen Falke enerzijds en Happy Socks anderzijds. Die positionering kwam op dat moment nog niet helemaal terug in de vormgeving (UI Design) van de website.

Vrouwelijk

Het webbureau had aan de webshop een nadrukkelijk vrouwelijke uitstraling gegeven. Met roze kleuraccenten en sierlijke typografie. Dat paste niet bij de evenwichtige balans tussen mannen en vrouwen in de doelgroep. Maar ook niet bij de zakelijke behoefte aan kwaliteit, luxe en comfort van die doelgroep.

UX Design

Naast het Visuele (UI) Design kon ook het UX Design op de nodige punten verbeterd worden.

Felix Flos Webshop re-design door Freelance UX-UI Designer Mr. Upside uit Voorburg - 04 - Re-design Felix Flos logo Felix Flos Webshop re-design door Freelance UX-UI Designer Mr. Upside uit Voorburg - 05 - Oude logo Felix Flos - Verkeerde spatiering Felix Flos Webshop re-design door Freelance UX-UI Designer Mr. Upside uit Voorburg - 06 - Typografie - Martel font Felix Flos Webshop re-design door Freelance UX-UI Designer Mr. Upside uit Voorburg - 07 - Logo Felix Flos - Spatiering letterlogo Felix Flos Webshop re-design door Freelance UX-UI Designer Mr. Upside uit Voorburg - 08 - Logo Felix Flos - Nieuw logo

Fase 1 - Onderzoek

Waar liggen de uitdagingen?

Je kunt geen goede oplossing bieden als je niet precies weet waar het probleem zit. Daarom spraken Ritu en ik uitgebreid over het merk Felix Flos. En de rol van de webshop daarin. Ook onderzocht ik de bestaande shop uitgebreid, met een Mr. Upside Site Scan. En communiceerde daarna mijn bevindingen in een Invision presentatie. Zo ontstond een goede basis voor alle designkeuzes die nog zouden volgen.

Inzichten

Uit de Site Scan kwamen een aantal interessante inzichten:

  • Zo miste Felix Flos een uitgesproken, onderscheidend karakter; het was meer van hetzelfde in de markt.
  • Ook kwam de missie van Felix Flos en de maatschappelijke verantwoording nauwelijks naar voren.
  • Door hun formaat ‘schreeuwden’ de kopteksten alsof Felix Flos met een kraampje op de wekelijkse markt stond. Terwijl het hogere marktsegment waar de kwalitatief hoogwaardige sokken thuishoren, vraagt om een rustige, zelfverzekerde houding.
  • De vormentaal uit het beeldmerk kwam nergens terug in de merkuitingen. Wat de branding inconsistent maakte. Ook het letterlogo was dramatisch gespatieerd, slecht leesbaar in klein formaat en straalde niet de kwaliteit uit die past bij de producten.
  • De gebruikte fotografie bestond alleen uit productshots. Er waren nauwelijks mensen te zien. Door juist in de fotografie meer de menselijke beleving en sfeer toe te voegen, krijgt de potentiële klant beter het gevoel dat het product ook voor hem of haar is bedoeld. En dat de sokken meer zijn dan alleen een katoenen huls voor je voeten.

De nieuwste Mr. Upside projecten in je inbox ontvangen?

Regelmatig worden nieuwe Brand Identity Design, UX/UI Design en Illustratie projecten toegevoegd. Als je wilt, laat ik je dat direct weten zodra dat gebeurt. 

Weet dat ik, net als jij, spam ook heel vervelend vind. Ik stuur geen commerciële boodschappen, alleen updates met nieuw werk.

Felix Flos Webshop re-design door Freelance UX-UI Designer Mr. Upside uit Voorburg - 09 - Logo Felix Flos - Verschillende formaten Felix Flos Webshop re-design door Freelance UX-UI Designer Mr. Upside uit Voorburg - 10 - Grafische patronen Felix Flos merk Felix Flos Webshop re-design door Freelance UX-UI Designer Mr. Upside uit Voorburg - 11 - Kleuren Felix Flos merk

Fase 2 - Strategie

Volledig re-design van de webshop in vier stappen

Het werd duidelijk dat het zakelijke doel, een goed converterende webshop als passende merkuiting binnen een sterk merk, alléén kon worden bereikt als de webshop over de volledige breedte werd aangepast.

Stap 1 – Huisstijl

Een specifieke merkuiting, zoals een webshop, ontwerpen zonder dat de overkoepelende huisstijl op orde is, is onhandig. Daarom is besloten eerst de huisstijl naar een hoger niveau te trekken. En vooral goed te documenteren. Nog voordat we zouden starten met de vormgeving van een webshop.

Een belangrijke rol in die verbeteringen was weggelegd voor typografie. Omdat met name de juiste typografie voor de gewenste luxere uitstraling kan zorgen.

Stap 2 – Flowchart en wireframes

Bij het ontwerp van digitale applicaties pleit ik altijd voor het scheiden van UX en UI ontwerpprocessen. ‘Form follows function‘ dus. Een goede werking is, zeker bij een webshop, veel belangrijker dan smaakgebonden uiterlijk.

Focus daarom eerst op het ontwerp van de werking. Het UX Design. Beantwoord eerst de functionele vragen zoals: ‘Hoe doorloopt de klant de webshop zo soepel, snel en efficiënt mogelijk?’, ‘Waarom zetten we de buttons juist daar neer?’ en ‘Welke informatie tonen we in de Winkelwagen?’.

Stap 3 – Visueel design

Pas na het ontwerp van de werking, ligt de focus op het uiterlijk. Het UI Design. Dan bepaal je welke kleur een button moet krijgen, hoe groot de kopteksten moeten worden en welke foto’s of illustraties er gebruikt worden.

Door de scheiding lopen deze twee denkprocessen niet door elkaar. Waardoor je voorkomt dat mooie afbeeldingen belangrijke fouten in de werking (conversie) van de webshop verbergen.

Een mooie button op de verkeerde plaats zorgt meestal voor een lagere conversie dan een lelijke button op precies de juiste plaats. Amazon is het klassieke voorbeeld van een goed converterende website die nooit een schoonheidsprijs zal winnen.

Stap 4 – Wordpress en WooCommerce

Webbouwer Flekto haakte als technisch partner aan. Mijn Sketch files en een link naar de Zeplin files zouden na akkoord op het ontwerp door mij bij Flekto worden aangeleverd, samen met een mondelinge en tekstuele toelichting.

Flekto is gespecialiseerd in Wordpress en WooCommerce webshops, en ontpopte zich tot waardevolle sparringpartner in het Felix Flos traject.


Design Fase

In de derde fase, de Design Fase, zijn de inzichten uit de eerste Onderzoek Fase en de Site Scan meegenomen bij het uitvoering van de strategische stappen uit de tweede, Strategie Fase. Die volgorde is belangrijk.

Uit de diverse gesprekken met Ritu bleek dat er in het verleden al eens een beeldmerk en letterlogo combinatie was ontworpen. Dat letterlogo leek nog voor verbetering vatbaar. Maar het beeldmerk was zeer bruikbaar.

Beeldmerk

De twee ‘F’-vormen die rug-aan-rug staan, passen goed bij het Felix Flos concept. Ze vormen een stevige pilaar, een platform bijna. De ene ‘F’-vorm staat voor het commerciële deel. De andere ‘F’-vorm voor het MVO deel van Felix Flos. Door de klassiekere schreven aan de F ontstaat een gewenste mode-uitstraling. Daarnaast leent de vorm zich prima voor gebruik boven en naast een letterlogo.

Letterlogo

Het letterlogo was minder goed. De spatiëring klopt niet en het font was niet direct gemaakt voor gebruik online. Ook miste het voldoende gewichten in de familie om goed bruikbaar te zijn in een interface. Na onderzoek is Google Font Martel als lettertype geselecteerd en iets aangepast.

Martel heeft een mooi Euro-teken wat handig is voor een webshop. En doordat de cijfers van het lettertype onder de basislijn uitkomen, wordt de herkenbaarheid van bedragen verbeterd. Het voordeel van gratis Google Fonts is dat ze zijn geoptimaliseerd voor gebruik in online toepassingen. Martel heeft ook veel gewichten beschikbaar. Waardoor langere teksten, zoals blogs, goed te structureren zijn met diverse kopteksten. 

Kleuren en grafische patronen

Nadat de typografie vast stond, is een passend kleurenpalet ontworpen. En zijn grafisch patronen voorgesteld. Hoewel er vaak veel aandacht aan het logo wordt besteed, is een logo voor klanten feitelijk slechts maar een klein deel van de huisstijl. De klant komt in praktijk vaker en intensiever in contact met de andere huisstijl onderdelen; kleuren, vormen, patronen en beeld (fotografie en illustraties).

Flowchart en Wireframes

Na het vaststellen en uitbreiden van de huisstijl, is gestart met de informatiestructuur van de webshop. Deze is vastgelegd in een Flowchart. Daarna zijn Wireframes ontworpen, waarin de inhoud van een pagina werd bepaald. Vragen als ‘op welke buttons kunnen gebruikers klikken en waar komen ze terecht?’ zijn beantwoord en diverse klantreizen getest.

Visueel Ontwerp

Vervolgens zijn de Wireframes en de uitgebreidere huisstijl gecombineerd tot een uitgebalanceerde interface. Waarbij eerst Stijlvoorbeelden zijn ontworpen. En daarna 16 webshop templates, incl. een Account-gedeelte.

Felix Flos Webshop re-design door Freelance UX-UI Designer Mr. Upside uit Voorburg - 12 - Flowchart FelixFlos.nl Felix Flos Webshop re-design door Freelance UX-UI Designer Mr. Upside uit Voorburg - 13 - Wireframes Overzicht FelixFlos.nl Felix Flos Webshop re-design door Freelance UX-UI Designer Mr. Upside uit Voorburg - 14 - Wireframes FelixFlos.nl

Felix Flos Webshop re-design door Freelance UX-UI Designer Mr. Upside uit Voorburg - 16 - Overzicht Visual Design FelixFlos.nl Felix Flos Webshop re-design door Freelance UX-UI Designer Mr. Upside uit Voorburg - 17 - Headers + Product Detail Pagina + Popup Felix Flos Webshop re-design door Freelance UX-UI Designer Mr. Upside uit Voorburg - 18 - Klantenservice + Inspiratie Overzicht Pagina Felix Flos Webshop re-design door Freelance UX-UI Designer Mr. Upside uit Voorburg - 19 - Inspiratie + Over Felix Flos Pagina Felix Flos Webshop re-design door Freelance UX-UI Designer Mr. Upside uit Voorburg - 20 - Winkelwagen + Checkout Pagina Felix Flos Webshop re-design door Freelance UX-UI Designer Mr. Upside uit Voorburg - 21 - Account Dashboard + Bedankt Pagina

Mooi, goed werkend eindresultaat

 

Een succesvolle, op maat ontworpen webshop

Het resultaat is een succesvolle, op maat ontworpen en gebouwde webshop, gebaseerd op Wordpress en WooCommerce. De samenwerking met Felix Flos beviel zo goed dat Mr. Upside werd gevraagd ook de Art Direction van photoshoots, ontwerp van verpakkingen en sokken-label, Social Media content en de copywriting van blogposts op te pakken.

Brand Strategy Sessies

Ook zijn er recentelijk Brand Strategy sessies bij Mr. Upside afgenomen, waarbij een verdere aanscherping van het Felix Flos merk zorgde voor waardevolle inzichten. Deze inzichten zullen in de nabije toekomst worden gebruikt voor verdere uitbouw van het Felix Flos merk.

UX/UI Design voor een website of app nodig?

Neem gerust contact op! Ik heb momenteel ruimte voor nieuwe UX/UI Design opdrachten.