Design System

Leaseplan Digital

Product Designer

Bij Leaseplan ben vooral met de ideation en empathise fase bezig geweest.

Een ambitie van Leaseplan is om software te ontwikkelen met grotere impact voor klant en bedrijf. Dat klinkt als een open deur zou je zeggen. Praktijk wijst anders uit. In de klassieke manier van software ontwikkelen gebeurt geregeld het volgende; Ideeën en features komen vanuit management. Op zich niets mis mee. Er vindt overleg plaats om alles helder te krijgen. Wij designers ontwerpen de gebruikerservaring. Ontwikkelaars implementeren dit alles, zodat testers het door de teststraat kan loodsen. Yes het kan live!

We zijn nu 6 á 8 sprints verder. Na genoeg data te hebben verzameld, duiken we in de cijfers. Onze nieuwe creatie presteert minder dan verwacht. Wat?!

De nieuwe oplossing blijkt niet op de werkwijze van gebruikers aan te sluiten. Resultaat; weinig impact en een flinke investering aan resources en tijd

Wanneer we voor een andere aanpak gaan, gaan we eerst onze ideeën (features) toetsen. We halen bestaande data en testen uit het verleden erbij halen. Tijdens verschillende sessies komen we tot een Value Proposition. Zie het als een soort van SWAT-analyse. Wij komen tot een lijst van ideeën waarvan wij vermoeden dat deze zwaktes aanpakken en het product verbeteren. 100% zekerheid kunnen we niet geven. Business objectives en User needs staan in Value Proposition Design centraal. Onze vermoedens en aannames zijn het startpunt die we gaan toetsen.

Value Proposition Design Value Proposition & testcards

Wij hebben de lijst met vermoedens naast bestaande research gelegd. Er vielen hypotheses vielen omdat we ze bij voorbaat konden ontkrachten. Dit is dan ook een iteratief proces. Naast dat de kwaliteit van de hypothese belangrijk is, is ook de manier waarop we gaan valideren belangrijk. Hier heb geregeld op gehamerd. Hoe ga je iets objectief meten als er nog niets is? Op deze vraag heb ik lang gekauwd. A/B-testing leek mij de beste oplossing met echte eindgebruikers. Gebruikers die het product gebruikt en de dienst daarom begrijpt. We willen hier een concept testen die een GUI heeft. Dat niet te vergissen is met een GUI testen (deelverzameling).

Samen met een CRO-specialist heb ik idee uitgewerkt om met prototypes te kunnen A/B-testen. Een versie met onze hypotheses, en andere versie om onze hypotheses ontkrachten. Probeer te bewijzen dat je ongelijk hebt. Lukt dat niet? Dan zit je goed! Dit is een leuke positie als data driven UX’er; Met Service Designer sparren op hypotheses en met CRO-specialist sparren op methode om objectief data te verkrijgen. En vanouds kilometers in Sketch maken om concepten uit te werken. Vervolgens kon ik designs naar prototypes in Invision App of Maze en A/B-platform opzetten. Wat hebben we tegenwoordig als designers toch mooie tooling.

Prototype Sketch Clickable prototype Sketch

Lead Design System kon mijn ervaring gebruiken. Er was genoeg te doen voor het Design System (zie afbeelding aan het begin). Mijn bijdrage was UI-componenten aanpassen, herordenen en definiëren. Consistentie in bijvoorbeeld buttons met iconen heb ik doorgevoerd en logica achter witruimte (in front-end margins en paddings) geformuleerd. Dit vergemakkelijkt het leven van designers en front-end developers omdat deze beide disciplines bij elkaar brengt. Designs worden consistenter, beter herbruikbaar en er kan uiteindelijk sneller voor multi-devices worden opgeleverd over meerdere producten en afdelingen. Win-win!

Designse Essent in Sketch

Essent

UX/UI Design en A/B-testing master

De Klantenservice omgeving moest met z’n tijd mee. De techneuten waren druk bezig om de omgeving naar Sitecore en React te migreren. De bestaande design was al weer enkele jaren oud. Een mooie kans om ook design van een update te voorzien. Met inzichten de we in de afgelopen jaren hadden verworven en data analyse kon ons team verbeterpunten in de nieuwe omgeving doorvoeren.

Mijn verantwoording was voor al User Experience en UI van het de Klantenservice te verbeteren. Hierbij kreeg ik constructieve feedback vanuit de Design-chapter. Het is fijn om met mededesigners te kunnen sparren.

