Bluescape

Virtuell samarbetsplattform

  • Service design,
  • UX/UI Design,
  • Design System,
  • SaaS
Bluescape product ui screen

Om projektet

Bluescape är en digital whiteboardplattform, i samma kategori som Miro och FigJam, men utvecklad för mer komplexa samarbetsprocesser och större organisationer. Plattformen används av globala företag som Ford, Disney och Netflix – och även av amerikanska myndigheter – där säkerhet, tillförlitlighet och skalbarhet är avgörande krav. Bluescape används dagligen av team för att tänka visuellt tillsammans – samla idéer, strukturera projekt, presentera komplex information och fatta gemensamma beslut. Allt sker i realtid och på distans, med stöd för generativ AI, högupplöst innehåll, videomöten och arbetsflöden anpassade för stora organisationer. Under vårt mångåriga samarbete med Bluescape har vi haft en central roll i att forma produktens vision, koncept och funktioner. Vi har även utvecklat UX och UI och lagt grunden till företagets designsystem.

Vision och konceptutveckling

För att utveckla Bluescape från ett digitalt whiteboardverktyg till en strategisk plattform för visuellt beslutsfattande arbetade vi inte bara med design, utan med produktens övergripande riktning. Tillsammans med Bluescapes produktledning tog vi fram koncept för nya funktioner, framtida användningsscenarier och hur plattformens olika delar skulle hänga ihop.

Vi konkretiserade idéerna genom prototyper och scenarier, och presenterade dem internt för ledning, UX-team, utvecklare och affärssidan. Vårt mål var att skapa en produkt som känns självklar att använda, är byggd för att skala och fungerar i organisationer där kraven på kvalitet och tillförlitlighet är som högst.

Meet & Collaborate – ett exempel på funktion vi utvecklade

Ett av de mest komplexa och spännande områdena vi arbetade med var hur möten och samarbete skulle fungera i Bluescape. Inte bara som videokonferens, utan som en integrerad del av den visuella arbetsytan.

Bluescape Meet användes både för dagliga standups, design reviews i mindre team och för stora möten med över 150 deltagare, vilket ställde helt andra krav på hur mötesupplevelsen skulle fungera. Några av de frågeställningar vi arbetade med var:

How do you design a meeting mode that works just as well for a team of ten as for a global broadcast with hundreds of participants?

How do you combine presentation mode with “follow mode” without participants losing orientation or control?

How do you ensure everyone gets a chance to contribute, for example in a daily standup, without the meeting losing pace?

How do you design breakout sessions so it’s clear where to go, what to do and how to return to the main session?

Genom att kombinera video, whiteboard, filer, navigation och realtidsinteraktion i samma yta skapade vi en upplevelse där samtal, idéutveckling och beslut sker i ett och samma flöde.

Bluescape product meet ui
Bluescape product meet desktop

Ett designsystem som gjorde Bluescape skalbart

När vi började arbeta med Bluescape hade gränssnittet utvecklats under lång tid utan en tydlig visuell riktning. Olika delar av systemet fungerade på olika sätt, och uttrycket var inte längre modernt eller sammanhållet. Samtidigt byggdes nya funktioner parallellt, vilket ibland ledde till olika tolkningar mellan teamen. För att skapa en mer enhetlig produkt och effektivare utvecklingsprocess tog vi fram Bluescapes första designsystem, med gemensamma komponenter, visuella principer och interaktionsmönster. Det gav tydliga effekter: en konsekvent designupplevelse, mindre dubbelarbete, snabbare utvecklingscykler och ett gemensamt språk mellan design-, produkt- och utvecklingsteam.

Bluescape product design system
Bluescape product icons
Bluescape product components
Från Sketch till Figma och Storybook

När vi började samarbetet i januari 2020 var Sketch det ledande designverktyget, och det första systemet byggdes därför där. Men utvecklingen gick snabbt, och redan i början av 2022 växlade vi över till Figma – vilket gjorde det möjligt att arbeta komponentbaserat, i realtid och mer effektivt tillsammans.

Det nya systemet togs fram med skalbarhet som princip. Komponenter och design tokens strukturerades i REMs, anpassades för olika skärmstorlekar och kopplades till Storybook för att knyta samman design och kod. På så sätt blev systemet inte bara ett visuellt bibliotek – utan en stabil grund som gjorde att Bluescape kunde fortsätta utvecklas snabbare, mer konsekvent och i större skala.

Från teamet

❝ Att vara en del av Bluescapes design vision team gav oss möjlighet att inte bara forma gränssnitt – utan hur hela produkten skulle fungera, kännas och upplevas. Vi arbetade nära både UX-team och produktledning för att skapa en gemensam riktning och se till att den faktiskt blev verklighet.

Lova Karlsson, Designer
Lova smiling

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.

Kontakta oss

Fler projekt

Bluescape web featured image

Bluescape Web

Global webbplats för en digital samarbetsplattform
Elk featured image

Elk

Teknisk lösning för musikaliskt samarbete på distans
Jobnet featured image

Jobnet

Intuitiv rekryterings- och jobbplattform