Digital Revolution of DJ'ing

Team

Revyl bestaat uit een team van Communication & Multimedia Design studenten aan de Hogeschool Rotterdam. Vanaf september 2015 tot en met januari 2016 hebben we de minor Interface & User Experience Design gevolgd. Tijdens deze minor hebben we een project gedaan voor Hoppinger.

Robin Krijgsman

Concepting & Research

Rob van der Meer

Prototyping

Wendel Felius

Interaction Design

Romy Herrewijn

Visual Design

Briefing

Hoppinger had de opdracht voor ons, om een DJ applicatie te maken.

 

"Hoe kunnen we met de komst van tablet interfaces het tastbare van een platenkoffer nabootsen op een manier dat de mogelijkheden van digitale techniek (zoals snel kunnen zoeken en sorteren) optimaal worden benut?"

 

Deze vraag is vanuit Hoppinger gekomen omdat ze zelf een start-up willen beginnen waarbij ze de nieuwe DJ controller introduceren.

Samenwerking en Betrokkenen

Tijdens ons project waren er meerdere partijen betrokken bij het project, namelijk:

 

- Jasper Schelling (Hogeschool Rotterdam)

- Cies Breijs & Matthijs Stam (Hoppinger)

- Externe partijen voor interviews en enquêtes

 

 

Samenwerking:

 

- Doelgroep - Vragen beantwoorden en testen

- Medestudenten van de minor Interface & User Experience Design - Testen

- Duco van Duijn - Geholpen bij het filmen van de promotiefilm

Proces

Workshop met Hoppinger

Om het project te beginnen hebben we tijdens de workshop met Hoppinger onze gezamenlijke doelen vastgesteld die we voor het project hadden. We hebben dit gedaan door met het andere team een workshop te organiseren om zo tot de doelen te komen die duidelijk zijn.

Discovery

In de onderzoeksfase zijn we gaan kijken naar wat de doelgroep wilt en hebben we ook gekeken naar wat een DJ gebruikt en doet. Doordat we zelf geen DJ's zijn en geen kennis ervan hebben, moesten we veel onderzoek doen naar de knoppen en hoe deze werken.

Ideation

Doordat het concept al een DJ controller zou zijn op de tablet. Tijdens deze fase zijn we vooral gaan kijken hoe de knoppen geplaatst moesten worden en welke periferieën we zouden uitwerken in de applicatie.

Realisation

De tijd was aangebroken om het te gaan realiseren en hebben hiervoor veel iteraties gemaakt op ons ontwerp. Door feedback van Hoppinger kregen we steeds nieuwe interfaces en zijn we de aspecten van de controller apart gaan prototypen om zo een beeld te krijgen bij wat het precies zou doen.

Overdracht

Na twintig weken was de applicatie af en konden we het opleveren aan Hoppinger. We leveren een applicatie, een werkend prototype in de vorm van filmpjes en een promotiefilmpje.

Merk opzetten

 

We zijn ook gaan kijken naar diverse merken. Zo hebben we 3 merken bedacht met verschillende waarden, logo's en huisstijlen. Dit waren Stockton, MixMax en Deasi. Echter na de conceptpresentatie werd er duidelijk dat we niet met deze merken verder gingen omdat we ons vooral moesten focussen op de interface van de opdrachtgever.

Onderzoeksresultaten

Gedurende het project hebben we intensief onderzoek gedaan naar hoe de huidige DJ controller werkt en welke functies belangrijk zijn voor de applicatie. Ook hebben we bij de doelgroep gevraagd wat zij belangrijk vinden. We hebben externe partijen geïnterviewd, een enquête gedaan over het draaien en wat zij belangrijk vinden, en hebben we prototypes en visuals getest bij ze.

Ons concept van een DJ applicatie zorgt ervoor dat het fysieke deck niet meer nodig maar dat de digitale experience de nieuwe standaard wordt van het draaien. Het zorgt ervoor dat de gebruiker snel, gemakkelijk en vernieuwend zijn sets kan draaien.

 

De applicatie

De applicatie heeft de alle basis functies van het fysieke deck en gebruikt de kenmerkende functies. Door het digitale aspect is er veel meer mogelijk en is de zoekfunctie uitgebreider en makkelijker met het muziek zoeken en kiezen. Verder kan de doelgroep de tablet makkelijk aansluiten en is er de mogelijkheid om met een partner te draaien.

 

Anders dan anders

Bij ons project was het concept in het begin al duidelijk, een dj controller als applicatie. We zijn daarom in deze fase gaan kijken op wat voor verschillende vormen de controller zou kunnen komen en zijn begonnen met schetsen. Tijdens deze fase hebben we nog veel onderzoek gedaan naar de knoppen van een controller en hoe deze in samenhang werken. Door verschillende versies te proberen kwamen we erachter hoe de knoppen precies werken en wat voor vorm wel of niet werkt.

 

Deze fase was voor ons een schetsende concept fase om tot inzichten te komen qua interface design en om het te testen bij de doelgroep.