Het was hoofdzaak om te zorgen dat functionaliteit altijd voor de gebruiker zichtbaar is, echter met balans. Gebruikers worden stapsgewijs geholpen om de juiste faq te vinden. Dat deed ik door de flow te chunken. Om eenvoudig naar soortgelijke content te kunnen navigeren hebben we gekozen om een accordion te gebruiken.

Grafiek A/B-testing A/B-testing statistieken.

Als ware rechercheurs zijn de data-analist en ik in Adobe Analitycs en Google Tagmanager gedoken om patronen te vinden. Wanneer we iets interessants vonden, formuleerde wij hypotheses. Als de PO heil in onze test zag, zette ik een A/B-test in applicatie Visual Web Optimizer op.

Het is erg handig wanneer je als designer ook bedreven in HTML,CSS, jQuery en bijvoorbeeld Twitter Bootrstrap ben. Toevallig ben ik dat ook. Visual Web Optimiser (VWO) maakt gebruik van jQuery. Ik kon met Developer tool en VWO de DOM manipuleren om compleet andere pagina's serveren. Hierdoor hoeften we geen developers in te schakelen, evenals aan tekortkomingen van het Tridion CMS te hoeven conformeren.

Resultaten A/B-test VWO
A/B-test Login in Visual Web Optimiser

Rework van Login stond op de backlog. Minor detail...klanten moesten één jaar wachten. Ontwikkelaars hadden namelijk hun handen vol aan gehele platform naar Sitecore migreren. Gezien we relatief eenvoudig tien duizenden klanten het leven iets kunnen vergemakkelijken, heeft ons team gekozen om dit aan te pakken. Over dit stuk functionaliteit was kennis uit de organisatie met de noorderzon verdwenen. Backend wilde (en moesten) we ongemoeid laten.

Je kan als designer niet altijd de beste ervaring neerzetten. Dat is de realiteit. Ik moest het doen met de kaders die er waren. Ik ben in de Browser gaan testen welke States het webformulier kon verkeren. Dit alles heb ik naar een flow-diagram en naar mockups vertaald. De grote verbetering zit in de unhappy-flow. Hoe je als klant jezelf kan herstellen. Daarbij duidelijk uitleg toevoegen over het herstelproces. Design is namelijk ook verwachtingsmanagement. Met voorstellen om content via CSS toe te voegen en te positioneren, konden we het inlogproces weer een paar procent verbeteren. We hebben weer 10000 gefrustreerde gezichten bespaard. Dat is een klein voorbeeld van incrementeel verbeteren van een online omgeving.

Sketch Design system Components

Energiedirect

UX/UI Designer + research

Ik heb bij Energiedirect vooral geholpen de ervaring van online klantenservice te verbeteren. Zo is de gehele Informatie Architectuur mij onderhanden genomen. We hebben eerst uitgebreid A/B-testen opgezet om te meten of ideëen en aannames ook daadwerkelijk verbeteringen zijn. We hebben voor het nieuwe platform nieuwe templates neergezet. Samen met andere designers heb ik aan het Design System gewerkt. Ook hebben we een proprietary backend oplossing verbeterd.

De Data analist en ik hebben vele uren opgetrokken. Gezien elke muisklik en interactie wordt gemeten, komen we veel over het gedrag van gebruikers te weten. Het is ‘alleen’ een kwestie van deze data interpreteren. Hier gaat veel werk in zitten. Wij hebben de nodige funnel analyses en schetsen uitgewerkt. Vele quick wins konden wij hieruit destilleren. Een kleine greep...

Klantenservice mainpage
Introductie Top5 die goed voor 40% van verkeer

Bijvoorbeeld zagen wij dat bij een bepaald onderwerp vaak dezelfde pagina's werden bezocht. De content van de pagina's hebben we ingekort en in één pagina gegoten. We dienen het gebruikersgemak door linken en knoppen te schrappen.

Ook bleek de 80/20-regel van toepassing (80/30). In 80% van de gevallen zijn klanten opzoek naar 30% van de content. Mijn voorstel was om een Top5 aan FAQ’s op de homepage te plaatsen (spaarzaam met ‘snelkoppelingen’ gezien doel voorbij schiet). Zo heb je de meeste traffic afgedekt en worden de gebruikers op hun wenken bediend. Dit is precies wat je op een online platform wilt.

