Een nieuwe visie op UX design met een Design System als fundering.

TOPdesk maakt een enterprise Service Management Systeem, bijvoorbeeld voor het registreren van incidenten of samen te werken met meerdere serviceteams in één tool. Eenduidigheid in design, interactie en visie op de SaaS-software gaf TOPdesk nieuwe focus op de toekomst.

Bekijk de video van het resultaat.

Bezoek website

De vraag

TOPdesk vroeg ons om een designvisie neer te zetten en dit te borgen met een Design System. De vervolgvraag was hoe TOPdesk vanuit deze visie het klantgericht ontwikkelen met een Design System in de organisatie kon implementeren.

Consistente gebruikerservaring voor Topdesk

In de loop der jaren was de software van TOPdesk doorontwikkeld vanuit verschillende perspectieven. Dat er verschillende teams aan de updates en nieuwe features sleutelden was logisch, maar deze gaven soms hun eigen draai aan design en interactie. Er bestonden zelfs drie Design Systems in de organisatie. Het ontbrak aan focus en duidelijkheid. Met als gevolg dat er steeds meer verscheidenheid in visuele kenmerken en interacties kwam. De software kenmerkte zich door verschillende knoppen, productkaarten en tabellen. Ook de functionaliteit van de software varieerde.

Het was nodig om eenvoudiger, duidelijker en efficiënter samen te werken en vanuit één gedachte software te bouwen. Wij hebben het UX-team van TOPdesk begeleid, gecoacht en getraind in dit proces.

Wat waren de doelstellingen voor een design system?

Eenduidigheid in design en interactie
Betere functionaliteit van de applicatie
Heldere visie op de software
Borgen van activiteiten in Design System
Klantgerichter werken

Waar begin je met een design systeem?

Maak een afspraak om deze case te bespreken.

Tamara Waakop Reijers

Chief Customer Engagement 010 - 8911051

Plan je afspraak

Proces en aanpak

UX research

Samen met de klant gingen we eerst op onderzoek en terug naar de tekentafel. Om uiteindelijk vanuit een nieuwe designvisie de software te herijken en een Design System te kunnen ontwikkelen. De eerste stappen van de samenwerking waren bedoeld om het projectteam op te lijnen, het doel van het traject te bepalen en ook de dialoog op gang te brengen over de huidige software om data te verzamelen. Bovendien was het managen van verwachtingen in deze fase belangrijk.

UX-coaching en training

Ons UX-team bestond in deze onderzoeksfase uit een UX Lead, een UX researcher, een Interaction Designer en een Visual Designer. Dit team heeft naast het verrichten van onderzoek, in totaal tien weken het projectteam van TOPdesk gecoacht en verschillende UX-trainingen en workshops verzorgd.

Bewustwording van designvisie

Op een Agile-manier is elke week een workshop of training verzorgd over onderwerpen als Design System foundations, Problem Framing en Product Personality. Deze ontwikkelactiviteiten bestonden ook vaak uit inclusief huiswerkopdrachten en reflectiegesprekken. Door de juiste vragen te stellen daagde ons UX team het TOPdesk-team iedere keer opnieuw uit om na te denken over hun werkwijzen, keuzes, ambities en mindset. TOPdesk hield zichzelf op deze manier een spiegel voor. Zo werd het team zich steeds bewuster van het belang van een UX-designvisie en onderlinge samenwerking. Wij zorgden voor stroomlijning van het proces, balans in gesprekken, we hakten knopen door en schepten orde in de samenwerking tussen de teamleden.

GAP-analyse en prototype

Met de inzichten uit het onderzoek konden volgende stappen worden gezet. De eerste was het maken van een GAP-analyse. Daarin werden de verschillende componenten en uitingen in de software duidelijk. Zo ontdekten we ook waar de inconsistenties zich bevonden.

Vanuit de bevindingen van de GAP-analyse konden we prioriteiten stellen en bepaalden we hoe een eerste prototype van het nieuwe Design System uitgewerkt moest worden. We keken hierbij goed naar hoe we een gedeelde taal konden ontdekken voor UX en development. Uiteindelijk leidde dit tot een MVP met werkende componenten.

Bepalen visuele identiteit

Vervolgens bepaalde ons UX-team, dat in deze fase bestond uit een interaction designer, twee visual designers en een front end developer, in overleg met TOPdesk de nieuwe visuele taal. Dit werd vastgelegd in het Design System. Denk aan de merkidentiteit, tone of voice, grids, kleuren en typografie. Hiermee was het fundament van het Design System gelegd.

Nauwe samenwerking developers

Uiteindelijk is er een structuur gecreëerd, zodat het developmentteam de componenten van het design gemakkelijk kon bouwen. Omdat elk teamlid alle Design System-uitgangspunten op dezelfde manier moest onderschrijven en interpreteren, was nauwe samenwerking met de UX-developers hier cruciaal.

Design System zelf bouwen? Wij helpen.

De definitieve designvisie die is ontwikkeld, werd vastgelegd in het Design System. TOPdesk heeft dit Design System overigens zelf ontwikkeld. Het team van Online Department is voor dit traject ingeschakeld voor competentie-ontwikkeling, UX/UI design, advies en coaching bij de implementatie.

[ht-ctc-chat style=4]

Resultaat

Meer efficiëntie en samenwerking tussen teams

Toepasbaar op meerdere software producten

Toekomstbestendige visie op UX/UI design

Schaalbaar Design System als fundament

Een Playbook en video voor de implementatie van het Design System

Ontwikkeling van interne UX-vaardigheden

Visie op UX en user interface design

De eindresultaten zijn gepresenteerd en goed ontvangen. De wens was om de designvisie op twee TOPdesk-producten toe te passen om de ontwikkeling te versnellen en meer consistentie te creëren. Dit proces is in gang gezet en vormt de basis voor de doorontwikkeling van de software.

Multidisciplinair UX team

Het overdragen van UX-competenties naar interne organisatie is een uitdaging en vraagt tijd en geduld. Onze dienst UX Expert as a Service heeft alle disciplines, kennis en vaardigheden in huis. Door een combinatie van voordoen (trainen, workshops), zelf doen (opdrachten meegeven en coachen) en samen doen (ons team laten meedraaien in een project) werken we samen met de klant aan oplossingen.

Wil je ook je designvisie ontwikkelen en borgen in je team met een Design System? Maak je producten schaalbaar en consistent.

Bekijk de video

Computer don't be a machine

UX visie en een schaalbaar design system