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.

Responsive Sketch-ontwerp voor mobile, Tablet en Desktop

UitvaartCompact

Hybride CRO-specialist/ UX Designer

Dit project heb ik in opdracht van Smart Internet Media uitgevoerd. Initieel was de klantvraag om als CRO-specialist de conversie van de website te verhogen. Na onderzoek in Google Analytics en Hotjar te hebben gedaan, kwamen wij er achter dat de huidige omgeving niet de potentie ging behalen die de klant voor ogen had. De analist en ik hebben samen een funnel analyse gedaan. Samengevat “deze omgeving gaat helaas niet presteren”. Getallen bij een flowdiagram plaatsen maakt het tastbaar. Gelukkig kon de klant het goed in de conclusie vinden. Ik heb groen licht gekregen om de gehele omgeving aan te pakken.

Als eerst ben ik met een competitors review gaan maken. Aan de hand hiervan werden de kansen duidelijk. Dit hebben wij in een aanpak vertaald.

Van de klant kreeg ik de nodige onderzoeken die ze een extern onderzoeksbureau hadden laten doen. Meer input is altijd welkom.

Na enkele meetings lag de nieuwe customer journey vast. Ik opperde om de funnel op te knippen. Gebruikers moesten namelijk flink wat gegevens invullen, alvorens ze tot afsluiten van dienst konden overgaan. Tijd een schaarste product. Gebruikers hebben minder geduld dan vroeger. Hier moet je op inspelen. Het moet snel duidelijkheid geven, overzichtelijk zijn, vertrouwen wekken en makkelijk te scannen zijn. “What's in it for me?!” is erg belangrijk om dat helder te communiceren.

Flow-diagram nieuwe sales funnel
User journey als flow-diagram uitgewerkt met beheer backend.

De nieuwe oplossing moet natuurlijk op alle apparaten goed werken, daarom heb ik voor 3 breakpoints ontworpen. Mobiel als eerst, vervolgens ben ik naar desktop gaan vertalen, om uiteindelijk tablet in Sketch te ontwerpen. Wegens tijddruk heb ik de stap wireframing overgeslagen. Dit scheelde wat aan tijd. In het vervolg zou ik toch eerst wireframes maken. Al is het eenvoudig in Balsamiq.

Afbeelding afrekenen en homepage smartphone en tablets
Responsive Checkout-gedeelte

In de MiX co-working, waar ik mijn thuisbasis heb, is ook een goede illustrator gevestigd. Michel Louis oftewel Kicksaus heeft voor de e-commerce omgeving toepasselijke iconen ontworpen. De klant en ik zijn erg blij met het resultaat.

Momenteel is de webbouwer bezig om de responsive omgeving te implementeren. Ik ben erg benieuwd naar het resultaat.

'iconized' logo myradon This SVG has to shape of 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

Eerst zullen we inzicht in de eindgebruikers moeten hebben. Zonder User wordt goede UX bemoeilijkt.

"Right Raymond en nu?" Hieronder vindt u het raamwerk;

  • 1. De eindgebruiker betrekken

    Natuurlijk willen we eerst weten wat de gebruiker precies drijft. Waar lopen ze tegenaan? Wat is onlogisch? Waar raken ze gefrustreerd van en vooral waarom?

  • 2. Verbeterpunten definiëren

    We gaan aan de hand van de 1ste stap precies vastleggen wat we gaan verbeteren.

  • 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...