Kreten als ‘the average user doesn’t give a damn about your website’ heb ik laten vallen. Over de hele wereld hebben talloze onderzoeken dit keer op keer uitgewezen. Vrijwel al mijn inspanningen waren er op geënt om de klant zo snel mogelijk zijn/haar doel te laten bereiken. Een taakgedreven aanpak toepassen.

Data Driven Design

Afbeelding Rol nieuwe taxonomy uitgewerkt
Taxonomy (nieuwe informatie architectuur) op rol papier van 5 meter x 1 meter.

De informatie architectuur van klantenservice hebben we onder handen genomen. Gezien de online manager gelooft in een data-gedreven aanpak, werd mijn voorstel om dit aan de hand van onderzoeksmethodieken te doen, toegejuicht.

Alle FAQ’s (veelgestelde vragen) heb ik naar korte onderwerpen omgezet. Deze onderwerpen werden aan 700 respondenten voorgelegd. Elke respondenten kreeg in een online Open cardsort-sessie 15 onderwerpen voorgeschoteld die zij zelf, dus volgens zijn/haar logica, moesten categoriseren. Door het grote aantal respondenten werden patronen zichtbaar. Respondenten hadden verschillende denkmodellen, dat het uitdagend maakt. De truc was deze te bundelen. Ook nam ik het gewicht van een FAQ in de oplossing mee. Zo wordt bijvoorbeeld een vraag over energienota tientallen malen vaker bezocht dan een over hoe je een overlijden doorgeeft. De keuze was om de top30 zo goed mogelijk te ordenen omdat daar de grootste winst in zit. Het opnieuw classificeren van content aan de hand van 50.000 datapoints was een hersenkraker. Gelukkig had ik hulp van een online adviseur. Sparren komt het eindresultaat ten goede

We hadden een nieuw raamwerk opgezet. Twee maal 600 respondenten hebben via online Tree-tests de bestaande en de nieuwe architectuur uitgetest. Dit is genoeg volume om een goed beeld te krijgen. Uit de data heb ik nog enkele tweaks doorgevoerd, echter over het algemeen was het een goede verbetering. Het gewicht van de FAQ’s heb ik de nieuwe data gemapt. De nieuwe Informatie Architectuur zal 11% beter scoren. Dat betekent 11% verbetering in de vindbaarheid van content. Map dat op jaarlijks aantal unieke bezoeken van een getal met ruim 6 nullen, dan is dit leuk resultaat.

Styleguide Agro Energy

Agro Energy (Eneco)

UX/UI Designer

Agro Energy, dochteronderneming van Eneco, is gespcialiseerd voor energieproducten in de Land en Tuinbouw. Leverancier van elektriciteit, gas en warmte is op zich is niet bijzonder. Wat Agro uniek maakt is dat klanten met deze producten kunnen speculeren en handelen. Net het Damrak… super cool!
Tuinbouwers met een WKK, een op aardgas aangedreven mini-energiecentrale, kunnen bijdragen ons energie netwerk (van Tennet) te stabiliseren. Of juist lampen in de kas aanzetten wanneer er overcapaciteit is. Klanten kunnen handelen in deze bijdrage aan Tennet. Er zit een bidding-system met verschillende brokers achter. Dit alles vraagt natuurlijk om geavanceerde webapplicaties.

Werken aan taakgedreven webapplicaties vind ik het leukst om te doen. Gezien de omvang van deze CRUD-applicaties is design complexer en dat ligt mij. Hiervoor zal je als designer in staat moeten zijn om abstract en holistisch te denken. Zodat je ook architectuur begrijpt en regekls hierop kan toepassen.

Hieronder zie je het 'B2B-mijndomein' waar je kan gegvens kan inzien, wijzigen en aanmaken. Ook heb je als klant beschikking over handelen van energieproducten.

Schermen klantomgeving Agro Energy

Een ander gaaf project vond ik het interne CRM. Gezien Agro in een specifiek markt opereert, is er geen CRM dat aan hun eisen voldoet. Het huidige systeem was niet meer van deze tijd. Naast dat alles rondom klantregistratie, facturering en support hierin zal worden afgehandeld, is er de wens dat gecentraliseerd producten en diensten kunnen worden geconfigureerd. Ook zal klantspecifieke data zoals inzien en muteren van meterstanden, apparatuur, up-/down-time en speculeren door klanten in het CRM beschikbaar worden.

In een aantal sessies hebben wij requirements, ideëen en visies naar concrete (informatie) architectuur, flows en modellen omgezet. We kozen voor een modulaire aanpak en gaan functionaliteit per dienst/product uitrollen. Dit maakt het meer behapbaar.

