Project: app finder
Dit project is tot stand gekomen tijdens het volgen van een cursus over figma en UX/UI design.
Opdracht
Tijdens deze cursus leer je de principes van UX en UI design door het ontwikkelen van een app die items kan vinden met een bluetooth-keychain.
Mijn aanpak
Ik heb de cursus stap voor stap gevolgd. Een belangrijk onderdeel was het uitschetsen van de user journey en het creëren van een persona.
De user journey is een uitgeschreven stappenplan dat beschrijft hoe een gebruiker door de app navigeert. Daarnaast worden de emoties, behoeften, doelen, enzovoort van de gebruiker in kaart gebracht. Deze informatie is bepalend voor het design en de navigatie van de app.
Persona
Als eerste heb ik een persona gemaakt. Een persona is een algemeen beeld van de gebruiker, inclusief naam, functie, woonplaats, maar ook doelen, behoeften en frustraties. Dit voorbeeld is gebaseerd op de cursus.
Het design
Ik heb zelf een eenvoudige huisstijl ontwikkeld voor de app, waarbij ik rekening heb gehouden met de persona en de functie van de app.
De app helpt gebruikers verloren items te detecteren. Vaak zal de gebruiker gestrest zijn tijdens het gebruik. Deze inzichten heb ik meegenomen in het ontwerp:
-
Logo: Gebaseerd op een sonar, wat past bij het idee van zoeken en vinden.
-
Kleuren: Ik heb gekozen voor paarstinten om een kalme en gebruiksvriendelijke uitstraling te creëren.
Gebruiksvriendelijkheid: Een simpele user interface voorkomt extra stress bij het zoeken naar bijvoorbeeld een portemonnee.
Scenario 2: Nieuwe key toevoegen
Dit scenario gaat dieper in op een functie van de app.
-
De gebruiker logt in en komt op het ‘homescreen’.
-
Er zijn meerdere opties zichtbaar, waaronder ‘key toevoegen’ en een navigatiebalk onderin.
-
De gebruiker personaliseert de key met een eigen naam en icoon.
-
Na het klikken op ‘Confirm’ krijgt de gebruiker een overzicht van alle keys.
.png)
User journey
De user journey heb ik opgebouwd uit drie verschillende scenario’s:
-
Een nieuw account aanmaken.
-
Een nieuwe bluetooth-key toevoegen.
-
Een item detecteren.
Hiernaast zie je het schema dat de gebruiker volgt. Elk blokje staat voor een scherm dat ontworpen moet worden. Door het schema wordt duidelijk welke ontwerpen nodig zijn en hoe ze met elkaar in relatie staan.
-
Paarse vijfhoeken: Geven keuzes weer die de gebruiker kan maken en die invloed hebben op de navigatie van de app.
-
Blauwe vierkanten: Staan voor acties vanuit de app zelf, zonder invloed op de navigatie.
Scenario 1: Account aanmaken
Wanneer de gebruiker de app voor het eerst opent, is hij of zij nieuwsgierig en enthousiast. De gebruiker maakt een nieuw account aan door op de ‘Sign up-link’ te klikken.
-
De knop ‘Create account’ is in eerste instantie transparant.
-
Zodra alle velden correct zijn ingevuld, wordt de knop volledig zichtbaar en klikbaar.
-
Na het klikken op de knop opent de pagina voor e-mailverificatie.
Scenario 3: Item terugvinden
De gebruiker zoekt haar portemonnee en kan deze nergens vinden. In hoge stress en frustratie opent ze de app.
-
Door de gebruiksvriendelijke en eenvoudig navigeerbare interface hoeft de gebruiker alleen in te loggen en op de gewenste key te klikken om het item terug te vinden.