Multi Device Ontwerp Rotterdam

Dit project heb ik alleen gedaan. Het ging om het maken van een interface voor een app op de iPad, waar boeken op bekeken en gesorteerd kunnen worden.

Spring naar concept

Gebruikte Programma's:

Adobe Illustrator
Adobe Photoshop
Adobe Xd

Design Challenge + Project Beschrijving

"Ontwerp een interface voor een iPad. Op dit interface kunnen studenten van de middelbare school (van 12 tot 15 jaar) in de school bibliotheek een goed overzicht krijgen over de beschikbare boeken."

De Gemeente Amsterdam wil het lezen onder scholieren promoten. Vaak komen scholieren niet meer in de openbare bieb, dus is de enige plek waar ze zouden kunnen
komen en boeken kunnen lezen is de schoolbieb.
Om deze reden zijn in de schoolbieb naast informatieve boeken, ook steeds meer romans te vinden.
‍
De Stad wil middelbare scholieren helpen om makkelijk en snel leesboeken te zoeken inde schoolbieb. Dit willen ze doen met een kiosk-opstelling: een tablet (iPad) die vast bij
de ingang van de bieb staat. Hierop draait een app die de scholier helpt een boek te vinden dat bij hem past en geeft aan waar hij of zij dat boek kan vinden.

Ik werk binnen de huisstijl van de gemeente, maar maak een eigen substijl die de doelgroep meer aanspreekt

De werking van de app:

De leerling kan een aantal criteria selecteren en dan een lijst met geschikte boeken te zien krijgen.
De lijst kan op verschillende manieren gesorteerd worden en eventueel kunnen de criteria opnieuw ingesteld worden.
De leerlingenkunnen gewenste boeken op een ‘wishlist’ zetten en deze lijst uitprinten op een bonnetje of e-mailen. Er hoeft niet ingelogd te worden. De app draait op een iPad die opeen standaard is gemonteerd in liggend formaat
Er hoeft niet ingelogd te worden.

Pagina opzet + informatie verdeling

Omdat ik werkte met gegeven informatie, moest ik eerst deze informatie bekijken en beslissen hoe ik deze ging verdelen. Ik kreeg een aantal paar boeken en genres meegeleverd, en het was aan mij om deze te sorteren. Om het simpel te houden, heb ik mijn interface opgezet als een vragenlijst. Ik heb de boeken opgedeeld door middel van deze vragen:

Leeftijd van de leerling
Soort leesmateriaal
Of de gebruiker voor de lijst leest
Niveau van de lijst
Of zoekfilters toegepast moeten worden

Versie 1

Na het verdelen van informatie ben ik begonnen met het designen van de schermen. Het eerste design was lo-fi in de opdeling van de schermen, en daarna ging ik stijlen verkennen. Voor het verkennen van de stijl heb ik de detailpagina uitgewerkt, die de details van het boek moet weergeven.

Stijlen:

Versie 2

Ik heb gekozen om verder te gaan met de vierde stijl. De stijl sprak mij het meeste aan, en was rustig maar nog steeds vrolijk. Deze heb ik uiteindelijk voor alle huidige pagina's uitgewerkt. Hieronder is een overzicht te zien van de uitgewerkte schermen.

Versie 3 - Final

Op versie 2 heb ik nog wat feedback punten gekregen. Deze punten heb ik op de volgende manieren aangepast:

Het design meer 3d gemaakt (achtergrond en knoppen)
Illustraties toegevoegd
Sorteerprobleem opgelost.
Error-state uitwerkingen toegevoegd en uitgewerkt

Hier een paar close-ups van de uitgewerkte schermen.

De nieuwe schermen zijn hier weer te geven. Er zijn veel schermen bijgekomen, vooral voor het verdelen van de categorieën.

Versie 3 - Stijlanalyse

Na het maken van alle schermen heb ik van mijn eigen gemaakte sub-stijl een stijlanalyse gemaakt. Hier kan je alle elementen en dergelijke overzichtelijk zien weergegeven.

Prototype video - Eindproduct

In het eindproduct werd ook een micro-interactie toegevoegd. Deze is in de volgende video te bekijken. Ook valt daar de interactie te zien tussen verschillende elementen. Helaas heb ik geen toegang meer tot het prototype bestand, dus kan ik deze niet invoegen. Daarom is het in de vorm van een video-opname. De video bevat een walk-through van het prototype.