Design Sprint

Een van de leuke uitdagingen was om te zorgen dat medewerkers relatief eenvoudig data op bepaalde attributen kunnen vinden. Bij het huidige CRM moet de medewerker lineair te werk. Meerdere startpunten waarbij entiteiten geheel apart worden benaderd. Dat niet echt de realiteit weerspiegelt. Alles heeft relatie met elkaar (1:n, n:m)

Omdat we eerder de informatie architectuur en mapping van entiteiten hadden gemoddeleerd, kon ik de nieuw zoekfunctionaliteit naar wireframes vertalen. Na wat research en enkele dagen in mijn achterhoofd te laten sudderen, kwam ik tot een top idee (if I say so myself)

De product managers vonden het ook een prima idee. Ik wilde het eerst testen gezien het een exotisch combinatie van componenten is. Fuzzy searching met tags gecombineerd die een gebruiker kan chainen was het plan.

Wanneer ik interactie van compontenten + data met gebruikers wil testen, val ik terug op Front-end code en Twitter Bootstrap. Clickable prototyping tools schieten dan gewoonweg tekort. Ik wilde ook met een echte dataset werken omdat stuk voor stuk powerusers zijn. Het was fijn dat developers mij hielpen met faken van backend en queries in JavaScript schijven. Resultaat was dat we enkele scenarios konden testen.

De vraag of het nieuwe concept voor zoeken voor gebruikers werkt. Gezien het een onconventionele pattern is, zal er leercurve in de test zijn. De vraag is dan ook: komen de participanten er uiteindelijk zelf uit?

Prototype & Mockup CRM

Aanvankelijk was het best moeilijk om het eerste scenario op de beperkte functionaliteit uit te voeren. Logischer wijs grijpen ze terug op de applicatie die ze kennen. Het eerste scenario had onderhand iedereen hulp nodig. Reacties zijn na het zien van gericht resultaten kunnen kiezen toch “dat is handig!” en “top”. Scenarios werden steeds moeilijker. Normaliter zou je als designer terug naar de tekentafel moeten. Echter het gaat om een beperkt aantal gebruikers die eenmalig uitleg nodig hebben. Daarna vinden ze het een verademing omdat ze niet meer hoeven na te denken vanaf waar ze in de applicatie van start gaan. Ik vraag altijd om ongezouten mening en dat ze mij eerder testen dan ik hen. Er waren kleine verbeterpunten die ik heb doorgevoerd. Nu alles naar een stijl vertalen (waar ik al mee bezig was) and job done!

Responsive Sketch-ontwerp voor mobile, Tablet en Desktop

Gemeente Amsterdam

UX Designer & awareness creëren voor User Centered Design

Taak voor ons team, bestaand uit UX designers en UX researchers, was de online dienstverlening te verbeteren. Gemeente Amsterdam heeft de ambitie om als beste gemeente op de behoefte van de burger in te spelen.

Door als eerste Usability tests te doen wisten wij waar de knelpunten lagen en ze fungeerden als nul-meting. Dit was ook een goed instrument om awareness binnen de organisatie te creëren. Bevindingen uit testen heb ik vertaald naar vernieuwde flow-diagrammen, sitemaps, prototypes, wireframes, interactie ontwerpen en af en toe visual designs. We waren grotendeels verantwoordelijkheid voor de invulling van onze deelprojecten. Het was zaak om lijnen naar stakeholders te leggen en ze te betrekken.

Daarnaast heeft ons team aangetoond dat bepaalde processen in de keten zullen moeten worden verbeterd om de klant echt goed te kunnen bedienen. Dit ontsteeg dan ook het online kanaal. Service Design zeg maar.

Alle iteraties werden gemeten. De re-designs waren een grote stap voorwaarts. Door bijvoorbeeld het proces voor parkeervergunningen aan te passen, werden er meer succesvolle aanvragen afgerond. Een vereenvoudigde landingspagina met een duidelijke CTA zorgde ervoor dat meer gebruikers met een aanvraag startten. In plaats de regelgeving vooraf te ontsluiten, ontwierp ik de user journeys zo dat de juiste vraag, de juiste content, op het juiste tijdstip in de funnel werd getoond. In de brick and mortar wereld vraagt een verkoper of specialist een klant uit met korte vragen, zo komt de klant tot zijn/haar besluit. Voor het online kanaal gelden de zelfde best practices; het is een digitaal dialoog geworden.

