Projectoverzicht

Nevermore Detective Agency is een interactieve detectivewebsite waarin de gebruiker de rol aanneemt van een detective. De gebruiker onderzoekt een mysterieuze zaak rondom Nevermore Academy door verschillende locaties te bekijken, aanwijzingen te verzamelen, dialogen te lezen en uiteindelijk een verdachte te kiezen.

Het project begon als een UX/UI-concept en is later verder uitgewerkt tot een werkende website. In de eerste fase heb ik onderzoek gedaan naar de doelgroep, persona, empathy map, moodboard, benchmarkanalyse, user flow en wireframes. Daarna heb ik het concept verder uitgewerkt naar een visueel ontwerp en een interactieve website.

Uitdaging

De grootste uitdaging was om een ervaring te maken die spannend en mysterieus aanvoelt, maar tegelijk duidelijk en gebruiksvriendelijk blijft. Omdat het project bestaat uit verhaal, interactie en een AR-geïnspireerd onderdeel, moest de gebruiker goed begeleid worden tijdens het onderzoek.

De website moest niet alleen mooi passen bij de Nevermore-sfeer, maar ook logisch werken. De gebruiker moet begrijpen waar hij naartoe kan, welke aanwijzingen belangrijk zijn en hoe deze aanwijzingen helpen bij het oplossen van de zaak.

Onderzoek en concept

De doelgroep bestaat vooral uit jongeren, studenten en gebruikers die interesse hebben in mystery, detectiveverhalen en interactieve ervaringen. Uit het onderzoek kwam naar voren dat de interface snel, duidelijk en visueel moest zijn.

Voor inspiratie keek ik naar detectivewebsites, de visuele stijl van Nevermore en AR-toepassingen. Deze bronnen hielpen bij de opbouw van cases, de donkere visuele stijl en het idee om aanwijzingen via een scanmoment zichtbaar te maken.

User persona

Uit de user persona bleek dat de gebruiker snel toegang wil tot aanwijzingen, duidelijke navigatie verwacht en weinig geduld heeft voor lange teksten. Daarom heb ik gekozen voor korte uitleg, duidelijke knoppen en een overzichtelijke structuur.

Stijl & sfeer onderzoek

Dit stijlonderzoek hielp mij om de visuele richting te bepalen. Ik heb gekozen voor een donkere, mysterieuze interface met paarse accenten, maar wel met genoeg contrast en duidelijke knoppen zodat de website bruikbaar blijft.

Benchmark analyse

In de benchmarkanalyse heb ik gekeken naar detectivewebsites, Nevermore en AR-toepassingen. Hieruit heb ik meegenomen dat mijn ontwerp een duidelijke case-opbouw, donkere visuele stijl en interactieve scanmomenten moest bevatten.

Ontwerpproces

Tijdens het ontwerpproces heb ik eerst de structuur van de ervaring bepaald. De uiteindelijke website volgt een duidelijke flow: de gebruiker start op de homepage, kiest een case, onderzoekt verschillende locaties, bekijkt aanwijzingen en dialogen, gebruikt een QR/AR-moment en kiest uiteindelijk een verdachte.

Low-fidelity wireframes

In de low-fidelity fase heb ik de eerste structuur van de website bepaald. Hierbij lag de focus vooral op de plaatsing van onderdelen zoals de homepage, het case-overzicht, het introductiescherm, het onderzoeksscherm en de resultaatpagina.

Mid-fidelity wireframes

In de mid-fidelity fase heb ik de schermen verder uitgewerkt. De navigatie, knoppen en indeling werden duidelijker, zodat de gebruiker makkelijker door de case kan gaan en sneller begrijpt wat de volgende stap is.

High-fidelity ontwerp & eindversie

Na de low- en mid-fidelity fase heb ik het ontwerp verder uitgewerkt naar high-fidelity. Tijdens deze fase zijn sommige onderdelen veranderd ten opzichte van de eerdere wireframes. In de praktijk merkte ik dat bepaalde schermen duidelijker, overzichtelijker of logischer konden worden opgebouwd.

