UX/UI Briefing – Redesign Mobiele Ervaring Voetbalshop
Werkgever: Flashpoint
Project: Mobiele herontwerp Voetbalshop
Rol: UX / UI design

Achtergrond

De oorspronkelijke briefing was beknopt: “We willen een webshop met de rust van Zara. Hier is ons logo, en we willen het oranje van onze oude site behouden.”

Tijdens het ontwerpproces werd echter al snel duidelijk dat hoewel visuele inspiratiebronnen zoals Zara en Nike een sterke uitstraling hebben, ze niet volledig aansloten bij de commerciële doelstellingen van Voetbalshop.

Waar merken als Zara focussen op merkbeleving en stijl, ligt bij Voetbalshop de nadruk op conversie. De webshop moet primair gericht zijn op het stimuleren van verkoop. Dit vroeg om een ontwerp dat de balans bewaart tussen een moderne, rustige uitstraling en een doeltreffende, conversiegerichte gebruikerservaring.

Aanpak

  • Fase 1: Wireframing
    Startpunt van het traject was het uitwerken van wireframes, waarmee de structuur, gebruikersflows en functionaliteiten in kaart zijn gebracht.

  • Fase 2: Visueel ontwerp
    Op basis van de wireframes is een compleet visueel ontwerp uitgewerkt. Hierbij is gefocust op gebruiksgemak, visuele consistentie en conversieoptimalisatie.

  • Fase 3: Realisatie in samenwerking met development
    Tijdens de implementatie is nauw samengewerkt met front-end developers. Keuzes in interactie en visueel ontwerp zijn gezamenlijk afgestemd en waar nodig iteratief bijgestuurd.

Wireframes

Om een concept te bepalen ben ik begonnen met het maken van wireframes. Deze waren vooral bedoeld om tot een indeling te komen en intern te bepalen welke content we bijvoorbeeld op de homepage wilden tonen.

Tijdens de wireframe fase zijn er veel varianten geprobeerd en zijn we uiteindelijk, door veel met elkaar te sparren, tot een concept gekomen waar iedereen achter stond

Visual design

Na het opstellen van wireframes en het gezamenlijk afstemmen van de paginainrichting, ben ik gestart met het visuele ontwerp. Dit ontwerp is strak en modern vormgegeven, met een duidelijke focus op conversie.

Tijdens de vertaalslag van wireframe naar visueel ontwerp is niet simpelweg het wireframe ingekleurd. Bij elke stap is kritisch gekeken naar de compositie en gebruikslogica. Waar nodig zijn elementen herschikt of verfijnd, om zowel de esthetiek als de effectiviteit van het ontwerp te optimaliseren.