Online Grad Show:

Celebrating Work during a pandemic

Using digital solutions to build community and solidarity

View Live Site ->

April - June 2020

Emily Carr University of Art + Design

Service & UI designer, copywriter

June Tang, Evan Craig, Janani Ramesh, Arjun Menon, and Thejus Kayanadath & Haig Armen (supervisor)

Problem

The pandemic Covid-19 has led to the cancellation of both ECU’s annual convocation ceremony and graduate exhibition. How might we still celebrate our hard work and 4-year journey with one another?

Solution

Along with my friends, we created an online gallery to showcase the work of Interaction Design students. The project was commissioned to be expanded into multi-major gallery for the entire student body of the class of 2020. My contribution to this project ultimately created a clean UI, with a streamlined work process and supported students in their usage of the site.

celebratory Landing page

The landing page is minimal, with focus on the different works categorized by majors. A small preview of each major's works curated by a supervisor is put up to entice viewers to explore further!

Showcase Gallery

Each site is a collection of works by the student body, with categories to sort and a search function to look for specific works. The order of the works are randomized each time you log onto the site, making it fair for every student on the site.

The 4-column grid allows the page to be accessible to viewers, also reducing the chance of any students’ work to be left at the bottom of the page.

A “search” function is added to help visitors look for their friends or family members’ work.

Individual Project Page

For each project, we created a basic template for students to edit for their own pages. This helps as a starter for users; it streamlined the content for each project description, and created uniformity across all project pages for reader accessibility.

With WordPress being a flexible platform, students can also customize their own posts.

Documentation & Tutorials

In order to better support students, Thejus and I created a documentation of questions and how-to tutorials at http://handbook.ecuad.ca/. This site serves to communicate information to both students uploading their grad projects, and curators of the site.

The content for this site is being constantly updated based on the questions we receive from students and faculty.

Process & Insights

visualizing the overall service

The project includes 3 touchpoints: graduate showcase website, documentation, and a ticket system. I made a service blueprint to visualize the overall process of conducting this service that accompanied this website.

Click on image for a better view ->

Rapid User Research

The time frame for this project was very short. We understood that a gallery site has to be built soon, with an upload process that's streamlined enough for our peers to post our works up. Because of this, it was important to identify our needs to design for.

Most university catalogues have students submit works to a curator. Their works then get inputed by a third-party who might not be able to convey and realize their creative visions. -> Having a work process that allows for students to put up their own works can be empowering as it lets the students be a part of the process, something that was disrupted by the restrictions of a pandemic.
More than 400 graduating students need a virtual space to showcase their works. -> We need a CMS to maintain a large body of works.
Not everyone has experience with websites such as Squarespace, Webflow, or Wix... -> We need a user interface that is simple, with lots of tutorials.
A website has to be designed and developed quickly, with a process simple enough for the vast number of students to quickly grasp. -> We need a posting process that is very simple for students to easily understand.

With these insights, we decided to choose WordPress as our CMS because of its familiar user interface, customizability, and abundance of resources.

Rapid Prototyping

The design was made very quickly to go into development on WordPress.

For the gallery page, we explored a variety of layouts, and decided that a 4-column layout for the main gallery keeps the page short and easily accessible.

For the individual portfolio page, we experimented with a minimal design, with a large hero image, and clear sections to help minimize content and extra work for students.

Narrator's voice: The wireframes were developed by my teammates Arjun Menon and Janani Ramesh. I have summarized them visually here ->

Receiving feedback and designing for a lot of users...

We initially built the gallery for our own Interaction Design major first and used it as a testing site. Problems quickly revealed themselves to us! Our devices were bombarded with Slack notifications, with questions from how to make a post, to things like changing colours or adding an embed mockup...

Our initial assumptions about our needs were correct. But they neglected very basic questions that should have been addressed.

We need to include instructions on how to upload a variety of materials, so that students from a variety of majors can best utilize this website.
Even though there are lots of tutorials online, having a documentation dedicated to users of this site is a lot more specific and therefore helpful.
We need to set up a support system to assist with more specific questions from students.

building a documentation and a tech support system

We set up a handbook for FAQs and onboarding for the site, and a ticket system to take in more specific technical questions. These two elements supported each other in helping us gauge students' usage process of the site. In creating this, we also wanted to create a legacy for future graduating students to build upon and document their works.

Copywriting the Documentation

The guidebook is a documentation that is constantly revised and updated. While writing this, we carefully consider what our users, students, would need to have a delightful experience using the website. This required a documentation that is specific, with screenshots, with a logical flow of content to walk users through making a post.

We have different questions, from the most basic (how to make a post, add a video...) -> more complicated questions (editing CSS, adding codes...). Our documentation also has a section for curators to review and ensure quality for the site.

This project teaches us a lot about thinking on our feet, as people will come in with various issues and you have to adapt very quickly. Keeping our writing understandable and concise is key in maintaining a clean document, so that it can be easily updated for the later years.

Conclusion

This project has taught me a lot about working in an agile and constantly evolving environment. However, most importantly, I feel very lucky to have been able to turn it into a reality. The gallery site is a space to look back at all our projects together, even without the physical space that we once inhabited. I hope it serves as proof that we can get together in this time of distancing, just in new ways.

Thank you so much for my Interaction Design friends who have worked so hard to make this a reality!

Independent Contractor / The Show 2020 / Teaching & Learning Centre