Marknaden
Priser
Logga inKom igång
FältguidenBakgrunder
Bakgrunder

Design av kundcase: visa problemet, arbetet och resultatet

De flesta kundcase är ett galleri med ett stycke ovanpå. De som vinner uppdrag berättar en historia som en främling kan följa på en minut. Det kräver en tydlig struktur, bilder som bär den och ett format för varje plats där du publicerar.

GradientlyVerifierat Gradiently-konto·1 oktober 2026·5 minuters läsning
Omslag: Birch Era · GR·MBM2·HJ

Kortversionen

  • Ett bra kundcase berättar en historia i tre delar: problemet, arbetet och resultatet.
  • Resultatet bör synas på första skärmen eller första bilden, eftersom många läsare aldrig skrollar till slutet.
  • Varje avsnitt i ett kundcase bör ha sin egen bild, från en före-bild till processkisser till det färdiga arbetet i användning.
  • Påstå bara resultat du kan visa, och be kunden om lov innan du nämner dem eller delar siffror.
  • Ett kundcase kan publiceras som en webbsida, en PDF, en bild i en pitchpresentation och en karusell i sociala medier om det delar en enhetlig look.
På den här sidan
Strukturen i ett bra kundcaseBilder för varje del av historienLayout för kundcase på en webbsidaEtt kundcase i flera format

Stark design av kundcase följer tre akter: problemet, arbetet och resultatet. Inled med en rubrik som anger utfallet, visa vad som var fel förut, gå igenom besluten som ändrade det och bevisa sedan att det fungerade med det färdiga verket i verklig användning. Ge varje akt sin egen bild och håll orden korta. En tänkbar kund ska förstå vad du gjorde och varför det spelade roll på den tid det tar att skrolla en skärm.

Strukturen i ett bra kundcase

Designers, byråer, konsulter och mjukvaruföretag skriver alla kundcase, och formen som fungerar är densamma för alla. Det läses som en kort novell med en tydlig vändpunkt, och den lägger slutet både i början och i slutet.

  1. 1

    Rubrik: utfallet

    ”En meny som halverade beställningsfrågorna” slår ”Ny profil för restaurang”. Nämn kunden och arbetet på en rad under.

  2. 2

    Problemet

    Vad som var fel, för vem och varför det spelade roll för verksamheten. Två eller tre meningar och en före-bild.

  3. 3

    Tillvägagångssättet

    De två eller tre besluten som gjorde skillnad, och varför. Inte varje steg du tog.

  4. 4

    Arbetet

    De färdiga delarna, visade stort och i sitt sammanhang: på en telefon, på en hylla, på en gata.

  5. 5

    Resultatet

    Vad som förändrades, med kundens ord eller siffror du har tillstånd att dela.

  6. 6

    Nästa steg

    En rad som bjuder in en läsare med ett liknande problem att höra av sig.

Fråga innan du delar

Kontrollera ditt avtal och fråga kunden innan du nämner dem, visar ännu opublicerat arbete eller publicerar några siffror. Om du inte kan dela siffror, beskriv förändringen med ord som de godkänner.

Välj vilka projekt du skriver upp med samma omsorg. Tre kundcase som matchar de kunder du vill ha härnäst är värda mer än tio som täcker allt du har gjort. Om du vill ha mer restaurangarbete, inled med restaurangen. Om du vill ha mjukvarukunder, inled med dashboarden, även om det var ett mindre jobb.

Bilder för varje del av historien

En vägg av färdiga mockups talar om för läsaren att du kan göra fina saker. Den talar inte om att du kan lösa deras problem. Para varje avsnitt med en bild som bevisar avsnittets poäng.

ProblemDen gamla versionen, en förvirrande skärm, en belamrad hylla

Undvik

Att håna kundens gamla arbete
Tillvägagångssätt

Bild som bevisar det

Skisser, en moodboard, två alternativ sida vid sida, briefen

Undvik

Dussintals processfoton
ArbeteDet färdiga verket i verklig användning, sedan viktiga detaljer

Undvik

Bara svävande mockups på grått
ResultatEtt kort kundcitat, en godkänd siffra satt stort, arbetet i verkligheten

Undvik

Vaga påståenden utan källa
AvsnittBild som bevisar detUndvik
ProblemDen gamla versionen, en förvirrande skärm, en belamrad hyllaAtt håna kundens gamla arbete
TillvägagångssättSkisser, en moodboard, två alternativ sida vid sida, briefenDussintals processfoton
ArbeteDet färdiga verket i verklig användning, sedan viktiga detaljerBara svävande mockups på grått
ResultatEtt kort kundcitat, en godkänd siffra satt stort, arbetet i verklighetenVaga påståenden utan källa
En bevisande bild per avsnitt räcker. Fler än tre bilder i rad och historien stannar av.
Problemet
Ingen hittade de veganska rätterna.
Personalen svarade på samma fråga vid varje bord
Gradiently · @gradiently

En problembild: frågan angiven rakt, från kundens sida, på en rad.

Resultatet
Beställningsfrågorna halverades.
Enligt restaurangens chef efter en månad
Gradiently · @gradiently

Resultatbilden i samma stil. Utfallet är rubriken, med källan angiven under.

Exemplet ovan är påhittat för att visa formen, men titta på källraden under resultatet. En siffra med källa läses som bevis, en siffra ensam läses som marknadsföring. Visuell hierarki hjälper dig avgöra vad som ska sättas stort.

Layout för kundcase på en webbsida

På en portfölj eller företagssajt är ett kundcase en lång sida. De flesta besökare läser första skärmen, skummar rubrikerna och tittar på bilderna. Designa för precis det.

