Productontwerp en conceptontwerp voor mobiele app

Van idee tot interactief prototype

Veiligheid

Mobiele App

Opstarten

Close-up van een gebroken arm van een gebruiker van de incident rapportage app.
KLANTGreenlight
LOCATIELonden
TEAMResearcher, UX designer, systems architect, UI designer, project manager
PROJECTWEBSITE

Sam had onlangs haar doctoraatsthesis over veiligheidsprocedures en het melden van incidenten op de werkplek afgerond. De inzichten die ze verzamelde brachten haar op een idee voor een start-up die het melden van incidenten eenvoudig maakt. Ze wilde een prototype maken dat haar ideeën vertaalt naar een echte mobiele app.

Onze expertise in het werken met inzichten uit academisch onderzoek sprak haar aan. We waren verheugd om te werken met een slimme jonge oprichter die haar huiswerk had gedaan. Het duurde niet lang voordat we het startschot gaven voor het prototype-ontwerpproject om haar start-up van de grond te krijgen.


ONZE BIJDRAGEN

Productstrategie

Informatie-architectuur

UX-ontwerp

Wireframen

Interactieve prototypering

UI-ontwerp

Branding

Gebruikers testen





App ontwerp bovenop een afbeelding van een logistiek centrum.

Een doctoraalscriptie omzetten in UX-denken

Sam deelde haar doctoraatsthesis met ons, plus een reeks onderzoeksartikelen, een presentatie en een boekhoofdstuk. We vatten de inzichten die relevant waren voor het ontwerp van het prototype samen en ordenden ze. We creëerden een ideeënbank, plus een checklist van wat het prototype tot een echt goede tool zou maken voor het melden van incidenten op de werkplek.

Academische artikelen gebruikt in het ontwerp van app prototype.

EEN LOGISCHE INFORMATIEARCHITECTUUR

In week 1 hebben we ons gericht op het creëren van een informatie-architectuur waarbij de gebruikerstrajecten zo eenvoudig mogelijk zijn. We moesten echter rekening houden met een grote flexibiliteit omdat de incident formulieren verschillen afhankelijk van het type incident. We onderzochten drie architectuur concepten. Het was heel fijn om met Sam in gesprek te gaan, de voors en tegens uit te leggen en haar perspectief te integreren.






Diagram met de reis in het app prototype met commentaar aan de linkerkant.

Ondersteunend zijn met productstrategie

Dit is Sam's eerste start-up en haar eerste ervaring met het creëren van een digitaal product. Terwijl de ontwerpers werkten aan het prototype ontwerp hebben we een paar aparte sessies georganiseerd om de algemene productstrategie vorm te geven. We deelden voorbeelden uit het verleden met haar en hielpen haar te begrijpen welke opties ze heeft voor ontwikkeling, financiering, partnerships met vroege gebruikers en hoe de release van het product te faseren.

Quotes

Allereerst wil ik zeggen dat dit voor het eerst werkelijkheid te zien worden voor mij het coolste ooit was. Heel erg bedankt voor je werk en alles wat je hebt gedaan om het vorm te geven.

Beeld van de klant van het ontwerpbureau.
Samantha GruskinOprichter @GREENLIGHT
Interieur kantoor tijdens een product strategie vergadering.

De app begint vorm te krijgen

Weken twee en drie waren intens. We hebben 3 iteraties van wireframes gedaan, waarbij we elke keer details aan het ontwerp toevoegden. Eerst zochten we uit hoe we een ontwerp konden maken voor het formulier dat zich kon aanpassen aan zowel korte als complexe rapporten. Vervolgens ontwierpen we een medium fidelity wireframe van het hele proces en in de laatste stap legden we de fijne details vast. Bij elke stap betrokken we Sam, legden we de ontwerpgedachte uit en kregen we haar input. Het commentaar van Sam was elke keer raak en ze had van het begin tot het eind een visie van wat de app moest zijn.






App wireframe ontwerpen in een diagram dat de gebruikersstroom toont.

Een overtuigende beleggersdemo

In week vier hebben we gebruikerstesten gedaan. We leerden een paar waardevolle lessen en moesten de gebruikerstraject aanpassen, plus andere aanpassingen in het rapportformulier. Toen de wireframes af waren, hebben we het definitieve prototype in elkaar gezet.

In week vijf werkten we aan UI interpretaties, om te laten zien hoe de app eruit zou kunnen zien met een visueel ontwerp. We gebruikten het samengestelde visuele UI-ontwerp en creëerden een demo voor investeerders.




Vier screenshots van het visuele app-ontwerp van de investeerdersdemo.

Ontwerpelementen

RESULTATEN

Interactief prototype gebouwd in vier weken

Volledig gedocumenteerd voor ontwikkeling

Beleggersdemo gemaakt binnen een week

Twee UI roll-outs voor merkideeën