VGDC Website
Community Hub for Student Game Developers
ROLE:
Lead, Technical UI/UX Designer
DEVELOPERS:
4 Designers, 3 Software Engineers
TOOLS:
Figma, Framer, CMS
GENRE:
Website
Overview
Designing for the Student
Game Dev Community
Responsibilites
Design, Implement, Lead
Within the course of 3 months, I was responsible for the leading the from planning to launch of our website, working with a team of 5 designers and 3 implementers, designing and prototyping interactions on Figma and implementing designs on Framer.
My Impact
Central Hub for the Largest Collegiate
Game Development Club in North America
Create a hub for a club of 600+ members to access our resources, bringing a 20% increase in exposure to our club from searches from us alone.
10+ Shipped pages for the website.
Problem Statement
Problem: The community has many highly engaging activities yearly, but the website was hard to maintain and outdated. How might we ensure that our hub stays live?
Preliminary Research
What did we need?
Competitve Research
I took inspiration from other club pages, as well as game studio About sites. What we noticed was:
Main Pros:
Most information was not frequently updated, or auto-updated
Content was quick and skimmable (little animations)
Main Cons:
Loading times took long with heavy animation, and was glitchy
Table of various game development studios and collegiate game dev clubs.
Stakeholder Research
The biggest stakeholders were ourselves, the officers of the club. To better understand, I reviewed what they needed on our website by interviewing them:
Who is this website made for, and what do we need them to see?
By talking to our admin officers and their goals for the future of the club, I realized what they needed most from the website was:
A central hub to understand all the events they hosted that wasn’t scourging through their Discord servers or Instagram.
Our officers!
Design Process
UX Writing
Get your info — fast.
The website is intended to be skimmable, as that was part of the goal. To do this, a big part of our work was to ensure that our website was easily readable, and did this by adjusting margin and spacing between our topics.
Before vs After Readability adjustments: More visuals, information categorized.
CMS Tools
In a team of 60+, Not everyone needs to be in Framer updating.
Because we don’t want to manually update everything within Framer, we experimented with Framer’s CMS pages, to hook up our information to sheets. This way, all our officers are able to easily update their photos, portfolios, as well as workshop time information without going into Framer itself and updating it.
Sheets CMS to Website
Style Guide
Consistent Styling
Because we were working in a remote setting, each person was tasked to design each page. To ensure style consistency, yet freedom to create, we utilized a style guide, detailed with how to use each component to design very early on.
All components completely labeled.
Graffiti style reflecting club Personality
As VGDC is made as a creative space, where people can freely create and share their game projects, we wanted to emphasize that personality through our website style.
Reflection
Organization, organization, organization
This project was rough, especially as this was all of our first times experimenting with Framer, and figuring out the best tools for us.
Reflection #1: Project Management
The biggest thing that really allowed us to ship this project was project management. It was rough, but through organized time management, we were really successful.
Monitoring our weekly tasks, and being flexible to adjust for unexpected difficulties made.
Reflection #2: Meaningful collaboration
Internal pain points were not being able to communicate well internally due to summer break, and confusion over virtual communications.
What was really effective was weekly work sessions , asking questions when needed, and working independently on our own tasks, but being able to ask each other clarifying questions after our stand-ups and check-ins.
This was really inspired by our Game Jam style of working, working within a smaller timeframe for 40% more productivity.
