WIREFRAMES
Jag gjorde sedan wireframes för att få en tydligare bild av funktioner, objekt och navigation.
LÄRDOMAR
Användarna
Lärdomarna jag tar med mig från detta projekt är vikten av att ta in användarna tidigt i processen, det underlättade mycket då jag kunde utgå från deras behov när jag valde vilka element som främst skulle kommuniceras på hemsidan, och även hierarkien - vilken ordning dessa skulle placeras i.
#6FB8BF
#6FB8BF
#6FB8BF
#6FB8BF
GRAFISK PROFIL
#FFFFFF
Logotyp och ikoner





Museo regular
AaBbCcDd1234
Projektet Hela mig
Färger
Typsnitt
Open sans regular
AaBbCcDd1234
Länkar, rubriker
Open sans light
AaBbCcDd1234
Brödtext



LÖSNING
Innehåll och designval
-
Färgerna återanvände jag för en igenkänning, då det är Föreningens Storasysterns egna färger.
-
I huvudmenyn minskade jag antalet val och fokuserade på de länkar som är till hjälp för de stödsökande.
Resterande länkar flyttades upp och fick ändrat utseende för en visuell hierarki.
-
"Lämna sidan”-knappen gjorde jag synligare med en starkare (rosa) färg för att fånga uppmärksamhet. Knappen placerades överst i högra hörnet på alla sidor och är tänkt att alltid finnas kvar även om man scrollar ner på sidan, för att jämt finnas tillgänglig.
-
Projektet Hela mig och chatten är två viktiga stödfunktioner för målgruppen och därför lyfte jag fram dessa med hjälp av två stora klickbara bilder.
Föreningen Storasyster
Redesign av webbsida
ARBETE
-
UX-design
-
Research
-
Intervjuer
-
-
Wireframes
-
Användartester
-
UI-design
UPPDRAG
(vår 2017 - 3 v.)
Välj ett företag/organisation som inte lyckats med
kommunikationen på sin hemsida. Gör en ny version som möter användarnas behov bättre.
FÖRENINGEN STORASYSTER
Jag gjorde en redesign på Föreningen Storasysters hemsida för att den inte kommunicerar deras arbete och vad de står för tydligt nog. Till höger visas föreningens nuvarande webbsida, (Foreningenstorasyster.se).
Varför?
Föreningen Storasyster är en feministisk ideell förening som hjälper personer som har utsatts för sexuellt våld. Jag använder hemsidan regelbundet då jag är volontär i föreningen och har därmed en förståelse för målgruppens behov.
Research
Genom att göra intervjuer med stödsökande och andra volontärer fick jag en tydligare bild av målgruppens behov och vad som är viktigast att kommunicera ut till dem.
Många upplevde att informationen var svår att hitta, att den kändes rörlig, och att det fanns orelevant information på startsidan som inte var viktig för de som söker stöd.
Mål
Jag ville göra sidan mer välkomnande och innehållet tydligare genom att strukturera upp informationen för att få en mer överblickbar layout, och hjälpa målgruppen hitta det som de letar efter. Jag ville lyfta fram viktiga stödfunktioner, samt ge en känsla av tillit och medmänsklighet. Jag har fokuserat på att lägga till luft och att skapa kontraster, vilket ökar läsbarheten och gör informationen mer lättillgänglig.
SKISSER
Jag började med att skissa upp på ett ungefär hur sidan skulle kunna se ut och vilka element som skulle framhävas.


Användartester
När jag utförde användartester på wireframesen för att veta om alla element på sidan var förståeliga framkom det bland annat att knapparna under "Stöd oss" inte var nödvändiga, eftersom att innehållet i sig är klickbart.
-
För att tydliggöra vad föreningen erbjuder för hjälp framhävde jag det med ikoner och beskrivande text, då denna information är viktig för de som söker stöd.
-
För att skapa en igenkänning finns en länk till sidan "Berättelser" där man kan läsa om andras erfarenheter. Detta efterfrågas ofta då många upplever sig bli hjälpta av det.
-
Eftersom föreningen är en ideell organisation är de beroende av stöd från privatpersoner och företag för att kunna bedriva och utveckla sin verksamhet, jag la därför även till information om hur man kan stödja dem.
Fler projekt
Jag kunde även beskriva länkar och rubriker på ett tydligare och utförligare sätt, vilket jag tog med mig.


SITEMAP
Innan
Nedan visas hur navigationen ser ut på Föreningens Storasysters nuvarande webbplats. Det är många sidor och undersidor där vissa kategorier har en djup hierarki.
En av anledningarna till detta är för att det är många sidor som innehåller väldigt lite information. Det blir därför många länkar och val i menyn.
Efter
För att förenkla navigationen och minska antalet länkval i menyn la jag ihop innehåll på många sidor vars information behandlade samma ämnesområde.
Jag skapade en huvudmeny med relevant information till den primära målgruppen och en sekundär meny (rosa) som placerades högre upp på sidan.



