Wireframes

Aanleiding

Vóórdat er designs gemaakt worden, ga ik eerst aan de slag met het maken van wireframes. Door het maken van wireframes kun je duidelijk zien of alle doelen en functionaliteiten in meegenomen zijn. Daarnaast is een wireframe vaak sneller aan te passen dan een compleet design of een ontwikkelde pagina, hierdoor win je uiteindelijk tijd.

Aanpak

Voor het maken van de wireframes heb ik gebruik gemaakt van het basis Sketch bestand van Buro 3. In dit bestand zijn elementen zoals kleuren, typografie en buttons al toegevoegd en deze hoef ik dus alleen nog maar te wijzigen in de styling voor de productentool. Ik heb meerdere versies gemaakt van de wireframes en alles versies zijn besproken met de projectmanager. De ontvangen feedback is vervolgens verwerkt in een nieuwe versie.

Resultaten

Versie 1.0

Voor de eerste versie van de wireframes heb ik heel erg gekeken naar de huidige website en de styling die gehanteerd wordt. Ik heb de pagina's opgebouwd zoals een website, dus er is een header, de content en een footer te zien. D.m.v. het MoSCoW en de customer journeys heb ik de verschillende elementen en functies in de wireframes verwerkt. Deze versie heb ik vervolgens doorgenomen met de projectmanager en de feedback die ik hierop heb ontvangen is verwerkt in een tweede versie.

Alle wireframes die horen tot versie 1.0 zijn te vinden in de bijgevoegde documenten onderaan deze pagina.

Feedback

Er waren een aantal punten die verbeterd konden worden, namelijk:

• Door ‘werknemer/Buro 3’ aanbevolen producten
• Categorie labels i.p.v. een select optie voor het filteren op categorie
• Een label voor aanbevolen producten
• Contactmogelijkheid op de productpagina bovenin
• Wijzigen knop toevoegen
• Introductie/uitleg toevoegen op de inloggen pagina

Daarnaast kwamen er nog nieuwe ideeën naar boven die wellicht in een latere versie van de productentool terug kunnen komen, namelijk het toevoegen van een gelezen icoontje als de klant de productkaart al eerder bekeken heeft.

Ook moeten de producten die de klant al afneemt bij Buro 3 uit het overzicht met alle producten.

Versie 2.0

In de tweede versie is voornamelijk de feedback van de eerste versie verwerkt. Vervolgens heb ik deze versie wederom voorgelegd bij de projectmanager en tevens ook bij de werknemer die het meeste gebruik gaat maken van tool. Hieruit kwamen verschillende resultaten, de projectmanager gaf aan dat het precies was wat hij in gedachten had.

De werknemer daarentegen gaf aan dat het nu echt als een website was opgezet en hij hoopte dat dit niet het geval was. Ik hoef me niet te houden aan het vaste stramien van een website (dus header, footer, etc.), maar mag hier los in gaan.

Met deze feedback in het achterhoofd heb ik een snelle opzet gemaakt voor een nieuwe versie en deze voorgelegd bij de projectmanager. Hij vond de nieuwe opzet ook goed en hier ben ik mee verder gegaan. Hieruit is vervolgens versie 3.0 gekomen.

Alle wireframes die horen tot versie 2.0 zijn te vinden in de bijgevoegde documenten onderaan deze pagina.

Versie 3.0

Voor de derde versie ben ik op zoek gegaan naar nieuwe inspiratie, want in plaats van een soort website ga ik er een dashboard/tool van maken. Hierbij heb ik ook gekeken hoe mijn eigen CMS opgebouwd is en dit als inspiratiebron gebruikt. Vervolgens ben ik de eerder gemaakte wireframes gaan vervangen door de nieuwe layout.

Ook deze versie heb ik weer bij de projectmanager voorgelegd. Hieruit kwam nog één puntje, er moet namelijk ook een filtermogelijkheid komen op de categoriepagina. Deze feedback heb ik niet verwerkt in een nieuwe versie van de wireframes, maar neem ik mee tijdens het maken van de designs.

Alle wireframes die horen tot versie 3.0 zijn te vinden in de bijgevoegde documenten onderaan deze pagina.

What's next

De volgende stap is het maken van designs aan de hand van de wireframes. Omdat er nu al duidelijke wireframes staan, is het vooral kleuren wijzigen en kleine aanpassingen doen zoals schaduw of hover effecten.