Fitphone

Omdat we met een groep van 12 mensen werken hebben we de eerste week kleine groepjes gemaakt waarbij ieder groepje een eigen design maakt. Ik ben begonnen aan het maken van designs voor de onboarding en een minimaal design voor het dashboard op basis van de details die al bekend waren bij ons.

Vervolgens hebben we de schetsen besproken en gekeken welke elementen wij terug willen laten komen in de prototype. Op basis hiervan zijn we wireframes gaan maken zonder enige kleur zodat de stakeholders een visie hebben van hoe wij denken welke pagina’s en elementen er allemaal aanwezig moeten zijn.

Voor het maken van de wireframes hebben we inspiratie opgedaan van het design van vorige semesters. Omdat dit design er al lag hebben wij besloten dat we de meeste schetsen kunnen recyclen. Na het tonen van de wireframes aan de stakeholders en het ontvangen van feedback zijn we begonnen aan een definitief prototype en branding.

Branding

Er is onderzoek gedaan naar een passend kleurenthema voor het Fitphone project. Omdat wij de gebruiker willen stimuleren en een prettige ervaring willen geven zijn we uitgekomen bij rood of oranje. Uiteindelijk is er gekozen voor oranje omdat dit een iets vriendelijker uiterlijk heeft.

Ik heb een logo ontwerp gemaakt naast twee groepsgenoten. Deze drie logo’s zijn op een publieke Discord server gezet waar 2000 mensen hebben gestemd op hun favoriet. Mijn logo is heeft de meeste stemmen ontvangen met ~1000 upvotes.

Met het toevoegen van de kleur en finetunen van de designs is er een werkend prototype ontwikkeld in Figma waar wij met 4 man aan gewerkt hebben.

Hybrid

We hebben besloten om een retro-like walkie-talkie te maken. Hiervoor hebben wij oude walkie-talkies opgezocht ter inspiratie voor ons design. Enkele uitdagingen die wij in het design hebben verwerkt zijn:

• Hoe laten we aantal gebruikers zien die in dezelfde channel zitten
• Hoe tonen we aan dat iemand anders aan het praten is

Deze punten zijn verwerkt in onze eerste iteratie

De walkie-talkie heeft een display waar het aantal users op weergeven wordt, samen met de frequentie van het kanaal. De originele walkie-talkies hebben een soort ‘rooster’ wat ons ideaal leek om aan te geven of een ander persoon aan het praten is, bijvoorbeeld door deze rood te maken. Tijdens het uitwerken van de design in onze app bleek het te veel tijd te gaan kosten dus hebben wij gekozen voor een subtielere oplossing.

Android

Toen we eenmaal een duidelijk idee hadden over ons concept zijn we begonnen met het maken van een aantal wireframe. Voor de wireframes hebben we inspiratie opgedaan van Curve Fever. We zijn begonnen met een simpele layout van een finish line en wat lijnen voor de verschillende spelers.

Met dit ontwerp was het heel duidelijk hoe je er als speler voor stond, maar er was geen duidelijke indicatie van wanneer je wel en wanneer je niet mag bewegen en hoe dicht je tegen eliminatie aan zit. We hebben geprobeerd een rode wave toe te voegen boven het scherm die woest zou golven naarmate je meer bewoog, maar dat vonden we niet geschikt.

Uiteindelijk gingen we voor een rode waas rond het scherm om de intensiteit van je beweging aan te geven, zoals in sommige shooter games wanneer je beschoten wordt.

Het enige probleem was nu dat de lijnen (de spelers) geen duidelijk doel hadden om te bereiken. Het implementeren van een cirkel hielp hierbij, aangezien je zo meer spelers kunt tonen en goed kunt zien of je de cirkel bijna rond bent en, naar onze mening, zag het er mooier uit.

iOS

We wouden graag met AR werken voor ons iOS project, we zijn geïnspireerd door de video van de kickoff met als onderwerp de Apple Glasses en alle toepassingen. Wij dachten gelijk dat het leuk zou zijn om ons te richten op het tonen van extra informatie aan gebruikers in hun dagelijks leven. Onze belangrijkste focus is in dit geval het tonen van extra informatie over muziek (LP's) aan gebruikers wanneer ze een album cover zien. Omdat de brillen nog niet bestaan hebben wij er voor gekozen om de camera van een iPhone of iPad te gebruiken om aan ons concept te werken.

Concepting

We besloten dat we wat basisinformatie over een album wilden tonen, zoals titel, artiest en tracklist. Hiervoor hebben we een eerste schets gemaakt

Eerst namen we een eenvoudige afbeelding van enkele albums om te spelen met mogelijkheden om een indicator weer te geven dat er info beschikbaar was. We kwamen er al snel achter dat een cirkel in het midden het beste werkt. Om aan te geven dat het om extra informatie gaat hebben we er ook voor gekozen om er een pijl naar beneden in te zetten.

De volgende stap was het displayen van de informatie. Omdat we maar beperkte ruimte hebben, namelijk de grootte van een LP, moeten we de informatie op een slimme manier tonen.

Voor de onderste balk hebben we de "gemiddelde" kleur van de cover art gebruikt voor de juiste feel. Het kruis is om de info weer te verbergen en met de pijl willen we een groter element laten zien met tracklist.

In het grotere element willen we de volledige tracklist van een album tonen en gebruikers de optie geven om het album te openen via Spotify. Alleen tekst tonen zag er saai uit, dus probeerden we de cover art er opnieuw in terug te laten komen. Om er zeker van te zijn dat de tracklist zelf leesbaar was, kozen we voor een zwarte achtergrond, om er zeker van te zijn dat de tekst leesbaar was. Maar na wat user feedback gaven de meeste mensen om ons heen aan dat ze het mooier zouden vinden om de gemiddelde kleur van de album covar te pakken. Dus kozen we ervoor om dat te gebruiken in plaats van de zwarte achtergrond.

Hier is een video van de Figma demo:

En alle album covers die we getest hebben (met edge cases):

Realisatie

Tijdens het ontwikkelen hebben wij geprobeerd om het design na te maken zoals in Figma. Al snel kwamen wij erachter dat het tonen van de tracklist informatie zoals Figma vrij ingewikkeld was. Wij hebben er voor gekozen om de tracklist informatie te tonen in een pop-up modal. In de huidige situatie is dit een goede oplossing aangezien het voor mobiel en tablet gebruikt kan worden.

Freaky Friday

Voor mijn freaky friday project ga ik een NS bord maken wat je ergens in je huis op kunt hangen aan een extern scherm. Ik ben op dit idee gekomen door te gaan kijken naar mijn ochtend gewoontes. Ik check namelijk elke morgen of de trein vertraging heeft en daarnaast wat voor weer het is zodat ik weet of ik een paraplu mee moet nemen. Verder heb ik altijd al iets met een raspberry willen doen dus daaruit is mijn idee ontstaan.

Ik wil dezelfde look en feel aanhouden van een echte NS monitor en daarom heb ik er voor gekozen om deze na te maken: