Doppio Espresso UX Redesign Case

Probleem

Ik onderzocht de mobiele website van Doppio Espresso, een Nederlandse koffieketen. Uit usabilitytests bleek dat gebruikers moeite hadden met het vinden van vestigingen, het menu, de webshop en allergeneninformatie. De informatie stond er wel, maar de structuur en navigatie maakten belangrijke taken frustrerend en tijdrovend.

Bewijsfoto van de mobiele website van Doppio Espresso
Logo van Doppio Espresso
Jobs to Be Done overzicht van de Doppio case

Gebruikers hadden moeite met:

  • het vinden van een vestiging
  • het bekijken van het menu
  • het bestellen van koffiebonen
  • het vinden en bekijken van allergeneninformatie

Mijn rol

Dit was een individueel project waarbij ik verantwoordelijk was voor het volledige proces. Ik voerde zelf de usabilitytests uit en ontdekte patronen in de resultaten, die ik combineerde met die van een medestudent, waardoor de conclusies betrouwbaarder werden.

Aanpak

Ik voerde usabilitytests uit met realistische taken en nam scherm- en audio-opnames op. Ik analyseerde zowel objectieve data (taaksucces, fouten, tijd) als subjectieve feedback (uitspraken, frustraties, korte enquête).

Vervolgens heb ik deze inzichten vertaald naar grafieken.

  • Grafiek met taaksucces per taak uit de Doppio usabilitytest
  • Grafiek met aantal kliks per taak uit de Doppio usabilitytest
  • Grafiek met gemiddelde tijd per taak uit de Doppio usabilitytest
  • Grafiek met de ernst van geconstateerde problemen
  • Overzichtstabel met resultaten van de Doppio usabilitytest

Swipe horizontaal op mobiel om alle grafieken te bekijken.

Door deze data te analyseren ontdekte ik patronen in waar gebruikers vastliepen, prioriteerde de problemen op ernst (laag, middelmatig, hoog) en ontwikkelde redesigns voor de belangrijkste knelpunten.

Belangrijkste verbeteringen

Mijn redesigns richten zich op momenten waarop gebruikers belangrijke informatie nodig hebben of een beslissing moeten nemen.

1. Verzendkosten en levertijd zichtbaar maken hoog

Voor
Oude situatie waarin verzendkosten en levertijd lastig te vinden zijn

Tijdens de usabilitytests bleek dat slechts 1 van de 9 deelnemers deze informatie kon vinden. De informatie stond verborgen in de footer tussen lange tekst.

Na
Nieuwe situatie waarin verzendkosten en levertijd direct zichtbaar zijn

Ik heb de verzendkosten en levertijd direct onder het product geplaatst. Hierdoor hoeven gebruikers niet meer te zoeken en kunnen ze sneller een aankoopbeslissing nemen.

2. Webshop beter vindbaar maken hoog

Voor
Oude webshop ingang met lage vindbaarheid

Testpersonen hadden moeite om de webshop te vinden, omdat deze niet duidelijk zichtbaar was in het menu.

Na
Nieuwe duidelijke webshopknop in menu

Ik heb een duidelijke knop toegevoegd: “Onze webshop – bestel voor thuis”, op meerdere plekken (menu, accordion en footer). Hierdoor wordt het sneller duidelijk dat producten ook online besteld kunnen worden.

3. Duidelijkere feedback bij bestellen hoog

Voor
Oude popup die onduidelijk bevestigt dat een product is toegevoegd

Gebruikers merkten vaak niet dat een product aan de winkelwagen was toegevoegd, omdat de feedbackmelding te klein en onopvallend was.

Na
Nieuwe duidelijke bestelbevestiging

Ik heb een grotere en duidelijkere melding ontworpen met contrasterende kleuren en duidelijke knoppen. Hierdoor krijgen gebruikers direct feedback op hun actie. Dit sluit aan bij de heuristiek “zichtbaarheid van de systeemstatus”.

4. Allergenenlijst duidelijker maken hoog

Voor
Oude allergenenlijst met lage overzichtelijkheid

De oorspronkelijke allergenenlijst was een onoverzichtelijke PDF en lastig te lezen op mobiel.

Na
Nieuwe allergenenpagina met filters en visuele ondersteuning

Ik heb een nieuwe pagina ontworpen met zoek- en filteropties en duidelijke visuele iconen. Hierdoor kunnen gebruikers sneller zien welke gerechten voor hen geschikt zijn.

5. Mobielvriendelijke menukaart middelmatig

Voor
Oude menukaart die lastig leesbaar is op mobiel

De menukaart werd weergegeven als een PDF, wat op mobiel moeilijk te lezen en te navigeren was.

Na
Nieuwe interactieve menupagina voor mobiel

Ik heb een interactieve menupagina ontworpen met zoek- en filteropties. Hierdoor wordt het menu beter leesbaar en kunnen gebruikers sneller vinden wat ze zoeken.

Resultaat & reflectie

Deze verbeteringen verminderen frustratie, maken informatie sneller vindbaar en verhogen het vertrouwen in het bestelproces. Voor mij was dit een waardevol project: ik heb usabilitytests uitgevoerd, data geanalyseerd, problemen geprioriteerd en inzichten vertaald naar concrete, bruikbare ontwerpverbeteringen.