De UX Researcher en ik hebben ontwerpen gebouwd die we met Optimizely zijn gaan A/B-testen. Daarnaast heb ik prototypes ontworpen die als leidraad voor nieuwe functionaliteit binnen het CMS dienden.

afbeelding straat met huisvuil
Landingspagina Melding Openbare Ruimte

Jaarlijks worden bijna de helft van de MOR meldingen (Melding Openbare Ruimte) telefonisch doorgegeven. Onze taak was om het online kanaal te verbeteren omdat deze achterbleef. Het aantal meldingen nam toe doordat de gemeente meer exposure geeft hoe melding te doen. Om de support afdeling te ontlasten en voor zo min mogelijk kanaal-verschuiving te zorgen is het online proces op de schop gegaan. Wij hebben partcipanten uitgenodigd om de knelpunten in bestaande omgeving bloot te leggen. Met de pet van Interaction Designer op voorzag ik de pijnpunten, maar we wilden objectief toetsen. Ook wilde wij weten hoe de verbeteringen gingen presteren. Ik ben een groot fan van het traject kwantificeerbaar maken. Meten is weten.

Het meldingsproces was een bestaande omgeving waarop wij designers moesten inhaken. Het 'Formulieren CMS' had een beperkt palet, daardoor moesten we concessies doen met betrekking tot lay-out, UI-components en interacties. Niet getreurd, na een tijd hadden we te pakken wat er wel en niet kon worden gemaakt. En wat voor ons dealbreakers waren, werden aan de wensenlijst voor de leverancier toegevoegd. Scherpe lieden onder ons zullen zeggen dat het aantal radio buttons in wireframes hieronder niet Hick's Law volgt. Klopt, je hebt geheel gelijk! Ik zeg System constraints.

Afbeelding Responsive wireframes Stap Melding openbare Ruimte Wireframes 1ste stap Melding Openbare Ruimte

De originele oplossing had te veel keuzes. Gebruikers liepen in de Usability tests hierop vast. Als middel hadden wij cardsort sessies gedaan om te weten hoe gebruikers de verschillende onderwerpen indelen. Het is altijd beter om de gebruikers te betrekken en design-keuzes.

Uit data en onderzoek bleek dat er problemen in de user journey waren. Processen en systemen niet optimaal op elkaar aan.

Samen met de product manager zijn we in kaart gaan brengen wat er verbeterd zou moeten worden. Sec valt het buiten mijn werk als UX designer, echter heeft het toegevoegde waarde voor de organisatie En ik vond het leuk om te doen. Het gaat toch om oplossingen voor burgers te bedenken. Voor hen staat één kanaal niet op zich.

Design voor desktop van BMS2 met Faceted Search geactiveerd

SeaChange

UX designer, Interaction designer, Visual designer & design evangelist

SeaChange heb ik geholpen met een zeer complexe webapplicatie die als beheertool voor hun Video On Demand platform fungeert. Met deze applicatie kunnen medewerkers bijvoorbeeld talen aan films toevoegen, series samenstellen, fouten corrigeren en series omzetten naar iPhone-formaat. Ik was de eerste designer die het kantoor in Eindhoven betrad. Er werkten vooral techneuten. Ik zou verantwoordelijk gaan worden voor een nieuwe User Interface.

Op het hoofdkantoor in Acton USA kon ik met collegae UX designers sparren. Omdat de applicatie erg complex is, was het een steille doch essentiële leercurve om het platform te doorgronden. Hierdoor was ik op een gegeven moment op mezelf aangewezen gezien ik de enige designer was die het systeem functioneel begreep.

Met grote klanten als Ziggo, BBC, Deutsche Kabel, Telenet en Vodafone was het voor de organisatie belangrijk dat de applicatie voor hen werd verbeterd.

De developers hadden hun uiterste best gedaan. Wat er ontbrak was de variabele 'user'. Het werd dus mijn taak om deze naast business- en system-requirements op het toneel te krijgen.

Design is smaak en subjectief

