Full-stack website development for a PSU organization.
ASME at Penn State
UXDC collaboration with Younsoo Park.
Tools: Figma, GitHub, React
Timeline: 7 week sprint, September/ November 2025
Project Overview
We are.. UXDC Penn State!
We are the User Experience Design Club, hosting career development workshops, Figma sponsored events, and design projects.
Our Client: ASME at Penn State
Lead a 7-week collaborative sprint with Younsoo Park to completely re-vamp and centralize the website for Penn State’s American Society for Mechanical Engineers (ASME).
Timeline
Design Thinking Model
Week 1: Empathize
Personas
About: Personas are fictional caricatures of the stake holders of a project. Personas allow us as designers to understand the user’s perspectives, giving us insight into their potential goals and pain-points when using the product.
Team Activity: During our first project meeting, we invited a representative from ASME to speak about the organization and the scope of their needs as a stakeholder. After an in-depth interview session with the client, we split off and began developing individual personas based on what we learned.
Result: The activity allowed our team to better understand majority of stakeholders, and possible under-represented stakeholders. Understanding the user group helped to uncover helped uncover areas for improvement in usability and design on the current website, building a strong scaffold for later weeks.
UXDC x Younsoo: Sending summarized notes to Younsoo to ensure same-page information.
Week 3-6: Define & Ideate
Problem Statement
Based on the professional and ground-level needs of ASME discovered during the empathize stage, we agreed on the above problem statement.
UXDC Gut Designs
About: UXDC Penn State consistently uses Gut designs in each of our projects to help begin conceptualizing solutions. Members individually (or collaboratively) design on git instinct. This process is an exercise in familiarizing oneself with the project requirements and design technology-- no design is right or wrong.
Team Activity: Started with an in-depth analysis of the original website. Then, we each chose a screen size and designed our Gut Designs in Figma. Ended the meeting by discussing elements of each design.
Result: This exercise allowed every member to develop and share their own unique interpretations of the project, resulting in a large pool to pull elements from in the creation of the first prototype. Additionally, this activity encouraged members to collaborate in judgment-free group discussions and offer a constructive environment.
Week 3 & 4: Prototype
Beginning Prototyping
About: Initial prototyping, also known as low-mid fidelity prototyping, often involves creating sketches or wire frames of each interface that will likely be included in the final solution. This process is crucial in developing themes identified from the Gut designs and applying them to the problem scenario.
Team Activity: Started with a brief review of Gut designs. Then, we all separated into groups based on the subsequent tabs discussed in previous meetings. Ended the meeting by integrating feedback into prototyping suggestions.
Result: This activity allowed everyone to work collaboratively on developing in-depth designs. It promoted avid conversation and progress, especially by discussing the legitimacy of design choices with Younsoo to ensure distinct perspectives.
Finalizing Style Guide
Using themes from our Gut Designs and low-mid fidelity prototypes, we selected a possible color scheme, fonts, and shared UI components for the team to continue developing prototype v.0.1. After voting and modifying selected styles, we applied these styles to our designs and continued work on the first prototype.
Finishing Prototype v.0.1
After completing work on prototype v.0.1, pages were modified to maintain a cohesive design. Final modifications to the design guide included improving color contrast to adhere to WCAG accessibility guidelines following a meeting with client.
Week 5: Feedback
Client Feedback & Implementation Plan
Presented our first prototype to the client and received feedback based on realistic use and collective technical decisions between Younsoo and the client. Held a team meeting where improved prototype received in-depth feedback from UXDC members and developer representatives.
UXDC x Younsoo Collaborative Efforts
Provided first prototype CSS and HTML to Younsoo through Figma, allowing technical development progress to start full-swing. Asked for client to provide Younsoo with technical specific information for website development, such as important links, explanatory paragraphs, lists of current sponsors, etc.
Week 6+: Integration
Prototype v.0.2
Continued interdisciplinary work sessions to finish implementing feedback from clients and previous meetings, ultimately settling on a final design and providing new code to Younsoo. Worked on implementing the design via version control on GitHub and testing CMS on Framer.
Integrating Client Information & Planning Integration
After completing the final design, met with the client to tie up loose ends and begin discussions of website integration and turn over. This included gathering specific current information and instructing client on using CMS structure in the final product.
Results
Click this link to view ASME's current website!
Takeaways
What did I learn?
As the primary manager organizing this project, I quickly learned how to identify and adapt to problems when integrating two different teams. Initially, I entered this project with the hope in mind to teach my fellow team members how to operate in an interdisciplinary environment by combining our semester-long project with that of a development-focused club. Additionally, I wanted to shift our club focus to also include implementation as I believe this step to be one of the most crucial for team-to-client interaction. And even though some initial plans fell through, our team still delivered a product to our client that we were proud of.
If you're interested in hearing more about the specifics of my experience with this project, feel free to contact me via my email: skoba.ux@gmail.com
What would I have done differently?
Introduce the shared document for project-related activities during the initial shared meeting
Set stricter definitions for project-related expectations
Request access to development team project work in order to inform furture discussions
Lengthen the project meeting timeline for general UXDC project members to include more backend involvement (i.e., demonstrating DevMode on Figma, GitHub, Framer)
Include more integrated work sessions to better integrate cross-team discussions and promote productivity through solidarity.
Check out my other projects!
