A case study on CityStudio Vancouver’s Projects Showcase Gallery


CityStudio Vancouver is an innovation hub that connects students with City Hall and communities to create, design and launch real projects. Their core concept revolves around the vision of “the city is the classroom” where students gain practical experience through immersive and interdisciplinary projects that make Vancouver more sustainable, healthy and affordable.

Through collaborative city building, CityStudio aspires to foster the next generation of leaders and change-makers. Students learn the skills necessary to collaborate on real projects and City Hall and the community receives innovative prototypes to advance the Greenest City 2020 Action Plan, Healthy City and Engaged City Strategies.

CityStudio Vancouver is the first of its kind in Canada and unique around the world. It is part of global shift in education that is providing more practical learning experiences to help students get jobs and change the world.


CityStudio recognized the great challenge that lies in showcasing their work across a broader audience with their current website, specifically their projects gallery. They understood the opportunity and significance of not only being able to inspire students, faculty, city hall staff and the rest of the public but to also tell the story and process of their projects to encourage future students and leaders of the work that can be done in a meaningful, consistent and engaging manner.

CityStudio envisions an interactive project database that will allow users to search for projects based on fields such as “Date Completed,” “School & Course,” “City Goal,” or “Neighbourhood.” The website would provide an aesthetically pleasing and searchable display of past projects. In order to create such a website, we have proken down the project into two parts: 
1) Front End and 2) Back End.

The 5th Why
In our UX process, we have this “thing” called the “5th Why.” It’s a part of our project scoping process where we intentionally dig deeper into the core goal of a certain project beyond the tangible deliverables. It’s a crucial aspect in our process of asking the “whys” and uncovering not only the intent of a project goal or scope, but discovering the vision, purpose and spirit that lies beneath it.

The 5th why

The 5th why for CityStudio is to foster the next generation of leaders and change makers. This statement guided us through the rest of the project and became our benchmark. Beyond buttons and pretty user interfaces and functional back end flows, knowing, understanding, embracing our client’s 5th why was crucial for us in knowing we were in the right path and serving the greater pupose for the user.


Much of our research revolved around 1) getting a firm understanding of the logistics and processes of the projects CityStudio has and how it translates to their projects gallery 2) the dynamic and interaction amongst the different parties (users) involved in a CityStudio project; from the students to the educators and urban planners, etc and 3) to explore the journey, pain points and flows of each of these users.

We wanted to cover a wide scope of people for our interviews, at the same time, we recognized that the only way to get meaningful insight is bty going in depth on their day to day, their goals, aspirations and struggles within the realm of their projects.

Below is a breakdown of our research process and project methodology.

Project process methodology


What we found from our interviews are two groups with seemingly unique yet common goals and pain points with regards to the projects.

CityStudio’s projects, as we have found, always work two-fold: one from the point of view of the internal users, those parties who are involved in the planning, execution and publication of the projects, and that of the external users, those who are looking at these projects from the outside in.

Each set of users would have their own unique interaction and purpose for using the site, yet both share the same struggles and road blocks with it in terms of how the projects are showcased.

We understoof that meeting the goals of each set of users will ultimately address that of CityStudio’s main goal, moreso than the other way around.

User goals + Project goals = CityStudio goals


As mentioned above, we created our primary and secondary personas based on the two major groups involved in the interaction with the CityStudio Projects Gallery.

Internal User: Primary Persona
The Internal Users consists of people involved in the planning, execution and publication of projects. Their main goals for the site is to be able to represent their projects as best, consistent and interactive as possible.

External User: Secondary Persona
The External Users consists of people viewing and interacting with the projects from the outside in. They consist of potential students, other cities and universities and the rest of the general public who CityStudio has aimed to showcase their work to and inspire them of what can be done.

Pain Points
Though each user group has a different flow and interaction with the site, their pain points and challenges with the site are the same. It was a dicovery for us just seeing how the effects and strains of the site reflected on both users in almost the same gravity.

Pain points of both users


We understood that we had to approach the problem in both levels and aspects of the web site, and by this two-fold approach we would be able to deliver not only a better looking web site but a more impactful and meaningful experience for both users in their respective realms.

Planning, flowing, discovering

Front End Design: Not just Pretty
The front end deliverables contained more form than function. For this part of the project, we were able to recognize early on that the gallery was not only about being slick and pretty, but most importantly, it had to be functional and allow its users to both be able to browse through the many projects that City Studio has, but to also be able to search and sort items they are looking for. Below is a summary of how we broke down the font end side of the project:

Front end goals

Back End Design: Custom made
The back end deliverables presented its own challenges by way of creating a custom template that will allow students to upload their own project based on standards and requirements City Studio will be setting for their content. Moreover, enabling the academic teachers and City Studio faculty to approve and upload these projects was also something we took on as part of this side of the project. Below is a list of the deliverables for the back end design:

Back end goals

We then went on with a lot of sketching and testing to ensure the functionalities and front end user interfaces met the needs of both users.

Initial back end and navigation explorations


Our final prototypes for both front end and back end was a body of work that addressed the many levels and goals of both internal and external users. At the same time, we brought in a lot of what the brand and company represented in terms of their visual communication, impact and mindset for disruption and innovation.

Projects gallery (Before & After)

Here is a breakdown of some of the major features of the Web Application.

Sorting, Categorizing, Tagging & Search Functionalities
We created a dynamic sorting functionality that were grouped according to the main categories set by our client and understood by our external users through our research and testing. We wanted the visual to shine above everything else to create a stronger impact, which is why we chose to have such a navigation as almost indistinct yet unique at the same time. Tagging and searching allowed each projects to connect to each other and allow for more interaction and progression.

Projects gallery splash page and sorting interface

Customizable Templates
One of the biggest challenges for both users was creating and viewing projects that represented the awesome projects they had. There is no consistency and standard that was carried out in these projects and much of the posting was left to the hands of the CityStudio staff. By delegating the work to the students themselves, and allowing them to create and build their own projects within a certain structure and high level of standards paved for a more impactful and succint project across the board.

Backed custom template

Admin, Student Group Interaction
Communication was crucial for these projects to thrive and be created. By streamlining the dynamic, roles and interaction between students and teachers, teachers with CityStudio staff and students amongst themselves. we were able to create a hub for not only building these projects but for the approval and info dissementation for these projects to be made, edited and launched.

Teacher, CityStudio staff and student admin pages


We had so much fun doing this project, and it was really fulfilling to be able to share and do our own little part in helping CityStudio make a profound impact in the community. Much has left to be done still, and it was important for us to turn over a package and template that would evolve and transform along with the company. Our Web Development cohorts used what we put in place in developing the site into a functioning website as well.

Explore the beta version of the website.

CityStudio + RED Academy team
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.