Inhoud
1. Festival app.
2. We gaan in 4 stappen het functioneel ontwerp voor het Festival app
3. Wat is ook al weer het functioneel ontwerp (FO)?
4. Waarom maak je ook al weer een functioneel ontwerp (FO)?
5. Wat is het verschil tussen een functioneel ontwerp en een visueel ontwerp?
6. Wat zijn user story’s?
7. Wat is MoSCoW?
8. Waarom is een een user story belangrijk?
9. Opdracht 9: User story

Richard Slakhorst

---

---

1 Festival app.

Festivals zijn erg populair in Nederland met duizenden bezoekers die elk jaar naar dat soort evenementen komen, kan het soms lastig zijn om alle informatie over een festival bij te houden en te vinden daarom is het erg belangrijk voor een festival om goed ontworpen app te hebben. Jij gaat de komende 10 weken zo’n app ontwikkelen, daarom is het handig om de door jouw gekozen festival app te download, om je goed te kunnen oriënteren wat een festival app nodig heeft. Om te onderzoeken welke mogelijkheden en toepassingen er nog meer zijn is het ook erg verstandig om apps van andere festivals te downloaden.

Een Festival app is essentieel vanwege de grote omvang en populariteit van het Festivals. Het biedt organisatoren een platform om informatie zoals line-ups, tijdschema’s en plattegronden te delen. Voor bezoekers maakt de app het gemakkelijk om hun persoonlijke programma samen te stellen, faciliteiten te vinden en vragen of problemen te melden. Kortom, de app verbetert de algehele festivalervaring voor zowel organisatoren als festivalgangers.

Dit zijn de standard Festival app flowchart pagina,s

1. Landing pagina home
2. Nieuws op het festival Nieuws van de dag: Er zijn minimaal 3 nieuwsitems ontworpen. Minimaal één item is clickable
3. Programma pagina artiesten Artiesten: Laat minimaal 3 verschillende artiesten zien. Één artiest is clickable
4. Blokkenschema podia laat het blokkenschema van minimaal één dag zien. Het blokkenschema bevat een timetable en podia. Je kunt in de timetable op minimaal één artiest klikken voor meer informatie 
5. Plattegrond waar&wat Neem de originele plattegrond over voor de locatie van podia, eetgelegenheden etc
6. Bestel tickets
7. Contact
8.Jou eigen idee pagina ? 

---

2. We gaan in 4 stappen het functioneel ontwerp voor het Festival app maken

Het functioneel ontwerp (FO) voor het Festival app.
1. Doelen van de website voor gebruikers en de onderneming (user story’s) (Week 1)
2. Structuur van website (flowchart) (Week 3)
3. Uitwerking functionaliteiten per pagina (Klikbare wireframes alle pagina’s in FIgma)(Week 4 )
4. Interactive mock-ups) (prototype Festival app in Sigma) (Week 6 )

---

3. Wat is ook al weer het functioneel ontwerp (FO)?

Zoals je een bouwtekening nodig hebt voor het bouwen van een huis, zo heb je een functioneel ontwerp (FO) nodig voor het maken van een website, webshop of app. Een functioneel ontwerp is de ‘blauwdruk” of ‘bouwtekening’ van je website, webshop of app. Er staat precies in beschreven hoe de website, webshop of app moet werken, welke functionaliteiten erin zitten

---

4. Waarom maak je ook al weer een functioneel ontwerp (FO)?

A.Het zorgt er ook voor dat je de klant centraal zet in je ontwerp en vooral ook om een geweldige gebruikerservaring te ontwerpen voor je klant.

B. De investering in een functioneel ontwerp voorkomt ‘valkuilen’ binnen je ontwerpproces. Je kunt er op de tekentafel de meest voor de hand liggende foutjes mee voorkomen. Daarnaast is een functioneel ontwerp een waardevol communicatiemiddel. Bij een groot webapp-developmentproject komen vaak meerdere partijen en expertises kijken, bijvoorbeeld: de opdrachtgever, een online marketingbureau, de copywriter, de projectmanager, de designer, de programmeur en derden.

