Design Debt Project
Ik begon bij Watermelon als stagair. Voor mijn meeloop stage kreeg ik de taak om de design debt van de Watermelon software te inventariseren en op te lossen. Design debt is het geheel van inconsistenties en fouten in de gebruikerservaring die ontstaan na verloop van tijd. Dit komt doordat een digitaal product groeit, verandert of snel wordt aangepast zonder dat de designs goed worden bijgewerkt. Dit was ook het geval bij de software van Watermelon. Watermelon stelt klanten in staat om AI Agents te bouwen, te testen en te integreren. Klanten gaven regelmatig feedback over de inconsistenties die zij daarbij tegenkwamen.
In eerste instantie was mijn taak alleen om al de design debt te documenteren en te organiseren voor een andere designer. Die zou dan vervolgens de redesigns zou doen. Uiteindelijk heeft Watermelon mij uitgedaagd om dit zelf te doen. Ik ben deze vervolgstap gestart met een onderzoek naar de oorsprong van de design debt bij Watermelon; het bleek namelijk dat Watermelon geen functioneel design system had.
In Figma heb ik een volledig functioneel design system gemaakt met componenten die gebouwd zijn met categoriseerde variabelen zoals: kleuren, typografie, radius, strokes en een pixel schaal. Ik heb nieuwe componenten toegevoegd en ik heb bestaande componenten veranderd. Ook heb ik ze voorzien van de variabelen die ik in het functioneel design system had ontworpen. Op deze manier zijn alle details consistent gemaakt en kunnen ze gemakkelijk en snel verandert worden. Daarnaast maakte ik gebruik van properties en heb ik de componenten geprototyped door middel van onder andere 'Smart animate'.
Nadat ik het functioneel design system had gecreëerd, begon ik met het redesignen van Watermelon software. Ik gebruikte de componenten uit het functioneel design system en zorgde voor responsive interfaces door middel van auto layout. Ik ontwierp schermen op basis van consistentie, gebruikersvriendelijkheid en feedback van Alexander Wijninga (CEO). Het design system zorgde voor een consistente lijn tijdens het maken van de redesigns, zoals de voorbeelden hieronder.
Oude contacts functie
Nieuwe contacts functie
Oude statistieken functie
Nieuwe statistieken functie
Oude conversations functie
Nieuwe conversations functie
Om het project succesvol af te ronden maakte ik taken voor developers aan in Asana (task management software). De taken heb ik zo gecategoriseerd en gestructureerd dat ze eenvoudig door de developpers konden worden opgepakt. In de taken beschreef ik wat er veranderd moest worden en waarom. Ik heb de feedback van de developers gebruikt om de taken inhoudelijk te verbeteren. De met de developers afgestemde structuur en inhoudelijke beschrijving, hebben ervoor gezorgd dat mijn Design Debt Project makkelijk en snel te realiseren was.
Product design
Na mijn stage ben ik als Product & Marketing Designer gaan werken bij Watermelon. In deze rol heb ik designs gemaakt voor nieuwe functionaliteiten. Daarbij heb ik, om de consistentie en gebruikersvriendelijkheid te waarborgen, gebruik gemaakt van het functioneel design system dat ik tijdens mijn stage heb ontwikkeld.
Een aantal van deze nieuwe functionaliteiten heb ik in online meetings met Watermelon klanten getest. Daarbij hebben we gebruik gemaakt van walk-throughs en interactieve prototypes. Dat laatste gebeurde vooral bij grotere functionaliteiten, bijvoorbeeld voor de e-mail integratie.
Een deel van de email integratie
Ik heb aan een aantal grote nieuwe functies gewerkt. Dit waren onder andere: een nieuw menu, een end-user feedback functie, een billing & abonnement selectie pagina en een iOS app. Voor elke functie heb ik verschillende 'states' gemaakt en zorgde ik dat de 'userflow' tussen de schermen duidelijk was. Ook presenteerde ik mijn designs bij design-developer handoff meetings voor een soepele overdacht aan de developers.
Nieuw plan selectie pagina
End-user feedback functie
Billing functie
Voor de iOS app heb ik me gehouden aan de Apple HIG (Human Interface Guidelines). Ook heb ik een nieuw design system gemaakt, speciaal voor iOS. De pixel schaal en andere variabelen uit het web-app design system kon ik namelijk niet gebruiken voor de mobile app.
