En Figma-integrasjon for tverrfaglige team

Figma

Tenk deg å være en del av et tverrfaglig team på et stort prosjekt. Designeren overleverer Figma-filen, og det blir raskt vanskelig for utviklere å følge alle endringer. Dette var virkeligheten vi avdekket i vårt feltarbeid: utviklere brukte mye tid på å identifisere oppdateringer i det de beskrev som «rotete» Figma-filer med mange rammer, og uklarhet i prosessen førte til misforståelser og forsinkelser

Utgangspunktet for prosjektet vårt var en bred utforskning av hvordan et nordisk konsulentfirma kunne forbedre kommunikasjon og samarbeid i tverrfaglige team, med et spesielt fokus på hvordan digitale verktøy og kunstig intelligens kunne spille en rolle. Gjennom feltarbeidet, som besto av intervjuer og observasjon, ble det imidlertid tydelig at denne problemstillingen var for vid.

For å utvikle en meningsfull løsning, spisset vi derfor fokuset mot de konkrete utfordringene som oppsto i overleveringsprosessen mellom designere og utviklere. Vår oppgave ble dermed å dykke ned i denne spesifikke arbeidsflyten for å identifisere rotårsakene til friksjonen og designe et konsept som kunne bygge bro mellom disiplinene og sikre en mer sømløs prosess.

Dette har jeg gjort

Feltarbeid UI/UX Prototyping Brukertesting Analyse

Teknologi

Figma FigJam Maze

Oppsummering av AI

Gjennom feltarbeid med intervjuer og observasjon avdekket vi at overleveringen fra design til utvikling var en stor utfordring. Utviklere slet med å spore endringer i det de beskrev som "rotete" Figma-filer, noe som førte til misforståelser, forsinkelser og at designvisjonen ble mistolket.
For å løse dette utviklet vi «Change Watcher», en funksjon designet for Figma gjennom en designsprint. Konseptet gir en strukturert, kronologisk oversikt over designendringer, og inkluderer en AI-assistent som kan gi detaljerte tekniske forklaringer for å bygge bro mellom disiplinene.
En brukertest med 13 deltakere validerte konseptet: 90 % anså funksjonen som nyttig og suksessraten var på 80 %. Den viktigste lærdommen var imidlertid at lignende funksjonalitet finnes i Figmas «DevMode», noe som understreker behovet for tydeligere differensiering av løsningen i fremtidig arbeid.

HVORDAN KAN VI

Støtte en smidig overlevering fra design til utvikling?

I feltarbeidet så vi at misforståelser og manglende oversikt var en gjenganger i tverrfaglige team. Design ble ofte mistolket eller oversett, og både designere og utviklere brukte mye tid på å avklare små detaljer. Dette førte til forsinkelser, frustrasjon og en teknisk implementering som ikke alltid gjenspeilet den opprinnelige designintensjonen.

PROSESSEN

En strukturert tilnærming fra innsikt til ferdig konsept

Vi startet med feltarbeid der vi brukte kvalitative metoder, inkludert fem semistrukturerte intervjuer og observasjon for å få en dyp forståelse av arbeidsflyten og samarbeidskulturen i bedriften.

De innsamlede dataene ble analysert tematisk for å identifisere gjentakende mønstre og kjerneområder for forbedring.

Basert på innsikten gjennomførte vi en designsprint der vi definerte problemet, utviklet en brukerpersona og genererte ideer med metoder som «Crazy 8s». Deretter laget vi storyboard og bygde en interaktiv prototype i Figma.

Prototypen ble testet på 13 deltakere i Maze der vi samlet både kvantitative og kvalitative tilbakemeldinger for å evaluere funksjonalitet og brukervennlighet.

Bilde av designsprinten vi gjennomførte.

LØSNINGEN

En funksjon integrert direkte i Figma for å forbedre oversikten og kommunikasjonen rundt designendringer

Løsningen tar sikte på å forbedre arbeidsflyten mellom UX-designere og utviklere ved å tilby sanntidsvarsler om designendringer, en strukturert oversikt over oppdateringer og en integrert AI-assistent som kan gi detaljerte forklaringer på endringene.

En dedikert "Changes"-fane

En ny fane ved siden av "Design" og "Prototype" gir direkte tilgang til alle endringer.

Strukturert endringslogg

Få en kronologisk liste over alle designendringer, med informasjon om tidspunkt og en kort beskrivelse. Brukere kan filtrere for å se endringer i alle rammer eller ...

fokusere på utvalgte rammer med vår "drag and drop" funksjon. Her kan man også se historikken for den spesifikke rammen.

AI assistent for bedre forståelse

Denne funksjonen bygger bro mellom design og utvikling ved å gi dypere forklaringer på endringene. Den kan levere tekniske detaljer som nøyaktige fargekoder eller alignments, og svare på andre spørsmål du måtte ha, direkte i arbeidsflyten din. direkte i arbeidsflyten din.

RESULTATET

Brukernes dom: Change Watcher validerer behovet, men avdekker uventet konkurranse og forbedringsmuligheter

Brukertestingen bekreftet at Change Watcher har et betydelig potensial, ettersom konseptet adresserer et reelt behov for bedre oversikt og kommunikasjon mellom design og utvikling. Hele 90 % av deltakerne anså funksjonen som nyttig for team med ulike fagpersoner. Samtidig avdekket evalueringen et klart behov for å forbedre brukervennligheten og tydeliggjøre konseptets unike verdi sammenlignet med eksisterende funksjoner i Figma.