C. Het functioneel ontwerp (FO) is de blauwdruk, het centrale uitgangspunt van waaruit iedere betrokkene werkt. Dit bevordert de onderlinge communicatie en het reduceert de kans op ruis en dus fouten.

D. Functioneel ontwerp (FO) draagt bij aan een strakke planning, het halen van deadlines en zorgt er daarnaast ook voor dat een ontwerpproject binnen het budget blijft maar

---

5. Wat is het verschil tussen een functioneel ontwerp en een visueel ontwerp?

• Visueel design is gebaseerd op aandachtspunten als smaak, schoonheid, ‘look and feel’. Het geeft uiting aan de creativiteit van de ontwerper, samen met de doelgroepbehoefte etc.
• Functioneel design (UXD)legt het accent op betekenisvolle en aangename gebruikersbehoeften en gebruikerservaring (maar ook de functionele behoeften van de gebruikers)

Een visueel ontwerp volgt altijd nadat het functionele ontwerp is gemaakt. Het functioneel ontwerp is een document waarin is beschreven hoe de nieuwe website-app er functioneel uit moet zien en wat die doet. Een visueel ontwerp (of design) is de visuele uitwerking daarvan. In een functioneel ontwerp leg je bijvoorbeeld vast welke blokken en elementen er op een pagina moeten komen (en in welke volgorde) en een designer werkt dat vervolgens uit tot een visueel ontwerp.

Waaruit bestaat een functioneel ontwerp?

A. Het is een methode om een aankoopproces of een dienst vanuit het perspectief van de klant te visualiseren. 
B. Het beschrijft de ervaringen van een klant gedurende de reis die een klant maakt om zich te oriënteren of een product of dienst aan te schaffen, en beschrijft voor de rest alle functionaliteiten van de webapp-webshop.

Wel bestaat een functioneel ontwerp (FO) ten minste uit de volgende workflow deel elementen/opdrachten: 
1. Persona. Doelgroep onderzoek
2. User story’s. Doelen van de website voor gebruikers en de onderneming 
3. Flowchart. Structuur van website 
4. Wireframes. Uitwerking functionaliteiten per pagina gedetailleerd 
5. Styletile/Styleboard. Input voor design en techniek Interface design( UI) elementen Zoals knoppen, menu’s, en andere visuele componenten het zijn interactieve bouwstenen van een gebruikersinterface.
6. Prototype. Ideeën voor interactie (interaction design / interactive mock-ups) (Figma)

---

6. Wat zijn user story’s?

Heb je al geleerd wat een gebruiker en doelgroep is hoe je een gebruikersgroep weer kunt geven in een gebruikersprofiel en een persona. Je weet nu dat een gebruiker altijd een doel heeft wanneer hij/zij een visueel vormgegeven eindproduct, app of website gebruikt. Omdat user experience design (UXD) betekent dat de gebruiker centraal staat, begin je het eindproduct (een webapp, site of webshop) met het beschrijven van de doelen van de gebruiker. Een user story beschrijft vanuit de gebruiker wat hij of zij op de website of app kan doen.

Een user story heeft altijd de volgende vorm:

Ik als < rol/gebruiker >
Dit eerste deel van de zin beschrijft de rol. Een interactief product kan meerdere gebruikersgroepen hebben. Denk bijvoorbeeld aan de verschillende doelgroepen, de beheerder van de site, enz. Je maakt dan voor elke rol een user story.

Wil < iets doen >
Dit tweede deel van de zin bestaat uit wat de gebruiker wil doen. Dit maak je zo concreet mogelijk, bijvoorbeeld: Ik als klant wil mij aanmelden voor de nieuwsbrief.

Zodat ik < er iets aan heb > (resultaat)
Dit laatste deel van de zin beschrijft het resultaat of het doel.

Voorbeeld uitwerking

Dus: Ik als een <rol/ gebruiker > Wil < iets doen > Zodat ik < er iets aan heb> resultaat. Prioriteit < Hoe belangrijk is het >

