Alletiders kogebog case

  • Tid på projektet: 10 dage

  • Min rolle: Projektstyring, research, konceptudvikling, user flow design, prototyping, brugertest

  • Metoder: Research & analyse, ideation & konceptudvikling, design & prototyping, evaluering & test

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

Som vores anden UX-case arbejdede vi med at re-designe Alletiders Kogebog. Projektet omfattede både det visuelle udtryk samt struktur og opbygning af indhold og features. Vores mål var at skabe en mere overskuelig, brugervenlig og inspirerende platform, der tog udgangspunkt i vores persona og målgruppes behov.

Begrænsede ressourcer tvang os til at prioritere skarpt og tænke kreativt, hvilket resulterede i et redesign med fokus på de vigtigste funktioner og en klar brugerrejse.

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.

I projektet arbejdede vi med tildelte personaer for at analysere forskellige behov og adfærdsmønstre. Vores persona var Vegan Warriors – et vegansk par med glutenintolerance og et stort ønske om at dele viden om sund mad.

For at forstå deres behov på kogebogsplatformen udviklede vi en række user stories, som gav os et klart billede af, hvilke funktioner og løsninger der bedst kunne imødekomme deres ønsker og udfordringer.

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

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 udarbejdede et journey map over brugeroplevelsen i det eksisterende design af Alletiders Kogebog.

Formålet var at opnå et dybere indblik i, hvor og hvorfor oplevelsen går galt, samt hvordan brugeren navigerer gennem siden. Gennem denne kortlægning blev det tydeligt, hvilke følelser og frustrationer der opstår undervejs, og hvilke pain points der præger interaktionen.

Analysen viste, hvordan et for kompliceret og rodet design kan skabe forvirring, usikkerhed og utilfredshed hos brugeren. Det gav dermed et vigtigt udgangspunkt for at identificere forbedringsmuligheder i det kommende redesign.

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 at have udarbejdet vores How Might We-spørgsmål begyndte vi at notere alle idéer til mulige løsninger. Disse ideer blev derefter brugt i en Dollar Test for at identificere, hvilke løsninger der havde størst opbakning.

En af de features, som fik flest stemmer, var muligheden for at dele opskrifter med andre. Dette gav særlig mening i forhold til vores persona, det veganske par, som prioriterede at kunne dele deres livsstil og inspirere andre gennem deres madvalg.

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

Vi anvendte en prioriteringsmatrix til at placere alle vores ideer ud fra deres kompleksitet og bruger­værdi. Denne metode gav os et klart og struktureret overblik, som gjorde det muligt at sortere grundigt i vores løsninger og konkret identificere, hvilke funktioner der skulle implementeres i vores redesign..

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 siden skulle opsættes og konstrueres.

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 kommenterede wireframe af forsiden. Til hver feature har vi tilføjet en user story og kommentarer, som beskriver både formålet og funktionaliteten samlet set.

Processen med de kommenterede wireframes gav os et klart overblik over, hvilke behov der blev dækket, og hvilke elementer der skulle implementeres i prototypen. Samtidig gjorde det konstruktionen af prototypen både hurtigere og mere enkel, da vi havde et tydeligt fundament at arbejde ud fra.

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 udvikle vores prototype.

Det var vigtigt for brugeren at kunne se kategorier og få inspiration, så dette blev en central del af designet. Den store søgefunktion blev også en nøglefeature, da vores persona ønskede hurtigt og nemt at finde veganske opskrifter. Fokus lå på at gøre det enkelt at søge, dele og gemme grønne opskrifter, så oplevelsen blev både intuitiv og brugervenlig.

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 yndlingsopskrifter, så de altid kan findes igen. Glutenfri-ikonet gør det nemt for vores persona at skelne mellem glutenfri opskrifter.

Desuden gør filtreringsfunktionen det enkelt for brugeren at sortere og finde de opskrifter, de har behov for. Dette var særligt vigtigt for vores persona, da det skal være hurtigt og overskueligt at filtrere allergener fra.

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

Bruger-test

Vi gennemførte en brugertest med flere personer for at observere, hvordan de navigerede på siden, hvor brugervenlig den var, og hvilke tanker der opstod undervejs.

Resultaterne gav os værdifuld indsigt til at finjustere små, men vigtige detaljer. For eksempel blev filtreringsfunktionen omdannet til en pop-up i stedet for at fylde hele siden, søgefunktionen fik en tydeligere farve adskilt fra knapperne, og pop-up-beskeder og systemfeedback blev gjort mere klare og intuitive.

Alle disse justeringer forbedrede brugeroplevelsen markant og gjorde interaktionen med prototypen mere tydelig, overskuelig og nem at navigere.

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 udfordrede mig til at tænke på nye måder, da de stramme rammer krævede, at jeg traf beslutninger, jeg måske ikke ville have overvejet. Denne udfordring åbnede op for en mere innovativ og kreativ tilgang, hvor jeg måtte arbejde uden for komfortzonen.

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

info & kontakt

info & kontakt