︎

Work     About

2020 Portshowlio Website

Back-End Development | Web Design 

Every year, the Seattle Central Creative Academy graduating class ihosts a celebratory Portfolio Show called Portshowlio. Unable to host a physical show due to COVID-19, the Class of 2020 created an immersive online experience that showcased our student work.

My primary role was a back-end developer on the web team. I used the WordPress Admin profile to create a streamlined process for students to design a personal page and display their work. This required utilizing PHP and various WordPress Plugins in addition to Visual Studio Code, Github, and Local by Flywheel.

I also assisted the team with wireframing in Figma, defining the user's online experience, thinking of creative ways to engage the user, and using WordPress, PHP, ACFs, HTML, CSS, and Javascript to build the final website.

First Steps

Our small, 7-member web team was led by Martin Lindberg, who did an amazing job leading our team that was split into a front-end group and a back-end group.

Before the split, we brainstormed how we could effectively bring the brand to life online. 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 ranging from gamification to complex javascript. We realized that these features wouldn't benefit users, so we shifted our core focus to creating a narrative that was cohesive with the Branding team's refined theme.

Ultimately, our main goal was to make the website accssible for both family members and industry professionals.
Two final pages from the wireframing process, finalized by the Front-End Team

Back-End Development: Dividing the Work

With a foundation put in place by Martin, my teammate Tyler and I worked alongside Martin 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 hopped between the front and back-end teams, Tyler and I built out Advanced Custom Fields for each of the pages that students would be uploading content to. We used various ACFs to provide clear instructions for students and to achieve the most simplified, practical display in the dashboard. We then used PHP to pull the ACFs to the webpage. In addition to the typical image, text, and gallery custom fields, we made some exciting discoveries that aided us in making the user experience more functional.

For example, one accomplishment we made on the student page was displaying social media networks. 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 them all listed on the dashboard. We utilized a repeater along with “if” statements in the PHP that grabbed 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 content students uploaded. We used Flexible Content Layouts, which gave us more control over the visual design of the final page. It also eased the strain on the front-end developers while providing flexibility for the variety of work our classmates had to display.

We generated various layouts for students to choose from, allowing their final pages to display an on-brand, dynamic layout suitable for projects ranging from photography-focused to text-heavy UX.
Flexible Content layout options viewed as logged in student

Flexible Content Block example viewed as an admin Flexible Content Block example viewed as logged in student