Kimspiratie.nl UX/UI re-design

Klant

Kimspiratie

Online

Kimspiratie is Event Manager en communicatieadviseur Kim van den Wijngaard. Ze had haar website Kimspiratie.nl al vijf jaar en bouwde deze zelf in Wordpress. Onze kinderen gaan naar dezelfde school en we werkten eerder samen aan een NWO Brand Identity project. Toen dat project eenmaal was voltooid, vroeg Kim of ik haar website opnieuw wilde ontwerpen.

Tools

Sketch
Invision
Adobe Photoshop
Adobe Illustrator
Wordpress
Elementor

Diensten

UX/UI Design
Art Direction
Brand Identity Design
Wordpress

Uitdaging

In de vijf jaar dat Kim Freelance Event Manager en Communicatieadviseur is, is ze professioneel gegroeid. Die professionaliteit kwam niet terug in haar online communicatie. Verder waren de projecten / cases op haar website verouderd en niet goed gepresenteerd. Het maakte de noodzaak van een herontwerp van haar website duidelijk.

Oplossing

Maar omdat de door haar zelf ontworpen merkidentiteit ook een herontwerp nodig had, werd haar logo en huisstijl ontwerp eerst opgepakt. Een website is immers slechts een communicatiemiddel. En een fris nieuw website-ontwerp moet altijd gebaseerd zijn op een goed ontworpen huisstijl.

Snel naar

Creatieve strategie

Alles in de goede volgorde

De volgorde waarin de verschillende onderdelen van een online identiteit worden ontworpen, is erg belangrijk. Dus pas nadat de vernieuwde huisstijl van Kimspiratie klaar was, kon deze ontwikkeld worden naar een online identiteit. Welke op zijn beurt de basis kon worden van een website-ontwerp.

Routekaart

Stap 1 – Nieuwe merkidentiteit
Stap 2 – Verdere ontwikkeling huisstijl in een online variant
Stap 3 – UX-ontwerp – Stroomschema en wireframes
Stap 4 – UI-ontwerp – Visueel ontwerp
Stap 5 – Bouw website in Wordpress

Stap 1/5 – Ontwerp een nieuwe merkidentiteit

Kim’s huisstijl / merkidentiteit is ontwikkeld op basis van uitgebreide gesprekken over haar persoonlijke drijfveren, haar bedrijf, haar doelgroep en haar diensten. Bekijk het resultaat van die verbeterde merkidentiteit hier.

Stap 2/5 – Ontwerp de online identiteit

Het online deel van haar merkidentiteit was sterk gebaseerd op de eerder ontworpen algemene merkidentiteit. Met name de online typografie en de manier waarop de website met gebruikers omgaat, werd onder de loep genomen.

Stap 3/5 – UX-ontwerp

Informatiestructuur

Zoals bij veel andere dingen, werkt het prettig van groot naar klein. Allereerst hebben we gekeken naar welke informatie er precies gecommuniceerd moest worden door Kimspiratie. Vervolgens hebben we onderzocht hoe die informatie op de verschillende pagina’s in hapklare brokken kon worden verdeeld. Met andere woorden, welke informatie staat waar op de website? En waar precies op de pagina? Het denkproces over de werking wordt zo gescheiden van het uiterlijk van de website.

Stroomschema en wireframes

Dit resulteerde in het weergegeven stroomschema. Met het stroomschema in gedachten hebben we goed gekeken hoe elke pagina de informatie kon presenteren. Het resultaat van dat onderzoek wordt weergegeven in een reeks wireframes. Vaak worden de wireframes vertaald naar een klikbaar prototype. Omdat dit project relatief beperkt van omvang en budget was, is niet voor het prototype gekozen.

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.

Wat is het doel van de website?

Portfolio als kern

Samen met Kimspiratie werd bepaald dat het hoofddoel van de website vooral “informeren” is. Kim ontvangt het overgrote deel van haar opdrachten via mond-tot-mondreclame. Uit haar menselijke netwerk, niet via haar website. Potentiële klanten van Kim zullen de website daarom vooral als referentie, als portfolio gebruiken. Om te zien welke projecten ze eerder deed. En wat haar rol was in die projecten. De cases waren daarom het belangrijkst en moesten de kern vormen van de Kimspiratie-website.

Stroomdiagram en wireframes

Bij het ontwerpen van een website begin ik het UX Design altijd met Wireframes en Flow Charts (User Experience Design (UX)). Zelfs met een relatief kleine website, zoals deze. De informatiestructuur wordt in deze Wireframes gepresenteerd en goed gedocumenteerd.

Visual Design en responsive website

Stap 4/5 – UI-ontwerp

Visueel ontwerp

Kort nadat ik met Kim overeenstemming had bereikt over de Wireframes, startte het Visual Design van de gebruikersinterface (UI). In feite was deze fase een combinatie tussen de vooraf bepaalde online identiteit en de Wireframes. In verschillende feedback ronden zijn we tot een definitief UI ontwerp gekomen.

Stap 5/5 – Bouw een website

De nieuwe responsive website van Kimspiratie is gebouwd in Wordpress, gebaseerd op het UI Design en met behulp van de Visual Builder-software Elementor.