Alletiders kogebog case

Cartoon chef in a white uniform and hat, smiling and tasting food using a large spoon.

Dette var vores 2 UX case, hvor vi skulle re-designe alletiders kogebogs hjemmeside. Alt fra deres visuelle udtryk, til selve opbygningen og strukturen af deres indhold og features.

Vi fik 10 story points til rådighed, hvilket kastede os ud i at prioritere de vigtigste ellementer for vores persona og målgruppe. En opgave der fik os til, at tænke ud af boksen og finde kreative løsninger med store begrænsinger.

Enhver ny feature som ikke var eksisterende på den originale side, kostede 8 point. Så vi skulle prioritere på et helt andet plan end vi v ar vant til.

Persona & user stories

A digital mind map diagram with interconnected colored boxes containing Danish text about health, gluten intolerance, and healthy living. The boxes are color-coded in red, green, and blue, and represent different topics and questions.
A smiling woman holding a wooden bowl with quinoa and a spoon, standing next to a smiling man in athletic gear with a race bib, in a kitchen with shelves holding jars and bowls, surrounded by fresh vegetables like carrots, broccoli, and leafy greens.

Alle fik tildelt hver deres persona med forskellige behov, hvorefter vi skulle analyserer vores persona og lave research på deres behov og adfærd, for at opbygge en større forståelse af deres behov.

Vi fik tildelt vegan worriors, et vegansk par med gluten intolerance, samt et stort behov for, at dele viden om sund mad.

Efterfølgende begyndte vi at lave en hel masse user stories for, at få et bedre indblik i, hvad vores bruger har behov for på kogebogsplatformen. Helt specifikt gav det os en klar ide om hvad vi kan, for at imødekomme deres behov.

Green background with a quote in Norwegian about sharing recipes and lifestyle, attributed to Marie Louise Overgaard.
Pink square containing Danish text about sharing tips and recipes for a healthier lifestyle, attributed to Marie Louise Overgaard.

Vi indelte vores HOW MIGHT WE spørgsmål i tre kategorier, for at få en godt overblik over vores forståelse af “problemet”. Også blev vi klar til vores Dollar test.

A digital mind map with color-coded sections containing Danish text about health, gluten intolerance, and community support, organized into categories like handicap, livstil, and mål.
A digital project management board with columns labeled for user steps, actions, goals, feelings, pain points, and opportunities. Contains various sticky notes and emojis indicating emotional states. The background is light beige with darker headers.

Vi lavede også en user journey for brugeroplevelse på det nuværende design på alletiders kogebog. Dette gjorde vi, for at få et dybere indblik i, hvad der egentlig går galt, hvordan brugeren navigerer og hvilke følelser og pain point der kan opstå i et for kompliceret og rodet design.

Dollar test

A visual diagram featuring numbered notes in different colors, discussing recipes, filters, blogging, and food-related topics, with icons indicating likes and interactions.

Efter vores HOW MIGHT WE spørgsmålende, begyndte vi skrive alle vores ideer ned på mulige løsninger.

Alle disse ideer skulle vi bruge til vores dollar test, for at se hvilke løsninger der ville få flest stemmer.

En af de festures som fik flest stemmer, blev mulighed for at dele opskrifter med andre. Da vores veganske par som persona, vægtede det at kunne dele deres livstil med andre, og muligheden for at inspirerer, meget højt.

A prioritization diagram with four quadrants, labeled 'Måske', 'Ja', and 'Nej'. The x-axis represents 'Effort' and the y-axis represents 'User value'. Various colored sticky notes containing Danish text are placed within the quadrants, indicating different user feedback or ideas.

Prioriterings diagram

Denne løsning hjalp os til, at placere alle vores ideer, ud fra dets kompleksitet og user value. En metode der gav os mulighed, for at sortere grundigt i vores løsninger, og konkret finde frem til hvad vi skulle implementerer i vores re-design.

A grid of eight purple tiles with black text, divided into two rows and four columns, showing different features or topics related to social media, categorization, and user profiles.

Valg af features

Kommenteret wireframing