Nog meer voorbeelden van user story’s:
• Als bezoeker wil ik het programma van een dag zien, zodat ik een overzicht krijg van alle kunstenaars en een goede keuze kan maken.
• Als boekkoper wil ik de klantbeoordelingen van een boek lezen, zodat ik beter kan beslissen of ik het boek wil kopen.
• Als een geregistreerde gebruiker wil ik een nieuw wachtwoord kunnen aanvragen, zodat ik weer toegang kan krijgen als ik mijn wachtwoord vergeten ben.
• Als student wil ik mijn cijfers online bekijken, zodat ik sneller weet of ik het examen heb gehaald.
• Als blogger wil ik een blogartikel aanmaken, zodat ik mijn verhaal met anderen kan delen.

50 tot wel 500 story’s
Alle user story’s samen geven aan wat de functionaliteit moet worden van een interactief product. Een eenvoudig project bestaat uit ongeveer 50 story’s. Bij een complex project kan dit oplopen tot 500 of zelfs meer. Zo ontstaat een zeer gedetailleerde beschrijving van het eindproduct Met als doel om de eindklant altijd goed te bedienen. Een tevreden klant is tenslotte een blijvende klant, en geen afhakende klant. 

---

7. Wat is MoSCoW?

Nadat je alle user story’s hebt beschreven, gebruik je de MoSCow om te beoordelen welke story het belangrijkst is voor de corebusiness van de organisatie. Je wilt namelijk beoordelen wat belangrijk en minder belangrijk is voor het voortbestaan van diezelfde organisatie.

MoSCoW staat voor:
• M – must haves: deze story’s moeten in het eindresultaat terugkomen; zonder deze eisen is het product niet bruikbaar.
• S – should haves: deze eisen zijn zeer gewenst, maar zonder is het product wel bruikbaar.
• C – could haves: deze eisen komen alleen aan bod als er tijd genoeg is.
• W – won’t haves (ook wel would haves genoemd): deze eisen zullen in dit project niet aan bod komen, maar kunnen in de toekomst, bij een vervolgproject, interessant zijn.

Een project wordt als gefaald gezien wanneer niet alle must-have-eisen in het eindproduct verwerkt zitten.

Voorbeeld M- must have:
De user story ‘Als vmbo-leerling wil ik een overzicht van alle opleidingen van het Mediacollege, zodat ik in één keer kan zien welke opleidingen er aangeboden worden’ is
een M- must have.

Voorbeeld C- could have of W-won’t have
De user story ‘Als jongere wil ik een virtuele wandeling maken door het hotel, zodat ik kennismaak met de voorzieningen van het hotel’ is leuk, maar niet noodzakelijk voor de site. Met de opdrachtgever beslis je of dit een C- could have of een W-won’t have wordt. Dit is ook afhankelijk van het budget van de opdrachtgever.

---

8. Waarom is een een user story belangrijk?

1. User story’s dwingen je om te denken vanuit de gebruiker. (Welke betekenisvolle en aangename gebruikersbehoeften en gebruikerservaring heeft de gebruiker nodig)
2. User story’s beschrijven alle functies van het eindproduct (bijvoorbeeld: kan ik snel een stukje muziek beluisteren)  
3. User story’s maken het mogelijk om het project op te delen in kleinere delen. Je kunt het project per story gaan uitwerken of bij een groot project de user story’s verdelen over verschillende projectgroepen.
4. Door de user story’s te bespreken met de opdrachtgever, maak je duidelijk wat de omvang van het project is.

Wanneer je user story’s beschrijft, zorg er dan voor dat de story echt iets zegt over de behoefte van de gebruiker. Maak de user story dus niet te algemeen.
Voorbeeld: Jongere wil informatie over een reis zodat hij een reis kan kiezen.
Dit is een user story die meer vragen oproept dan het beantwoordt. Welke informatie heeft deze jongere nodig om een keuze te maken? Willen ze de prijs weten of alleen de accommodatie? Wil de jongere verschillende reizen kunnen vergelijken? enz.