Aldus de systeem architect in het begin :-(

Het koste enige tijd om een ieder binnen het team van de toegevoegde waarde van UX te overtuigen. Gewoon doorzetten, discusies voeren en designkeuzes onderbouwen maakten we op dit vlak progressie. De developers zagen dat de webapplicatie gebruiksvriendelijker werd zonder dat bruikbare functionaliteit in het geding kwam. Ze gingen deze designer vertrouwen.

Afbeelding handgeschetste wireframes Schetsen webapplicatie

Naast dat ik de organisatie met UX bekend maakte, voorzag ik het team van wireframes, look 'n feel, specificeerde ontwerpen en voorzag hen van mockups. De geheel workflow ging op de schop. Op lokatie deed ik Usability tests en Contextual Inquiries. Initieel was ik met Axure begonnen om prototype neer te zetten voor Usability test. Hier liep ik echter in vast. Mijn Amerikaanse collega kon goed in Axure scripten, dus hij deed een poging. Dit werd ook een faal omdat ik de complexe interactie van faceted search wilde testen. Aan de hand van HTML,CSS, jQuery en hulp van een JavaScript developer, heb ik verschillende scenarios in een prototype uitgewerkt (Twitter Bootstrap). Hiermee kon wel complexere interacties en filtering van dataset worden getest.

Nieuwe workflows hadden wij in samenwerking met Ziggo en Telenet in iteraties verfijnd. Daarnaast ontwierp ik de visual designs van 2 releases. Het team had ik voorgesteld om D3.js voor data-visualisatie van het dashboard te gaan gebruiken.

De developers hadden wel oren naar om een JavaScript Library te gebruiken ipv. server-side afbeeldingen te genereren. De gebruikerservaring verbeterde hierdoor omdat deze geavanceerder overkwam.

Alle verbeteringen waren een flinke stap vooruit. Klanten waren goed te spreken over de vorderingen. Hierdoor kreeg ik meer bijval van het management, waardoor mijn deliverables meer als uitgangspunt fungeerden. Eerder moesten we opofferingen doen gezien technische restricties (het gedrocht Ext.js). De developers hadden voor Facebook's React.js gekozen. Dat bracht namelijk de flexibiliteit met zich mee om de ontwerpen as-is te implementeren. Aangezien ik mijn deel van HTML en CSS in het verleden te hebben gedaan, Gaf ik developers aan hoe ontwerpen konden worden geïmplementeerd (navigatie, nieuwe UI-controls en SVG's als iconen).

Het is ook belangrijk dat we aan de eindgebruiker denken, want dit raakt hen.

Hoorde ik de zelfde systeem architect in een Architecten overleg zeggen. Dat was 9 maanden later. Dit is cool want hij, het team en de organisatie hebben van mijn 'UX-bloemlezingen' opgestoken ;-)
afbeelding printen sessies over persona's
Persona's uit verschillende sessies

Samen met de UX Designers op HQ hebben we in ee aantal sessies verschillende persona's gedefinieerd. UX stond hoog op de agenda van senior management. We wilden allen een applicatie neerzetten die beter zou gaan aansluiten bij de kennis, niveau en workflow van de eindgebruikers. Persona's gaven richting.

Afbeelding operator pagina voor Vodafone

Recharge

UX designer

Creative Group wil graag de leidende positie van hun prepay opwaardeerservice Recharge verankeren. In kaart brengen van de e-commerce omgeving was mijn eerste prioriteit. Het was zaak om Recharge te documenteren omdat voor nieuwelingen het systeem ingewikkeld was. Het re-design proces heb ik in lagen opgedeeld. Voorheen was logica, functionaliteit en presentatie verweven.

Daarnaast legt het uitwerken van het systeem visueel bloot waar pijn- en knelpunten zich bevinden. Het krijgt leterlijk een gezicht. Mijn advies aan het Scrum-team was om een grid-system in wireframes, visual design en front-end consistent altijd toe te passen. Er was namelijk ruimte om de verschillende deliverables beter op elkaar aan te laten sluiten. Dit schept duidelijkheid.

Afbeelding whiteboard met flow applicatie Vroege uitwerking bestaande e-commerce oplossing
Afbeelding flow-diagram unhappyflow nieuwe functionaliteit Unhappyflow/Error states en de context daarvan

De PO wilde een Mobile-first aanpak. Mobile zorgt namelijk voor het meeste verkeer. Deze devices goed krijgen had dus de hoogste prioriteit. Natuurlijk lever je als designer het liefst een prototype aan, zodat voor ieder duidelijk is hoe het systeem zich zal gedragen. Verschillende User Flows heb ik een Invision App uitgewerkt. Zie voorbeeld Invision App - userflows Recharge.com.

Afbeelding met wireframes funnel voor mobile devices 16 van totaal 93 wireframes Mobile-first vernieuwde funnel