Daarom heb ik in het high-fidelity ontwerp meer aandacht besteed aan sfeer, duidelijke navigatie, betere plaatsing van knoppen, een sterkere visuele stijl en een VR-achtige beleving. De donkere Nevermore-sfeer, paarse accenten en detective elementen zijn hierin verder uitgewerkt.

UI richting & ontwerpkeuzes

Voor de visuele stijl heb ik gekozen voor een donker kleurenschema met paarse en gouden accenten. De paarse tinten sluiten aan bij de Nevermore-sfeer en geven het ontwerp een mysterieuze uitstraling. De gele en gouden accenten gebruik ik vooral voor knoppen, highlights en belangrijke interactieve elementen.

Voor titels en sfeeraccenten heb ik een Nevermore-achtig font gebruikt. Dit versterkt de mysterieuze en gotische uitstraling van het project. Voor langere teksten en uitleg heb ik gekozen voor een beter leesbaar font, zodat de interface duidelijk blijft tijdens het onderzoeken van de case.

Feedback & verbeteringen

Tijdens het project heb ik feedback gekregen van mijn docent en medestudenten. Vanuit de docent kwam naar voren dat het onderzoek compleet genoeg was met doelgroep, persona, empathy map, stijlonderzoek, moodboard en benchmark, maar dat de doelgroep en gebruikersbehoeften scherper onderbouwd mochten worden. Deze feedback heb ik meegenomen door in de verdere uitwerking van mijn project duidelijker uit te leggen welke behoeften belangrijk waren, zoals snelle navigatie, korte teksten en duidelijke interacties.

Ook kreeg ik feedback dat het concept goed past bij Wednesday en Nevermore, maar dat één case concreter uitgewerkt moest worden met duidelijke clue, een dader en een uitkomst. Dit heb ik meegenomen door de case “Verdwijning bij het Station” verder uit te werken met locaties, aanwijzingen, personages, misleiding en een eindkeuze tussen verdachten.

Daarnaast kreeg ik feedback op de interface en interactie. Hierbij ging het onder andere om het verwijderen van de hamburgernavigatie op desktop, het plaatsen van het logo links en de navigatie rechts, afgeronde clue-afbeeldingen, een duidelijkere sluitknop, een gecentreerde schermtitel en een betere start-hint waarin duidelijk wordt dat er een student vermist is. Ook waren er verbeterpunten rondom consistentie tussen aanwijzingen, de volgorde van de laptop en rugzak, extra navigatie vanaf de ingang, een “case oplossen”-melding met Wednesday en het verwijderen van dubbele foutmeldingen aan het einde. Niet alle feedbackpunten zijn volledig verwerkt, maar de belangrijkste verbeteringen zijn meegenomen om de flow, gebruiksvriendelijkheid en beleving sterker te maken.

Wat ik heb geleerd

Tijdens dit project heb ik geleerd hoe belangrijk het is om onderzoek, verhaal en interface goed met elkaar te verbinden. Een detectivewebsite werkt alleen goed als de gebruiker begrijpt wat hij moet doen, waar hij naartoe kan en welke acties mogelijk zijn.

Ook heb ik geleerd dat sfeer en gebruiksvriendelijkheid in balans moeten blijven. Een donkere mysterieuze stijl past goed bij het concept, maar tekst, knoppen en navigatie moeten nog steeds duidelijk leesbaar zijn.

Daarnaast heb ik geleerd dat een ontwerp tijdens de uitwerking mag veranderen. Sommige onderdelen uit de low en mid fidelity fase zijn aangepast, omdat ze in de praktijk duidelijker, overzichtelijker of logischer konden worden opgebouwd. Hierdoor heb ik meer ervaring opgedaan met het omzetten van een creatief concept naar een werkende interactieve website.