Bieb in Bloei is een digitaal platform met daarop een overzicht van de duurzame projecten van de Buurtcampus Oost.
De Buurtcampus is een dynamische, laagdrempelige plek waar iedereen zich welkom en uitgenodigd voelt om kennis op te doen, te ontwikkelen en te delen. Met als doel: samen de buurt duurzamer, gezonder en inclusiever maken. Bij de buurtcampus draaien verschillende duurzame projecten; De Stekjes bieb, De Zadenbieb en de Geveltuin. en er komen binnenkort nog meer duurzame projecten bij. Op het platform Bieb in Bloei krijgen deze projecten een gezicht.
Wij hebben de opdracht gekregen om de huidige live bieb-in-bloei website te optimaliseren en te verrijken. Eerder hebben een aantal CMD minor studenten een eigen versie van de bieb-in-bloei website ontwikkelt. Hierin hebben zij geëxperimenteerd met een weather API. Ook hebben ze concepten bedacht als een seizoensthema en mascotte Harry. Het was aan ons de taak om deze concepten in de live bieb-in-bloei website te integreren. Uiteindelijk hebben wij Harry de mascotte geïmplementeerd:
- Mascotte Harry: geeft op een speelse manier tips over de verzorging van de stekjes en zaadjes.
Om de website publicatiegereed te maken hebben wij een projectplan opgesteld, opgedeeld in must haves, should haves & could haves. Voorbeelden van verbeteringen die we hebben doorgevoerd:
- Responsiveness verbeteren, optimaliseren en bugs oplossen
- Contrastchecks doen, en deze verbeteren waar nodig
- Verbeteringen en optimalisatie op componentbasis, zoals goede user feedback, pleasurable user experience, etc.
De oorspronkelijke website van Bieb in Bloei bestond grotendeels uit placeholder-teksten, met een beperkte gebruikerservaring en een ontwerp dat druk oogt en niet optimaal aansloot bij de missie van BiB. De navigatie was herkenbaar maar kon duidelijker en overzichtelijker, veel informatie was overlappend en de leesbaarheid was slechten, de structuur van informatie en indeling van pagina’s was verwarrend voor de gebruikers, de content was niet altijd toegankelijk of uitnodigend voor de brede doelgroep. Wij hebben het project verbeterd door een sterke focus te leggen op gebruikerservaring en emotional design.
Met ons verbeteringen is de website nu gebruiksvriendelijker, visueel aantrekkelijker en beter afgestemd op de brede doelgroep van Bieb in Bloei. Voor een gedetailleerd overzicht van alle ontwerpkeuzes, interacties, kleuren, typografie en aanbevelingen, verwijs ik je graag naar de bijgevoegde Style Guide en Design Rationale (PDF) in deze repository.
ux & ui designer: Alyaman
Dit project is opgezet met Sveltekit gecombineerd met het headless CMS Hygraph. In dit project hebben wij gewerkt met componenten in een Atomic mappenstructuur.
- Clone dit project via github desktop of met
git clone https://github.com/fdnd-agency/buurtcampus-oost.gitin de terminal - Open dit project in je editor
- Run
npm installin de terminal - Run
npm run devin de terminal - Open de link op de localhost.
Om de build versie van de website te bekijken run je npm run build in plaats van npm run dev, en vervolgens npm run preview.