Undvik

  • En hjältebild i helskärm utan ord
  • Resultatet gömt längst ner
  • Långa stycken mellan bilderna
  • Alla bilder i samma storlek
  • Inget sätt att kontakta dig i slutet

Gör

  • Rubrik, kund och utfall på första skärmen
  • En kort sammanfattningsruta: kund, roll, tidslinje, resultat
  • Rubriker som berättar historien när man skummar dem ensamma
  • Stora huvudbilder, mindre detaljbilder
  • Ett tydligt nästa steg och en länk till nästa kundcase

En enhetlig bakgrund för avsnittsavdelare, citat och resultatpaneler får en lång sida att kännas som ett stycke och ger ögat en plats att vila mellan bilderna. Tips för designerportfölj och utvecklarportfölj behandlar webbplatsen runt omkring.

Ett kundcase i flera format

Ett kundcase är för mycket arbete för att publicera en gång. Samma historia kan finnas som en sida på din webbplats, en PDF att bifoga offerter, två bilder i en pitchpresentation och en karusell på LinkedIn eller Instagram. Var och en behöver sin egen storlek.

Bild 1920×1080

1920 × 1080

A4-PDF 2480×3508

2480 × 3508

Karusell 1080×1350

1080 × 1350

Behance-omslag 1616×1264

1616 × 1264

Fyra hem för ett kundcase, ritade i skala. Historien förblir densamma, det som ändras är beskärningen och antalet ord.
  • Karusell: en bild per akt, plus ett omslag och en kontaktbild. LinkedIn-karuseller visar formatet.
  • Pitchpresentation: en problembild och en resultatbild, som i paret ovan.
  • PDF: två till fyra sidor i A4 eller Letter. Se design av enkelt informationsblad för sammanfattningar på ett ark.
  • Portföljwebbplatser: ett omslag i rätt storlek för plattformen, som storlek på Behance-omslag.

Gradiently hjälper här eftersom en Mark renderas på nytt i varje storlek: designa kundcaset en gång, så ändrar Pro storleken till varje format i ett steg, med samma bakgrund och typografi över bilden, PDF:en och karusellsidorna.

Designa med en levande gradient

Inlägg, stories, presentationer och banners i alla storlekar, med text som alltid går att läsa.

Börja designa, gratis

Vanliga frågor

Vad ska ett kundcase innehålla?

En rubrik med utfallet, problemet, ditt tillvägagångssätt, det färdiga arbetet i sitt sammanhang, resultatet och ett nästa steg för läsaren.

Hur långt ska ett designcase vara?

Tillräckligt långt för att visa vändpunkten och inte längre. De flesta bra går att skumma på en minut och läsa helt på fem.

Kan jag skriva ett kundcase utan resultatdata?

Ja. Använd ett kundcitat eller en beskrivning av vad som förändrades som kunden godkänner. Hitta aldrig på siffror.

Var ska resultatet stå i ett kundcase?

I rubriken eller på första skärmen, och igen mer detaljerat i slutet. Många läsare når aldrig botten.

Vilket format ska ett kundcase ha?

En webbsida är det främsta hemmet, med en PDF för offerter, bilder för pitchar och en karusell för sociala medier, alla i samma stil.

Dela den här guiden

Skriven av GradientlyVerifierat Gradiently-konto

Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.

Se vår profil

På den här sidan

Strukturen i ett bra kundcaseBilder för varje del av historienLayout för kundcase på en webbsidaEtt kundcase i flera format

Dela den här guiden

Nästa i Bakgrunder

Design av rapportomslag: årsredovisningar och whitepapers

Läs vidare

Alla guider om Bakgrunder
Användning

Tips för designportfolio: visa arbetet så du får jobbet

5 minuters läsning

Granskare lägger lite tid på varje portfolio, och det mesta på det första projektet. De här tipsen tar upp vad som ska med, hur du strukturerar en fallstudie och hur du presenterar arbete så att det ser så bra ut som det är.

Bakgrunder

Design av enblad: ett ark som förklarar ditt företag

5 minuters läsning

Ett enblad är det du skickar efter ett bra samtal, lämnar på ett bord på en mässa eller bifogar i ett kallt mejl. Det måste förklara ditt företag utan att du är i rummet.

Bakgrunder

Pitch deck-design: en look som håller i tjugo slides

5 minuters läsning

De flesta presentationer ser bra ut på tre slides och rasar vid den åttonde. Lösningen är ett system: en handfull sidtyper, var och en med en bakgrund som vet sitt jobb.

Hitta looken som bara är din.

Varje Mark är en levande bakgrund med en enda ägare. Prova en ledig Mark och säkra din när det känns rätt.

Börja designa

Kontrollera ett certifikat

Skriv ett certifikatnummer eller en Marks kod för att se vem som äger den.

Fungerar med ChatGPT och Claude

Be din AI om en design. Den skapar den i din Mark, redo att redigera.

ChatGPTClaude
Så ansluter du

Produkt

  • Marknaden
  • Utforska
  • Priser
  • Certifikat

Lär dig

  • Fältguiden
  • Hjälpcenter
  • Nyheter

Utvecklare

  • Översikt
  • ChatGPT och Claude
  • API-referens
  • API-nycklar

Företaget

  • Om oss
  • Kontakta oss
  • Logga in

Juridik

  • Villkor
  • Integritet
  • Återbetalningar
  • Mark-skydd
  • Cookies
  • Alla policyer
Rör dig över bokstäverna. Var och en bär en riktig Mark.Tryck på en bokstav för att se dess Mark.Ett namn. Tio Marks inuti.
© 2026 Gradiently