Retrofitting 101

Type: Information Design Team Project
Client: IAT 235 Information Design, SFU / CityStudio
My Role: Front-End Developer

View Site

In Information Design, the final project was to create an interactive website for the City of Vancouver. The goal of the website was to provide the citizens of Vancouver with facts and information so that they could decide if they should retrofit their house. This was a team project where I focused on the coding aspect of the site, while the other two team mates worked on graphics and body text.

After designing the structure of the website as a team using wireframes, I started to code the contents and design of the page. Initially, I had used an experimental navigation bar that stuck to the right side of the page. A person would be able to navigate quickly around the page. However, the bar covered part of the page content and it did not work well when used on touch devices. So, I chose to go with a more traditional navigation bar. The navigation bar would still stick to the top to help users navigate our page more quickly.

As a team member was creating the house graphic, I realized that we could add interaction to the graphic itself. Because it was created with Adobe Illustrator, the graphic could be exported as a scalable vector graphic, which means that each room in the graphic could be separated while still being a single graphic. I used JQuery, a JavaScript library, to code the selection of each room. I then linked the selection of the parts of the house to a card that would appear.

I encountered the problem of users not knowing that they could interact with the house. I added some code that would make the parts of the house fade in and out, but this was not very effective in further user testing. If I were to continue working on this project, I would look at other ways to help users understand that they could interact with the house.

Overall, this project could use a lot more work in the design aspect. We achieved the goal of creating a functional website that guided people through the process of retrofitting. This project was one of two that were chosen to be showcased at SFU Surrey’s Open House in 2016. However, if I were to return to this project, I would improve my text and colour choices to create a more cohesive design.