Title: Vancouver Plan
Type: Web Development, Web Design, Prototype Design
Date: April 2020
Teammates: Alexandra Grant, Bowie Rheault
During IAT 235 Information Design, students partnered with the Vancouver Plan to help facilitate changes in Vancouver that reflect the community needs. For this project, our group felt it was important to focus on the impact of Vancouver’s high cost of living highlighting the discrepancy between minimum wage and affordability. Users will encounter large interactive display units around the city of Vancouver where they can input their estimated average spending habits and receive a personalized infographic comparing their habits to the database average, collected from the collection of kiosks. Users can download their statistics by entering their personalized code on our website, where they can also learn more about what is driving change in Vancouver. Currently, the website uses placeholder text and placeholder images to show a more broad overview of the design ideas. The goal of the project was to keep people informed about areas of change in Vancouver, while also maintaining the individual experiences of Vancouver at the forefront of the discussion.
My main focus was wire-framing, site-map, initial prototype design/concept, and basic web development, however over the course of the project I wore many different hats and often assisted teammates with their tasks.
The sitemap of our website illustrates the importance of a logical structure of information to our project. To ensure a positive user experience it is essential to have an easily navigable website. With this purpose in mind, we structured the website to go from a general overview of the concept to include specific information regarding the gap between income and the cost of living. The home page provides a general description of Vancouver Plan’s goals, detailing information about the main drivers of change, and then linking out to resource pages with more information. In addition, we added a banner, and subsequent page, for easy access to the code checker and more information on the prototype. The contact page acts as a way to interact with the users and he
The wireframing exploration was an exploration of the design style, and layout that best suited the content of the website. To achieve this I first created a selection of sketches to get a general idea of placement and layout. From here I created high fidelity mockups in Adobe XD to work through the mechanics of the design, such as interactive features, image placement, and text sizing. To ensure a responsive design I made sure to make wireframes for both mobile and desktop size so that the content would be scalable.
We wanted to incorporate the personal experience of the citizens of Vancouver and allow them a voice in the growth of their city. We decided on an interactive unit with the purpose of both collecting and displaying information. To visually separate the selection of options we expanding the colour palette to include a variety of blue to pink colours, and included symbols for easy reference. The goal of the display unit was intended to have users reflect on their spending habits and situate them within the data to see any abnormalities in their lifestyle. We had hoped that the visual presentation of their data may lead them to download their infographic and sharing it on social media platforms.
For the overall design, it was important to incorporate the branding and ethos of
If I were to do this project over again there are two considerations I would take more seriously: 1) the reliability of the data from the display unit interactions and 2) the aesthetics of the website. One major flaw in the concept of the display unit was that the data is only as reliable as its user because it is completely calculated from user inputs. This means it can easily be skewed and inconsistent with real-life results. I would have liked to workshop other solutions that still emphasized individuality, while also conforming to a set of standards. Another area for improvement would be the general aesthetic of the website. Since this was our first time coding a website and learning HTML/CSS we focused on creating a responsive website following proper semantics and best practices. I feel like the trade-off to accomplish this was sacrificing on design elements that could have made the website much more appealing. Specifically putting more time into the illustrations and photos on the website, instead of using placeholder content.