UI/UX-fallstudie · Egeninitierat koncept
Från revisionsbyråns meriter till ett tydligt nästa steg.
Ett responsivt startsideskoncept för en revisions- och redovisningsbyrå i Uppsala. Designen knyter ihop tre beslut: förstå tjänsten, bedöma människorna och ta kontakt.
- Min roll
- Webbgranskning · UX-struktur · UI · HTML/CSS
- Leverans
- Responsiv startsidesprototyp
- Projektstatus
- Eget initiativ · Ej beställt
Det här är en självständig designstudie. Byrån har varken beställt eller godkänt den. Prototypen visar ett gränssnitt och är inte byråns riktiga tjänst.
Utforska den fungerande prototypen ↗01 / Problem
Den användbara informationen var svår att använda.
Den ursprungliga granskningen dokumenterade konkreta hinder: en layout med fast bredd, motstridiga uppgifter om byråns historia och kontaktuppgifter som var besvärliga i mobilen. Jag använde byråns befintliga innehåll för att utforska en tydligare väg till kontakt. Jag hade inte tillgång till analysdata, kundintervjuer eller inkomna förfrågningar.
Underlag: dokumenterade observationer från den ursprungliga webbgranskningen i projektanteckningarna. De beskriver granskningen då, inte en ny kontroll av byråns nuvarande webbplats. Slutsatserna för designen är mina tolkningar.
Ett hinder i mobilen
Granskningen noterade fast sidbredd och ett telefonnummer som vanlig text.
Designkrav: Låt innehållet anpassas till mobilen och gör telefonnumret till en riktig länk.
Motstridiga meriter
Startsidan sade '50 år', medan tjänstesidan sade 'drygt 30 år'.
Designkrav: Använd en konsekvent historik, med årtalet bekräftat av byrån före publicering.
Svag dokumentstruktur
Anteckningarna beskriver en startsida utan H1 och engelsk språkkod på svenska sidor.
Designkrav: Använd en tydlig rubrikhierarki och ange rätt språk.
Hur kan en företagare förstå om byrån passar och hitta en kontaktperson utan att kämpa med mobillayouten?
02 / Användare & krav
Utgå från det besökaren behöver göra.
Det här är preliminära användarprofiler utifrån tjänsterna och det offentliga innehållet. De är arbetshypoteser, inte personas validerade genom intervjuer. Inga användarintervjuer eller modererade användningstester finns dokumenterade för konceptet.
Företagare som jämför byråer
Avgöra om byrån kan hjälpa mitt företag.
Tydliga tjänster, relevant erfarenhet och en enkel första kontakt.
Befintlig kund
Hitta personen eller numret jag behöver.
En kort väg till medarbetare och kontakt, utan att läsa hela presentationen igen.
Byråns administratör
Hålla uppgifterna konsekventa.
En gemensam källa för historik, tjänstebeskrivningar och kontaktuppgifter.
Omfattning: ett startsideskoncept med befintligt svenskt innehåll och ett återhållsamt uttryck. Medarbetaruppgifter, historik och föreslagen tjänste- eller pristext behöver byråns godkännande. Studien fastställer inte hur byrån faktiskt prissätter sitt arbete.
03 / Användarflöden
Två besök, två användbara vägar.
Informationsarkitekturen grupperar startsidan i introduktion, tjänster, erfarenhet, medarbetare och kontakt. Huvudvägen för en förfrågan och genvägen för befintliga kunder visas nedan. Öppna varje flöde för att granska det.
Ny besökare: bedöma relevans och ta kontakt
- Förstå erbjudandet
- Utforska en relevant tjänst
- Se erfarenhet och team
- Välja samtal eller förfrågan
Om besökaren är osäker på rätt tjänst ska kontaktvägen finnas kvar; ett tjänsteval ska inte vara ett krav.
Befintlig kund: nå en person
- Öppna startsidan
- Gå till team eller kontakt
- Välja rätt person
- Ringa eller skriva
Kontaktuppgifterna ska vara läsbara och användbara även utan JavaScript. En skickad förfrågan är inte samma sak som ett bokat möte.
04 / Wireframes
Struktur före visuella detaljer.
Retrospektiva wireframes, ritade för den här fallstudien för att förklara prototypens hierarki. De är kommenterade strukturskisser, inte ursprungligt forskningsmaterial eller skärmar från en Figma-fil.
05 / UI-beslut
Gränssnittet och tanken bakom.
Behåll byråns språk
Den befintliga svenska texten var utgångspunkten. Föreslagna ändringar förtydligar hierarki och konsekvens utan att hitta på nya tjänster.
Gör trovärdigheten läsbar
Marinblått, vitt, en återhållsam lila accent och ett vektormärke stödjer identiteten. Meriter och kontaktuppgifter bär argumentet för förtroende.
Gör mobilens kontaktväg användbar
Responsiva avsnitt och klickbara telefonnummer möter ett konkret hinder från granskningen. Effekten på förfrågningar återstår att mäta.
Visa att det är ett koncept
Arbetet presenteras som en självständig prototyp. Godkännande av företagsuppgifter, mottagare och formulär hör till en riktig lansering.
Riktiga skärmbilder från det fungerande konceptet. Öppna en bild för att granska den i full storlek.
06 / Utvärdering
Det som finns och det som behöver testas.
Resultatet är ett fungerande frontend-koncept. Det finns ingen kundlansering, inga användartestresultat och ingen uppmätt konverteringsökning att redovisa. Nedan är en plan för utvärdering, inte genomförda tester.
Hitta och förklara
Rekrytera fem representativa företagare. Be dem förklara erbjudandet och hitta en kontaktväg. Notera felval, tvekan och om uppgiften klaras utan hjälp. Revidera återkommande oklarheter.
Använda i mobilen
Kontrollera omflöde, zoom, tangentbordsfokus, länknamn och formuläretiketter. Testa båda kontaktvägarna, inklusive saknade eller felaktiga formuläruppgifter.
Mäta efter lansering
Utgå från en överenskommen baslinje och jämför kvalificerade förfrågningar och slutförda kontaktförsök under jämförbara perioder. Skilj trafikförändringar från designförändringar.
Lärdom för designen
En specifik motsägelse är en starkare utgångspunkt än att sidan ser gammal ut. Här är tillförlitligt innehåll och tillgång till kontaktuppgifter lika viktiga som det visuella uttrycket.
Före en riktig lansering
Bekräfta innehållet med byrån, testa kontaktvägen med användare, bestäm vem som tar emot varje meddelande och validera en riktig formulärintegration. Ingen förbättring av förfrågningar eller konvertering har uppmätts.
En liknande utmaning på er webbplats?
Jag kan granska vägen från besökarens fråga till nästa användbara steg. Ett samtal på 20 minuter räcker för att identifiera de första prioriteringarna och diskutera omfattningen.