Van idee naar online product – in 3 fases

Van idee naar online product – in 3 fases

04 september 2019 (UX-) Design

Een goed online product – van site tot campagne – komt niet uit de lucht vallen. Je hebt eerst een strategie nodig, zoals Sander hier al vertelde. Maar een strategie is nog geen wezenlijk product. Hoe breng je dat idee vervolgens tot leven? Een beetje zoals je een huis bouwt. Van bouwplan tot de laatste dakpan. Gepland en gebouwd door team design, development en marketing – met ‘team klant’ als opzichter. 

Wat je hier leest is bedoeld om je inzicht te geven in ons werkproces, en waarom het werkt. Een blik achter de schermen, zodat jij ziet hoe wij echt effectief van idee (stap 1) naar goed werkend digitale oplossing (stap 2) gaan. 

Ons ideale digitale bouwproces, Exitable style:

  1. Nadenken – in de discover & define fase 
  2. Maken – in de design & development fase 
  3. Beter maken – in de data & doorontwikkeling fase 

En dat is dus heel goed te vergelijken met het bouwen van een huis. Kijk maar. 

Even terug naar de discover & define fase

Even inchecken waar we gebleven waren. Stel je voor: je had een digitale wens, behoefte of probleem. Nu ligt het bouwplan er. Dat wil zeggen; de digitale strategie is opgezet. Je wens, vraagstuk of probleem is omgezet in een online oplossing. Een idee. Hier lees je hoe dat is gegaan. Een korte samenvatting: we onderzochten wat we nodig hebben, deden workshops om te zien waar we naartoe moeten en definieerden vervolgens de weg naar de digitale oplossing toe. 

Het resultaat is een overzicht van die weg, een routekaart met: de doelgroep, de doelen (gemeten via KPI’s: Key Performance Indicators) en bijbehorend meetplan, een middelenstrategie en contentstructuur – allen leidend naar één concreet en direct bruikbaar concept. 

Klikbare wireframes, om precies te zijn. Goed voor echte gebruikerstests, om te zien of het werkelijk de digitale oplossing is die doet wat hij moet doen. Want dat is wat wij maken: digitale oplossingen die doen wat ze moeten doen (en er ondertussen nog goed uitzien ook, net als wij).

Dat was de digitale strategie fase. Door ons ook wel de discover & define fase genoemd. Resultaat: een concept idee dat werkt. 

Door naar de design en ontwikkel fase. Het echte werk, waar ideeën tot leven komen en we van concept naar “versie 1” van het werkelijke product gaan. Als volgt.

Eh… “Versie 1”?

Goed om even toe te lichten: onze term “versie 1”. Iets dat het best gaat door het hele bouwproces – van idee tot online oplossing – te vergelijken met het bouwen van een huis. 

Stap 1: De behoefte

Het begint allemaal met behoefte aan een woning. Een nieuwe woning, zoals die nog niet bestaat. Je begint dan niet door een stapel stenen op een zandvlakte te storten en te beginnen met metselen. –  Zo begin je dus ook niet met een ontwikkelen van een nieuw online product. 

Stap 2: Het plan

Je start met een bouwplan. Dat is je digitale strategie zoals hierboven uitgelegd. Het idee van de woning krijgt kop en staart. Deuren en ramen. Je onderzoekt en bepaalt waar het huis moet komen te staan, de tuin op het zuiden, de lichtinval, de bouwstijl, of je meteen kunt investeren in isolatie en welke oppervlaktes en afmetingen ideaal zijn. Hiervoor schakel je het juiste team van experts in. 

Het bouwplan ligt er. Daar waren we. 

Stap 3: De uitvoer 

De daadwerkelijke bouw en inrichting fase volgt nu. Strategisch design en denken gebeurde al bij het opstellen van de bouwtekeningen; de fundering van het huis. Technisch design en development – het maken van het skelet van de woning – en het visuele design – het aangezicht en inrichting– volgen tenslotte. 

Stap 4: Versie 1 

Wat je dan oplevert aan de toekomstige bewoners, is “versie 1”. Het huis dat klaar is om in gewoond en geleefd te worden. (Intern noemen collega’s het ook wel MVP, maar “versie 1” is net wat makkelijker om aan je collega’s uit te leggen.) 

Waarom “versie één”? Omdat, zodra er in een huis geleefd wordt, zal blijken dat het een en ander nog aangepast moet worden. Het heeft rolluiken nodig, want de zon staat vol op de voorkant en dat blijkt iets meer lichtinval dan gewenst. En na een tijdje wil je graag een gedeelte aanbouwen, voor gezinsuitbreiding. En die extra achterdeur, die gebruik je nooit dus daar maak je liever een groot raam van... 

