Design systemin suunnittelu ja tekninen toteutus tuotannonohjausjärjestelmälle

Abstract

Verkkopohjaisten palveluiden ja järjestelmien mittakaavat jatkavat kasvuaan, ja asiakkaat käyttävät sivustoja ja sovelluksia useammilla päätelaitteilla ja alustoilla kuin koskaan aiemmin. Käyttöliittymien yhtenäisyyden ja ylläpidettävyyden säilyttäminen on osoittautunut merkittäväksi haasteeksi. Design system on järjestelmällinen lähestymistapa käyttöliittymien suunnitteluun, kehitykseen ja ylläpitoon, joka pyrkii vastaamaan tähän haasteeseen.

Pinja on SaaS-ohjelmistoratkaisuihin erikoistunut ohjelmistoyhtiö. Pinja MES on valmistavan teollisuuden alalle suunnattu skaalautuva ja modulaarinen ohjelmistokokonaisuus, jonka käyttökokemusta haluttiin yhtenäistää ja uudistaa Pinjan brändin mukaiseksi. Opinnäytetyössä selvitettiin, miten yhtenäinen, erilaisille päätelaitteille soveltuva ja brändin mukainen käyttöliittymä luodaan, miten sitä ylläpidetään ja miten se skaalataan tehokkaasti useisiin ohjelmistotuotteisiin. Opinnäytetyössä tutustuttiin design system -käsitteeseen ja etsittiin vastauksia siihen, onko design systemistä hyötyä käyttöliittymien yhtenäistämisessä, kannattaako design system ottaa pysyväksi osaksi tuotekehitystä ja saavutetaanko sen käytöllä merkittäviä hyötyjä.

Opinnäytetyön käytännön osuudessa toteutettiin Pinja MES -järjestelmän design systemin prototyyppi. Prototyypissä käytiin läpi koko kehityspolku käyttöliittymäsuunnittelusta, design tokenien hallinnasta ja komponenttikehityksestä aina design systemin jakeluun ja ylläpitoon saakka. Suunnittelijoiden ja kehittäjien välistä yhteistyötä helpotettiin keskittämällä design tokenien hallinta Figmaan ja muuntamalla design tokenit automaattisesti eri formaatteihin. Design systemin dokumentaatiolle suunniteltiin sivurakenne ja toteutettiin sen tärkeimmät osuudet.

Työssä saatiin kattava käsitys siitä, mitä design systemin rakentaminen vaatii teknisestä ja organisatorisesta näkökulmasta. Työn tuloksena syntyi toimiva prototyyppi, jota voidaan sujuvasti jatkokehittää kohti kokonaista järjestelmää.

The scale of web-based services and systems continues to grow, with users accessing applications across more devices and platforms than ever before. Maintaining the consistency of user interfaces has proven to be a significant challenge. Design systems, a systematic approach to designing, developing, and maintaining user interfaces, can address this challenge.

Pinja is a software company specializing in SaaS solutions. Their product, Pinja MES, is a scalable, modular software package tailored for the manufacturing industry. The goal was to revamp and standardize its user experience to align with Pinja's branding. The thesis explored methods to create a uniform, brand-conforming user interface that can adapt to various devices and scale effectively across multiple software products. It delved into the concept of a design system, investigating its potential benefits in standardizing user interfaces, its suitability as a permanent part of product development, and the advantages it can offer.

The practical portion of the thesis involved creating a prototype design system for Pinja MES. The prototype covered everything from user interface design, design token management, and component development to the distribution and upkeep of the design system. Collaboration between designers and developers was streamlined by managing design tokens in Figma and automatically converting them into different formats. A page structure was designed for the documentation of the design system, and its most important parts were implemented.

The thesis provided a thorough understanding of the technical and organizational requirements of building a design system. The outcome was a functional prototype, which can be further developed towards a complete system.