Showcasing the City

CityStudio

Design from the inside out.

There is no secret that a lot of what design entails has more to do with the unseen that what is seen. Designing for CityStudio is a good example that in order for us to get to the end result or what the audience will see, we need to first build the foundation for which it would stand and shine. More than that, it was a lesson that visual design is but a layer of what purposeful design truly is, which involves the intent, strategy, emotions and user experience along with it.

CityStudio

CityStudio Vancouver is an experimentation and innovation hub that works with City Hall to unite students, staff and community in the creation of real projects that improve the city and enrich its neighbourhoods.

CityStudio Vancouver envisions a website that would showcase many of the collaborative projects they have in hopes to inspire and share their model across people in the city as well as across Canada and around the globe.

This website gallery would also help community members, new students, and other cities access to these great experiments, and for past projects and students to inform and support the work of new projects.

The Challenge

CityStudio recognized the great challenge that lies in showcasing their work across a very broad 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 who are aware and involved with the organization, but at the same time tell the story and process of their projects to encourage and inspire the rest of the public who would not be as familiar of the work that can be done in a meaningful, consistent and engaging way.

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.

At the same time, the website also hopes to give the different members and stakeholders the ability to access the site and publish and edit its content. In order to create such a website, we have broken down the project into two parts:

Allow users to upload projects according to the specific standards that
CityStudio has set to provide consistency and quality across different projects.
Provide an aesthetically pleasing and searchable display of past projects for their viewers that reflects the organization and the city.

The Fifth Why

Before we jumped into the features and particulars of the site, we found it important to first understand the organization and the company’s why. As quick and eager as everyone was to work on the logistics, we understood that we would never really come close to achieving the purpose of the site without us sinking our teeth into the purpose of the company.

We facilitated a golden circle exercise with the company’s leaders and were able to draw up the why for CityStudio which was 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 fifth why was crucial for us in knowing we were in the right path and serving the greater purpose for the user. At the end of the day, it was more than just about sorting projects and showing what was done, we wanted to also tell a story that will inspire people of what could be done and how the city is and can change for the better.

User Persona, Use Case and Scenarios

Previous CityStudio project gallery website.

Research

We then proceeded with the research phase, which revolved around:

Getting a firm understanding of the journey of CityStudio staff and its many collaborators currently have in publishing content and how it translates to their projects gallery through.
The dynamic and interaction amongst the different parties (users) involved in a CityStudio project; from the students to the educators and urban planners
Exploring how the content was being created and managed in such a way that gives structure, consistency as well as inspiration to its audience by doing a site audit, SWOT analysis as well as a comparative analysis with similar organizations.

We wanted to cover a wide scope of people for our interviews and surveys, at the same time, we recognized that the only way to get meaningful insight is by going in depth on their day to day, their goals, aspirations and struggles within the realm of their projects. This had us conducting close user interviews with the different employees at CityStudio, putting out surveys to its user demographic as well as contextual inquiries to various levels of management as to how they used the site.

Affinity diagram categorizing the existing functions, issues, desired project information and challenges.

Brand Exploration

Equally as important for us was to also get to know more about CityStudio as a brand. We gathered existing brand style guides and looked at their marketing collateral as well as toured their office in and used them as references in what we were building visually.

We conducted a brand affinity boards with them for us to dig deeper into the personality, vibe and emotions we wanted to utilize and translated that into the mood boards, inspirations and art directions of the site.

Brand affinity images.

CityStudio branding guidelines.

Inspiration sites our team used for our gut test and design studio.

Key Findings

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, maintenance and publication of the projects, and that of the external users, those who are looking at these projects from the outside.

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.

Primary Persona: Internal User

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. These people consist of the CityStudio staff members, instructors and mentors and the students.

Secondary Persona: General Public

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.

Primary and secondary personas.

Pain points of both users.

Planning & Design

We understood that we had to approach the problem in both aspects of the web site that tie closely together, and by this two-fold examination we would be able to deliver not only a better looking web site but a more impactful, consistent and meaningful experience for both users in their respective realms. This involved us looking into the patterns we were creating and made sure they aligned across the board both functionally and aesthetically.

Early sketches of site.

OOur team reviewing our personas.

