Rol:
UX/UI Designer
Front-end developer
Type product:
Responsive website
Opdrachtgever:
Only for Men
Opdracht omschrijving:
Voor deze opdracht heb ik een redesign gedaan voor de website van De Brinck. De Brinck is een winkelcentrum gevestigd in Reusel, met een website waarop alle acht aangesloten winkels van het winkelcentrum gepresenteerd worden. De allereerste winkel van Only for Men is ooit ook in Reusel begonnen en Only for Men heeft de verantwoordelijkheid genomen voor de website van De Brinck. Met deze opdracht ben ik ongeveer zes weken bezig geweest en tijdens dit proces heb ik alle fases van het analyseren van de oude website tot het ontwerpen en bouwen van de nieuwe website zelfstandig uitgevoerd. Iedere week heb ik tijdens een evaluatiegesprek met de opdrachtgever, dat in dit geval mijn bedrijfsbegeleider Sandra is geweest, feedback gevraagd op de verschillende onderdelen van het project. Uiteindelijk heb ik een website aangeleverd die voldoet aan alle eisen van de opdracht en een modern/strak uiterlijk heeft.
Doel van de opdracht:
Het doel van de opdracht was om een nieuwe moderne website te bouwen voor de bezoeker van De Brinck. Hierbij heb ik rekening gehouden met huisstijl van De Brinck. Op de website worden alle acht de winkels gepresenteerd inclusief omschrijving van de winkel, sfeerbeelden, openingstijden en locatie. Daarnaast is er de mogelijkheid om contact op te nemen met de winkels met een contactformulier en een plattegrond van het gehele winkelcentrum waarop alle winkel te vinden zijn. Tot slot was het belangrijk dat de website in de toekomst weinig onderhoud zou vereisen, daardoor heb ik onderdelen zoals evenementen en social blogs uit de sitestructuur gehaald.
Fase 1: Analyseren van de opdracht en huisstijl
In de eerste fase heb ik de oude website geanalyseerd. Hierbij heb ik gekeken naar welke content er op de website stond, welke elementen een winkelpagina bevat en hoe de sitestructuur in elkaar zat. Ook heb ik een recent magazine van De Brinck gebruikt om een indruk op te doen van de huisstijl. Hieruit was het vooral de kleuren (geel en zwart) de ruiten vormen en het sans-serif lettertype dat voor mij de stijl echt typeerden.
Fase 2: Lo-fi ontwerp
In de tweede fase heb ik wireframes geschetst voor de belangrijkste pagina’s. Het detail niveau heb ik redelijk lo-fi gehouden, zodat ik in een snel tempo kon experimenteren met verschillende structuren voor de pagina’s. Na het voorleggen van de beste schetsen ben ik door gegaan naar een hi-fi ontwerp.
Fase 3: Sitemap
Om voor een betere ervaring en conversie te zorgen heb ik een vernieuwde sitemap gemaakt van de website. Hierin ben ik van negen verschillende pagina’s naar vier gegaan, wat een hoop meer rust en overzicht gaf aan de structuur van de site. Ook de opdrachtgever was erg te spreken over het verminderen van de hoeveelheid verschillende pagina’s en links op de website.
Fase 4: Hi-Fi ontwerp en klikbaar prototype
In deze fase heb ik met behulp van Adobe XD mijn schetsen omgezet naar een visueel prototype. Ook alle overige pagina’s heb ik tijdens deze fase ontworpen. Uiteindelijk heb ik twee keer geïtereerd op mijn eerste ontwerp en ben ik met het definitieve ontwerp doorgegaan naar de laatste fase.
Fase 5: Bouwen van het ontwerp met WordPress
In fase vijf heb ik mijn definitieve ontwerp gebouwd met het Divi WordPress thema, dit is een WordPress thema dat ik zelf heb voorgesteld voor de website. Voor het bouwen van de website ben ik ongeveer twee weken bezig geweest.