---

9 Opdracht User story Festival App

User story
Vormgevers die een app of website ontwerpen denken na over de mogelijke
doelen die belangrijk zijn voor de gebruiker. De doelen worden vast gelegd in user
story’s. Een user story is een korte beschrijving (story) van wat een gebruiker
(user) wil of kan binnen een app Het lastige is dat user story’s je dwingen
om te denken vanuit de gebruiker. Als je dat lukt, krijg je tevreden klanten!

Dit zijn de standaard Festival app flowchart pagina,s
1. Landing pagina home
2. Nieuws op het festival Nieuws van de dag: Er zijn minimaal 3 nieuwsitems ontworpen. Minimaal één item is clickable
3. Programma pagina artiesten Artiesten: Laat minimaal 3 verschillende artiesten zien. Één artiest is clickable
4. Blokkenschema podia laat het blokkenschema van minimaal één dag zien. Het blokkenschema bevat een timetable en podia. Je kunt in de timetable op minimaal één artiest klikken voor meer informatie 
5. Plattegrond waar&wat Neem de originele plattegrond over voor de locatie van podia, eetgelegenheden etc
6. Bestel tickets/ Muntjes/Merchandise pagina
7. Contact
8.Jouw eigen idee pagina? 

9 Een mobiel functionaliteit gebruiken in je app
zie Smartphone sensoren: hét complete overzicht.
Zie iPhone-hardware

De opdracht
Maak voor elke van de hierboven benoemde 8 Festival app pagina’s, minimaal 5 user story’s per onderdeel/pagina
Maak daar gebruik van je onderzoek vaardigheden om te kijken hoe andere Festival app hun user story hebben beschreven. Kies een groot bestaande succesvolle Festival app in Nederland of download de versie app van vorig jaar, gebruik die om tot je eigen succesvolle Festival app user story’s te ontwikkelen.
De klant heeft een aantal user Story’s al benoemd die hij erg interessant vindt download het bestand en vul aan met je eigen user Story’s die je wilt implementeren in je app

Bijvoorbeeld: voor de pagina
Ik als een> ik als Festival bezoeker 1
Wil> ik wil festival nieuws kunnen filteren op categorie, op datum en tijd
Zodat ik> ik snel kan vinden wat ik zoek
Prioriteit> Must

Je werkt alle User story uit met Scenario’s
(Given–When–Then) (Gegeven dat> Wanneer ik->Dan)

De Scenario’s formule 
Given >Gegeven dat …> uitganspunt >>
When> Wanneer ik …> wat doe ik 
Then >Dan …> wat zie ik
Voorbeeld
Scenario: Extra toevoegen update prijs
Gegeven dat>Vegan Falafel Bowl in mijn wagen staat voor €9,90 zonder extra’s
Wanneer ik>Avocado (+€1,50) als extra selecteer
Dan> stijgt de totaalprijs direct met €1,50 naar €11,40.

Stappen
1. Download het user story template festival bestand.
2. Download zoveel mogelijk verschillende festivals apps.
3. Onderzoek zoveel mogelijk interessante user Story’s van bestaande apps maak daar een lijstje van. 
4. Bepaal welke user Story’s hebben de verplichte flow pagina’s nodig
5. Maak een eigen invullingen van het user story template festival bestand met je eigen user Story’s die jij wilt implementeren in jouw festival app.
6 Werk ten miste 3  scenario’s formule (Given–When–Then) (Gegeven dat- Wanneer ik- Dan) uit per pagina 
7. Lever een compleet document in via teams met alle User Story’s die jij gaat toepassen in jouw festival app.

Tip:
Gebruik Excel

RESULTAAT
Een duidelijk beeld van de behoefte van de gebruiker. Met alle betekenisvolle en aangename gebruikersbehoeften en gebruikerservaring die de klant nog heeft.

DOWNLOAD HET BESTAND
User story template Festival.xlsx
De Scenario’s formule uitwerkBlad.docx
Checklijst_festival-app