Uit funnelanalyse bleek dat de abondon-rate bij de betalingsmodule voor verbetering vatbaar was. Het vermoeden bestond dat dit onder andere komt door de afwijkende ‘look 'n feel’ en dat het om een ander subdomein ging. Gezien dit alles tot afhaken en frictie kon leiden, hebben de UX researcher en ik het betaalgedeelte in het designproces meegenomen.

Er kan geconcludeerd worden dat het redesign van Payment een positieve invloed heeft gehad op de prestaties van Recharge.com

Aldus de Data Analist
Low- en high-fidelity wireframes Mijn ZK

Zilveren Kruis

Interaction Designer en 'tolk' van design/business naar implementatie

Voor Zilveren Kruis heb ik aan 2 projecten gewerkt; een B2B- en een B2C-project.

De B2B-oplossing was om collectieve verzekeringen te kunnen beheren (zie hierboven). Denk hierbij aan functionaliteit als inzien van polissen, info vanuit Zilveren Kruis, mutatie van medewerkers en aanpassen van polissen voor medewerkers. Het is een afgeschermde 'mijn-domein' voor de zakelijke markt. Hiervoor had ik flow diagrams, sitemaps en wireframes ontworpen. Samen met de Software Architect hadden wij Use Cases aangescherpt zodat deze concreet werden.

Als tweede project maakte ik deel uit van een multidisciplinaire Scrum-team. Wij werkten aan een verzekeringen-kiezer voor de consumenten markt. Hierbij was mijn taak om de de User Journey met marketing doelstellingen samen te smelten.

Ik leverde het team interactie ontwerpen voor zowel mobiel als desktop aan. Daarnaast werkte ik flow diagrammen uit en leverde wireframes aan, zodat de Visual Designer hiermee aan de slag kon.

Samen met de front-ender werkten ik alle States uit zodat er geen verassingen in de implementatiefase waren. Ook vertaalde ik vragen en/of uitleg van PO naar de Russische front-end’ster. Deze technische tolk-functie was spontaan ontstaan en "erg fijn" aldus de toemalige PO. Dit verspoedigde het proces. Deadline Day naderde en de spanning steeg bij ieder om te kunnen opleveren.

De omgeving is op Twitter Bootstrap gebaseerd, dat mij niet onbekend was. Bootstrap samen met styleguide en mijn IO’s vertaalde ik naar HTML-templates. Jaren geleden had voor mezelf duidelijk, dat ik geen front-end development meer deed. Nood breekt wet. We hadden beloofd om op tijd te leveren en dat deden we dan ook!

Responsive design Start sales funnel Ziezo
Sales funnel Ziezo zorgverzekering
Afbeelding 2de stap Ziezo
2de stap funnel Ziezo
Afbeelding productpagina Leapfrog Xeed

Leapfrog

Interaction Designer

Uit naam van Burst Digital heb ik een nieuw functioneel ontwerp voor e-commerce omgeving van Leapfrog neergezet. Leapfrog, een Nederlandse 3D-printer fabrikant, was niet tevreden met hun huidige webshop. De klant wilde hogere conversie behalen en de shop was niet aantrekkelijk genoeg aldus klant. Na de briefing ben ik aan een nieuw concept gaan werken.

Uit gebruikerstest bleek bijvoorbeeld dat er problemen waren om specificaties in metrische en imperiaal stelsel (Brits/Amerikaans) te tonen. Alle data stond naast elkaar waardoor de cognitive load te groot was.

Omdat de essentie van automatisering is dat het systeem het moeilijke werk doet, heb ik een 'afmetingen-switcher' bedacht. Gebruikers kunnen zelf kiezen welk type data ze willen zien. Mijn idee was om aan de hand van Geo-location en/of IP-range een Smart Default in te stellen. In een enkele korte iteraties heb ik een FO in het online wireframe & prototype-tool UXPin opgeleverd (Burst gebruikte UXPin). De klant was lovend over de vernieuwende concept. Anno 2018 staat de fundering van mijn werk nog zoals ik deze in 2015 had ontworpen.

wireframe van vergelijkingspagina
Vergelijkingspagina 3D printers

Het is niet in de statische afbeelding hierboven niet te zien, echter het idee was om de header met producten fixed in de pagina te laten staan wanneer deze de bovenkant pagina raakt. Zo raakt een gebruiker niet de draad kwijt welke data bij welk product hoort. Dit probleem zie ik online namelijk nog te vaak. Mijn voorstel was om Waypoints Library te gebruiken (ook uitgangspunt tijdens ontwerpfase) om onder andere het vorige probleem op te lossen en deels content (prijs en CTA mits er in de linkerkolom genoeg afbeeldingen onder elkaar staan) op productpages fixed in kolom te tonen. Op deze manier krijgt de CTA extra nadruk.

