Case study: Nexivo, een slimme event-app voor Connect-IT25

Bij We Do Dev Work zijn we gespecialiseerd in het bouwen van softwareoplossingen op maat die echte uitdagingen oplossen. Toen we de handen ineensloegen met de organisatoren van Connect-IT25, kregen we de taak om een app te bouwen die de ervaring van de bezoekers op een betekenisvolle manier zou verbeteren. Het resultaat was Nexivo, een intuïtieve event-app ontworpen om bezoekers te helpen navigeren op de locatie, hun eigen schema's te maken en in realtime in contact te komen met andere aanwezigen.

Met een strakke deadline van 5 weken hebben we direct ons designteam aan het werk gezet. We kwamen met gedetailleerde wireframes waarmee we in slechts enkele dagen een duidelijke scope konden bespreken en vastleggen. Met een helder beeld van de verwachtingen zijn we begonnen met het ontwerpen van de gebruikerservaring en de interfaces. Gelukkig voor ons had Connect-IT25 al een gevestigde merkidentiteit, waardoor we ons grotendeels konden concentreren op de user experience van de app.

Vanwege de krappe planning werkten we gelijktijdig aan de technische architectuur terwijl de UI-ontwerpen werden afgerond. Ons engineeringteam moest een schaalbaar fundament neerzetten dat honderden bezoekers tegelijk kon verwerken zonder dat zij hoefden te wachten op een reactie.

Na slechts één week van ontwerp en architectuur begon ons developmentteam met het bouwen van de app. Het zal geen verrassing zijn dat er tijdens de ontwikkeling nog features verfijnd moesten worden. Dankzij onze agile aanpak konden we echter snel schakelen tussen het herontwerpen van een functie en het direct weer in productie nemen ervan.

Binnen slechts 3 weken hadden we een testbare oplossing op een bèta-omgeving, die Connect-IT25 gebruikte om waardevolle feedback te geven. Dat gaf ons nog 2 weken om de applicatie te perfectioneren en zelfs extra functies toe te voegen! Dit resulteerde in een strakke, definitieve oplevering vlak voordat het evenement plaatsvond.

Dankzij onze zorgvuldige planning, een focus op wat echt belangrijk is voor de gebruiker, de juiste keuzes in onze technologiestack en een agile ontwikkelingsfase, waren we in staat om Nexivo in slechts 5 weken vanuit het niets op te bouwen en de verwachtingen te overtreffen! Laten we dieper ingaan op de keuzes die we hebben gemaakt en waarom.

Designkeuzes

Voordat we met het ontwerp begonnen, maakten we er een prioriteit van om de behoeften van zowel de bezoekers als de organisatoren te begrijpen. Onze onderzoeksfase moest snel zijn, maar vlijmscherp. We combineerden gebruikersinzichten, concurrentieanalyse en snelle wireframing om efficiënt van idee naar uitvoering te gaan.

Dit is hoe we het hebben aangepakt
Stap 1 - Eisen verzamelen van de klant: Ons proces begon met een gedetailleerde discovery-sessie met de organisator.
Stap 2 - Interne teamdiscussie & scoping: Met de input van de organisatoren hielden we gezamenlijke workshops met onze product-, design- en developmentteams.
Stap 3 - Concurrentieanalyse: Om de industriestandaarden en gebruikersverwachtingen beter te begrijpen.
Stap 4 - Wireframing: We gebruikten low-fidelity wireframes in Figma om de belangrijkste flows en lay-outs uit te stippelen voordat we overgingen naar high-fidelity UI.
Stap 5 - Designbeslissingen: Op basis van ons onderzoek vormden de volgende principes de uiteindelijke UI:

Minimalistische navigatie: Slechts 5 tabs onderaan—Home, Kalender, Info, Mensen en Sociaal
Context-first startscherm: Toont belangrijke informatie, huidige en komende sessies met snelle acties.
Visuele hiërarchie: Sessietijden, zaalinformatie en namen van sprekers zijn in één oogopslag te scannen.

Dit gestructureerde onderzoeksproces hielp ons om snel te bewegen terwijl we de gebruiker centraal hielden. Zo zorgden we ervoor dat Nexivo niet alleen snel gebouwd werd, maar ook goed gebouwd werd.

Hoewel Nexivo is ontworpen voor Connect-IT25, wisten we vanaf het begin dat de app herbruikbaar moest zijn voor toekomstige evenementen: elk met hun eigen unieke branding, kleuren en visuele identiteit. Om dit op te lossen, hebben we Nexivo gebouwd op een flexibel designframework dat zich eenvoudig aanpast aan elke huisstijl (CI) zonder de kernstructuur van de app te wijzigen. We hebben een themastructuur geïmplementeerd waarmee organisatoren hun eigen primaire en secundaire merkkleuren en typografievoorkeuren kunnen instellen. Alle componenten zoals knoppen, kaarten, navigatiebalken en tabs volgen consistente regels voor spatiëring en lay-out en maken gebruik van tokens voor padding, kleur en lettergroottes.

