Een miljoen dollar app ervaring
Context
Het project richtte zich op het uitvoeren van algehele UX/UI-verbeteringen voor de belangrijkste schermen van de app, inclusief de integratie van een nieuwe visuele stijl en het optimaliseren van de gebruikerservaring door middel van native app-patronen en elementen.
De app bedient klanten van InsingerGilissen, een groep die bestaat uit vermogende particulieren en zakelijke klanten die waarde hechten aan een betrouwbare, veilige en gebruiksvriendelijke digitale bankervaring.
Probleem
Enkele jaren geleden, toen ik voor het eerst betrokken raakte bij de ontwikkeling van de InsingerGilissen app, was de app volledig gebaseerd op webviews, wat leidde tot een inconsistente gebruikerservaring en beperkte gebruiksvriendelijkheid. De uitdaging was om de app om te zetten naar een volledig native ervaring, waarbij het gebruiksgemak en de consistentie centraal stonden.
Projectdoelen:
- De app transformeren van een webview-gebaseerde ervaring naar een volledig native app om de algehele gebruiksvriendelijkheid te verbeteren.
- Implementeren van een nieuw design system om consistentie en schaalbaarheid te waarborgen.
- Visuele en functionele verbeteringen doorvoeren op basis van de nieuwe visuele identiteit van Quintet.
- Zorgen dat de app voldoet aan de verwachtingen van een veeleisende en diverse gebruikersgroep.
Onderzoek
Het project begon met een grondige analyse van de huidige app en het identificeren van de belangrijkste pijnpunten. Samen met mijn team voerde ik gebruikersonderzoeken uit om inzicht te krijgen in de behoeften en frustraties van de gebruikers. Daarnaast voerden we een competitieve analyse uit om best practices en trends in de financiële sector te identificeren.
Belangrijkste Bevindingen
- Gebruikers vonden de huidige interactiepatronen verouderd en niet intuïtief. Met name het gebruik van webview-elementen zorgde voor inconsistenties en frustraties.
- Gebruikers hadden moeite met het beheren van meerdere rekeningen en vonden dat belangrijke informatie niet prominent genoeg werd weergegeven.
- De bestaande visuele stijl was niet in lijn met de nieuwe branding van Quintet, wat zorgde voor een mismatch tussen de merkbeleving en de digitale ervaring.
- Gebruikers klaagden over de beperkte responsiviteit van bepaalde elementen en de moeilijkheid om belangrijke gegevens snel te vinden.
Dynamisch splash scherm
Ik introduceerde een dynamische video-achtergrond op het splash-scherm om een visueel aantrekkelijke en merk-conforme eerste indruk te creëren. Daarbij veranderde ik het beginscherm zodat gebruikers de keuze hebben tussen FaceID en een pincode, wat zorgde voor meer flexibiliteit en gebruiksgemak. Hierbij introduceerde ik flexibele sheets voor afwijkende flows, zoals het vergeten van een pincode of het selecteren van een ander account.
Vernieuwd dashboard
Voor de problemen op het dashboard, had ik een oplossing bedacht voor de weergave van 3+ rekeningen met een "meer" button, waardoor alle rekeningen zichtbaar zijn zonder het scherm te overbelasten.
Daarnaast creerde ik ook een plek op het dashboard om belangrijke nieuwe documenten en ongelezen berichten van de banker weertegeven, wat zorgt voor betere zichtbaarheid van cruciale informatie.
Filters direct zichtbaar
Op het nieuws en documenten scherm heb ik filteropties direct zichtbaar gemaakt op het scherm in plaats van achter een knop, wat de toegankelijkheid en bruikbaarheid verhoogde.
Beter inzicht in betaalrekening
Het tussenscherm voor het selecteren van een rekening verwijderd, zodat gebruikers direct op de rekeningpagina terechtkomen, met de mogelijkheid om eenvoudig te wisselen tussen rekeningen via een carousel.Ruimte bespaard in de header door de transactiebottons te verplaatsen naar een Floating Action Button (FAB), wat zorgt voor een schoner en overzichtelijker ontwerp.
Portefeuille verbeteringen
Statische gegevens achter een knop geplaatst om meer ruimte te geven voor dynamische gegevens, zoals portefeuille-resultaten.
Nieuwe functionaliteit toegevoegd om naast het downloaden van standaardrapporten ook opties aan te bieden voor het kiezen van datum en bestandsformaat, op basis van gebruikersfeedback.
De transactiegeschiedenis verbeterd door de accordeons te vervangen door bottom sheets, waardoor details overzichtelijker en toegankelijker zijn.
Het Investment Resultaten Scherm opgedeeld in segmenten door gebruik te maken van pillen bovenaan het scherm, wat het scrollen vermindert en de gebruiksvriendelijkheid verhoogt. Dit concept is ook toegepast op andere lange pagina's, zoals het analyse- en suitability statement-scherm.
Resultaten
De overgang naar native componenten en de implementatie van flexibele sheets zorgden voor een intuïtiever gebruik, wat resulteerde in hogere tevredenheidsscores van gebruikers.
Het opzetten van een design system zorgde voor consistentie in de hele app en stelde ons in staat om updates en uitbreidingen gemakkelijker door te voeren op schermen die we eigenlijk niet zouden aanraken.
Reflectie
In toekomstige projecten zou ik nog meer focus willen leggen op continue gebruikersfeedback na de implementatie, om snel te kunnen inspelen op nieuwe uitdagingen en mogelijkheden.
Verdere optimalisaties en uitbreidingen van de app, inclusief meer gepersonaliseerde functionaliteiten en proactieve informatievoorziening, zijn gepland om de gebruikerservaring nog verder te verbeteren.