Concept

Schetsen

 

Aan de hand van het concept idee zijn we begonnen met het maken van een stel schetsen om te kijken hoe de applicatie eruit zou kunnen zien. Tijdens het schetsen zagen we dat iedereen elementen had die overeenkwamen maar ook die erg verschillend waren en zo kwamen er verschillende oplossingen uit. Doordat we dit zagen hebben we overlegt en besloten we om vier verschillende richtingen individueel uit te werken en zo te kijken wat eruit kwam om zo veel input te krijgen. Uiteindelijk hebben we alle schetsen geinventariseerd en 1 definitieve schets gemaakt en deze bij de opdrachtgever gelegd.

Wireframen

 

Hieronder zijn de wireframes te zien die wij tijdens ons proces hebben gemaakt. Tijdens dit proces hebben we veel gekeken op knop niveau en gebruiksvriendelijkheid voor de doelgroep. Is alles wel in samenhang en is het logisch om te gebruiken? Dat waren vragen die ons erg bezig hielden.

Testen

 

Tijdens het wireframen hebben we bij de doelgroep getest of ze de interface fijn vonden om mee te werken, of we nog knoppen miste en of er dingen waren die niet klopten. Zo hebben we met diverse testpersonen gepraat en kwamen we achter nieuwe inzichten die we konden gebruiken voor onze applicatie. Wat ons ook steeds meer duidelijk werd was dat we na het testen steeds meer op 'safe' gingen en het richting de huidige fysieke controller gingen omdat de testpersonen dit graag zagen. Echter wou de opdrachtgever dit niet en wou iets heel nieuws waardoor we de interface bleven omgooien.

Visuals

 

Aan de hand van de wireframes zijn we de interface gaan visualiseren. We hebben ontzettend veel onderzoek gedaan naar de functies van verschillende knoppen en hebben veel aandacht besteed aan hoe deze  een plekje in de interface zouden krijgen. Hieronder zie je welke transformaties de interface is doorgegaan om tot het eindresultaat te komen.

Nadat we diverse visuals hadden gemaakt die hierboven zijn getoond, kregen we de feedback, een paar weken voor de deadline, om een nieuwe interface te maken. We konden al ontworpen elementen gebruiken maar het moest er anders uitzien van de opdrachtgever. Dit hebben wij aangepast en uiteindelijk kwam het onderstaande ontwerp eruit wat we daarna hebben geprototyped.

Documentatie

 

Aangezien het een nieuw product is, is het noodzakelijk om er documentatie bij te hebben wat aangeeft hoe alles precies werkt. Dat hebben wij dus gemaakt! Hierin wordt getoond wat elke knop doet en wat alle verschillende states van een knop zijn zodat het duidelijk is hoe het gebruikt wordt.

Branding

 

Omdat we in het begin van het project te hard van stapel liepen met het ontwerpen van een merk, hebben we nu tot het einde van het project gewacht om een merk te ontwikkelen bij de applicatie die we ontworpen hebben. We leerden hiermee dat het makkelijker is om een merk te maken voor een product, dan om eerst het merk op te zetten en daar het product op aan te passen.

Logo Maxxmore

 

Het logo van Maxxmore moet er dynamisch uitzien. De branding van Maxxmore bestaat uit de kernwoorden: Exclusiviteit, Snelheid, Toekomstgericht en Dynamisch.

Het logo moet deze kernwoorden ook uitstralen. Door een beeldmerk toe te voegen wordt het de exclusiviteit benadrukt.

 

 

Gebruik van het logo

 

Het logo van Maxxmore moet bij uitingen op de volgende manier gebruikt worden. Er moet genoeg ruimte over zijn rondom het logo zodat deze goed duidelijk is op alle uitingen.

Het vormelement mag apart gebruikt worden maar mag niet uit context getrokken worden.

 

 

Kleuren van Maxxmore

 

De kleuren van Maxxmore zijn onderverdeeld in 2 groepen. De primaire en secundaire kleuren. Het logo wordt altijd in het zwart gebruikt en de overige kleuren zijn er als ondersteuning. Het grijs en blauw wordt gebruikt in de uitingen.

 

 

Prototypes

 

De prototypes hebben wij anders aangepakt. Om te laten zien hoe alles werkt hebben wij van ons design prototype filmpjes gemaakt die demonstreren hoe alles werkt. Dit was voor onszelf erg handig doordat we snel een beeld kregen hoe het precies werkte en hoe het in combinatie met andere knoppen samenwerkte. Het gaf een goed overzicht voor zowel ons als voor anderen en konden het dusdanig overbrengen dat iedereen het snapt.

Productfilmpje

 

In de eindfase van de minor zijn we druk bezig geweest met het plannen, filmen en editen van ons productfilmpje. Niet geheel zonder slag of stoot hebben we onze eigen verwachtingen overtroffen.

Conclusie

 

