UX/UI Briefing – Redesign banden bestel app
Werkgever: Global Automotive Group
Project: Redesign app met behoud bestaande functionaliteit
Rol: UX / UI design

Achtergrond

Het bestaande bandenbestelsysteem is verouderd en voldoet niet langer aan de technische en gebruikersgerichte eisen van vandaag. Het systeem wordt momenteel gebruikt door meerdere bedrijfslabels binnen Europa en vereist een modernisering om schaalbaarheid, gebruiksvriendelijkheid en beheerbaarheid te verbeteren.

Daarom was redesignen en herbouwen van de huidige bandenbestelapplicatie in OutSystems, met als doel een toekomstbestendige, intuïtieve en schaalbare oplossing die inzetbaar is voor meerdere bedrijfslabels in Europa het doel.

Aanpak

Het project werd uitgevoerd door een multidisciplinair Scrum-team, werkend volgens de agile methodiek. In iteraties (sprints) werden functionaliteiten ontworpen, ontwikkeld, getest en opgeleverd. Stakeholders werden actief betrokken bij reviews en prioritering.

Team: Product Owner, Scrum Master, UX/UI Designer, OutSystems Developers, Tester(s)

  • Fase 1: Analyse huidige apps
    Als start zijn alle huidige functionaliteiten in kaart gebracht en geanalyseerd.

  • Fase 2: Visueel ontwerp
    Ik ben begonnen met het opzetten van een design systeem met slim gebruik van variabelen zodat de ontwerpen gebruikt konden worden voor de verschillende bedrijfslabels. Parallel hieraan heb ik de schermen ontworpen.

  • Fase 3: Realisatie in samenwerking met development
    Tijdens de implementatie is nauw samengewerkt met de developers. Hierbij heb ik in de JIRA flow UX/UI reviews gedaan om zorg te dragen dat hetgeen ontworpen is ook netjes gebouwd werd.

Slim design system

In Figma heb ik een Design System opgezet om visuele consistentie te waarborgen en het ontwerpproces te versnellen. Door gebruik te maken van componenten, stijlen en variabelen (zoals kleuren, typografie en spacing) kunnen we eenvoudig variaties aanbrengen per bedrijfslabel zonder de basisstructuur aan te passen.

Dankzij het gebruik van Figma-variabelen (bijvoorbeeld voor merk-specifieke kleuren en logo’s), kunnen we met één klik het ontwerp aanpassen aan de huisstijl van een specifiek label. Dit maakt het systeem schaalbaar en efficiënt voor meerdere merken binnen hetzelfde platform, terwijl we uniformiteit in UX en functionaliteit behouden.

Visual design

Na het opzetten van het Design System in Figma zijn de app-schermen uitgewerkt op basis van de gebruikersflows. We zijn gestart met het ontwerpen van de happy flow, waarin de standaard gebruikersreis van bestelling tot bevestiging is uitgewerkt. Dit hielp om snel een helder beeld te krijgen van de kernfunctionaliteiten en de gewenste gebruikerservaring.

Vervolgens zijn de edge cases en uitzonderingssituaties in kaart gebracht en visueel uitgewerkt, zoals foutmeldingen, lege statussen, afwijkende invoer en verschillende gebruikersrollen. Door deze scenario’s mee te nemen in het ontwerptraject, zorgen we voor een robuuste en realistische gebruikersinterface die ook in minder ideale situaties duidelijk en gebruiksvriendelijk blijft.