Interactie en visueel ontwerp – YourCommerce

Interactie en visueel ontwerp – YourCommerce

YourCommerce is een online tool die het organisaties in staat stelt om hun rapportages visueel weer te geven. Dit omdat visuele informatie sneller wordt opgenomen (80%) dan geschreven informatie (20%). De opdracht aan mij was om hier een interactieflow en visueel ontwerp voor te maken.

Omdat de vraag was om het een social media look-and-feel te geven, heb ik mij laten inspireren door Pinterest. Dit omdat Pinterest van zichzelf al een visueel georiënteerde social media is. Wat ik hier ook prettig aan vond is dat het een duidelijke overzicht bied aan meerdere posts tegelijk. In eerste instantie ben ik begonnen met het uitwerken van een huisstijl. Hierbij heb ik gekeken naar de nieuwste trends.

Door gebruik te maken van een “handwriten” font en de schuine vormen krijgt het geheel een speels uiterlijk en heeft het iets sociaals. Wat prettig voor het oog is. Ook heb ik vaste kleuren ingesteld voor grafieken, tabel en tegels zodat het (ongeacht de content) een geheel krijgt. De kleuren die ik heb gebruikt zijn blauw en oranje. Dit omdat in eerste instantie omdat dit complementaire kleuren zijn. Daarnaast staat blauw voor productiviteit en oranje zorgt voor een positieve stemming. Iets wat deze beide kleuren met het ontwerp op zouden moeten roepen.

YourCommerce - Nieuwe opzet - Voorbeelduitingen

YourCommerce – Hoe het ontwerp er bij verschillende uitingen uit zou kunnen zien.

Bij het maken van het visueel ontwerp hem ik rekening gehouden met het feit dat dit product ook als whitelabel verkocht zou kunnen worden. Dit product is namelijk onder andere afgenomen door Univé en is dus ook vertaalt naar hun eigen huisstijl.

Visueel Ontwerp - YourCommerce - Radijs Ontwerp - Webdesign

Uitwerk van het visueel ontwerp (UI design) van een aantal schermen – YourCommerce

Hierbij heb ik gebruik gemaakt van de tool(s): Sketch, Advocode en Illustrator

Deze applicatie is gemaakt in opdracht van Datametrics. Datametrics is een databedrijf die klanten in de financiële sector (verzekeraars en banken) door beter en slimmer gebruik van data de waarde hiervan bloot legt.

Mockup gebruik: Designed by Aleksandr Samochernyi

Interactie en visueel ontwerp - Urban Tailor design

Interactie en visueel ontwerp – Urban Tailor

Voor UrbanTailor heb ik meegewerkt aan de realisatie van hét nieuwe mode platform. Hierbij heb ik het gehele traject voor mijn rekening mogen nemen. Een goed interactie ontwerp traject, met een leuk gebruikersonderzoek en een fantastisch visueel ontwerp (inclusief huisstijl en webdesign).

Huisstijl en logo

Voor de ontwikkeling van de huisstijl heb ik een inventarisatie sessie gehouden waarbij ik, in samenwerking met de klant op zoek ging hoe de visuele uiting van Urban Tailor eruit zou moeten zien. Hierbij hebben ik een zelf ontwikkelde workshopvorm toegepast. Hier kwam uit dat ze een minimalistische uitstraling wilde hebben, strak met ronde vormen. In de uiteindelijke uitwerking van het logo zit een schuine vorm dat zorgt voor een energiek karakter. De schuine vorm is ook iets wat veel voorkomt in de bouw. Denk aan de versteviging van rechte objecten. Hierdoor krijgt het logo ook een industriële/techno feeling.

Deze schuine vorm komt ook verder terug in de huisstijl echter heeft het nu een onregelmatige herhaling wat zorgt voor beweging en ritme, dit geeft ook (net als het logo) energie. De kleuren die in de huisstijl worden gebruikt zijn vooral verlopen van kleuren met betrekking tot steen en baksteen. Dit om het “Urban Jungle” gevoel erin te krijgen. Kleur verlopen zijn nu helemaal de trend in webdesign. Daarom worden ze hier toegepast.

Urban Tailor - Huisstijl - Uitwerking

Voorbeeld uitingen van de huisstijl

Interactie ontwerp

