Select Page

CityStudio Case Study

 

CityStudio is a project incubator for the City of Vancouver. At CityStudio post secondary students have the opportunity to use the city as their classroom, test theories and solve complex problems that face the city every day. Their projects all incorporate varying aspects of city life that can be enhanced by the City of Vancouver’s 2020 goals around social engagement, creating a healthier city and a more livable place for the residents of Vancouver. Projects also have the possibility to be implemented into actual city strategy and be accessible to the public to interact with.

City of Vancouver Mandates here:

Greenest City      Healthy City       Engaged City      Biodiversity Strategy     Transportation 2040

What challenges are CityStudio currently facing?

 

CityStudio faces a few challenges with their current website, citystudiovancouver.com is the primary channel for the public and students to engage with and learn about CityStudio programs and projects. Improving this portal will improve; the websites’ is current difficulties around the lack of a sorting function. The current way the website sorts the projects it does not categorize or catch all the projects in a meaningful way. The current way projects are displayed and organized are difficult to navigate. This causes CityStudio a few problems:

  • It deters future students from applying for the program, because it is difficult to understand what projects and programs CityStudio offers.
  • A lack of a useful search function hinders City Hall’s ability to find projects that could be implemented.
  • Current faculty members have a hard time showing each new semesters’ students what is actually possible, and in turn checking the website against that semesters projects to make sure plagiarism is not an issue.
  • CityStudio also has a backlog of projects waiting to be displayed on the website, but no streamlined process or workflow to upload content.
  • CityStudio also needs a way to represent the work in a streamlined manner that would unify the projects and make all the information easier to access.
  • CityStudio also wanted a streamlined way to highlight and display all the partnership work it does with local Colleges and Universities.

Front End Goals & Deliverables

  • Projects Gallery that will showcase CityStudio projects
  • Sorting, Categorizing and Searching functions to organize the projects
  • Linking, and downloading functions for different media

Back End Goals & Deliverables

  • Ability to create a projects page
  • Establish fields and guidelines in order to provide consistency of content
  • Ability for different students to collaborate in creating projects
  • CityStudio staff and University faculties to be able to approve & provide feedback with the creation of projects
  • Create an easy, seamless experience

Aspects we needed to also consider:

  • Visual Design should tie into CityStudios’s brand
  • Seamless integration with current (Word Press) and new CityStudio website platform (TBD)
  • Website designed for primarily desktop usage, but will need to be responsive to mobile

The research phase:

CityStudio engages many different user groups and audiences in the community. We wanted to interview representatives of these groups to gain a better understanding of their needs. The user groups interviewed were:

  • Past, present and prospective students
  • Faculty members of the “onsite” CityStudio campus instructors, and faculty members of the partnership programs
  • Members of the public
  • City Hall staff
  • Different members of CityStudio staff

We learned that although many people had interacted with some of the more well-known projects, they didn’t fully understand who or what CityStudio does. Teachers in the partnership programs were not happy that they were not fairly represented on the website, this created problems motivating students in their classrooms. As well City Hall wanted to launch more of the projects, but they had difficulty finding appropriate projects.

Quickly it became clear that there are two major user groups in this project.

It followed, that our second persona was the “ internal user”. This group includes those who are already involved with CityStudio – students, faculty members and CityStudio staff. These users would need access to not only the project showcase we would be developing, but also be granted access to manage the backend functionality. This group could potentially develop, edit, and upload content. As well as either send it to be published to the website or be responsible for publishing and maintaining the website.

The first persona that emerged was the “external user”.  This would include: users coming to the website to learn about CityStudio, prospective students wanting to join the program, and others who wanted to interact with projects that had been launched. Additionally, this user could be a City Hall representative who wants to learn more about a project, with the intention of finding work to implement within the city.

Developing the front end:   

On the front end, to meet our external persona’s needs we developed a beautiful gallery of projects photos. This allows the user see all the great work that CityStudio is doing. They can browse through the gallery, hover on a picture for a quick synopsis of the project, or click on something that interests them to learn more.

Now we have implemented a generic search function, with the classic magnifying glass icon that allows users to search by key word. We also developed an easy way to filter the projects in a meaningful way. When activated this filter allows the user search by:

  • City Strategy
  • Neighborhood
  • Year the project was completed in
  • Projects that were still in the development phase

This solves problems around:

  • Learning about the projects
  • Sorting them in a meaningful way
  • Interacting with the projects
  • Checking for plagiarism
  • City Hall finding projects to implement

Developing the back end: 

To meet the needs of the second user group a hierarchy was created that edits the flow needed by CityStudio. This hierarchy flows down first from the CityStudio moderator, to the instructors at both the the CityStudio in house instructors as well as the partner instructors running classes at the different partner schools around Vancouver, and then the students. This flow then reverses as the students finish their projects and submit them to their instructors. Once the instructors have graded and reviewed the projects they submit them on to the CityStudio moderator who can then review the projects and upload them to the website.

 

In this process the students have their own user portal that lets them communicate with each other and their instructors. When the projects are completed they are submitted to the instructors for grading through this portal. This portal is where the students upload the projects pictures, reports and any other deliverables included in the project submission portal on the student portion of the website.

This multilevel system streamlines the process for CityStudio, which was one of their major business goals. They asked us to help them build a template that could be used for project submission, but we gave them much more. With this process CityStudio has all the different projects from all the different schools and programs they work with all in one easily accessible location. Each of the different partners has one location for all their CityStudio work. This streamlines their workload. The partner instructors can also access CityStudio directly as well as work with their students through this one stop shop.

Future iterations:

  • Update website as the City of Vancouver changes and evolves its city mandates, for 2020 and beyond.
  • Develop more imagery for the older projects and have a gallery inside each project information section
  • Develop test and roll out similar versions of the website for different cities globally.

 

When presented to CityStudio and our users, the sort function was found to be original and refreshing. We kept true to the brand by incorporating its signature graphics. Our stakeholders also felt that the new projects showcase would give prospective students and members of the public a clear understanding of what projects they produce. It also presented city hall staff the opportunity to locate projects that could be launched citywide.

The back end functionality and tools were very well received by our CityStudio stakeholders. They appreciated the simplified process of connecting to all their programs and faculty members city wide. They also likes being able to add new projects to the website and edit them as the projects had the possibility of evolving when implemented by city hall.

CityStudio also expressed that this new website and back end development would give them the chance to petition for more financing from the city to produce a better website. This full package showcase also gives CityStudio the opportunity to further their growth as they work in partnership with other cities around the world to develop their own CityStudio projects (Victoria BC is looking to launch their own CityStudio in 2017 and Copenhagen Denmark is also interested in launching their own CityStudio in the future) CityStudio expressed that they may develop this in stages, but we have given them a package to move forward with.

To view the prototype please click here.

We did hand off the project to a web development team that developed the front end of the website for CityStudio. The process for hand off was a great learning experience. Translating our ideas into a package for hand off and then collaborating with the development team was a fascinating and rewarding process. Due to some time restraints we had to make some minor changes to the website which meant returning to our research to see what changes would not compromise our users needs, but met the needs of our development team. Over all the handover process went smoothly and with a few follow up meetings, all our hard work came to life in the hands of our development team.