Vad jag faktiskt gör när en kund säger "Jag behöver en app designad"
Min faktiska appdesign process, från discovery-samtalet genom visuell riktning, UX-wireframing och slutskärmar.
Min faktiska appdesign process, från discovery-samtalet genom visuell riktning, UX-wireframing och slutskärmar.
”Jag har en idé till en app” är förmodligen det vanligaste första meddelandet jag får från potentiella kunder. Min appdesign process tar vid härifrån, från det första samtalet till de slutgiltiga skärmarna. Det som följer det meddelandet är där det riktiga arbetet börjar, och det är sällan vad folk förväntar sig.
De flesta kunder antar att processen börjar i Figma. Det gör den inte. Den börjar med ett samtal, och det samtalet formar allt som kommer efter. Här är min faktiska process, från första mötet till slutresultatet.
Det börjar med ett discovery-samtal, inte ett designverktyg
Discovery-samtalet är den viktigaste konversationen i hela projektet. Jag behöver förstå produkten på en fundamental nivå innan jag öppnar något designverktyg. Vilket problem löser den? Vem är den för? Vad skiljer den från alternativen? Vilka funktioner har kunden i åtanke?
Jag frågar också om visuell riktning, har de sett appar de älskar? Varumärken de beundrar? Befintliga tillgångar? Men här är en nyckelinsikt från år av att göra det här: de flesta kunder har ingen tydlig visuell riktning, och det är helt okej. De kanske säger ”något modernt” eller ”rent och minimalt” men kan inte formulera vad det innebär visuellt. Min process är byggd för precis det, jag hjälper dem att upptäcka sina preferenser genom att reagera på riktiga alternativ, inte genom att förvänta mig en perfekt brief i förväg.
De praktiska detaljerna spelar roll också. Tidslinje, budget, vem som godkänner arbetet. Att förstå godkännandestrukturen tidigt förhindrar smärtsamma överraskningar veckor in i projektet.
Efter samtalet skickar jag alltid en skriftlig sammanfattning. Det låter grundläggande, men att ha båda sidor överens skriftligt innan något designarbete börjar förhindrar den vanligaste källan till projektfriktion: felmatchade förväntningar.
Visuell riktning kommer först
Det är här min process skiljer sig från vad du kanske förväntar dig. Jag börjar inte med wireframes eller användarflöden. Jag börjar med hur appen ska kännas.
Jag gör en djupdykning i visuell inspiration, skärmdumpar från riktiga produkter, referenser från hela branschen, abstrakta moodboards som fångar en emotion snarare än ett specifikt UI-mönster. Sedan organiserar jag allt i distinkta visuella riktningar. Inte en slumpmässig hög med skärmdumpar, utan kurerade alternativ där varje ett representerar en distinkt stämning.
Jag guidar kunden genom varje riktning, förklarar mitt tänkande och låter dem reagera. De väljer vanligtvis en till tre riktningar som resonerar, ibland kombinerar de element mellan dem. ”Jag älskar färgpaletten från den här riktningen, men typografin från den, och avstånden borde kännas mer som den här.”
Den typen av specifik feedback är guld. Det är ett av de viktigaste ögonblicken i appdesign processen. Vi har gått från en vag idé om ”modernt” till konkreta gemensamma referenser som båda förstår.
UI-mockups: hitta det exakta utseendet
Med visuell riktning vald skapar jag tre till fem mockupskärmar som visar olika sätt att utföra inom den riktningen. Olika hörnbehandlingar, färgbalanser, informationstäthet, typografivikt. Det här är inte riktiga skärmar med riktigt innehåll, det är visuella utforskningar.
Kunder väljer nästan aldrig en och säger ”perfekt.” De mixar och matchar, en knappstil från en mockup, kortdesignen från en annan, headerbehandlingen från en tredje. Det är precis poängen. Det verkliga värdet av flera alternativ är att hjälpa kunder formulera vad de vill ha.
Först efter att vi har låst den visuella riktningen går vi vidare till hur appen faktiskt fungerar. Den separationen är medveten och icke-förhandlingsbar i min process.
UX-fasen av appdesign processen
Nu byter jag lins helt. Visuella beslut är klara. Det är dags att fokusera enbart på struktur, flöden och användbarhet.
Vi börjar med en brain dump av varje funktion kunden vill ha, varje dröm, varje idé, varje funktion de sett i konkurrentappar. Ingen filtrering. Få ut allt.
Sedan kommer det ärliga samtalet: vad är MVP:n? Av hela den här listan, vilka tre till fem kärnfunktioner. Jag skrev ett helt inlägg om MVP-avgränsning och hur man avgör vad som bör byggas först. Av det måste existera för att produkten ska fungera vid lansering? Att skära funktioner är inte att döda dem, det handlar om att vara strategisk kring vad man bygger först och lära sig av riktiga användare innan man bygger mer.
Jag kartlägger skärmflödena, hur en användare rör sig genom appen, vilka skärmar som kopplar till vilka, var det finns återvändsgränder eller onödiga steg. Sedan wireframar jag varje skärm: low-fidelity, gråskala, ingen visuell design. Bara struktur och hierarki. Var bor elementen? Är navigationen intuitiv? Kan någon uppnå sitt mål utan förvirring?
Att föra samman allt
Den sista fasen är att kombinera den godkända visuella riktningen med de godkända wireframes. Färgerna, typografin, avstånden och personligheten möter de faktiska skärmarna och funktionerna. Produkten börjar kännas verklig.
Vid det här laget finns det sällan stora överraskningar. Den visuella riktningen var godkänd. UX-strukturen var godkänd. Att kombinera dem är förfining, inte nyuppfinning. Ibland behöver en färg som fungerade i en mockup justeras för en dataintensiv skärm. Ibland skiftar avstånd när riktigt innehåll ersätter placeholder-text. Men de stora besluten var redan fattade gemensamt.
Som Nielsen Norman Group belyser är feltillstånd och tomma tillstånd platser där användarupplevelsen ofta bryter ihop. Jag designar också de skärmar folk glömmer bort: feltillstånd, tomma tillstånd, laddningsindikatorer och bekräftelser. Dessa ”osynliga” skärmar är ofta där användarupplevelsen havererar i riktiga produkter.
Varför den här ordningen spelar roll
Att separera visuell design från strukturell design kan verka som extra arbete. Jag går djupare in på det i varför jag designar UI och UX separat. Det är faktiskt tvärtom, det sparar tid och producerar bättre resultat.
När du försöker designa hur något ser ut och hur det fungerar samtidigt blir båda lidande. Du blir distraherad av färgval när du borde tänka på användarflöden. Du kompromissar strukturella beslut för att de inte passar den visuella riktningen du startade med.
Genom att låsa den visuella riktningen först löser jag inte två problem samtidigt under UX-fasen. Och när jag senare kombinerar dem har båda halvorna blivit individuellt godkända. Resultatet är en produkt där estetiken och funktionaliteten var och en fick ordentlig uppmärksamhet.
Om du letar efter en designer för din app är det här processen jag skulle guida dig igenom. Varje projekt anpassar den, men appdesign processen förblir densamma, för den fungerar.
Läs också