About the Project

In my information design class, we were tasked with creating a responsive website for the City of Vancouver's School Active Travel Plan. To complete this responsibility I led a group of two in wireframing, designing and coding the website. In this project, I led my group largely in the desktop portion of the design. In doing so, we used Figma for wireframing and several iterations of our mockups. For the coding portion, we used HTML and CSS to put or mockups on to a website hosted on SFU servers.

Tools Used: Figma, HTML, CSS

Wireframing

Screenshot

Code

Code

The Process

Starting with our wireframing, we used Figma to jointly work on the skeleton of our design where I mostly focused on desktop while supporting my teammate on the mobile design. We applied a mobile-first design approach and started with the smaller design as we felt upscaling to desktop would be easier than downscaling our layout.

We both gave input to each other while working on our separate portions and adjusted elements to keep a coherent design. We then transitioned as a team to mockups where we ended up changing a lot from our initial plans. We made several mockups until we were happy with our result and following this, we presented our design for feedback. Designing as a team was a difficult task but getting critiques from teaching staff as well as other students helped refine our process greatly. Some of the critiques we applied to our design would be leaving more white space between text and edges, adjusting mobile text to improve readability, and more.

When we finished with our mockups, we coded the final product with HTML and CSS. There was a lot of trial and error to progress through the coding portion especially as we had to keep the page responsive and consistent from desktop to mobile phones. Experimenting with CSS grids was definitely one of the more tedious parts of the project. Lastly, we ran our code through HTML and CSS code validators to ensure our code was error free.

School Travel Plan Site

School Travel Plan

Outcome

As this was my first time designing and coding a website from scratch, I learned a great amount in this experience. I developed my UI/UX design skills while also learned a lot about interaction design through the various stages of testing our prototypes.