De vraag vanuit Hoppinger was om een nieuwe DJ controller te ontwerpen op de tablet. We moesten kijken naar de nieuwste dingen en konden al het oude overboord gooien. Wat is de DJ controller van de toekomst? Met deze vraag gingen we aan de slag en hebben een nieuwe manier van DJ'en gecreëerd. We maken het de DJ makkelijker om muziek te sorteren en te zoeken en zorgen ervoor dat de DJ niet meer alles hoeft na te kijken maar alleen zijn iPad hoeft neer te leggen en dan is hij aangesloten en klaar om te draaien.

 

Oplossing

 

Als oplevering hebben we een concept bedacht en een ontwerp gemaakt die de nieuwe standaard voor het DJ'en moet zijn. Het concept en het ontwerp bestaan uit een interface waarbij gedacht is aan gebruiksvriendelijkheid en met het oog op de toekomst. De applicatie laat je gemakkelijk tracks zoeken doormiddel van een lijst of met cover-art en je kan gemakkelijk connecten met een vriend en samen een show weggeven.

Vervolgstappen

 

Voor ons product zouden de vervolgstappen zijn om het prototype te gaan programmeren en werkend te maken en deze vervolgens op een crowdfunding website te zetten om deze daarna te lanceren. Er zouden nog wijzigingen in de interface aangebracht kunnen worden en een website ontwerpen die de applicatie promoot. Daarnaast zouden er nog uitbreidingen kunnen komen die de gebruiker in staat stelt om meer effecten te gebruiken.

Wel verwacht

 

Een eigen werkplek die we zelf konden inrichten.

 

Gezellige sfeer gedurende de minor.

 

Veel bezig met het project.

 

Meer kennis krijgen van het project

dat we draaien.

Niet verwacht

 

Dat de knoppen van een DJ controller lastiger te begrijpen zijn dan gedacht.

 

Dat het ontwerpproces anders zou lopen dan wij in eerste instantie hadden gedacht.

 

Dat er in een korte tijd een toffe productvideo gemaakt kon worden.

Het zit er weer op. Jammer? Ja, eigenlijk wel. Al met al waren het vijf hele fijne maanden waarin we met elkaar meer geleerd hebben dan dat we van te voren hadden gedacht. Het proces had wat hobbels en bobbels, maar als alles vloeiend zou lopen betwijfel ik of je er veel van opsteekt. We hadden het erg leuk samen en hebben ook echt wel werk neergezet waar we ondanks alles best trots op kunnen zijn. In deze minor heb ik me voornamelijk ingezet als interaction designer en ben ik uiteindelijk doorgegaan met het verder werken aan het visual design. Ik ben er nog steeds niet achter wat ik leuker vind helaas. Robin, Romy en Rob, bedankt voor het lachen!

In deze relatief lange periode dat we aan het Hoppingerproject hebben gewerkt werd er veel van ons geëisd. We hebben ons ten maximale ingezet en zijn tevreden over ons eindproduct. Hier en daar een tegenvaller heeft ons niet tegengehouden in ons proces. We hebben ons gezamenlijk ingezet om dit project tot een mooi einde te brengen. Nu vijf maanden later ben ik trots op wat we hebben staan. Echter hadden we, mits een betere communicatie en meer vrijheid, het project meer naar onszelf toe kunnen trekken. Al met al een prima project gedraaid waarin ik mijzelf, vooral op het 'prototyping d.m.v. video'-gebied heb verrijkt.

Rob van der Meer | Prototyper

www.robvdmeer.nl

Wendel Felius | Interaction Designer

www.wendelfelius.nl

Robin Krijgsman | Concepter

www.robinkrijgsman.nl

Romy Herrewijn | Visual Designer

www.romyherrewijn.nl

De afgelopen maanden zijn voorbij gevlogen! Maanden waarin ik veel heb geleerd over het onderwerp van het project, nieuwe vaardigheden zoals Agile Scrum werken maar ook hoe ik, en mijn team, als ontwerpers zijn gegroeid. We hebben een hele toffe tijd gehad waarbij we als team zijn gegroeid. Door de tegenslagen die we hebben gehad zijn we steeds weer sterker terug gekomen. En nu we aan het eind zitten? We hebben een top resultaat neergezet! Ik heb me vooral gericht op het concept waar minder aan te doen was door de opdracht en heb mezelf als vliegende keep neergezet waardoor ik van alles wat mee pikte!

In de afgelopen weken heb ik veel geleerd van het project wat we hebben gedraaid. Het was leuk om eindelijk een keer fulltime een groot project te draaien, waar je nog meer leert over het ontwerp proces. Ik heb daarnaast ontzettend veel plezier gehad in het samenwerken met mijn team. We hebben samen (heel veel) gelachen, maar ook samen flinke tegenslagen verwerkt. We hebben ervoor gezorgd dat we een eindresultaat hebben waar we trots op zijn, omdat ieder zijn/haar effort erin heeft gestoken om een goed resultaat aan de opdrachtgever aan te bieden. Een team om heel trots op te zijn! :)

Copyright © 2016 Revyl. All Rights Reserved.