Om människor pratar om design är den första termen du förmodligen tänker på UI/UX. Du har tekniskt sett rätt, design handlar huvudsakligen om att skapa användargränssnitt och användarupplevelser, men produktvärlden har utvecklats och tagit fram en mer modern och användarcentrerad version—produktdesign.
Om du vill lära känna denna nya disciplin bättre har du kommit rätt. Låt oss gå igenom grunderna i produktdesign, del för del.
Lean: den viktigaste filosofin bakom produktdesign
Innan vi börjar diskutera de olika faserna inom produktdesign bör vi först se till att vi har rätt inställning.
Det moderna konceptet produktdesign bygger på (och tillgodoser behoven hos) en filosofi som kallas Lean Startup.
Tro det eller ej, men lean-metodiken är mycket äldre än datorer. Den började i början av 1900-talet när de skickliga lednings- och industridesignteamen hos den japanska biltillverkaren Toyota beslutade sig för att förbättra hastigheten och effektiviteten i sin produktion.
Den moderna lean-metodik som mjukvaruföretag använder bygger på Eric Ries arbete (jag rekommenderar starkt att du läser hans bok). I boken rekommenderar Eric företag att fokusera på snabbt lärande och validering i stället för att ägna månader åt att förbereda detaljerade affärsplaner.
Han hävdar att din affärsplan, oavsett hur väl du förbereder den, kommer att falla samman i samma ögonblick som din nya produkt når marknaden, eftersom du då kommer att upptäcka att produkten inte fullt ut tillgodoser dina kunders behov.
Därför bör du börja i liten skala, bygga något minimalt, lansera det på marknaden, validera din idé, anpassa produkten utifrån denna feedback och försöka igen och igen tills du hittar din PMF.
Här är en välutvecklad UX-designprocess för dina digitala produkter
Nu när vi har rätt inställning och förståelse för den iterativa bygg-lär-processen ska vi titta på de steg du behöver ta för att få igång din produktdesignprocess för digitala produkter (även om dessa regler också gäller fysiska produkter).
Det finns många sätt att hantera sin process på, men jag har upptäckt att detta fungerar bäst.
Have an account? Log In
Steg 1: Samla in strategisk kontext och produktkontext
Ditt produktdesignarbete kommer i praktiken att vara meningslöst och ge få konkreta resultat om du glömmer att ta hänsyn till företagets strategi och vision.
I bästa fall kommer du att skapa undermåliga upplevelser för dina användare. I värsta fall får du en produktdesign som varken löser användarnas problem eller hjälper företaget att nå sina strategiska mål.
Därför börjar varje framgångsrik produkt med att design- och produktteamen granskar och skapar samsyn kring följande:
Produktvision: Detta är en visualisering av den ideala värld där dina användare framgångsrikt har löst sina problem med hjälp av din produkt. Din vision sträcker sig en bit in i framtiden och fungerar som din ledstjärna – den säkerställer att allt du designar och bygger strävar mot denna ideala framtid.
Den kan vara i form av en text, en bild, en presentation eller till och med en hel video, som i fallet med SpaceX:s Starship.
Detta är ett perfekt exempel på en vision eftersom det visar den ideala värld där människor reser från New York till Shanghai på 40 minuter.
Som produktdesigner vill du se till att din design hjälper företaget att ta ett steg framåt mot denna vision.
Strategi: Din produktstrategi är en uppsättning övergripande åtgärder och faser som produkten behöver gå igenom för att uppnå sin vision.
Om man utgår från Starship-exemplet ovan såg Elon Musks strategi (förenklat) ut så här:
Som produktdesigner behöver du veta vilken fas i strategin du befinner dig i och vilken nästa produkt eller funktion du behöver bygga för att nå din vision.
Målmarknad: Din design kommer att variera avsevärt beroende på vilken marknad du försöker ta dig in på.
Om du vill bygga en horisontell produkt som människor inom alla nischer och marknader kan använda måste du se till att designen är begriplig och användbar för en stor variation av personas.
YouTube är ett typiskt exempel på detta, eftersom tjänsten inte har några designelement eller funktioner som är skräddarsydda för specifika nischer.
Å andra sidan, om du vill rikta dig mot en nisch (det vill säga gå vertikalt), måste du se till att din design är optimerad för behoven och särdragen hos de människor som ”bor” i den nischen.
Twitch är till exempel specialiserat på spel och har många integrationer och ett specialiserat användargränssnitt som hjälper influencers att dela sina spelsändningar med sina tittare.
Steg 2: Lär känna dina användare genom produktupptäckt
Nu när du är i linje med företagets vision och strategi är det dags att rikta fokus mot de människor som så småningom kommer att använda din design i sin vardag.
Mer specifikt vill du genomföra användarundersökningar för att upptäcka deras behov, vanor och prioriteringar. Du vill veta när och under vilka omständigheter de upplever de problem som du vill lösa, samt vilka alternativa lösningar de använder för att hantera dessa problem.
Här är tre viktiga steg som du kan ta för att uppnå detta:
Genomför upptäcksintervjuer: Börja med att skapa en lista över frågor som du vill ställa till intervjudeltagarna. Här är några exempel på frågor som du skulle kunna ställa till e-postmarknadsförare om du försökte lösa problemet med att deras e-postmeddelanden hamnar i skräppostmappar:
- Berätta gärna hur du undviker att dina marknadsföringsmeddelanden hamnar i mottagarnas skräppostmappar.
- Hur ofta upplever du det här problemet?
- Vilken inverkan har det här problemet?
- Är du nöjd med hur du löser det här problemet? Vilka nackdelar har din nuvarande lösning?
När frågeformuläret är klart kan du börja rekrytera deltagare genom att kontakta dem via LinkedIn, userinterviews.com eller specialiserade forum inom din nisch.
Slutligen genomför du intervjun, ställer dessa frågor och lyssnar noggrant på vad dina användare har att säga (proffstips: spela antingen in intervjun eller ta med en medhjälpare som antecknar).
Genomför enkäter: Enkäter är ytterligare ett utmärkt verktyg för produktupptäckt. Även om de saknar de kvalitativa insikter som du kan få genom att intervjua dina användare direkt, kompenserar de för detta genom sin förmåga att samla in data från ett stort antal användare.
Jag kommer inte att gå in på särskilt mycket detaljer kring vilka frågor du kan inkludera i dina enkäter, eftersom vi har en särskild guide för detta som du kan ta en titt på.
Skapa din persona: Så snart du är klar med dina intervjuer och enkäter är det dags att konkretisera alla dina resultat och skapa din användarpersona (eller dina användarpersonor).
En persona är en fiktiv karaktär som representerar de användare som du vill rikta din design till. I beskrivningen av din persona inkluderar du information om deras användarbehov, frustrationer och mål, samt en kort biografi som beskriver deras bakgrund och personlighet.
När personan är klar ska du förvara den på en synlig plats (jag har sett team skriva ut personadokumentet och sätta upp det på sin whiteboard) för att påminna alla som arbetar med designen om den person de utvecklar produkten för.
Steg 3: Lär känna dina konkurrenter
Jag är ganska säker på att du inte är ensam på marknaden och att både dominerande jättar och små nystartade företag kämpar för att få sin del av kakan.
Även om du kan förlita dig på dina produkt- och finansteam för att hitta sätt att vinna över konkurrenterna, är användarupplevelsen och hur dina konkurrenter löser olika problem som är specifika för din nisch (t.ex. hur man gör långa chatttrådar läsbara om du hade en meddelandeapplikation som liknar Slack) områden där produktdesignerns roll och kompetens blir viktiga.
Här är två saker som du behöver göra för att lära känna dina konkurrenter bättre:
Granska konkurrenternas funktionsuppsättningar: Har de specifika funktioner och designlösningar som kan göra användarnas upplevelse smidig? Om så är fallet bör du identifiera dem och ta hänsyn till dem när du utformar din produkt.
Det vanligaste resultatet av det här steget är en tabell för funktionsjämförelse.
I exemplet ovan kanske du ser att majoriteten av dina konkurrenter har en funktion för trattanalys som avsevärt förbättrar upplevelsen för försäljningschefer som rapporterar om teamets framsteg till sina intressenter.
Om detta är något utbrett och kan förbättra upplevelsen för din målpersona bör du överväga att utforma en sådan också.
Granska konkurrenternas användarupplevelser: Utöver själva funktionerna kan dina konkurrenter också ha välgenomtänkta flöden för vissa användaruppgifter som du kan vilja ta hänsyn till.
Det vanliga sättet att göra detta på är att ta skärmdumpar av de olika skärmarna hos varje konkurrent och skapa en lista som denna:
I exemplet ovan har jag använt Figma (min personliga preferens, men du kan använda Miro, AdobeXD eller något annat liknande verktyg) för att visualisera flödena för installation av tillägg i Monday.com och Trello.
Som vi kan se har båda verktygen använt liknande enkla flöden för att utföra denna uppgift. Därför är det rimligt att överväga att bygga något liknande! (Som en extra fördel kommer användarna enkelt att kunna navigera i din app om de byter från någon av dem till din produkt.)
Bonustips: Du kan också överväga att besöka recensionswebbplatser som G2 och Trustpilot för att hitta återkoppling om användbarheten eller funktionerna hos dina konkurrenter. Slutligen kan du under dina användarintervjuer, om du upptäcker att den intervjuade använder något av dina konkurrenters verktyg, be personen om återkoppling på dessa verktyg.
Steg 4: Utforma din lösning
Du har samlat in all nödvändig kunskap som hjälper dig att utforma något som kan besegra konkurrenterna och tillgodose dina användares behov. Nu är det dags att börja med själva utformningsprocessen.
Låt oss dela upp utformningsprocessen i ett par ”delsteg” och gå igenom de viktigaste leveranserna som du behöver skapa för varje steg.
Kundresekarta (CJM)
Detta dokument illustrerar de steg som dina kunder tar i din produkt för att lösa sina problem.
CJM visar också sammanhanget och användarens känslomässiga tillstånd i varje steg – vilket hjälper dig att bättre förstå dina användares specifika behov i dessa steg och fokusera dina designinsatser på att tillgodose dessa behov.
Så här kan en CJM se ut:
I detta specifika fall från den fysiska världen tittar vi på upplevelsen av att besöka ett kafé. Vi kan se att användarna känner viss frustration under väntfasen i användarresan, så det är rimligt att utforma en upplevelse som gör väntetiden mindre frustrerande (kanske pappersunderlägg med sudoku?).
För att bygga vidare på detta känslomässiga sammanhang innan de detaljerade flödena utformas använder vissa team också bildmanusteknik för att visualisera viktiga ögonblick i användarresan. Dessa enkla skisser i seriestil hjälper till att synliggöra användarnas drivkrafter och problem i specifika scenarier, vilket vägleder mer empatiska och fokuserade designbeslut.
Användarflöde
Om CJM var den generella sekvensen på hög nivå över de steg som användarna tar för att lösa sina problem, är användarflöden mer detaljerade och taktiska leveranser som visualiserar stegen för att slutföra specifika uppgifter.
Till skillnad från CJM innehåller det inga sammanhang eller känslor. Men det behöver det inte heller göra, eftersom syftet är att tydligt visa vilka åtgärder användarna kan utföra på specifika sidor eller skärmar och vilka olika vägar de kan ta.
Design- och produktteam använder användarflöden för att säkerställa att användarna inte hamnar i återvändsgränder och att de kan slutföra sina uppgifter med så korta vägar som möjligt.
Ett typiskt användarflöde kan se ut ungefär så här:
Exemplet ovan visar de steg som krävs för att starta ett samtal i Zoom. Det visar specifikt en väg där användaren kopierar länken och klistrar in den i sin meddelandeapp.
För att skapa användarflöden kan du antingen använda specialiserade verktyg som Flowmapp och Visio eller välja en generell lösning som Miro och Figma.
Trådram
Detta är ditt första preliminära försök att utforma ditt användargränssnitt. Här fokuserar du på huvudskärmarna och UI-elementen på dem utan att ge dem sina slutgiltiga färger, typsnitt och storlekar.
Syftet med en trådram för produkten är att snabbt visualisera layouten och designen som du har i åtanke samt samla in användarfeedback innan du lägger tid på att skapa den slutgiltiga UI-designen.
Även här kommer jag inte att gå in alltför mycket i detalj, eftersom vi har en guide åt dig som täcker detta ämne på djupet.
För dina behov av trådramsdesign kan jag rekommendera att du använder Balsamiq-mockups, eftersom det är ett lättviktigt verktyg som innehåller många färdiga UI-element.
UI-design och klickbar prototyp
Äntligen är vi där. Det är dags att göra det visuella designarbetet och komma fram till produktens slutgiltiga utseende.
Utöver din färdiga UI-design kan jag också rekommendera att du skapar en klickbar prototyp. Den fungerar som ett utmärkt verktyg för att samla in intern feedback, eftersom dina kollegor kan interagera med din design som om den vore den färdiga produkten.
Dessutom kan du senare använda den klickbara prototypen för att genomföra användbarhetstester.
De prototypverktyg som jag rekommenderar är Figma och AxureRP, men du kan också titta på den här listan över de 10 bästa produktdesignverktygen för att hitta det som passar dig bäst.
More Articles
Steg 5: Validera och iterera på din design
Låt oss vara ärliga: oavsett hur väl vi känner våra användare är sannolikheten hög att vår design inte är optimal för dem. Om vi bygger produkten med hjälp av designen och prototypen i detta skede riskerar vi att lägga ner betydande ingenjörstid och sedan upptäcka att det fanns element i vår design som våra användare inte tyckte var särskilt användbara.
För att undvika en sådan situation är det en bra idé att testa din prototyp med faktiska användare, samla in deras feedback och göra ändringar i din design innan produktutvecklings- och ingenjörsteamen börjar arbeta med den.
Jag tycker att detta är rätt plats att tala om en utmärkt produktmetodik: designsprint. Begreppet myntades av Googles UX-team, som ville få in mer designtänkande i sitt arbetsflöde. Det är en process där produkt- och designteam snabbt tar fram idéer och brainstormar lösningar, skapar prototyper och testar dem på bara 5 dagar utan att involvera ingenjörsteamet.
Om vi tittar på loopen i Lean-metodiken hoppar designsprinten över byggfaserna och går direkt till att lära sig.
Om du vill anamma designsprintens filosofi kan du ta den klickbara prototyp som du har byggt och genomföra användbarhetstester med den.
Användbarhetstestning är processen där du överlämnar dina prototyper till dina användare, ber dem utföra specifika uppgifter och observerar hur de gör det.
Om du ingick i Spotifys designteam skulle ett typiskt exempel på en sådan uppgift vara att be dina användare skapa en anpassad spellista med hjälp av Spotify.
När det gäller själva processen finns det två sätt att genomföra användbarhetstestning:
- Modererad testning: I detta fall är du närvarande under testet och kan ställa frågor till de användare som har svårt att slutföra dina uppgifter eller inte förstod vad den specifika funktionen gjorde.
- Omodererad testning: Här observerar du helt enkelt användaren när denne utför uppgiften utan att ingripa. Denna metod är snabbare, men låter dig inte upptäcka orsakerna till att dina användare har problem, till skillnad från den föregående metoden.
Proffstips: Även om det inte nödvändigtvis är en designfärdighet eller en designuppgift kan du också A/B-testa två olika versioner, jämföra deras mätvärden och avsevärt öka hastigheten med vilken du får fram en bra design åt dina ingenjörer.
När det gäller verktyg som du kan använda för att genomföra användbarhetstester kan du välja Userbrain eller usertesting.com.
Slutligen kan du, med alla insikter som du har samlat in under dina användbarhetstester, återvända till ditt designverktyg, göra ett par iterationer av din UI och UX och vips har du en användarvaliderad design som du med gott självförtroende kan lämna över till ditt ingenjörsteam.
Allt handlar om användarna
Anledningen till att jag älskar konceptet produktdesign och tycker att det på sätt och vis är överlägset vanlig UI/UX är att produktdesign breddar designteamens tänkande och funktioner och låter dem införliva användarnas röster i de vackra gränssnitt som de bygger.
Jag hoppas att du uppskattade den här guiden och hittade några användbara tips och knep som du kan ta med dig till ditt dagliga designarbete. Du kan också få stort värde av vår sammanställning av årets bästa designpodcaster, bästa nyhetsbrev om produktdesign eller kommande designkonferenser.
Om du tyckte att den här artikeln var värdefull skickar vi också regelbundet e-postmeddelanden med engagerande innehåll om produkter och design. Prenumerera på vårt nyhetsbrev för en veckovis dos av kurerat innehåll om produktledning!