Project gallery site map.

Project Gallery: Not Just Pretty

The front end deliverables contained as much form as 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 CityStudio has, but to also be able to search and sort items in the topic and categories they are looking for. It also was a great opportunity for us to utilize the brand and the visual elements and aesthetics it has an incorporate it more to the site.

We created an interface that optimized the real estate of the screen and was highly visual to capture the audience's attention. We wanted to give the user the freedom to navigate throughout the site and explore the projects unobstructed by the navigation, which is nonetheless prominently placed at the top section should they need it. As the research and testing showed us, we wanted it to be as organic and intuitive as we can and empower the user to confidently move freely and ultimately, be inspired by the work and the city.

Front end site navigation walk through.

Sorting, Categorizing, Tagging & Search Functionalities

We created a dynamic sorting functionality that was grouped according to the main categories set by our client and understood by our external users through our research and testing.

The highly visual interface tested positively with users since it was very organic and we utilized the pattern of progressively disclosing navigation and other options to the user as they needed along with breadcrumbs in order for them to move back.

We tested various names, titles and iconography in order to ensure that the main navigation and categorizations worked not only for the staff and those familiar with the project but also with the general public. Through it all we wanted to remain consistent with the brand and used its monochromatic palette in creating navigation patterns and design elements.

Project gallery sorting through city strategy, neighborhood, school and date categories.

Breadcrumbs allow user to go back to their sorting choices as well as refresh option for them to start over.

Tags in the post page allow users to view posts with similar themes. These are create by the content publishes during the creation stage.

Content Manager

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 CityStudio will be setting for their content and guide them in showcasing the projects in a way that was consistent and aligned with the goal of inspiring others. At the same time, the back end needed to incorporate various levels of administrative and editing access to its academic teachers and CityStudio faculty to approve and upload these projects

Students are able to upload their content within a given outline and structure determined by the moderators and staff at CityStudio so that content and structure remains consistent among the many projects, students and schools it manages. Above is the student filling the credits section of the project upload page where they simply enter information about the project that will be visible once it is published.

Guided Content Templates

One of the biggest challenges for users was creating and viewing projects that represented the work in a consistent, standardized way that still showcased the unique achievement. There is no consistency and standards that were 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 within the platform they use to create the project, it paved for a more impactful and succinct showcase across the board as well as less top heavy and bottlenecked workflow.

A student leader within the project is given the access by a moderator to upload their own content and follow a simple three-step process of:

Uploading the cover or banner image of the project
Filling a form that lists the information about the project
Write the project summary and description

The student leader, who can then add the rest of his or her teammates to collaborate on building the post for the project, then submits their entry back to the moderator for approval and publishing.

A project then goes to the instructor, moderator or CityStudio staff for approval and publishing once it has been submitted by the students.

Like most content management systems, the student can add the content similar to a blog post in the description section of the project upload process. They can choose from different types of adjustments, media as well as commenting for them to be able to collaborate on.

Admin, Student Group Interaction

Communication was crucial for these success of this workflow. We created a hub where students, instructors and CityStudio staff can interact, share and delegate roles and responsibilities in the creation and publishing of projects.

Leaders and members are given varying permissions and administrative tasks that spreads the work while allowing them to interact with each other in a content management system setting.

At any given time, a team could be composed of a CityStudio staff, a faculty or moderator and a student team leader, all with various roles and function in creating a successful project.

Moderators have access to create student teams they are managing into the system and grant the student teams permission to start uploading and building their projects by assigning a team leader.

Moderators have the access and capabilities of reviewing the submitted student work, add comments, send it back to the students for edits or send it to the admin for publishing and approval.

CityStudio staff are able to add instructors and moderators into the content management system.

Student leaders given permission and access to create a project can add team members to collaborate with.

CityStudio staff are able to view the moderators list of projects and publish and approve projects on to the site.

Future Iterations

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 in further looking into optimizing the different types of categories we needed to have that will align with the different projects the organization has. At the same time, the iterative process of creating the guidelines and quality control of creating content is something that we can just further build on. Nonetheless, creating both a template and initial framework in content creation as well as refining the gallery to be both functional, creative and on brand was a huge step towards the right direction.