Stap 5: Meer, beter, sneller! 

Dat gebeurt ook met een online product. Er worden features toegevoegd, weggelaten omgebouwd en bijgebouwd, naarmate de tijd toont wat het gebruiksgemak nog optimaler zou maken. Dat zijn dus de versies “2”, “3” tot en met… – Wie zal het zeggen?

Zolang het budget er is en de wens of het nut groot genoeg is, blijf je aan je huis klussen en verbouwen. Net als aan je online product. 

De design & develop fase – in 3 delen

Dat is dus waar we willen uitkomen: bij versie 1. Je huis. Op basis van je bouwplan. Maar wat nu, om daar te komen? Tijd voor de architecten (team design), bouwvakkers (team development), controleurs (team marketing) en opzichters (team klant) om aan het werk te gaan. 

Een proces dat grofweg is in te delen in 3 delen. Natuurlijk niet geheel losstaand, want in elke fase blijft een architect betrokken, wordt een bouwvakker voorbereid en blijven controleurs altijd vanaf de zijlijn meekijken. 

Maar om het overzicht te behouden, gaat het grofweg zo – van idee (digitale strategie) naar product (digitale oplossing) – in 3 bouwfases:

1. De Design fase

Toolkit upgraden 

Als designers – mijn team – beginnen we met de basis. We zetten eerst een stapje terug, voordat we stappen vooruit gaan zetten. Belangrijk om eerst te weten is namelijk hoe de status quo ervoor staat, qua corporate branding en algehele stijl. Denk aan: logo, web presence, huisstijl en bestaande content. Is het passend bij de opgestelde digitale strategie? Of moet daar eerst aan gesleuteld worden om alles naar één niveau te krijgen? 

We zorgen eerst dat deze basis goed staat en aansluit bij de rest dat gebouwd gaat worden. Dit is vooral de investering waard wanneer er meerdere producten of digitale oplossingen uit de Exitable koker zullen komen voor een klant. Nu, en mogelijk in de toekomst. Is de basis goed, dan levert het bij elk product een beter resultaat op en werken we bij elk project efficiënter. 

Mogelijk maken we daarom bijvoorbeeld als eerst een design system, wanneer we een website en complete marketingcampagnes gaan lanceren in de komende samenwerkingsjaren. Of we schaven het logo en de site bij om niet uit de toon te vallen qua kwaliteit bij een te lanceren campagne. 

Alles om de toolkit en materialen waarmee we zometeen het ‘huis’ gaan opbouwen compleet, kwalitatief en actueel te maken – gebeurt hier. 

Prototype ontwerpen

Dit is het technische gedeelte, voor designers. We pakken de digitale strategie erbij. Hieruit zijn een aantal klikbare wireframes gekomen en een lijst met features om die uit te breiden tot een volledig prototype. Dat is wat we nu gaan doen.

Alle gewenste en nodige features worden toegevoegd aan het concept-ontwerp. De maquette van het huis als het ware, met alles erin dat het in essentie nodig heeft: muren, deuren, ramen, plafonds, nisjes of uitsparingen. Hierbij kijken we vooral naar de bruikbaarheid van het product (“waar komt wat” en “wat is logisch”) voordat we visueel bezig zijn (“wat is mooi”). 

Alles om te komen tot een prototype dat in eerste instantie voldoet aan de strategie en gericht is op de vastgestelde KPI’s en doelgroep – gebeurt hier.  

Visueel ontwerp 

Op dit punt begint pas het ontwerpen zoals de meesten dat kennen: hier kijken we naar “wat is mooi”. De visuele laag wordt ontworpen, om als jasje over het skelet van het prototype te trekken. Alles wordt ingekleurd volgens de branding en huisstijl; de fundering die we eerder legden. Het geheel krijgt kleur, vorm, sfeer en karakter. Het komt tot leven. 

Wat je nu hebt: een volledig ontworpen en klikbaar prototype. 

Bijvoorbeeld al bruikbaar als app of site op je telefoon. Het is nog niet echt – het is nog maar de ‘voorbeeldwoning’ – maar voelt wel echt. De klant, en eventueel al testgebruikers, kunnen hier bepalen of dit prototype waardig is om echt gebouwd te worden. Kan het beter, gaan we terug naar de tekentafel. Is het akkoord, dan maken we de boel klaar voor team development. 

Hoeveel tijd dit kost: circa 2 sprints (een sprint duurt 2 weken). 

2. De Development fase

Het huis kan gebouwd worden! 