Inden vi begyndte på at wireframe, skitserede vi alle vores sider inden, for at få en ide om hvordan opsætningen skulle være.

Sketch of a website layout with a header containing a logo, navigation menu, and search icon. The main section has a large title 'Grom Mad' and a subtitle 'Alle op!'. Below are two sections, each with two images labeled 'Vegetar' and 'Vegansk' with placeholder text. The footer is at the bottom of the layout.
Hand-drawn sketch of a website layout for a vegan skits page, including sections for filters and icons, with labels in Danish.
Wireframe of a food recipe app interface with labeled sections including user story, navigation bar, search bar, category images, and profile icon, with Danish text annotations.

Her er vores kommenteret wireframe af forsiden. Vi har tilføjet en userstory, hvorefter der er kommenteret på alle vores features, så de beskriver formålet og hvad det gør samlet set.

Hele processen af de kommenteret wireframes, gav os et fantastisk syn på hvad der bliver løst hvor, og hvad vi skal implementerer i vores prototype.

Desuden, gjorde det også hele konstruktionen af prototypen, til en hurtigere og mere simpel proces.

Heuristisk evaluering af wireframes

Text-based wireframe or guideline document with numbered points and instructions, mostly in Danish with some headings in bold red and black text, discussing system feedback, user language, user decisions, interface consistency, error prevention, shortcuts, content necessity, and help options.
Laptop on a wooden desk displaying a recipe website with food images and a search bar, against a tiled wall background.

Prototype

Efter den heuristiske evaluering af vores wireframe begyndte vi at udarbejde vores prototype.

Det var vigtigt for brugeren, at se kategorier, og få inspiration. Så det var vigtigt at implementerefor i vores design.

Den store søgefunktion blev også en vigtig feature, da vores persona gerne nemt og hurtigt vil søge efter veganske opskrifter eller andet.

A laptop on a wooden desk displaying a webpage with vegan recipes, with filters and recipes visible. Next to the laptop is a closed notebook with a mountain landscape cover and a pair of black over-ear headphones.

Vores hjerte ikoner giver brugeren mulighed for at gemme deres yndlingsopskrifter, så de altid kan finde dem frem igen. Og glutenfri ikonet gør det nemt for vores persona at skelne imellem de glutenfrie opskrifter.

Filtreringsfunktionen gør det let for brugeren, at sortere til/fra og nemt finde de opskrifter man har behov for. Dette var også et vigtigt komponent for vores persona.

Laptop on a bed displaying a webpage with vegan recipes, showing pictures and titles of various plant-based dishes.

Bruger-test

Vi lavede en brugertest på en række personer, for at se hvordan de navigerer rundt på siden. Hvor brugervenligt er det for dem, hvad tænker de på når de går igennem siden.

Alt dette var med til, at vi som ux’er kunne finjustere de små fejl der dukkede op undervejs.

f.reks skulle der justeres på filtreringsfunktionen. Den skulle omdannes til en pop up, i stedet for at fylde hele siden.

A mind map with multiple blue boxes containing text in Danish discussing instructions for managing recipes, icons, and profiles for a digital or social media platform, authored by Marie Louise Overgaard.

Heuristisk evaluering af prototypen

A Danish language document with guidelines for a system, including sections on feedback, user language, options for users to undo choices, design conventions, error prevention, help features, and avoiding technical terms, with numbered points and bullet points for details.

De sidste reflektioner over processen…

Opgaven tvang mig til at tænke anderledes, (på den rigtig gode måde) da de stramme rammer krævede, at jeg forlod mine vante metoder og traf valg, jeg ellers ikke ville have overvejet. Den udfordring åbnede op for en mere innovativ og kreativ tilgang, hvor jeg skulle tænke anderledes, end hvad jeg var vandt til.

Det er givende at se, hvordan de forskellige arbejdsmetoder, vi har brugt fra start til slut, nu falder på plads og skaber en sammenhængende tråd i hele projektet. Det føles, som om værktøjerne er begyndt at slå rødder i min proces, hvilket giver en dybere forståelse af, hvordan man bygger et projekt fra idé til færdigt resultat.

info & kontakt

info & kontakt