Design

In een project als dit ben je veel bezig met het bouwen van functionaliteiten. Maar hoe gaat het uiteindelijk werken en hoe moet het er uiteindelijk uit gaan zien. Dit vraagt om een design expertise.

Tijdens dit project hebben we met zijn allen keuzen gemaakt over design. Voor we zijn begonnen met de styling(in code) hadden we een heel design prototype in Figma ontworpen.

Design Iteratie #1

Ons eerste design hadden we redelijk snel bedacht. We hebben hier voornamelijk naar gebruiksvriendelijkheid en design standaards gekeken, maar het doel van dit design is om zo snel mogelijk een beginnend prototype te kunnen bouwen. Hier kunnen we later verder op itereren.

Er is ervoor gekozen om te beginnen met een UI kit. Hierdoor was er al een basis van de applicatie die later verder ontwikkeld zou kunnen worden.

In eerste instantie was de primaire kleur van de applicatie zalm-achtig.

#FFBEAC

In dit eerste design hebben we de hoofd-functionaliteiten ontworpen. Dit bestond uit:

• de overzichtspagina met spellen

• Filter voor de overzichtspagina

• Detailpagina met informatie over een spel

Zo zag ons eerste ontwerp eruit:

Design Iteratie #2

Bij ons eerste ontwerp hebben we één hoofdkleur gekozen en we zijn hiermee gaan werken. In ons 2e ontwerp hebben we gekozen om een nieuw kleurenpalet te maken. We moeten tijdens het ontwerpen rekening houden met onze eindgebruiker, leraren in het binnenland van Suriname. We moeten dus goed nadenken over kleurgebruik en contrast. Hierdoor hebben we ervoor gekozen om de zalf-achtige kleur weg te halen en te vervangen door een groene kleur.

Naast kleuren hebben we ook gelet op de gebruiksvriendelijkheid en de ervaring van de gebruiker. Zo hebben we een achtergrond afbeelding toegevoegd die subtiel de jungle vibe meegeeft.

Labels

Binnen de cards hebben we ook goed gelet op de groepering van de labels. Zo hebben we alle labels die dezelfde functie hebben ook dezelfde kleur gegeven.

Gebruiksvriendelijkheid

Voor de gebruiksvriendelijkheid hebben we gelet op duidelijkheid. We hebben niet goed kunnen testen met Surinamers waardoor we ook niet weten of het 100% duidelijk is. We hebben dus de keuze gemaakt om alles zo duidelijk mogelijk te maken.

Wanneer er een filter actief is willen we de gebruikers de feedback geven welke er actief zijn. Dit doen we op 2 plekken, wanneer je de filter geopend hebt zijn de actieve filterknoppen groen. En wanneer de filter gesloten is, staan er "buttons" met de actieve filters. Wanneer je op deze "knop" klikt reset je de desbetreffende filter.

Filter

Per filter kan er gefilterd worden op meerdere items, denk aan balspel en tikspel. In ons vorige design zag deze knop er meer uit als een radio knop (max. 1 optie) dan op een checkbox (meerdere opties mogelijk). Dit moet natuurlijk aangepast worden. We hebben ervoor gekozen om de herkenbare checkbox-box bij de opties te zetten.

Navigatie

In ons eerste ontwerp hadden we al snel een keuze gemaakt om de navigatie onderaan de pagina te zetten. Hier kan je makkelijk bijkomen met je duim en is herkenbaar voor velen.

Omdat deze applicatie gemaakt wordt voor mensen in Suriname, die vaak en kleine, verouderde telefoon gebruiken, hebben we ervoor gekozen om dit anders te doen. Wanneer de navigatie fixed en onderaan de pagina staat zal deze te allen tijde een deel van het scherm bedekken. Wanneer je een minder grote telefoon gebruikt zal dit deel nog een grote oppervlakte van het scherm zijn. Uiteindelijk hebben we gekozen voor een navigatie bovenin. Deze navigatie is niet fixed en maakt gebruik van tekst en iconen in plaats van alleen iconen.

Logo

Een mooie en werkend applicatie is natuurlijk geweldig, maar je mist toch iets... Precies, een logo! We hebben meerdere ontwerpen gemaakt, zo hebben we geëxperimenteerd met apen, olifanten, bomen en vogels. Uiteindelijk zijn wij gevallen op deze toekan.

Na lang zoeken naar de juiste vorm en kleur hebben we gekozen om de Surinaamse vlag in het logo te verwerken. Dit is het uiteindelijke logo: