Lumosa installer app

Figma

Design

Design System

Opdracht omschrijving

Lumosa installer app

Lumosa is bezig zichzelf te positioneren binnen de EV laadstation markt. Hiervoor ontwikkelen ze zowel de hardware als de software.

Om te groei schaalbaar te kunnen maken maken ze een app voor de installateurs van deze laadpalen. Hierin moeten een aantal instellingen te doen zijn en gegevens worden ingevoerd.

Daarnaast moet het een handige tool worden om storingen op te lossen op afstand en onderhoud te documenteren.

Daarnaast moet het een handige tool worden om storingen op te lossen op afstand en onderhoud te documenteren. Lumosa wordt geregeld gebeld om op afstand een laadpaal te ontgrendelen. Deze functionaliteit is op afstand te implementeren, wanneer er losse accounts zijn voor installateurs en klanten.

Om dit project tot een succes te brengen heb ik een aantal maanden nauw samengewerkt met de techneuten en het salesteam, zodat meerdere belangen uitgewerkt worden als UX flows. Zo kan sales het product gebruiken om te groeien en is het technisch gevalideerd door de developers.

UX flow onderzoek

Om de grootte van het project te bepalen zijn we begonnen met het uitschrijven van de functionaliteiten die in verschillende versies moeten zitten. Zo begonnen we met alle functionaliteiten die we konden bedenken en hebben we daar een POC en MVP uit gedestilleerd.

Met deze omschrijving als basis heb ik een functioneel ontwerp gemaakt. Dit zijn meerdere schermen met bepaalde doelen en bijbehorende functionaliteit. Dit maakte het mogelijk een inhoudelijkes discussie te hebben, zonder afgeleid te raken over het design.

Na het functionele ontwerp ben ik begonnen met een paper prototype. Op deze manier kunnen we de app testen, zonder deze helemaal te bouwen met code.

Hiervoor heb ik een low-fidelity prototype gemaakt met behulp van Figma. Ook hier speelt design nog geen grote rol, maar is het wel interessant om te kijken naar waar bijvoorbeeld knoppen ongeveer komen te staan.

Google's M3 als basis

Design system opzet

Om een snelle start te hebben en tevens consistentie over interfaces te creëren is er gekozen om Google's M3 als basis te pakken. De app gaat voornamelijk gedraaid worden op een rubberized tablet die Android gebruikt, daarbij zou deze stijl dan ook goed aansluiten.

Het M3 systeem is goed uit te breiden en te configureren. Zo heb ik de huisstijlkleuren van Lumosa erin verwerkt en het designsysteem getweaked waar nodig.

Dit design systeem is te hergebruiken en te koppelen aan meerdere Figma bestanden. Op deze manier blijven verschillende designs in-sync met de laatste updates vanuit het design systeem.

Van wireframes naar design

UI en prototyping

Na het goedzetten van de basis ben ik begonnen aan het design van de app. Hierbij zijn op maat ontworpen elementen en iconen toegevoegd.

De meeste tijd ging echter zitten in het uitdenken en vormgeven van de verschillende overlays. De installateur moet namelijk gemakkelijk en snel meerdere acties kunnen uitvoeren. Deze moeten allemaal binnen een paar klikken te bereiken zijn.

Al deze schermen zijn vervolgens middels prototyping klikbaar gemaakt. Dit is een goede manier om te testen of de app werkt zoals bedoeld en maakt het voor de developers makkelijker om te bouwen.

Hieronder een video van het Figma prototype, waarin een groot deel van de app te zien is.

Benieuwd of ik ook zoiets voor jou kan maken?

Van dit soort projecten gaat mijn hart sneller kloppen en hopelijk zie ik Lumosa weer terug voor een vervolg op deze opdracht.

Heb jij een goed idee waar jij een goede gebruikerservaring voor wilt hebben? Of heeft jouw app dringend een redesign nodig? Laten we dan eens praten!