Emerson designsystem
Ett designsystem för industriella produkter
- Design System,
- UX Design,
- Accessibility,
- Foundation
Om projektet
När Emerson ville skapa en mer enhetlig och effektiv användarupplevelse i sina mjukvaror började vi tillsammans bygga ett designsystem som samlar allt – från visuella riktlinjer till fungerande komponenter. Målet var att skapa en gemensam grund som förenar design, teknik och tillgänglighet, och som gör det enklare för globala team att arbeta konsekvent över tid.
En gemensam grund för hela produktportföljen
När vi inledde samarbetet stod Emerson inför ett välbekant men komplext problem, varje mjukvaruteam arbetade på sitt eget sätt, med olika kodbaser, interaktionsmönster och visuella uttryck. Det gjorde att liknande funktioner byggdes flera gånger och på flera olika sätt. Det saknades en gemensam grund som kunde ge bättre struktur och användarupplevelse över hela produktportföljen. Med ett gemensamt designsystem kan en utspridd produktfamilj förvandlas till en sammanhållen digital upplevelse. Funktioner och mönster känns igen av användarna, vilket gör att nya produkter upplevs som bekanta redan från start. Det som behövdes var därför inte bara nya komponenter, utan en tydlig struktur för hur Emersons digitala gränssnitt ska byggas, användas och utvecklas över tid.
Designsystemet är byggt i Figma och använder variabler som grund för alla centrala attribut – spacing, typografi, färger, teman och interaktionsstilar. Det ger en skalbar och konsekvent struktur som gör det enkelt att vidareutveckla systemet och säkerställer att designen fungerar på samma sätt i alla produkter. Det omfattande komponentbiblioteket innehåller stöd för både ljusa och mörka lägen och kan anpassas till olika miljöer och användningsfall.
Genom att arbeta variabelbaserat blir kopplingen mellan design och kod tydligare: Figma fungerar som source of truth, och utvecklingsteamen kan översätta designbeslut till kod på ett snabbt och förutsägbart sätt. Allt dokumenteras och publiceras i Supernova, vilket gör systemet lätt att lära sig, lätt att använda och enkelt att hålla uppdaterat för team globalt. Det skapar en levande plattform som gör det möjligt för design och utveckling att arbeta konsekvent och effektivt tillsammans.
Resultat – en grund som växer med produkterna
Idag är designsystemet grunden för de digitala produkter som utvecklas inom Rosemount Tank Radar AB och har redan använts för att effektivisera och höja kvaliteten i utvecklingen av flera mjukvaror. Det gör utvecklingen snabbare, kvaliteten jämnare – och produkterna enklare att förstå, använda och lita på.
Teamets egna ord
❝ Genom ett skalbart och modulärt designsystem skapades tidigt en gemensam grund för både design och utveckling. Systemet är flexibelt och binder samman Emersons varumärke över produkter, plattformar och team, samtidigt som det fungerar som en katalysator genom hela produktprocessen. Resultatet är högre kvalitet, snabbare iterationer och ett mer effektivt samarbete från start till slut.
Gillar du det vi gör?
Tveka inte att dela din nästa idé med oss. Vi ser fram emot att lära känna dig bättre och att utforska vad vi kan skapa tillsammans.
