Tien jaar geleden was de ontwikkeling van maatwerk apps vaak een tijdrovend en kostbaar proces dat vaak maanden, zo niet jaren in beslag kon nemen. De technologie en ontwikkelmethoden van die tijd verschillen echter aanzienlijk van wat we vandaag de dag gewend zijn. Het bouwen met standaard componenten, libraries en frameworks heeft de ontwikkeling van apps versnelt terwijl gelijktijdig de kwaliteit omhoog is gegaan. Met de komst van betere design-tools zoals Figma en No-code tools zoals Flutterflow is de ontwikkeltijd inmiddels nog verder afgenomen. In dit project laat ik stap voor stap zien hoe wij in 3 dagen vanaf nul een nieuwe app hebben gebouwd en gelanceerd met behulp van de nieuwste tools.
1. Briefing
Ieder project start natuurlijk met een doel. Door hier in stap een goed over na te denken ontstaat gelijk al een beter beeld van de oplossing. Ook kijken wij bij de briefing gelijk naar het verdienmodel van de app zodat dit een integraal onderdeel is van het ontwerp. De briefing geeft ook een aantal brand values die als input dienen voor de branding van de app.
2. User story mapping
User Story Mapping is een krachtige techniek in app design die helpt bij het visualiseren en begrijpen van de gebruikersreis door een applicatie. Hierbij worden functies vanuit het perspectief van de gebruiker beschreven in chronologische volgorde met als resultaat een diagram. Deze methode helpt om snel in kaart te brengen welke functies van waarde zijn en wat er minimaal in de app moet zitten wil deze waarde toevoegen (MVP). Wij maken daarom als eerste een user story map in Figma om tekstueel te beschrijven wat de app moet gaan doen.
3. Branding
Wij bouwen zoveel mogelijk met standaard componenten maar proberen toch een look-en-feel te realiseren die uniek is en past bij het merk. In deze stap kijken we daarom goed naar het type merk en of er bijvoorbeeld al een huisstijl en logo aanwezig zijn. Op basis hiervan kiezen we primaire en secundaire kleuren, lettertypen en andere stylingkenmerken. Dit is echter vooral een eerste verkenning want tijdens het ontwerpen van de schermen worden hier vaak nog veel meer keuzes gemaakt.
4. Interface design
Op basis van de user stories en het brand design, ontwerpen we individuele interface schermen voor zowel mobiel, tablet als desktop in Figma. Optioneel kan hier ook een interactief prototype van worden gemaakt, maar omdat de WBSO-calculator app een vrij eenvoudige app is, hebben we deze stap in dit project overgeslagen.
5. Flutterflow en Firebase
Nadat het app design in Figma compleet is, starten we met no-code tool Flutterflow. Hierin worden de schermen deel nagebouwd en styling toegepast. Vervolgens is voor dit project custom code geschreven met behulp van de code-pilot in Flutterflow. Daarnaast hebben wij Firebase gebruikt als database voor het opslaan van de parameters in ons rekenmodel. Vanuit Flutterflow is het mogelijk om direct de nieuwe app te testen op zowel desktop als mobiel.
6. Ready, set, launch!
Drie dagen later, toen de app eenmaal gereed was in Flutterflow hebben wij deze als web app gepubliceerd waarbij deze gelijk door Flutterflow werd gehost. Na een aantal interaties en nuttige feedback van testers is de app inmiddels klaar voor gebruik.
De WBSO-calculator is natuurlijk geen omvangrijke app, hoewel de logica en berekeningen toch een stuk complexer zijn dan je op het eerste gezicht zou denken. Toch zie je hier dat het tegenwoordig prima mogelijk is om zeer snel een app te ontwerpen, te bouwen en te lanceren. Apps die no-code worden ontwikkeld zijn soms wel wat zwaarder om te draaien maar dit is voor moderne devices eigenlijk geen probleem meer. Daarbij komt dat niet iedereen telkens het wiel opnieuw aan het uitvinden is en de componenten talloze malen zijn beproefd. Dit maakt het mogelijk om ook in korte tijd een hoogwaardige app te bouwen.
Wil je meer weten over het ontwikkelen van een maatwerk app voor jou bedrijf? Neem dan even contact met ons op. Wij zijn bereikbaar op info@outlinesolutions.nl en telefonisch op +31 (0) 642018123. Wij denken graag met je mee en geven je een passend advies voor jou situatie.