Zynka BIM + UX/UI + Vue.js

Digital Buildings

Digital Buildings var en digital B2B-produkt i skärningspunkten mellan BIM, informationshantering och den byggda miljön. I den typen av produkt blev tydlighet, struktur och konsekventa gränssnitt en avgörande del av användarupplevelsen över tid.

Att bygga struktur för en komplex digital produkt

Digital Buildings utvecklades i ett B2B-sammanhang där stora mängder information behövde bli begripliga, konsekventa och användbara i faktiska arbetsflöden.

Produkt och sammanhang

Digital Buildings

En digital produkt i skärningspunkten mellan BIM, informationshantering och den byggda miljön, där gränssnittets tydlighet blev en central del av produktkvaliteten.

Zynka BIM

Zynka BIM verkar inom digitalisering av den byggda miljön, med fokus på BIM, informationshantering och digitala produkter för fastighets- och byggsektorn.

Vilket problem produkten löser

I komplexa digitala miljöer inom fastighets- och byggsektorn uppstår ofta ett glapp mellan stora mängder information och verklig användbarhet. En produkt som Digital Buildings behövde därför göra komplex information mer överskådlig, skapa bättre struktur i gränssnittet och stödja mer konsekvent användning över olika delar av plattformen.

Plattform, kärnflöde och fokus

Arbetet handlade inte om ett enskilt modulflöde, utan om att ge hela produkten en tydligare struktur, mer konsekventa mönster och starkare kontinuitet mellan design och implementation.

Plattform

En digital B2B-plattform i ett komplext informationssammanhang, där gränssnittet behövde stödja tydlighet, struktur och konsekvent interaktion över tid.

Kärnflöde

Skapa förutsättningar för sammanhängande användning genom hela produkten med återanvändbara komponenter, mönster och gränssnitt som håller ihop i flera delar av plattformen.

Fokus

Skapa struktur, stärka konsekvensen i gränssnittet, bygga ett hållbart designsystem och säkerställa att design också omsätts i faktisk frontendimplementation.

Produktkrav och begränsningar

  • Produkten verkade i ett informationsrikt B2B-sammanhang där gränssnittet behövde hålla ihop över tid, trots många typer av innehåll och varierande användarbehov.
  • Designsystemet behövde fungera som en gemensam grund för återanvändbara komponenter, tydliga mönster och mer konsekventa gränssnitt i produkten.
  • Frontendimplementeringen behövde omsätta designsystemet i faktisk produktkvalitet, så att design inte stannade i principer utan blev en fungerande del av plattformen.

Teknisk komplexitet

Komplexiteten låg i att bygga ett gränssnittssystem som fungerade sammanhängande i en informationsrik produktmiljö, utan att tappa tydlighet eller återanvändbarhet.

Informationsrika vyer med krav på sammanhang

Den tekniska komplexiteten låg inte bara i domänen, utan i att skapa ett gränssnittssystem som kunde fungera sammanhängande i en informationsrik produktmiljö. Det krävde tydliga mönster, återanvändbara komponenter och ett gränssnitt som höll ihop över flera delar av produkten.

Designsystem som grund för konsekvent implementation

Jag bidrog till att bygga upp ett designsystem med principer, komponenter och återanvändbara UI-mönster som kunde ge produkten större konsekvens och göra det lättare att omsätta designbeslut i faktisk implementation.

Design till kod i Vue.js

Arbetet omfattade också hands-on frontendutveckling i Vue.js, där jag omsatte design till kod och bidrog till att minska glappet mellan UX/UI-arbete och den färdiga produkten.

Designsystem och implementation

Besluten handlade om att skapa ett system som höll över tid: tydliga komponenter, konsekventa mönster och en stark länk mellan UX/UI-arbete och kod.

Designsystem som gemensam grund

Avvägning

Mer arbete på systemnivå i stället för att lösa gränssnitt som isolerade engångsinsatser.

Effekt

Starkare konsekvens i produkten och bättre förutsättningar för att bygga vidare med samma språk och samma komponentlogik.

Komponenttänk i både design och frontend

Avvägning

Hårdare krav på struktur och återanvändbarhet än om varje vy hade lösts separat.

Effekt

Tydligare design-till-kod-kontinuitet och ett gränssnitt som känns mer sammanhållet över tid.

Konsekvens före ad hoc-lösningar

Avvägning

Mindre utrymme för lokala undantag i enskilda gränssnittslägen.

Effekt

Ett mer hållbart gränssnittssystem där användningen känns tydligare och implementationen mer stabil.

Avslutande sammanfattning

Caset visar hur design, systemtänkande och frontendimplementation kan hållas ihop i en komplex produktmiljö utan att förlora tydlighet.

Projektet visar hur jag arbetar i gränslandet mellan UX/UI och frontend. På Zynka BIM handlade arbetet inte bara om att formge gränssnitt, utan om att bygga en stabil produktgrund där design, systemtänkande och implementation håller ihop.

Vad projektet visar

Designsystemet jag var med och tog fram används fortfarande i produkten idag, vilket gör caset till ett tydligt exempel på hur hållbart design- och implementationsarbete kan se ut i en komplex digital produktmiljö.

Fler användarfall