Menu Created with Sketch.
Close Created with Sketch.
26. maj 2018 | Søren Martin Mark Andersen

Sådan byggede vi vores eget designsystem

Hvordan kan man udvikle mere brugervenlige, digitale løsninger, der i højere grad gavner kundernes forretning? Svarene er formentligt forskellige, men i digitaliseringshuset Ditmer er svaret Embla.

Navnet dækker over et internt designsystem ved navn Embla, som vi i har brugt en del kræfter på at designe, virkeliggøre og implementere i vores udvikling af digitale løsninger for private og offentlige kunder.

Systemet har erstattet vores hidtidige brug af diverse framework-elementer i designprocessen. Den store fordel er, at vi med Embla langt tidligere, ofte efter blot 30 timer, kan bygge en fuldt funktionsdygtig prototype, som vi kan begynde at teste med brugerne. Samtidig giver Embla os en række nye muligheder, som kan forbedre en given løsning gennem hele kunderejsen.

Inspirationen kommer fra virksomheder som Google, Microsoft, Salesforce, Atlassian, Mailchimp, General Electric og Airbnb, der alle har udviklet tilsvarende designsystemer til design af nye softwareprodukter. Fælles for virksomhederne er, at de har mange store systemer og mange produkter, hvilket gør det svært at vedligeholde en ensartet brugeroplevelse på tværs.

 

Hurtigt i gang med en prototype

Der er naturligvis stor forskel på en amerikansk gigant som General Electric og danske Ditmer. Men tankerne om et designsystem er de samme. Den tidligere prototype gør det muligt for kunden hurtigt at finde ud af, om løsningen fungerer som ønsket, og udviklerne kan afprøve forskellige muligheder og køre flere iterationer igennem tidligt i processen. Resultatet er, at kunden i sidste ende får en bedre løsning.

Med designsystemet har vi afskaffet den klassiske, lineære tilgang, hvor en designproces på flere hundrede timer og detaljerede designoplæg er forudsætningen for at udvikle en digital løsning. Vi slipper samtidig for at udsætte kunderne for wireframes, som ofte kan opleves som abstrakte og ukonkrete.

Velafprøvede komponenter

Hvordan fungerer Embla så i praksis? Designsystemet er bygget op omkring en række velafprøvede principper og komponenter, som vi bruger til at designe en velfungerende prototype, der for brugerne opleves som en ”rigtig” løsning. Opbygningen er blandt andet inspireret af Brad Frosts bog Atomic Design (2016).

De prædefinerede komponenter dækker over alt fra farver, knapper og notifikationer til navigation, tabeller og indtastningsformularer. De fleste komponenter er testet i andre løsninger, og dermed bygger vi videre på erfaringerne fra tidligere projekter i stedet for, at vi populært sagt skal starte hver gang fra scratch for kundens regning.

Større brugervenlighed

Farver og fonte kan ændres let og hurtigt i systemet, og brugen af prædefinerede elementer giver udover en hurtigere udviklet prototype en større brugervenlighed. Eksempelvis er en login-funktion på et website testet og rettet løbende rettet til på tidligere webløsninger, så den fungerer bedst muligt.

Selvom de fleste kunder har domænespecifikke behov til deres løsning, kan de forskellige komponenter stadig bruges, selvom sammenhængen er en anden. Et konkret eksempel er lister, tabeller eller kalendere, hvor vi i stedet for at designe komponenterne og deres udseende fra bunden bruger ressourcerne på at sammensætte den rigtige løsning til kundens behov.

Sparer tid på implementering

Med designsystemet sparer vi tid på implementeringen, fordi vi kan genanvende frontend-koden, og sammenhængen på tværs af systemet betyder, at der er færre fejl og bugs, når vores kunder skal teste systemet. Fleksibiliteten gør det også let at bygge videre på løsninger, fordi vi ikke skal designe fra bunden af, men kan bygge nyt ved at genanvende de eksisterende komponenter.

Af samme grund bruger vi en hel del energi på at bygge og vedligeholde Embla som et ”levende” system, så det hele tiden er opdateret med komponenter fra vores øvrige projekter, produkter og løsninger.

Interne fordele

På den interne front har Embla også givet os nogle fordele. Først og fremmest er det lettere at starte nye projekter op, fordi systemet giver en hurtigere start på udviklingsprocessen. Det er lettere for nye udviklere at komme ind i nye projekter, fordi de bruger det samme system på tværs af projekterne.

Som virksomhed er vi også blevet mere agile, fordi vi kan teste og validere tidligt, og fordi vi let kan ændre og bygge videre, efterhånden som vi lærer mere omkring de domænetunge og specifikke projekter, vi arbejder med.

Flere designsystemer på vej

Der er ingen tvivl om, at vi fremover vil se flere designsystemer på dansk grund og i udlandet. Det skyldes ikke mindst, at stadig flere forretningsområder bliver understøttet af digitale løsninger. Samtidig kræver gode og sammenhængende brugeroplevelser ikke længere kun, at man har styr på den tekniske udvikling, men også at man arbejder systematisk med design og brugeroplevelse. Det har aldrig været så komplekst at lave gode løsninger som i dag, men produktdesign er en spirende disciplin, hvor man skal samtænke design, udvikling, brugere og forretning. Derfor er der behov for nye værktøjer og metoder, som gør det hurtigere at lave basisprodukter og basale funktionaliteter. Her gør designsystemer os i stand til at kunne validere afprøve idéer på et marked, hvor brugere stiller enorme krav til digitale løsninger, og hvor konkurrencen om opmærksomheden aldrig har været større.

Vil du høre mere om, hvordan vi arbejder med digitalisering?
Tilmeld dig
 vores nyhedsbrev lige her