Voor het interactie ontwerp wilde ik onderzoek doen naar de manier waarop de werkflow van hun gebruikers in elkaar steekt. Om dit inzichtelijk te krijgen ben ik begonnen met het afnemen van gebruikersinterviews. In mijn gesprek met de doelgroep probeerde ik eerste de basiskennis te achter halen. Met welke tools/applicaties/websites werken zij in hun dagelijkse en hoe gebruiken zij deze? Op basis van deze informatie ben ik vervolgens een klikbaar prototype gaan ontwerpen. Dit prototype diende vervolgens weer als basis voor het visuele ontwerp.

Visueel Ontwerp - Urban Tailor - Radijs Ontwerp - Webdesign

Uitwerk van het visueel ontwerp (UI design) van een aantal schermen – Urban Tailor

Hierbij heb ik gebruik gemaakt van de tool(s): Axure, Indesign en Illustrator

Mockup gebruik: Designed by Aleksandr Samochernyi

Interactie ontwerp - applicatie - MijnPortaal

Applicatie design – MijnPortaal

MijnPortaal is een onderdeel van het grotere programma IntelliFlow en is het onderdeel van de applicatie dat de hypotheek adviseur (in dit geval Univé) in staat stelt om de document aanlevering tussen hypotheek verstrekker en de consument te vereenvoudigen. De opdracht aan mij was om hier een interactieflow en visueel ontwerp voor te maken.

Interactie ontwerp MijnPortaal applicatie

Voor de ontwikkeling van de deze applicatie heb gekeken naar de soortgelijke applicaties gekeken en ik heb gebruikersinterviews met hypotheek adviseurs afgenomen. Zij zijn namelijk de uiteindelijke gebruiker van de applicatie en hun input was dan ook van grote waarde van mij. Ik heb hen onder andere gevraagd wat er aan hun huidige flow werkt en wat er verbetert zou kunnen worden. Met deze input heb ik een nieuwe flow uitgewerkt. Een van de features die ik erin heb verwerkt is een vorm van gamification, dit om consumenten te stimuleren hun documenten tijdig in te leveren.

Deze flow heb ik vervolgens in een visueel ontwerp vertaald. Hierbij heb ik er vooral rekening mee gehouden dat de “voorkant” voor de consument herkenbaar moet zijn. Het zal dus eenvoudig moeten kunnen aansluiten bij de huisstijl van de hypotheekadviseur. Om die reden heb ik ervoor gekozen om minimale kleuren te gebruiken (afgezien van een aantal signaalkleuren), zo kan het portaal met een paar kleine aanpassingen aansluiten bij de huisstijl van de klant.

Hierbij heb ik gebruik gemaakt van de tool(s): Sketch, Advocode en Illustrator

Deze applicatie is gemaakt in opdracht van Datametrics. Datametrics is een databedrijf die klanten in de financiële sector (verzekeraars en banken) door beter en slimmer gebruik van data de waarde hiervan bloot legt.

Mockup gebruik: Designed by Aleksandr Samochernyi

KiesKompas – Applicatie

Vanuit het KiesKompas kwam de vraag om hun huidige applicatie te vernieuwen. Hierbij ging het vooral om het tonen resultaten pagina’s. De applicatie is voor zowel desktop als mobiel ontworpen. De opdracht was aan mij om deze vernieuwslag vanuit interactie perspectief toe te passen.

Het was belang dat de applicatie goed zou aansluiten bij de doelgroep. Het KiesKompas heeft voornamelijk te maken met twee doelgroepen: jong volwassenen en ouderen. Deze doelgroepen liggen ver uit elkaar en de uitdaging zat hem dan ook in het samen brengen van deze doelgroepen. Om ervoor te zorgen dat de applicatie goed aansluit en genoeg draagvlak zou hebben heb ik de vernieuwde interactie vooral onderbouwd door middel van bestaande theorie.

Om dit te verwezenlijken heb ik mijn interactie ontwerp opgebouwd aan de hand van een aantal bronnen:
Nielsen Norman Group, Interaction Design Foundation en HHS-webstandaarden en usability richtlijnen. Deze organisaties zijn toonaangevende experts op het gebied van UX-design. Door deze onderzoeken als basis van mijn ontwerp te gebruiken geef ik het meer draagvlak.

Voor mijn gebruikersprofiel kijk ik vooral naar twee studies:

  • Designing for Young Adults
  • Seniors as Web Users

Hierbij heb ik gebruik gemaakt van de tool(s): Axure

De applicatie is in samenwerking met Luminum Solutions gebouwd. Zij waren verantwoordelijk voor het projectmanagement, het visuele ontwerp en de development.