Ook had ik alle eenheden in de cellen verwijderd, zodat het voor de gebruiker sneller te scannen is. Dit scheelt namelijk aan hoeveelheid te lezen content. Het is dus één keer eigenschap met eenheid lezen i.p.v. vier keer maatvoering plus eenheid. Als je dat over een X aantal rijen in pagina vereenvoudigt, komt deze rustiger over En is makkelijker te lezen. Zonder dat dit ten kosten gaat van de inhoud. Rust en focus in deze e-commerce omgeving is key. En natuurlijk onderaan de pagina nog eens heldere Call-To-Action's aanbieden. Dit is een kleine greep van mijn werk als Interaction Designer.

  • Hey hallo. Ik ben Raymond Uphoff

  • UX Designer/ Interaction Designer

  • Product Designer

  • Wireframe goochelaar & flow-diagram wizard

  • met een flinke scheut Data Driven Design.

  • A/B-testing professor & co-assistant HTML/ CSS/ JavaScript

  • Sketch king & Prototype Rocket Scientist

  • Ik ontwerp digitale toepassingen die gewoon werken!

Skills

  • Ontdekken

    Een goed product is geen kansspel. Inzichten verwerven in het gedrag van gebruikers en business begrijpen is daarom key. Dat doe ik d.m.v. Usability testing, questionnaires, survey en interviews

  • Strijdplan

    We zetten inzichten om naar een plan. Doelstellingen definiëren we strategisch.

  • Ideeën

    Let the creative juices flow! Samen beoordelen we de levensvatbaarheid en effectifiteit van een idee.

  • Ontwerpen

    Flow-diagrams, sitemap, wireframes en gelikte Responsive Designs lever ik op. Een complex prototype met CSS+JavaScript bouwen gaat mij niet te ver.

  • Valideren en leren

    Meten is weten! Hoe presteert de nieuwe oplossing? A/B-tests, data-analyses of Usability tests zorgen voor het antwoord. Zit er meer in? Mooi... volgende iteratie!

Projecten

Whoami

Raymond Uphoff aka myradon - UX/UI Designer met front-end skills

Als network engineer kwam ik bij toeval in aanraking met HTML/CSS en design (lang verhaal). Ik testte, integreerde netwerkapparatuur in Core-networks en ontwierp netwerken voor de grote jongens. Vooral de analytische vaardigheden en holistische kijk komen ook in de online wereld van pas.

Studie Communicatie en Multimedia Design aan de HAN heeft mij op conceptuele vlak geholpen. Als echte autodidact heb ik de fijne kneepjes van Interaction Design, UX/UI Design en grafische vaardigheden & tooling mezelf geleerd. Dat geldt ook voor code schrijven en UX Research methodieken. Wanneer ik iets interessant vind, wil ik er meer van weten.

Als hobby heb ik een klus-auto. Dat geeft mij rust. Lekker Zen met boutjes en moertjes bezig. Dit is een goede afwisseling voor al het denkwerk. Al vond ik in het begin een remklaauw losschroeven al spannend. Nu ben ik handig met auto's. Net als andere dingen moet je koudwatervrees zien te overwinnen.

Home Automation heeft mijn hart gestolen. Thuis praten Hue lampen, Tradfri verlichting, sensoren, relais en Arduino-/ESP-devices via open source projecten met elkaar. Erg leuk vind ik om met Node-RED deels visueel JavaScript Flows te programmeren. Er hoeft geen lichtschakelaar meer te worden aangeraakt.

Ruim 12 jaar zit ik in de online industrie. In deze tijd heb ik de pet van Webdesigner, UI Designer, Visual Designer, Interaction Designer, Product Designer, UX Designer en CRO-specialist opgehad. Dit bij elkaar zorgt ervoor dat ik een echte T-shaped professonial ben. Oh ja... HTML5, CSS2/3 en JavaScript zit ook in mijn trucendoos (ik stam uit de tijd van Webdesigner, XHMTL, JavaScript is vies, ICQ en MSN).
Momenteel ben ik mijn JavaScript vaardigheden aan het bijspijkeren door ES6 en Vue JS te leren.

In een notendop; Raymond is een designer met een zwak voor techniek.

Contact opnemen? Go ahead!