UX visie en een schaalbaar design system

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.

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 

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?

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

Slideshow Items

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.

Topdesk UX visie en Design System

Multidisciplinair 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.

Topdesk header mobiel MPS Dashboard UX design

Onderzoek en UX design voor de nieuwe customer portal

Bekijk case