Background:
Each Graduating class of Seattle Central Creative Academy designs their portfolio show (PortShowlio). Students are divided into teams responsible for every aspect from the physical event, marketing, and social media, to a website highlighting each student’s work. I worked on the website team, specifically on the production sub-team to build the website.
Project Category:
UI/UX
Timeframe:
12 weeks
Collaborators:
Sasha Somer
Lo Bishop
Calista Klein
Tools:
Figma, Webflow, Photoshop
UI/UX
Timeframe:
12 weeks
Collaborators:
Sasha Somer
Lo Bishop
Calista Klein
Tools:
Figma, Webflow, Photoshop
Create a website to showcase the work of the 2023 graduating SCCA class and promote the final portfolio show event.
Process:
Research
We analyzed previous Portshowlio websites according to UX/UI best practices and current design trends, and created user archetypes to guide our main features.
Iteration
We used a collaborative iteration process to find the best design solution. Each team member quickly designed draft wireframes for the website, which gave us many examples to choose from. We collectively picked features that fit our design needs the best, and the design team moved on to developing a high-fidelity wireframe based on these decisions.
Design
Agile Design Process: The production team (myself, Lo Bishop, and Calista Klein) built the website using Webflow, while the design team simultaneously developed the wireframe in Figma to maximize efficiency. We used atomic design principles to create consistency by starting with the smallest building blocks and creating repeatable patterns throughout the site.
Iteration
We used a collaborative iteration process to find the best design solution. Each team member quickly designed draft wireframes for the website, which gave us many examples to choose from. We collectively picked features that fit our design needs the best, and the design team moved on to developing a high-fidelity wireframe based on these decisions.
Design
Agile Design Process: The production team (myself, Lo Bishop, and Calista Klein) built the website using Webflow, while the design team simultaneously developed the wireframe in Figma to maximize efficiency. We used atomic design principles to create consistency by starting with the smallest building blocks and creating repeatable patterns throughout the site.
User Testing
We launched the website internally two weeks early to get feedback from fellow students on usability issues and design consistency.
We launched the website internally two weeks early to get feedback from fellow students on usability issues and design consistency.
Final Design
Agile Design Process:
We started with a 10-person lo-fi wireframe design sprint and a discussion of all the ideas. While the wireframe team continued to develop the design based on group discussions, the production team (Myself, Lo Bishop, and Calista Klein) began building the website in Webflow. This methodology greatly sped up our design process.
Building with Atomic Design:
Starting from the smallest building blocks of typography and color, and combining these into repeatable and customizable patterns in "cards" creates consistency with faster workflow.
Starting from the smallest building blocks of typography and color, and combining these into repeatable and customizable patterns in "cards" creates consistency with faster workflow.
