Work     About



2020 Portshowlio Website


Overview

Every year, the Seattle Central Creative Academy graduating class is tasked with hosting a celebratory Portfolio Show, called Portshowlio. The Class of 2020 was hit with an unusual challenge–we couldn't have a physical show due to COVID-19. Our graduating class split up into teams and tackled the unique challenge of creating a virtual experience in order to showcase the hard work our class has put out over the past two years. 

Challenge & Solution

As part of the web design team for SCCA's 2020 Portshowlio, which was now to live solely online, my team of 7 and I were tasked with creating an immersive, virtual experience to showcase student work. 

Our class collectively developed a theme, which the Branding Team expanded on and developed a visual style for. Provided with this content from the Branding Team, the web team was able to structure an on-brand, immersive web experience that effectively showchased our collective work. 

This process included wireframing in Figma, defining the user's online experience, thinking of creative ways to engage the user, and building the website using Wordpress, PHP, ACF's, HTML, CSS, and Javascript. My primary role was as a back-end developer, working within the Wordpress Admin profile to enable student's to seamlessly upload and display their work on our class website. This required utilizing PHP and various Wordpress Plugins. We also utilized Visual Studio Code, Github, and Local by Flywheel.
Timeline
4 months


Collaborators
Martin Lindberg
Tyler Sporer
Dylan Thurgood
Jenny Flick

Vivian Wong
Christine Chang

Tools
Wordpress
Visual Studio Code
Github
Figma


Roles
Concepting

Back-End Development
Wireframing

First Steps

Our quaint web team, consisting of only 7 members, was led by Martin Lindberg, who did an amazing job of teaching, problem-solving, supporting, and leading our team which eventually wound up being split into a front-end group (Jenny, Vivian, Christine and Dylan) and back-end group (myself and Tyler). 

Before the split, we all got together on Zoom and brainstormed ideas for how we wanted to bring the brand to life in the digital space. After taking note of the basics and determining user stories, must-haves, and overall structure, we began wireframing collaboratively in Figma.

At this point in the process, we had a lot of big ideas. From gamification to complex javascript, we soon realized that these ideas would require a lot of time and not really provide the users with what they were looking for when visiting the Portshowlio website. Because of this, we decided to focus on the storytelling that went along with our Branding team’s refined theme, and make it simple and easy for visitors, both family members and industry professionals, to find exactly what they were looking for. Once the core decisions were refined and nailed down, Martin delegated work between the front and back-end teams.

A final step of the wireframing process, finalized and refined by the Front End Team

Back-End Development: Dividing the Work

With a foundation put in place by Martin, Tyler and I worked alongside him to continue structuring the back-end of our Portshowlio website. 

The core problem we faced was that all 70+ students needed to upload their work to the website: how could we simplify this process, and make it easy and understandable for classmates to upload projects?

Each student was given a profile page and three project pages. As Martin team-hopped between front and back-end, Tyler and I continued building out Advanced Custom Fields for each of the pages that the students would be uploading content to. We used various types of ACF’s in order to provide clear instructions for students and achieve the most simplified, practical display in the dashboard. We then used PHP to pull the ACF’s to the webpage. In addition to the typical image, text, and gallery custom fields, we had the opportunity to make some exciting discoveries in order to make things work the way we wanted.

For example, one accomplishment on the student page was displaying social media networks. We knew we wanted the opportunity for students to add up to four social media accounts, and we wanted to provide a vast selection for them to choose from without having to have them all listed on the dashboard. We were able to utilize a repeater along with “if” statements in the php that would grab only the rows that the students filled out to display on the final page.  
Student Profile Page viewed as logged in student

PHP snippet for social media section

Back-End Development: Additional Discoveries

Another challenge Tyler and I tackled was how to best input, pull, and display the actual content of student projects. We brainstormed a few solutions to this, but ultimately landed on using Flexible Content Layouts. This allowed us more control over the visual design of the final page, while both easing the strain on the front-end developers and providing for some flexibility given the breadth of work our classmates had to display. 

We generated multiple layouts for students to select from, allowing the end product to display an on-brand, dynamic layout that was suitable for projects ranging from photography focused, to text-forward UX. 

Flexible Content layout options viewed as logged in student
Flexible Content Block example viewed as admin
Flexible Content Block example viewed as logged in student