Skip to content
Anne edited this page Sep 21, 2023 · 4 revisions

Definitions of Done & Development-Lifecycle van onze Squadpage

Analyseren

We zijn begonnen met het idee om een kaart van Nederland te maken met daarop pins die linken naar iedereens visitekaartje. Als je bijvoorbeeld op Amsterdam zou klikken zou je worden doorgeleid naar een carrousel van visitekaartjes van iedereen die in Amsterdam woont. Deze ideeën hebben wij uitgewerkt en verschillende schetsen van gemaakt.

Ontwerpen

image8 image2 image4 MicrosoftTeams-image

Ons eerste ontwerp: schetsnl image3 image7 image6 squadpage-ontwerp

Na het ontwerpen hebben wij een breakdownschets gemaakt van ons idee: breakdown-schets2

Toen bleek dat dit idee vrij gecompliceerd was hebben we als team besloten een totaal ander ontwerp te maken met een stapel kaarten. Het idee is dat er een stapel kaarten (visitekaartjes) op tafel ligt waar je op kan klikken. Als je op een kaartje klikt schuift hij naar rechts waarna je vervolgens de mogelijkheid hebt om er nog een keer op te klikken waardoor je naar de github pagina van dat kaartje wordt geleid.

Ons Deck of Cards ontwerp van de homepage:

image0

Bouwen

Na het ontwerpen hebben we voor ons nieuwe ontwerp weer nieuwe breakdownschetsen gemaakt, om vervolgens te gebruiken bij het bouwen van de website. We hebben de taken geprobeerd zo goed mogelijk te verdelen zodat iedereen wat doet. De een focust zich op een overzicht, de ander op een navigatiebar, iemand focust zich op styling en iemand focust zich op de kaartjes.

Breakdownschets Deck of Cards: image1

Breakdownschets van een klein scherm en groot scherm van de View All page: breakdown-viewall breakdown-mobile

Nieuwe breakdownschetsen: IMG_6996 IMG_6997

Testen & Integreren

We hebben onze website live gezet in onze github repository zodat elke gebruiker toegang ertoe heeft. Om te testen of de website werkt hebben wij de website steeds lokaal geopend en gecheckt of hij op elk device responsive was. Ook hebben we feedback gekregen door middel van issues en deze feedback weer toegepast op onze code.

issues screenshot

Onze team canvas

Om te zorgen voor een soepele samenwerking hebben wij van te voren ons team canvas ingevuld.

Team canvas