Design Challenge Workshop
Proces beskrivelse
Dagens workshop handlede mest om design og Figma, hvor vi skulle bruge alt vores faglige viden indenfor design under processen. Vi skulle designe en hjemmeside til en selvvalgt virksomhed indenfor en bestemt branche. Designet skulle vi udvikle i figma, hvor vi skulle bruge grid-systemet og have lavet både en desktop- og mobilversion. Her skulle vi indtænke adfærdsdesign, visuel identitet og brugervenlighed for at skabe en god sammenhængende brugeroplevelse. Derfra skulle vi også fokusere på tilgængelighed, hvor vi skulle opfylde principper fra A11Y Projects tjekliste – Indenfor appearance, farvekontrast, mobil/touch og animation. Til sidst skulle vi lave en præsentation af vores design, som vi hver især skulle fremlægge i små gruppe og derfra blev nogen valgt ud til at fremlægge foran klassen.
Dagen før havde jeg på forhånd forberedt min fokusområde, branche og virksomhed. Da jeg selv elsker æstetikken bag fashion og beauty, valgte jeg at gå med skønhedsbranchen. Herfra kiggede jeg forskellige hjemmesider igennem, som jeg kendte til, hvor jeg til endte med at gå med Sephora’s hjemmeside. Personligt har jeg selv været i Sephora mange gange, og køber derfra, så jeg kender til stemningen og humøret i butikken.
Da jeg gik ind på deres hjemmeside, blev jeg faktisk lidt overasket og skuffet over designet, da jeg ikke syntes at designet stemte overens min oplevelse af Sephora’s visuelle identitet. På billederne føler man at produkterne ligner legetøj/plastik, som ødelægger kvaliteten af de reele produkter fra forskellige mærker, som kan købes.
Da jeg lige har arbejdet med samme målgruppe i P3, havde jeg med den baggrund godt kendskab til behov og udfordringer. Inden jeg kastede mig ud i Figma, gik jeg først i gang med at lave wireframes til både desktop- og mobilversionen. Der jeg havde mine wireframes klar, gik jeg hurtig i gang med at visualisere dem i Figma programmet. Jeg startede med at lave min frame til mobile-versionen, og begyndte at designe på den. Her lod jeg mig inspirere mig af beauty-sides, som jeg ofte køber fra, og godt kan lide. Jeg har prøvet at designe en enkelt, æstetisk, overskuelig og brugervenligt design. Mobilversionen har jeg designet med et 8-kolonners grid og 20px padding for at sikre ensartet spacing og struktur. Som header, footer, banner og kassen til produkterne valgte jeg at gå med farven sort, da den matcher Sephoras logo, og generelt også skaber god kontrakt med hvid font på.
Jeg har sørget for at skabe hierarki, hvor jeg har tilføjet et hero-billede til at starte med, som fylder mest og fanger brugerens opmærksomhed. Min titel “Nyt & Trending” markerer tydeligt en ny sektion, produktkasserne er ensartede, så de er lette at scanne og forstå og sidst har vi CTA-knapperne med stroke på, som er tydelig markede. Dette hjælper på brugerens scanningsadfærd, hvor indholdet bliver aflæst hurtigt fremfor at blive læst i detaljer. I forhold til adfærdsdesign, har jeg bevidst arbejdet med call to action knapper for at guide brugeren fra inspiration til handling, hvor jeg bruger “Udforsk” og “Shop nu”. Bevidst bruger jeg også “Nyt & Trending”, hvor trending signalerer at andre køber det, om giver social proof. Som knapper har jeg også små indkøbskurve på produkterne, som giver den kortere vej til handling, da man ikke skal helt ind på et produkt for at ligge den i indkøbskurv. For at highlighte nyhedsbreven, har jeg brugt en mørk rosa farve, som står i god kontrast på hvidt baggrund, og hvor sort skrift også vil kunne læses tydeligt. Billederne har jeg taget direkte fra Sephora’s hjemmeside, som matcher min stemning og giver liv i designet. Som menu har vi en burger menu, som fylder mindre og skaber en god overblik over kategoerierne for de forskellige produkter. Samme måde har jeg i footeren lavet en accordion-menu, så brugeren på den måde kan folde de nødvendige informationer ud.
Derefter tilpassede jeg mit design på dekstop-version, som endte med at matche min mobile-version ret godt. På begge skærme designede jeg også et banner, hvor alle mærkevarer fra Sephora ville bevæge sig fra ventre til højre. Det fik jeg også animeret inde i Figma, men da det drillede en del, når man klikkede på visningsfunktionen, hakkede det hele, så jeg valgte at slette indstillingerne, og lod designet stå – På den måde kunne man stadig se idéen.
Jeg nåede dsv ikke andet end at designe min forside på både desktop og mobile, da jeg var lidt presset på tid, med at nå hele processen inden klokken var 14:00 – Hvor jeg skulle bruge den resterende tid, som var tilbage på fremlæggelsen inden meetup igen.
Opgaven var individuel, men jeg sad sammen med pigerne, så vi løbende kunne vise hinanden, hvad vi havde lavet, og derfra bruge hinanden som hjælp, når der var behov. Vi var fuld i gang hele dagen, hvor vi i pauserne brugte tiden på hang man, så vores hjerner kunne holde en pause fra skærme. Jeg syntes at det var ærgerligt, at vi ikke havde mere tid til workshoppen, da det blev mere til et halvfærdigt projet, hvor man heller ikke kom igennem alle punkter i designprocessen. Stadig fik jeg lavet noget både på desktop- og mobileversion, men der var flere områder, som jeg gerne ville have gået i dybden med. Eksempelvis har jeg menuen på desktopversion, som slet ikke fungerer – Her mangler der whitespace mellem de forskellige links. Derudover ville jeg også gerne have nået at lave en underside til en af kategorierne.
Da tiden var inde, skulle jeg i gang med præsentationen, som jeg også lavede i Figma. Da klokken var 14:30 skulle vi sende vores designs og præsentation på discord, så alle havde adgang – Derefter skulle vi ud i nogle grupper, og fremlægge vores lille projekt for hinanden. Til sidst blev der også fremvist et par projekter på klassen, og vi afsluttede dagen med feedback på workshoppen.
Mine design i Figma
Reflektion
Dagens workshop synes jeg fungerede godt. Selvom der var meget tidspres, var det dejligt at få leget med Figma igen, og lave “nemme” re-designs. Dog ville jeg også ønske, at vi kunne have haft mere tid, så projekterne heller ikke blev halvfærdige, da man til sidst stod, og ikke rigtigt havde lyst til at vise det frem. Men igen fik vi set nogle på klassen, som viste sig, at det var okay, at alt ikke var gennemtænkt – Feedbacken bliver ikke givet på den baggrund, at man skal tage det personligt og føle sig dømmet. Her snakker man om de ting der fungerer, og de ting der kan forbedres ved produktet, som man skal huske at have i bagtanken. Generelt synes jeg også bare at det var hyggeligt og afslappende, at vi var selvstændige det meste af tiden, hvor jeg sad med pigerne og sparede tiden. Vi har som altid været gode til at vejlede og rose hinanden – Det har været en god dag men også lidt stressende 😅.