WORKMONDO Magazine
Maison Margaux
Posters
Bob’s Java Hut
Portshowlio Website
Seattle Pickle Co.
Bike Works


PERSONAL WORK
ABOUT

Email
Resume
Linkedin
Instagram


Portshowlio
Website

My Role: Team Lead, UX Designer, Webflow Designer, CMS Manager


Timeline: 12 Weeks (March-June 2024) 

Collaborators: Jeff Murray, Mohammed Adnan, Fawn Chen, Paola Romero, Colten Nelson

Tools: Figma, Webflow




Problem to Solve

As the Web Team lead, it was my responsibility to organize & direct UI, UX, and Webflow subteams to deliver an event website for our graduating class.



Overview
Over the course of our final quarter at SCCA, my team and I created a website to advertise our portfolio event 'Portshowlio' and display our students and selected work samples to the greater Seattle design community. I was responsible for coordinating with other teams to ensure a unified vision for our portfolio event across all channels. Additionally, I worked in the UX and CMS systems of Webflow along with directing the team as a whole.






The Toolkit

Masthead Logo


Logo




Graphic Elements





Typography





Colors










ResearchWe began with a site audit of the past several years Portshowlio websites. We knew we had a lot we could learn from each year, both what they did right and what we thought we could improve upon. We each took notes and came together as a group, ultimately compiling a list of features we believed we would need. We also did a MoSCoW analysis of the website to better understand things we may want to include but ultimately wouldn't be necessary.




ProcessWe created a schedule that we more or less adhered to. This was everyone's first time taking a project live, so it was a learning experience for sure, but once duties were delegated, it was more or less just trying to stay on track and holding everyone accountable for their responsibilities. User testing was conducted once we decided on a basic layout; we did some A-B testing just to give our fellow students some choice in the overall design. The UI team was given carte blanche as long as it fits the overall branding team's aesthetic. As a team, we decided on a black background for the website because it hadn't been done before for the event.



Process




ChoicesSome of the design choices we made early on were informed by things we wanted to improve upon. Chiefly, the use of a sticky side filter on our works and students pages, in order to keep visibility of projects and students front and center. This was translated to mobile by having the filters disappear on scrolling down and reappear when scrolled up. This was all a concerted effort to make the filters less obtrusive in mobile view.

Our second big design decision is on the individual students' pages. Through our A-B testing, we came to realize that most people preferred all their projects viewed on one single page, and people liked scrolling through them. To that end, we created a button system at the top that would auto-scroll you through the projects should you choose to interact with them.

The other key point on our individual pages was having a sticky sidebar with all of that person's pertinent information constantly visible. No scrolling would be needed; all links and information are right there for prospective hiring managers interested in the event to see.





Different Pages




ProblemsI think some of the problems that we found along the way were that none of us had done this before; it was very much a learning experience. We had grand ideas for additional components we would have liked to add to our Webflow site that wasn’t feasible given the timeline we had to finish the project. Additionally, Webflow isn’t as robust as we would have liked all the time, and our use of multi-reference CMS items made it so we couldn’t build in as much functionality as we would have ideally liked. I think most of the issues were addressed well and worked around through sheer ingenuity.



Mobile Views





Final ThoughtsIn many ways, this is the project I'm most proud of. It's the first web project I've had published, and being asked to lead a team filled with many talented students was an honor. I'm really happy with how this website turned out and our incorporation of visual elements to match our theme of 'In Motion'.



©2024 Dunham DeRemer           Seattle, WA