Visueel Ontwerp - Congress App - Radijs Ontwerp

Congress App – Webdesign en App

De opdracht was om een ontwerp aan te leveren voor de mobiele congres app  met een daarbijbehorende website en hierbij de verantwoordelijkheid voor het doorvoeren van de usability- de interface design en de webdesign van de applicatie te dragen.

Over de CongresApp

Interactiviteit met publiek tijdens evenementen en congressen wordt steeds belangrijker. Om die reden is dan ook de CongresApp ontwikkeld. In deze app is het mogelijk realtime feedback van uw publiek te ontvangen. U kunt uw publiek vragen laten stellen, een poll in laten vullen, spreakers kunnen realtaime worden getoond en nog veel meer.

Omdat het een applicatie is die bij congressen door verschillende klanten ingezet moet kunnen worden heb ik heb ervoor gekozen om het ontwerp op te bouwen met twee hoofdkleuren. Deze hoofdkleuren kunnen eenvoudig worden vervangen door de hoofdkleuren uit de huisstijl van de klanten. Zo kan de developer van de applicatie deze eenvoudig ombouwen, zodat het de look-and-feel van de klant krijgt.

Ontwerp Flyer - Congress App

Ontwerp Flyer – Congress App

Over het webdesign

Bij de website van Congress App was ik op zoek naar strakke vormen in het webdesign. Dit omdat het een technische ondersteuning is voor een zakelijke markt. Het strakke uiterlijk moet aansluiten bij technische karakter van de applicatie. Om dit te realiseren heb ik voor een basis vormen gekozen (een driehoek) die ook terug komt in het logo van applicatie. Bekijk hier de totstandkoming van het ontwerp van het CongressApp Logo.

Bij de ontwikkeling van het webdesign van de Congress App heb ik gebruik gemaakt van de tool(s): Indesign en Illustrator

Mockup gebruik: Designed by Aleksandr Samochernyi

Centraal Beheer APF – Website

Centraal Beheer Algemeen Pensioenfonds (APF) is onderdeel van Centraal Beheer. Een nieuw pensioenfonds dat vanaf 1 januari 2016 van start is gegaan. De opdracht was om een nieuwe website te maken die een frisse uitstraling heeft en ontwikkel een duidelijke flow die aansluit bij de vier doelgroepen (werknemer, werkgever, pensioenfonds en adviseur). Het hoofddoel van de website is: enthousiasmeren en het verschaffen van informatie.

De ontwikkeling werd opgebouwd in fases. In fase 1 was de focus vooral gericht op de klant, zijn vraag en de content. In de eerst fase werd er een inventarisatiesessie gehouden met de klant, hieruit bleek dat we te maken hadden met vier duidelijke doelgroepen. In fase 2 en 3 stonden de gebruikers centraal. Hier heb ik workshopvormen bedacht waarin de gebruiker werd getriggerd om te kijken wat hij echt nodig heeft. Vanuit de vraag, de gebruiker, de klant, verrichtte SEO onderzoeken en de aanwezige content heb ik een flowchart opgebouwd waarbij niet alleen de gebruiker centraal stond, maar er ook rekening werd gehouden met wat voor een impact dat had op de SEO.

Deze flowchart leidde tot een aantal soorten pagina’s die weer werden verwerkt in een volledig klikbaar prototype. In dit prototype wordt duidelijk hoe de pagina’s worden ingezet en hoe de verschillende elementen werken, zowel op desktop als mobiel. Uit onderzoek bleek namelijk dat de manier waarop content aangeboden wordt per gebruiker moet verschillen, maar dat de content vaak wel overeen komt. Ook wordt er gestimuleerd om het bounce percentage zo laag mogelijk te houden. Door tegen de randvoorwaarden van de klant aan te gaan zitten en alternatieven aan te bieden heb ik de klant ook gestimuleerd om verder te kijken dan deze randvoorwaarden.

Content flowchart
De gebruiker begint bij een algemene homepagina. De website bestaat uit een algemeen gedeelte en een gedeelte waar de gebruiker de mogelijkheid krijgt zijn keuze maakt onder welke gebruiker hij valt. Na het maken van deze keuze, komt de gebruiker op een pagina terecht die aansluit bij die gebruiker. Hierbinnen wordt de gebruiker verwezen naar content die voor hem van toepassing is.

Hierbij heb ik gebruik gemaakt van de tool(s): Axure

Flowchart content interactie ontwerp

Deze website is gemaakt in opdracht van Enof