portfolio
home leerdoelen proftaak projecten
Concept Interaction Design Interactief Mediaproduct Code Iteraties Advies Focus

Leeruitkomst 3: Interactief Mediaproduct

Je realiseert een interactief mediaproduct door hardware en software te combineren, op basis van functionele eisen, verkregen uit user stories.


Tijdens de ontwikkeling van WeRelate heb ik een interactieve app gerealiseerd door frontend- en backend-technologieën te combineren, met als doel een stabiele en veilige gebruikerservaring te creëren. Functionele eisen zijn zorgvuldig vastgesteld in nauwe samenwerking met het team, waarbij user stories zijn afgestemd op de specifieke behoeften van de doelgroep. User stories en requirements hebben een belangrijke rol gespeeld in het vormgeven van de kernfunctionaliteiten van de app, zoals de dagelijkse matchfunctie met drie profielen en het onboardingproces. Door de userstory's te prioriteren, konden we onze focus leggen op de features die de hoogste waarde bieden aan de gebruikers, wat resulteerde in een gebruiksvriendelijke en doelgerichte app.Daarnaast hebben we prototypes ontwikkeld en getest met behulp van proofs-of-concept. Door gebruikersfeedback te verzamelen bij elke iteratie konden we de technische haalbaarheid valideren en de gebruikerservaring voortdurend verbeteren. Dit proces heeft ons geholpen een solide basis te leggen voor de app en deze te optimaliseren voor de eindgebruikers.


Beschrijving Leeruitkomsten:
Wat heb ik gedaan? - Wat heb ik geleerd? - Hoe maakt me dat een betere media designer?


• Realiseren - Functionele eisen - Userstory's


Wat heb ik gedaan?

1. User stories opstellen en analyseren: Samen met het team heb ik user stories opgesteld die de functionele eisen van de app beschrijven, zoals de dagelijkse drie matches en een veilige omgeving.
2. Requirements opstellen met de MoSCoW-methode: Ik heb functionele eisen opgesteld op basis van user stories, waarbij ik gebruik heb gemaakt van de MoSCoW-methode om prioriteiten te bepalen. Dit hielp bij het identificeren van de must-haves, should-haves, could-haves en won't-haves, zodat we ons konden richten op de belangrijkste functionaliteiten zoals dagelijkse matches en gebruiksvriendelijke navigatie.
3. Creeeren en valideren door middel van Proof of Concept
Ik heb een proof of concept ontwikkeld om de belangrijkste functionaliteiten van de app te valideren en te demonstreren. Hierbij heb ik user surveys afgenomen bij potentiële eindgebruikers om het concept te toetsen en te optimaliseren. De feedback uit deze surveys gaf waardevolle inzichten in de wensen en verwachtingen van de doelgroep en bevestigde dat onze ontwerpkeuzes effectief waren. Op basis van deze input heb ik verbeteringen doorgevoerd en de werking van het proof of concept verder verfijnd.
5. Frontend development: Ik heb gewerkt aan het omzetten van wireframes en prototypes naar een functionele frontend met behulp van HTML en CSS. Hierbij heb ik interactieve elementen zoals buttons, sliders en animaties geïmplementeerd.
6. Software en hardware integratie: In samenwerking met backend-ontwikkelaars heb ik ervoor gezorgd dat de frontend naadloos communiceert met de backend, zodat gegevens zoals gebruikersinformatie correct worden verwerkt en weergegeven.

fotobannerfotobanner



Wat heb ik geleerd?

1. Technische Vaardigheden
Ik heb tijdens ons project veel technische vaardigheden opgedaan. Voor het eerst werkte ik met Figma om interactieve prototypes te creëren, waarbij ik geavanceerdere technieken zoals animaties, toggles en radiobuttons heb geleerd. Dit heeft me geholpen om mijn prototypes realistischer en overtuigender te maken, wat van groot belang was tijdens de testfase. Naast Figma heb ik mijn kennis van HTML en CSS verder verdiept, waarbij ik heb geleerd hoe ik flexbox effectief kan gebruiken om ontwerpen responsief te maken. Deze vaardigheden hielpen me om de visuele ontwerpen uit Figma nauwkeurig te vertalen naar de frontend van de app.
2. Methodisch Werken
Tijdens het realiseren van WeRelate heb ik veel geleerd op het gebied van het ontwerpen en ontwikkelen van een interactief mediaproduct. Een van de belangrijkste lessen was hoe belangrijk het is om functionele eisen duidelijk en haalbaar te formuleren. Door gebruik te maken van de MoSCoW-methode leerde ik prioriteiten te stellen, zodat de focus bleef liggen op de meest waardevolle functionaliteiten. Dit hielp mij niet alleen bij het structureren van het ontwikkelproces, maar ook bij het maken van betere designkeuzes die aansluiten bij de behoeften van de doelgroep.

fotobanner

3. Gebruikersgericht ontwerpen
Het opstellen en uitvoeren van user surveys gaf me inzicht in hoe gebruikers denken, wat ze verwachten en welke knelpunten ze ervaren. Door doelgerichte vragen te stellen en de resultaten te analyseren, kon ik concrete verbeterpunten identificeren. Deze inzichten heb ik direct toegepast in zowel het ontwerp als de technische realisatie van de app. Dit proces heeft me geleerd hoe belangrijk het is om gebruikers actief te betrekken bij het iteratieve proces van ontwerp en ontwikkeling.
4. Samenwerking en communicatie
Het samenwerken met een multidisciplinair team leerde me hoe belangrijk het is om technische en creatieve input effectief te combineren tot een geïntegreerd product. Door duidelijke communicatie en regelmatig overleg konden we elkaars expertise benutten en gezamenlijk uitdagingen, zoals de integratie van frontend- en backend-functionaliteiten, oplossen. Dit versterkte mijn begrip van teamwork en hielp me om beter prioriteiten te stellen en feedback constructief te gebruiken, wat bijdroeg aan een kwalitatief hoogwaardig eindresultaat.
5. Proof of concept
Ten slotte heb ik inzicht gekregen in het belang van het valideren van concepten door middel van proofs-of-concept. Het testen van prototypes met gebruikers hielp mij om technische en gebruiksvriendelijke oplossingen te identificeren en te verbeteren. Dit heeft me geleerd hoe je feedback integreert in het ontwikkelproces om een beter eindproduct te realiseren. Deze ervaringen hebben mij niet alleen meer zelfvertrouwen gegeven in mijn technische en creatieve vaardigheden, maar hebben mij ook geholpen een breder begrip te krijgen van de volledige productontwikkelingscyclus.
fotobannerfotobanner

Hoe maakt me dat een betere media designer?

Deze ervaringen hebben mijn vaardigheden als mediadesigner versterkt door me te leren hoe ik functionele eisen kan vertalen naar een tastbaar, interactief product. Door de combinatie van technische en creatieve processen en de integratie van user feedback, ben ik beter in staat om gebruiksvriendelijke en effectieve mediaproducten te ontwerpen en te realiseren. Het gebruik van methodieken zoals de MoSCoW-methode en het ontwikkelen van een proof of concept heeft me een gestructureerde aanpak geleerd, wat essentieel is voor het succesvol uitvoeren van complexe projecten.


Realisatie

User Story's Klik Hier

Requirements Klik Hier

Figma Prototype Klik Hier

WeRelate Website OnlineKlik Hier

Gitlab Klik Hier

User Survey's

User Survey Klik Hier

Resultaten User Survey Klik Hier

Resultaten User Survey PDF Klik Hier



“Design is the intermediary between
information and understanding.”


-- Hans Hofmann --


pink background small2