The Show is Emily Carr University's exhibition show for students to showcase their thesis projects. However, with the constraints brough about by the pandemic, The Show 2020 was pivoted to a virtual exhibition. I was responsible for designing the UI and service of the exhibition site.
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?
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.
Visit The Show 2020 ->
Featured Article ->
The project includes 3 touchpoints: graduate showcase website, documentation, and a ticket system.
16 majors are laid out, with a small preview of each major's works curated by a supervisor is put up to entice viewers to explore further
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.
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.
To better support students, we deliver how-to tutorials through 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.
By talking to my peers, I learned that most people are very stressed out by the thought of creating websites, compounded with the stress of a sudden lockdown due to the pandemic. However, we decided to pursue a website that would encourage students to build their own project pages, as a replacement for the physical exhibition they would have built.
Most university exhibition sites and catalogues have students' work inputed by a third-party who might not be able to convey and realize their creative visions.
Encouraging and supporting students to put up their own works is empowering. Students can be a part of the process and celebrate the works during the pandemic in a safe way.
More than 400 graduating students need a virtual space to showcase their works.
A content management system to maintain a large body of users and data.
Not every student has experience with website builders (Squarespace, Webflow, Wix...).
A tool with a simple user interface and user flow, with an abundance of resources and tutorials.
This website has to be designed and developed quickly, with a simple user flow that everyone can follow.
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.
The design was made very quickly to go into development on WordPress.
Gallery page
We explored a variety of layouts, and landed on a 4-column layout for the main gallery which keeps the page short and easily accessible.
Individual portfolio page
We chose 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 ->
We initially built the gallery for the Interaction Design major, a unique edge case to test with as our initial assumption was that students in this major had moderate experience with WordPress. We wanted to gauge how much resources we should offer to them, to avoid an information overload.
After launching the site and having students use it for testing, our devices were bombarded with Slack notifications, with questions from how to make a post, change colours or add an embed mockup... As a result, we did not anticipate a lot of questions, and ended up not providing enough resources for using the site.
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.
Our initial assumptions about our users' needs were correct. But they neglected very basic questions that should have been addressed (how to make a post, how to upload a photo...). This led us to writing a detailed documentation on how to use the site.
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.
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.
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!