Bovendien is een van de sterke punten van Nexivo de eenvoudige, realtime interactie tussen bezoekers. Het is vergelijkbaar met wat je vindt in moderne communicatieplatformen. We hebben een speciale Social-tab geïntroduceerd in de navigatie, met twee tools: Community en Direct Message. De Community-functie biedt kanaalgebaseerde gesprekken voor open discussies en het delen van ervaringen. Direct Messaging stelt gebruikers in staat om privé contact te leggen, wat netwerken waardevoller maakt.

Technische keuzes

Belangrijke architecturale beslissingen waren onder meer welke backend we zouden gebruiken, welk frontend-framework en waar we de applicatie zouden hosten. We hadden een paar belangrijke randvoorwaarden om rekening mee te houden:
De app moet veel gebruikers tegelijkertijd kunnen bedienen
We hebben mobiele ondersteuning nodig
Frameworks en technologische keuzes moeten snelle ontwikkeling ondersteunen

Met deze randvoorwaarden in gedachten kwamen we tot de volgende keuzes.

Aangezien onze backend authenticatie, websockets, reguliere CRUD van evenementen en gebruikersinformatie, en bestandsopslag moet ondersteunen, hebben we gekozen voor Supabase. Supabase is een open-source backend die standaard al veel van de door ons benodigde functies bevat. Dat is een groot voordeel, want door te gebruiken wat direct beschikbaar is, besparen we veel tijd die normaal gesproken nodig is voor het schrijven van auth-handlers, bestandsuploads, API's, enz. Supabase kan zelf gehost worden, maar we kozen voor een cloud-hosted plan zodat we de infrastructuur niet zelf hoefden te beheren, wat opnieuw tijd bespaarde voor andere ontwikkeling.

Voor onze frontend kozen we ervoor om een PWA te bouwen in plaats van een native of platformonafhankelijk mobiel framework. We wisten dat de gebruikers vrijwel uitsluitend mobiele apparaten zouden gebruiken, maar om de ontwikkeling te versnellen hadden we een platformonafhankelijk framework nodig. Daarom konden we native Kotlin- en Swift-ontwikkeling snel uitsluiten. Uiteindelijk kozen we voor een PWA vanwege de manier waarop het authenticatiesysteem moest werken: gebruikers ontvangen een e-mail met een token waarmee ze kunnen inloggen. Met een PWA kan de gebruiker direct inloggen zonder eerst naar een app store te worden geleid om de app te downloaden, terug te gaan naar de e-mail en opnieuw op de link te klikken.

We hebben NextJS gekozen om deze PWA te bouwen. Server-side rendering geeft ons flexibiliteit in hoe we de app renderen. We kunnen gegevens op de server cachen om laadtijden te verkorten, wat de gebruikers een soepele en app-achtige ervaring geeft. Pagina's kunnen worden geprefetched en alvast worden gevuld met event- en profielinformatie, wat bijdraagt aan uitstekende prestaties. Omdat we bij We Do Dev Work zeer vertrouwd zijn met NextJS, konden we snel features opleveren en tijd overhouden voor optimalisaties.

Voor de hosting van onze frontend kozen we voor AWS Amplify, grotendeels vanwege de ingebouwde CDN-configuratie en deployment-pipelines. Het schaalt bovendien automatisch, waardoor we minder tijd kwijt zijn aan het beheren van kritieke infrastructuur.

Niet alles verliep echter vanzelf met deze techstack; er waren onderweg enkele kleine uitdagingen. Dit zijn de lessen die we hebben geleerd:

• Het type token dat we nodig hadden voor authenticatie was geen traditionele eenmalige magic link; we moesten ons eigen tijdgebonden token ontwikkelen dat gedurende het hele evenement bruikbaar was. Dit gaf onze gebruikers de mogelijkheid om de app in een andere browser of meerdere keren per dag te openen.

• Een ander veelvoorkomend probleem was dat het openen van het toetsenbord in de chat-interface de PWA niet goed schaalde. Dit hebben we opgelost door aangepaste resize-handlers toe te voegen. Dit zou geen probleem zijn geweest bij het werken met een native framework.

• Server-side rendering voegt een laag complexiteit toe aan het bouwen van een applicatie. We hebben veel tijd besteed aan het optimaliseren van de prestaties, tijd die ook aan nieuwe features had kunnen worden besteed. We zijn erg tevreden met het resultaat, maar dit was alleen haalbaar dankzij onze uitgebreide ervaring met NextJS.