Team development is nu in de lead. De ‘bouwvakkers’ – of ‘bouwspecialisten’ om hun vakgebied niet minder te doen lijken dan het is – die zich bezighouden met het daadwerkelijke bouwproces: een digitaal product, opgebouwd uit code. Team design functioneert hier ter ondersteuning en team klant krijgt hier weer een grotere rol. Zij kijken mee met het hele proces, vanaf de zijlijn. Tussen elke 2-wekelijkse sprint door wordt de voortgang van de bouw getoond en kunnen zij testen en zo nodig bijsturen. Zoals een goed opzichter dat doet. 

Zo ziet team klant het product steeds meer tot leven komen en hebben we geen gevalletje “we gooien de boel over de schutting bij development en kijken over een paar maanden wat eruit komt”. Zo werkt het niet. 

Zo wel:

Backend bouwt het skelet

Je ziet backend en frontend development hier losstaan, maar net zoals de bouwfases niet helemaal losstaan van elkaar, vloeien ook deze werkzaamheden in elkaar over. Backend en frontend developers werken naadloos samen en kunnen onmogelijk zonder elkaar. Dit bouwwerk rijst dus met skelet en inrichting en al gelijktijdig uit de grond. 

Team backend development doet hier wat backenders doen: de keiharde code schrijven voor versie 1 van het online product.

Frontend installeert de inrichting

Team front end development doet op zijn beurt wat frontenders doen: zorgen dat de code matcht met het ontwerp. De brug tussen development en design maken. Ofwel: zorgen dat de inrichting op de juiste plek komt te staan, met de juiste kleuren op de muren, de keuken geïnstalleerd en aangesloten en de deuren perfect passend in de openingen. Zo zit alles op z’n plek, werkt materiaal en apparatuur feilloos en kan er… – ja, ja – gewoond worden!

Wat je nu hebt: een volledig ingericht en bruikbaar online product. 

Geen prototype, maar het echte werk. “Versie 1” is hier en bijna klaar om live te gaan.

Hoeveel tijd dit kost: circa 6 sprints (3 maanden)

3. Marketing implementeren

We wilden iets maken dat goed werkt op de eerste plaats, en er mooi uit ziet op de tweede plaats. Beide is gelukt. Dat het mooi is kunnen we zien. Maar of het werkt? Dat zien we alleen wanneer we onze eerder opgestelde doelen – uit de digitale strategie – kunnen meten. 

Daarvoor hebben we het meetplan toen opgesteld, inclusief KPI’s. Die indicatoren stellen we nu technisch in in het product. Team marketing in de lead, met hulp van team development (daar zijn collega’s voor). Alles om straks te kunnen meten om te weten – “doet het product wat het moet doen?” – gebeurt hier. 

En niet alleen team marketing weet straks of het product doet wat het moet doen, omdat zij de cijfers kunnen inzien en analyseren. Team klant weet het net zo goed, doordat we direct een dashboard inrichten waarin heel makkelijk zichtbaar is welke resultaten het nieuwe online product oplevert. Een beetje zoals de nieuwe slimme thermostaat in je huis. Meten is weten.

Wat je nu hebt: een volledig ingericht en bruikbaar online product, dat bij gebruik aantoont of (en hoe goed) het werkt.

Hoeveel tijd dit kost: verwaarloosbaar op het geheel. 

En dan: live gaan!

We zijn nu 1 digitale strategie en (2 + 6 =) 8 sprints verder. Het huis staat. Klaar om te worden bewoond. Laat die gebruikers van je site, app of campagne nu dus maar komen. 

Alles om in te zien of het product net zo effectief en slim is als we beloofd hebben – komt er nu aan. 

Data, bedoel ik dan. Onze Skittles om hard op te gaan. Waardevolle cijfers die aantonen hoe we verder zouden kunnen of moeten. Moet er bijgeklust worden? Is die uitbouw nodig, of pas over een jaar relevant? Welke ruimtes worden veel gebruikt en verdienen dus een opknapbeurt? Welke features amper, en kunnen dus weggelaten worden? Weet men de weg te vinden, richting jouw product of dienst? Klikken ze op de knoppen zoals jij voor ogen had? 

Op al je vragen komen nu de antwoorden binnen druppelen, door data. Zo weten we precies wat er bij te klussen valt. De volgende fase..!

Dat is het ideale digitale bouwproces, Exitable style:

  1. Nadenken – in de discover & define fase (bouwplan door digitale strategie)
  2. Maken – in de design & development fase (huis bouwen, ingericht opleveren)
  3. Beter maken – in de data & doorontwikkeling fase (wonen, klussen!)

Zelf aan de slag met het Value Proposition Canvas

Vul hem in met je zelf samengestelde 3-koppige UX team. Alles wat je verder nog nodig hebt is een geboekte ruimte, een uur van ieders tijd, en een stapel sticky notes. De gebruiksaanwijzing zit in de download.

Download het pakket