The building blocks of a UI sandwich: Examining the efficiency and the customization of design systems

Abstract

Design systems are everywhere. Designers working in the digital user interface industry in the 2010s cannot avoid bumping into them. Much of the discussion surrounding design systems arise from the efficiency gain to the team and customer.

From a research standpoint, this thesis sets out to draw clear lines for design systems. As little to no academic research into design systems as a concept has been done, this thesis creates categorization method for design systems with examples. Also, this thesis shows what are seen as the foundations for design systems in the industry literature. This literature is studied in the historical context of other systematic design methods.

Using design systems makes a common look and feel to multiple services and enables designers to quick-start their work with an existing asset bank. However, for designers working with multiple interfaces and visual styles, design systems can become a demerit and more of an obstacle than an enabler. Customization of design systems is still problematic as they are built with a single source of truth.

This need for customization is tested out with a concept for designers – a sandbox in which designers can play around with concepts, customize them and quickly find them. The same concept is also tested with developers to gain insight into team work with systematic way of working in design.

This thesis ends with a conclusion about how design systems serve designers and developers and outlines the systems’ benefits and limitations.

Design systeemit ovat kaikkialla. Suunnittelijat käyttöliittymäalalla eivät voi välttyä termiltä 2010-luvun ammatillisessa keskustelussa. Suurin osa siitä keskittyy design systemien työtehokkuuden lisäämiseen.

Akateemisesta näkökulmasta, tämä työ pyrkii rajaamaan design system-käsitteen rajoja, sillä aiheesta ei ole ammatillisen kirjallisuuden lisäksi yhtään akateemista tutkimustyötä. Tässä työssä pyritään esimerkiksi muovaamaan kategorisointimetodi erilaisille design systemeille eri esimerkein. Tässä työssä pyritään määrittämään myös design systemin tärkeimmät elementit mitä ammattikirjallisuudessa mainitaan. Ammattikirjallisuus on myös reflektoitu historian kontekstissa muista systemaattisista muotoilukonventioista.

Design systemien käyttö yhtenäistää usean palvelun ulkoasuja sekä auttaa suunnittelijoita aloittamaan työnsä nopeasti valmiilla design systemin kirjastolla. Suunnittelijat, jotka tekevät töitä usean eri visuaalisen tyylin ja käyttöliittymän kanssa, voivat kuitenkin kokea design systemin käytön monimutkaistavaksi. Design systemien mukauttaminen on edelleen erittäin ongel-mallista kun ne perustuvat yhteen totuuteen.

Tämä mukauttamistarve testataan työssä suunnittelijoille tarkoitetussa konseptissa – hiekkalaatikkomallissa, jossa suunnittelijat voivat testata eri palasia ja muokata niitä vapaasti ja löytää ne nopeasti. Sama konsepti testataan myös kehittäjien kanssa jotta ymmärretään myös paremmin design systemien vaikutusta tiimityöskentelyyn.

Tämän pro gradu-työn päätännässä keskustellaan design system-konseptin roolia suunnittelijoille ja kehittäjille sekä määritellään rajat sille, mikä design systemin muodostaa.