UX & UI Designer

Skills

Design Tools

If there's something I really love, it's my design tools. Having been with Designit and FirstAgenda, I have really become good at using different tools. I mainly use Invision to make prototypes. I use Abstract to version control my files. Sketch for making designs. I also play a little with Framer X and Adobe XD just to try different tools and see what's moving out there.

Right now, I’m working on implementing Figma at out workplace.

Billige men effektive brugertest

Det er svært at få etableret et godt user research system. Jeg har prøvet at planlægge en masse, hvor ham/hende jeg skal tale med aflyser minutter inden mødet finder sted.

I produkt-teamet skal vi nu alle deltage i en ugentlig sælgermøde, og det har givet virkelig stærk måde at få viden omkring møder uden nødvendigvis at skulle lave research eller aftale møder med diverse mennesker. Vores sælgere motiverer kunden til at beskrive deres mødeadfærd, og derefter introducerer de vores produkt med fokus på de features der er relevante for netop den kunde.

Det er altså guldkorn der kommer ud af kunderne, som beskriver deres mødeadfærd, forklarer deres pains, og kommenterer specifikke features som de kan lide / ikke kan lide eller efterspørger.

Det erstatter ikke user research fuldstændigt, men det er en ressource-effektiv og ret så nyttigt format at få samlet viden på.

Jeg bruger Dropbox Paper til at systematisere den viden jeg får samlet ind i kategorier. Så er tanken, at når vi skal ændre noget ved vores applikation, så har jeg ét dokument med viden, hvor jeg kan se hvad tidligere brugere har ytret sig omkring netop denne funktion.

Jeg har lavet et system inde i Dropbox Paper, så istedet for at have noter for hvert møde med en kunde, så samler jeg deres kommentarer i kategorier.

Udgangspunkt i succesfulde apps

Når jeg kommer med foreslag til løsninger, udover at anvende user research, så bruger jeg i høj grad eksempler fra successfulde apps. Eksempelvis, da jeg skulle lave et nyt onboarding flow for FirstAgenda’s app, istedet for at teste vores nuværende flow og bruge en masse ressourcer på research, så valgte jeg istedet at kigge på alle mulige apps onboarding flows og se hvad de havde til fælles og så adoptere lignende principper.

Eksempelvis har alle apps mange skærme igennem onboarding forløbet. Istedet for at placere alle inputningsfelter ind i en sign-up skærm, så er der en tendens hvor de spreder det ud, så man starter fx med at indtaste sit navn, derefter sin alder, derefter sin mail osv. osv. Istedet for at taste alting ind på samme side. Det fandt jeg så ud af handler om at det er lettere for hjernen at fordøje en ting af gangen før man viser den noget nyt. Istedet for at brugerteste sig til at lære det her kende, så prøver jeg så vidt også at kigge på hvad andre apps har gjort for at undersøge mine muligheder, når jeg designer.

Billedet er lidt svært at se, når det er så småt, men basically er det screenshots af alle skærme inden man kommer direkte ind i appen for hhv. Tinder, Duolingo, Facebook, Dropbox og så med sammenligning til vores app.

Fra wireframe til mock-up

Jeg bruger sketch-bøger til at tegne mine wireframes inden jeg begynder at bygge det i Sketch. Det fjerner behovet for at tingene skal se helt perfekte ud fordi du kan ikke tegne perfekt i hånden, og samtidig giver det mig mulighed for at være eksplorativ og undersøge mine muligheder og få en fornemmelse af hvordan det vil se ud.

Tegner til daily UI challenge.

Wireframe til vores document view med mulighed for at kommentere og highlighte. Det giver lige en fornemmelse af det hele inden jeg bygger det i Sketch. Og tager kun 5 min alligevel at lave i hånden.

Fra mock-up til lækker design

Det venstre billede viser en hurtig mock-up på en ide med en anden type navigation end det vi har i dag. Bemærk, den blev lavet på under en halv arbejdsdag, og det handlede om at lave noget hurtigt og så få nogle reaktioner. Det fik vi så, men designet skulle jo gøres mere frisk og lækkert og ikke så “mock-up” agtigt. Så efter nogle iterationer udviklede UI’et sig til billedet til højre. Det er lidt mere simpelt og rent, og så er det tilmed også nemmere at skalere til mindre skærme.

Vi har fået meget positive reaktioner på mock-uppet. Så meget, at vi valgte at droppe vores igangværende projekter og få vores udviklere startet på det her. Så inden længe, så bliver det vores nye navigation på vores løsning.

Mock-up.

Finished design

Inspirationskilder

Det er super vigtigt for mig, at jeg holder mig selv opdateret på hvordan design rører sig derude. Jeg læser altid alle opdateringer mine apps får, bare for at følge med i hvad udviklere/designere nu har valgt at gøre. Jeg ser altid store events såsom Apple’s WWDC, og som jeg har gjort siden jeg kan huske. Og jeg er blevet rigtigt gode venner med Dribbble, hvor jeg også går ind dagligt og ser om der er noget lækkert der er værd lige at ligge i en af mine mapper. Mapperne bruger flittigt i mit design arbejde, så det ser godt ud det jeg laver trods alt.

Handoff til udviklere

Det er meget vigtigt for mig, at når jeg afleverer noget til udviklere, så gør jeg det i en grad, så der ikke er misforståelser i hvordan det skal fungere.

Når jeg leverer mine designs, så anvender jeg typisk software som Invision eller Zeplin, så udvikleren kan inspect elementerne og få de helt nøjagtige mål.

Hvis UI elementerne i sig selv ikke er nok, fx hvis der skal forklares flowet imellem UIs, så uddyber jeg med tekst.

Oftest, udover at sende mine udviklere design filer og tekst, så assisterer hand-offet med et møde, så vi er helt sikre på at vi er aligned.

Det er meget forskelligt hvad hver især udvikler har brug for fra mig for at de kan komme igang og begynde at udviklere. Den fleksibilitet kan jeg arbejde med, om det så er at de har brug for præcis dokumentation af ALT med flere møder, eller om de har brug for en fil og så er alt godt. Det er indifferent for mig om det er det ene eller andet, fordi for mig handler det om at de har den nødvendige information for at komme videre.

Her har vores iOS udviklere et pixel-perfekt UI design samtidig med at de får assisterende tekster, der uddyber flowet. Under vores møde, der sørger jeg også for at markere at såfremt der er problemer, så står jeg til rådighed så vi kan finde et kompromis og arbejde udenom det tekniske problem. Billedet er fra vores nye transcriptions-feature som bliver Danmarks første transkriberings værktøj

Den her mock-up er ikke pixel perfekt, men det gør ikke noget, fordi vores front-end udvikler kender godt til alle vores regler og behøver egentlig bare en rough mock-up for at komme videre i sit arbejde. Derfor for han bare en mock-up for denne gang.