EASYWEB (Internship)

Förbättra onboarding på Easyweb.site genom att förtydliga vad Easyweb är, vilka problem Easyweb löser.

ÖVERBLICK

För mig var det här ett tillfälle att utveckla mig mer inom UI-design och gjorde därmed inte alla steg i designprocessen som UX-designer i det här projektet.


Jag tog fram en konkurrensanalys, användarresa, wireframe och ett designförslag som enligt mig var första steget för att förbättra onboardingen för användaren. 

ROLL

UX-Designer

UI-Designer

VERKTYG

Figma

Figjam

PERIOD

November - December 2023

FÖRETAG

Sphinxly AB

RESEARCH

Konkurrensanalys

Jag tog fram en konkurrensanalys på fem konkurrenter som jag analyserade utifrån deras individuella styrkor, svagheter och unikheter.


När jag hade valt mina konkurrenter screenshotade jag deras startsidor och gick igenom var och en och skrev anteckningar. Jag analyserade deras styrkor, svagheter och unikheter utifrån ux, ui och text/copy.


Min sammanfattning av konkurrenterna:

  • Två Call to action direkt i header/navigationsmenyn
  • Tydlig rubrik och vad hemsidan innebär och vad man får ut av den
  • Trailer/teaser om hur det ser ut i programmet
  • Möjlighet att se demovideo
  • Kundloggor / Samarbetspartners loggor
  • Överblick hur programmet funkar med både text, bild, illustrationer och animeringar
  • Tips utifrån olika roller hur man använder programmet och vad det finns för fördelar
  • Kategorier på olika hemsidor man kan bygga
  • Hemsidemallar
  • Nyhetsbrev / gå med i community
  • Call to action - kom igång / kontakta säljare vid slutet av sidan

Användarresa

Jag tog fram en användarresa där målgruppen jag utgick ifrån var hemside-ägaren och vad en hemside-ägare skulle leta efter och vilket innehåll som skulle vara av värde.

KONCEPTSKISSER

Wireframes

När jag tog fram Wireframes ville jag ha med liknande avsnitt som hos konkurrenterna men även avsnitt som kom fram vid framtagningen av användarresan. Det gav mig ett bra utgångsläge att börja jobba med strukturen.


Det här var avsnitt jag ville ha med på sidan:

  • ”Säljpitch” med två call to action knappar direkt i heron.
  • Lyfta fram fördelar med hjälp av ikoner och text
  • Ha med en guide steg för steg hur man går tillväga
  • Kunna titta på demovideo
  • Visa hela produktlösningen med både text och ikoner
  • Ha med förslag på hemsidelayouter
  • Ha med kundreferenser
  • Någon typ av kontakt och nyhetsbrev avsnitt

RESULTAT

 Jag ville skapa en mjukare känsla mellan och i avsnitten jämfört med wireframen och det gjorde jag genom att jobba med bakgrundsfärger och gradienter. Jag jobbade i sidled för att skapa bredd och lager på lager för att skapa djup.


Efter en del iterationer av wireframen landade designförslaget i det här (Se även bild):

  • En hero med säljpitch två cta en demovideo som förstoras vid nedscrollning.
  • Ett avsnitt som beskriver vad Easyweb är.
  • En guide med fem steg där varje steg spelades upp som en demovideo
  • Ett avsnitt med fyra fördelar där det finns möjlighet att läsa mer om varje fördel till höger
  • Ett avsnitt med vanliga frågor
  • Ytterligare en säljpitch med cta kontakta säljare
  • Ett avsnitt med fördelar med ikoner och text som dyker upp vid hoovring av mus

TA VIDARE

 Om jag hade jobbat vidare med det här projektet hade jag bett om en djupare genomgång av briefen och efter det intervjuat målgruppen developer som har mer kunskap inom kodning.

Sedan hade jag itererat min prototyp och gjort användartester på den.

LÄRT MIG

 Det jag har lärt mig är att det är lätt att leta inspiration till ui-design men det är svårt att designa utan tillräckligt med underlag från målgruppen.


Jag valde att utgå ifrån målgruppen hemsida-ägare på grund av begränsad tid till research. Det gjorde att designförslaget kanske inte blev vad projektägaren förväntade sig. Det hade behövts mer kommunikation, tydligare brief och framför allt mer tid. Men utifrån det jag hade och det jag levererade är jag ändå nöjd med resultatet.