Essent

UX Designer met taken als A/B-testing en UX Research

blaat

#

blaat

Energiedriect

UX/UI Designer met A/B-testing

blaat

#

blaat

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
Logo van myradon, oftewel freelance UX designer Raymond Uphoff This SVG will transform to logo myradon made with icons Freelance UX Designer UX portfolio website van Raymond Uphoff, ook bekend als myradon Bedreven in User Experience Design, Interaction Design, User Interface Design en Visual Design, User Centered Design Hij is ook bedreven in wireframing, prototypes bouwen, flow-diagrammen uitwerken, sitemaps maken, contextual inquiries, gebruikersonderzoeken, persona's etc.
  • Wilt u dat uw klanten positiever over uw online kanaal zijn?

  • Wilt u dat de gebruikerservaring van uw webapplicatie verbetert?

  • Hier kom ik om de hoek kijken...

  • Ik ben Raymond Uphoff, freelance UX Designer

Uw klanten ondervinden problemen maar u weet niet precies waarom! Geen probleem, ik help u met een geschikte oplossing. Ik ontwerp retegoede e-commerce oplossingen en webapplicaties die intuïtief & gebruiksvriendelijk zijn.

Het strijdplan

Voor goedwerkende oplossingen moet je eerst het probleem begrijpen. Wat zegt data? Of moet er onderzoeken worden gedaan?

Zonder User Insights is de juiste oplossing neerzetten als met hagel schieten. "Right Raymond en nu?" Hieronder vindt u het raamwerk;

  • 1. Inzichten verwerven

    We willen het gedrag door cijfers te weten komen, of inzicht in gedrag aan de hand van onderzoek. Wat, waar, hoe en waarom?

  • 2. Verbeterpunten definiëren

    Aan de hand van stap 1 komen knel- en verbeterpunten naar voren. Wat verdient eerst aandacht?

  • 3. Oplossingen bedenken

    De verbeterpunten zijn de fundering voor nieuwe ideeën en concepten. Hier verenigen we User, System & Business Requirements.

  • 4. Ontwerpen

    Ik zet hier mijn kennis in om flow-diagrams, sitemaps, inuïtieve wireframes of gelikte mockups neer te zetten. Een prototype bouwen om te valideren is een prima idee.

  • 5. Meten is weten!

    A/B-testing van concept, analyse van data en/of Usability testing van het ontwerp. Valideren is key! Zit er nog meer in? Okay een nieuwe iteratie.

Enkele projecten

Whoami

Raymond Uphoff aka myradon - Freelance Visual UI Designer

In 2001 kwam ik met HTML en design in aanraking (lang verhaal). Toen was ik in de telecom sector werkzaam. Ik was een engineer die voor de grote jongens netwerk-apparatuur testte, integreerde en netwerkarchitectuur ontwierp. Vooral de analytische vaardigheden en holistische kijk die ik in de telecom toepaste, komen bij UX van pas.

Voor de mensen die mij beter kennen weten dat ik weinig voor holle buzzwords ben te porren. Ik ben dan ook meer als de reclame "Als je maar lang genoeg gewoon doet, wordt je vanzelf speciaal" Een echte nuchtere Hollander dus.

Studie Communicatie en Multimedia Design heeft mij vooral op het conceptuele vlak op weg geholpen. Als echte autodidact heb ik de kneepjes van Interaction Design en grafische vaardigheden mezelf in het veld aangeleerd. Wanneer ik iets interessant vind, wil ik er meer van weten.

Klussen aan een oldtimer geeft mij rust. Lekker Zen met boutjes en moertjes bezig zijn. Hier ben ik met nul ervaring mee begonnen. Nu ben ik de auto opnieuw aan het opbouwen. Het lukt aardig goed al zeg ik het zelf.

Ruim 4 jaar ben ik als éénpitter aan de slag. Verschillende opdrachten en omgevingen vind ik een fijne afwisseling. In deze tijd heb ik de pet van UI Designer, Visual Designer, Interaction Designer en UX Designer opgehad. Onlangs nog een klus als CRO-specialist gedaan. Dit bij elkaar zorgt ervoor dat ik een T-shaped professonial ben. Oh ja, HTML, CSS en wat JavaScript behoren tot mijn skillset (stam uit de tijd van webdesign weet je nog). Ik ben niet als front-ender werkzaam, wel als bruggenbouwer naar techneuten in te zetten.

Heb je een leuk project?! Ik hoor het graag!

Contact opnemen?! Natuurlijk dat kan...