De flesta samtal om en redesign börjar i fel ände. Någon öppnar ett designverktyg, någon annan säger att produkten ser trött ut, och en budget läggs på att åtgärda ett symptom. Designplanering handlar om att bestämma vad en produkt ska signalera att den är, och det är ett affärsmässigt beslut långt innan det blir ett visuellt sådant.
Det här är det viktigaste att ta med sig. Två gränssnitt kan innehålla exakt samma information, fungera på exakt samma sätt, och ändå placera en produkt på helt olika platser på marknaden. Frågan bakom en redesign är därför inte ”vad är trasigt?”, utan ”hur stort är avståndet mellan vår nuvarande position och den vi vill ha?”. Det avståndet är gapet, och att hitta det är själva uppdraget.
Det här är för dig som fattar besluten. Vi kommer att titta på hur stil sätter positionering, hur man hittar gapet, hur man testar en inriktning innan något byggs, och vad förändringen faktiskt kostar i form av tid och risk.
Designplanering är beslutet, som tas innan en enda skärm har ritats, om vilken position en produkts stil ska signalera – och om den positionen stämmer överens med den som företaget faktiskt vill ha. De två disciplinerna under den är välkända. User Experience (UX) och User Interface (UI) design är två av de mest använda begreppen inom produktdesign: UX-designers fokuserar på upplevelsen och sätter stämningen, tonen och kommunikationsstilen, medan UI-designers förverkligar den upplevelsen i ett användargränssnitt. Båda har funnits ett tag nu och genom deras gemensamma insatser får digitala produkter liv.
Planering är det som ligger ovanför dessa två. För varje projekt finns det flera giltiga tillvägagångssätt snarare än ett enda korrekt, och att hålla gränssnittet enkelt och praktiskt är ett av de säkraste. Ett fungerande gränssnitt, en ren upplevelse och användare som snabbt når dit de ska.
Ta Tinker-webbplatsen som ett exempel på en ren och funktionell design.
Produktsöksidan består av en enkel och intuitiv sökfunktion som låter användaren hitta önskad produkt genom att matcha olika parametrar. Vid hovring visas både priset och möjligheten att lägga till artikeln i varukorgen. Genom att klicka på en produkt öppnas en ny sida med en utförlig beskrivning. Allt vilar på en vit bakgrund som förstärker webbplatsens rena upplevelse.
En sådan återhållsamhet uppfattas som snabbhet och pålitlighet. Vilket är helt rätt för en produkt vars löfte är ett snabbt köp – och helt rätt endast så länge det är den position företaget vill ha.
Det finns flera sätt att omvandla en uppsättning information och krav till en positiv användarupplevelse, och valet mellan dem är där positioneringen avgörs. Låt oss jämföra två, båda lättanvända och båda med en god struktur av samma information.
Stridgränssnittet i Final Fantasy VII presenterar allt spelaren behöver. Genom användning av menyer, text, siffror och mätare görs all viktig information tillgänglig på ett enkelt och praktiskt sätt. Det är lättläst vid en snabb anblick och har visat sig vara hållbart: varje huvudspel fram till Final Fantasy XV år 2016 använde en variant av samma menystruktur.
Vid en första anblick verkar Persona 5 erbjuda en helt annan upplevelse. Det gör det inte. Gränssnittet är byggt på samma information, men formgivet på ett annat sätt. De två skiljer sig åt i hur man väljer ett alternativ – genom enknappsåtgärder istället för att välja från en meny – men utöver det fungerar allt på samma sätt.
Så vilken av dem är en korrigering av den andra? Ingen av dem. Det är inget fel på menyn i Final Fantasy VII, och den vinklade typografin och animationerna i Persona 5 löser inte ett användbarhetsproblem. De två säljer olika produkter till olika målgrupper med hjälp av samma underliggande information. Om du vill ha en mer djupgående titt på UX- och UI-designen i Persona 5.
Stil förändrar användarupplevelsen. Det får också konsekvenser långt utanför skärmen, eftersom UX- och UI-design definierar den projicerade bilden av en produkts kommunikationsstil och dess position på marknaden. Små på komponentnivå. Sällan små på varumärkesnivå.
Bloomberg är ett bra exempel på djärvhet i sin design, något vi redan utforskat i ett annat sammanhang i en tidigare artikel. Exemplet ovan visar webbplatsen före omdesignen 2018, och när man ser den nu verkar det inte vara något fel på den. Ibland är poängen inte att se bättre ut än tidigare. Det är att se annorlunda ut.
Som John Micklethwait, Bloombergs chefredaktör, förklarade vid den tiden, åtföljdes omdesignen av lanseringen av en digital prenumerationstjänst och byggdes för att göra läsarens upplevelse renare och mer fokuserad. När man ser båda versionerna nu är den största skillnaden mellan dem stilen. De gick tillbaka till svartvitt och organiserade om några element, medan själva gränssnittet är i stort sett likadant.
Inget av detta är kosmetiskt. En läsare kan utföra samma sak i båda versionerna, så skillnaden ligger helt i vad företaget projicerar: sobert och auktoritärt i det ena fallet, mer upptaget och konventionellt nyhetslikt i det andra. För en prenumerationstjänst som säljer information som delvis finns tillgänglig på annat håll, är hur auktoritär produkten ser ut en del av det som säljs.
Vi ser samma mekanism i kunduppdrag. När Moloco behövde att deras webbplats skulle uppfattas som en plattform i världsklass snarare än bara en kapabel sådan, var lösningen en tillväxtrevision och en omstyling som var direkt inriktad på den uppfattningen – informationen ändrades knappt; auktoriteten den projicerade gjorde det.
Det ord som saknas i de flesta samtal om att uppdatera en produkts stil är planering. En stilförändring är en förändring av det som dina kunder känner igen, så betrakta det som en byggnadsbesiktning snarare än ett lager färg. Du vill veta vad som är bärande innan någon plockar upp en pensel, och du vill ha det dokumenterat.
På Imaginary Cloud genomför vi detta som en analys av positioneringsgap: fyra steg, var och ett med ett skriftligt resultat, som mynnar ut i en lanseringsplan snarare än en uppsättning skärmar. Det är samma disciplin som ligger bakom vår produktdesignprocess: när vi byggde om Environmental Intellects gränssnitt för att projicera en mer teknisk och trovärdig bild, genomgick arbetet fyra definierade steg istället för att hoppa direkt till det visuella. Ordningen spelar mindre roll än en detalj: evidensfasen kommer före ritfasen, och det är det steg som de flesta omdesignprojekt hoppar över.
Innan något ritas upp, skriv ner den position ni har, den position ni vill ha och bevisen för avståndet mellan dem. Säljinvändningar, supportärenden, intervjuer med kunder som lämnat tjänsten, språket konkurrenter använder i sin marknadsföring: allt detta kostar mindre än en omdesign. Resultatet är en mening som definierar gapet. Om du inte kan skriva den meningen har projektet ännu inget brief.
Titta på hur den nuvarande designen presterar för de som använder den, inte bara hur den ser ut. Sessionsinspelningar, slutförandegrad för uppgifter och ett antal modererade intervjuer (kärnan i en UX-revision) kommer att visa vilket av de två du har. De kräver olika typer av arbete, och att blanda ihop dem är det dyraste misstaget i hela processen. En stiluppdatering löser inte ett trasigt flöde. En användbarhetsåtgärd ändrar inte hur ett varumärke uppfattas. När problemet faktiskt är användbarhet är utdelningen direkt: en revisionsledd omdesign av Learninghubz ökade antalet aktiva användare med 20 % och mobilanvändningen med mer än 50 % inom tre månader efter lansering.
Resultatet är en kort slutsats som anger vilket problem budgeten faktiskt löser.
Stilbeslut kan testas innan de byggs, och det till en låg kostnad. Presentera två inriktningar för ett urval av din målgrupp och fråga vilken typ av företag varje inriktning tillhör, vad det skulle kosta och vem det är till för. Tre metoder täcker det mesta:
Resultatet blir en vald inriktning med tillhörande motiveringar. Det dokumentet förhindrar att beslutet ifrågasätts varje gång en ny intressent råkar gå förbi en skärm.
Risken med en omdesign är att igenkänning och konvertering sjunker när användarna behöver lära sig en bekant produkt på nytt. Fyra åtgärder begränsar den risken:
En stegvis lansering tar längre tid, men enligt vår erfarenhet handlar det om veckor snarare än månader. Det du köper dig är möjligheten att avbryta. En total omställning gör att du förlorar den möjligheten. Mätt mot en korrekt baslinje betalar sig en positioneringsdriven omdesign: vår egen webbplatsrelansering, som genomfördes utifrån en tillväxtanalys och samma produktdesignprocess, höjde konverteringen med 5 % inom tre månader, och fortsatte sedan att öka.
Budgeten följer omfattningen, och det är ett brett spann. En fokuserad omdesign av en produkts visuella språk tar några veckor. En fullständig redesign som omfattar designsystemet (det delade biblioteket av komponenter, färger och typografiska regler som produkten är uppbyggd av), tillsammans med marknadsföringssajten och själva produkten, pågår i månader och kräver även utvecklingsresurser. Var tydlig med tiden till värde redan från början, eftersom en designförändring ger avkastning genom uppfattat värde, och uppfattningar förändras över kvartal, inte sprintar.
Finns det en optimal tidpunkt för en redesign? Nej, inte i någon generell mening. Grafisk design visar detta tydligare än produktdesign. Twinings of London har behållit i princip samma logotyp i över två århundraden, en av de äldsta som fortfarande används, medan Juventus Football Club ersatte ett klubbmärke som använts i årtionden med ett abstrakt "J", som presenterades i januari 2017 och designades av Interbrand (och som förenklades ytterligare 2020). Vissa produkter förändras aldrig, andra förändras nästan varje år, och båda kan vara rätt.
Det är det som är intressant med varje exempel i den här artikeln: inte ett enda av dem är en nödlösning. Det finns ingen bra eller dålig formgivning, bara en stil som är bättre eller sämre anpassad till produktens affärsmål. Beslutet hör hemma i det strategiska tänkandet, vilket också är en del av produktdesign, långt mer än det hör hemma i gränssnitt eller användarupplevelser.
Google visar båda versionerna av beslutet inom ett och samma företag. Chromes införande av Material You (Googles designspråk som introducerades med Android 12, där färg och form anpassas efter användarens egna inställningar) höll webbupplevelsen nära den som ersattes. Det läses som ett ställningstagande om vilken familj produkten tillhör, inte som en korrigering. Den integrerade Gmail-vyn, som Google tillkännagav på sin Workspace Updates-blogg i början av 2022, ändrade gränssnittet och upplevelsen avsevärt. Båda är medvetna val. Med väldigt olika syften.
Det praktiska testet handlar om att avgöra vilket av de två alternativen du faktiskt föreslår:
| Förfina den befintliga designen | Omprofilering (Rebrand) | |
|---|---|---|
| När det tillämpas | Positioneringen är rätt, utförandet är daterat | Själva positioneringen har ändrats: ny målgrupp, prisnivå eller marknad |
| Vad som ändras | Visuellt språk, komponenter, hierarki | Identitet, namnbehandling, tonfall och allt däromkring |
| Typisk omfattning | Veckor, designdrivet | Månader, design och utveckling tillsammans |
| Huvudsaklig risk | Inkonsekvens över olika ytor under utrullningen | Minskad igenkänning hos befintliga kunder |
| Nödvändigt underlag | Användbarhetsinsikter och varumärkesaudit | Marknadsbevis för att positionen har ändrats |
Lika bra alternativ kan representera kontrasterande positioner i en bransch. Den bästa tidpunkten för en förändring är alltså när den bild din design projicerar inte längre stämmer överens med den position ditt företag vill ha. Oftast krävs det inte mycket för att ändra det intrycket. Det handlar om att justera produktens stil utifrån affärsmålen, med belägg för att klyftan är verklig.
När den bild designen förmedlar inte längre stämmer överens med den position företaget vill ha, eller när undersökningar visar att användare misslyckas med sina uppgifter. En omdesign som enbart drivs av tycke och smak slösar budget utan ett mätbart mål, så definiera gapet du vill överbrygga innan arbetet påbörjas.
Både och, och de är svåra att skilja åt. Stilen formar vad en användare förväntar sig av en produkt innan de ens har rört den, och dessa förväntningar förändrar hur samma gränssnitt upplevs. Final Fantasy VII och Persona 5 är extrema exempel: nästan identisk information, men två helt olika upplevelser.
Förfining är rätt väg när positioneringen är korrekt men utförandet känns daterat. Omprofilering är rätt när själva positioneringen har förändrats, genom en ny målgrupp, en ny prisnivå eller en ny marknad. Det senare är dyrare och mer riskfyllt, så det kräver marknadsbevis snarare än personliga preferenser.
Förlust av igenkänning, ett tillfälligt tapp i konvertering medan användarna lär sig produkten på nytt, samt tekniska kostnader som ingen räknat med. Alla tre kan hanteras genom en stegvis lansering, en uppmätt baslinje och en överenskommen plan för återställning.
En fokuserad uppdatering av det visuella språket tar några veckor. En fullständig omdesign som omfattar designsystemet, marknadsföringssajten och produkten tar månader och kräver teknisk kapacitet parallellt med designarbetet. Resultatet syns i hur produkten uppfattas, vilket förändras över kvartal.
Kostnaden styrs av omfattningen och antalet ytor som berörs, inte antalet skärmar. En visuell uppfräschning av en produkt är den billigare änden. Allt som förändrar designsystemet, och därmed allt som är byggt utifrån det, medför implementeringskostnader för utveckling som oftast överstiger designarvodet.
Ja, och kanske ännu mer. Ett genomtänkt gränssnitt fungerar som ett bevis på att företaget bakom är trovärdigt, och vid köp där kunden inte kan inspektera tekniken är design en av de få signaler de har att gå på.
Design är inte dekoration som läggs ovanpå en produkt. Det är produkten som berättar för användaren vad den är, innan de ens har läst ett ord av din text. Om det budskapet blir fel hjälper ingen putsning i världen.
På Imaginary Cloud designar vi digitala produkter utifrån den position de är tänkta att ha, inte bara utifrån de skärmar de ska visas på. Om du överväger en ny design och är osäker på om du har ett problem med positioneringen eller användarvänligheten, prata med vårt team så går vi igenom vad din nuvarande design säger om er.
Innehållshanterare, textredigerare, och presentatör av strategiska idéer, tillsammans med att vara en ivrig beundrare av filmkonst och visuellt berättande.
People who read this post, also found these interesting:
