Motion Reel

Portshowlio 2020

How can you replace an in-person exhibit experience with an online one?

  • Web Design + Dev,
  • WordPress

Timeline

10 weeks

🚧 This project case study is under construction!

Feel free to look around, just know that I'll be updating this page shortly—see ya soon!

Celebrating two intense years

Every year the Seattle Central Creative Academy graduating class puts on a portfolio show celebrating the hard work everyone has invested in for two intense years. It's usually a fun time with family and friends, beer, networking, and super crowded rooms.

Our class was thrown a curve ball when COVID-19 dramatically limited social gatherings. How could an online experience meet the expectations of an in-person exhibition?

My team

That was a big question for us as an entire class, but especially so for me as the web team lead. Me and my awesome team of Christine Chang, Jenny Flick, Dylan Thurgood, Anna Scordato, Tyler Sporer, and Vivian Wong, took on the challenge with excitement.

Creative Encounters

The branding team, led by Kyra Anderson, did an excellent job crafting a narrative that eloquently addressed our position as students entering this new and uncertain job market—and they developed incredible visuals to match!

The web team worked closely with branding team members Brit Van Guilder and Odin Amador who facilitated the making of web assets and kept us inline with their vision. Also, a special shout out to Chris Kaku who made the many many glyphs that we requested throughout the project.

If you didn't just come from there, check out the site!

Week Two interactive wireframe.

Early wireframes and prototype

In early stages we began to brainstorm ways to engage our visitors such that their experience on our site was at least 10% as exciting as the in-person show. At that point that meant browsing sites like awwwards.com for inspiration. Some early ideas included a retro-futuristic OS a la poolside.fm, or an interactive site that connected visitors similar to paperplanes.world.

We were dreaming big, which was fine in the early stages, but after a virtual whiteboarding session in which we listed and sorted potential user stories, it became clear that those types of interactive websites would detract from the main purpose of our site: helping those in the industry find new creative talent.

Week Seven wireframe.

Weekly iterations

The entire team collaborated on wireframe designs and I would wire them up and present to the class at large the following week.

After reviewing the portshowl.io websites of previous SCCA classes we decided to deviate slightly from their standardized sitemap. Where previous years had all work by one student on a single page, we created Project Pages for each student project to allow for a more case study-like experience.

We continued to explore potential ways to engage our audience ranging from a gamification (a system that allowed visitors to collect glyphs and "spend" as "reactions" to projects and students) to a map of our creative solar system that tracked the visitor's progress.

It quickly became apparent that these ideas were high effort/low impact features. Perhaps more importantly, these ideas ran the risk of detracting from our site's main purpose: helping those in the industry find new creative talent (worth repeating!) Our compromise was a simple statistic tracker that existed in the footer near other "exploratory" features such as "Similar projects..." and "More creatives..."

Simplified student admin panel.
Simplified student admin panel.
A new project.
A new project.

Designing two sites at once

In addition to the front facing Portshowlio 2020 website, we were also responsible for designing the user experience of the WordPress admin panel that students would interact with in order to upload their projects and fill out their profiles.

With our wireframes just about done Anna Scordato, Tyler Sporer and I began work on our back-end. We created the Advance Custom Fields for students to fill out, simplified the WordPress UI for a cleaner UX, and outputted all our necessary PHP variables in anticipation of our front-end HTML and SCSS.

SASSY GitHub teammates

Working remotely we used VSCode and GitHub to share files, and scoped our styles using SASS.

The front-end crew: Christine Chang, Jenny Flick, Dylan Thurgood and Vivian Wong.

Fun times with JS & PHP 🤓

Lots of cool technical things to talk about here... soon!

SCSS for component based files, nested styles, and loops!
SCSS for component based files, nested styles, and loops!

Next time I graduate...

I learned so much in this process! Local/WPEnginge workflow, SFTP, 302 vs 301 redirects, HTML Canvas animations, AJAX, and all the things that can go wrong at the last minute...