Game Design and Development at Berkeley
Reimagining a fresh, student friendly experience for Berkeley’s most popular gaming club
Team Members
Darlene Chen
Angela Lee
Halie Sung
Arina Miyadi
Role
Lead Product Designer
Timeline
Sep 2023 -
Oct 2023
Project Type
Client Work
Skills
Prototyping
Visual Design
Interaction Design
Our task to modernize an interface geared for student gamers
OVERVIEW
My team of 4 and I were by tasked by Game Design and Development at Berkeley, a UC Berkeley gaming club, to do a website rehaul within the span of 4 weeks.
As the design lead for this redesign, I handled communicating with the client and navigating my team through the UX journey by initiating weekly meetings to bounce off ideas. I also participated in the design process itself.
We communicated with GDD to know their desired visual direction by asking questions like “What type of visual direction GDD personally want to brand themselves as” or “Are there any specific aspects GDD would like us to particularly focus on during the GDD process?”
GDD’s response revealed their main direction that our team kept in mind for the remainder of our redesign journey of a fun yet minimalistic interface.
RESEARCH AND FINDINGS
Approaching
We researched other students clubs’ (Codeology, Berkeley Legends) and gaming companies’ (Overwatch, Hoyoverse) sites that aim to attract similar audiences. We were able to integrate our findings towards our redesign approach. Our competitive analysis helped us learn how to:
Make interfaces interesting and true to GDD’s brand but intuitive
Incorporate logo colors in visually pleasing ways
Effectively organize info without sacrificing aesthetic
My team and I also applied our design philosophies onto GDD’s current site, settling on these key flaws we wanted to solve:
Too much text: The sites’ paragraphs are too long. Users won’t take time to read all of it.
Unintuitive visual hierarchy: Information of the site isn’t introduced in an effective order
Dated Visuals: The solid color background and typography felt dated compared to other Berkeley clubs’ web interfaces
Below are images of GDD’s original interface for context:
Putting our findings onto the drawing board.
IDEATION
We compiled our competitive analysis and site critiques into sketches of a redesigned home page to lay a foundation for the prototyping process. Writing down notes for our sketches helped with developing our design philosophies moving forward with the rest of the pages.
Nailing the interface, iteration by iteration
PROTOTYPING (LO-FI/MID-FI)
We moved onto our first iterations of lo-fi prototypes in which I had each person individually designed a page of the site.
For the most part, our mid-fis remained the same. Our most major revision was in the staff page in which we altered the design page to be one page rather than a landing page taking you to different board positions. This was done in order to minimize user clicks and keep true to a minimalist interface.
We also changed the font size to be consistent across all pages.
Finalizing our choices of visual hierarchy, it was time to implement colors and assets for the hi-fi prototypes.
PROTOTYPING (HI-FI)
Adding in the fun to GDD
Before committing to a visual direction, my team each produced hi-fis of our vision depicting a fun, minimalist home page to gauge what GDD wanted.
Option A
Option B
Option C
They ultimately favored the visual elements of Option C while containing some of the interface’s elements of the leftmost page.
After hearing GDD’s input, we constructed our hi-fis with the colors and typography of the rightmost sample.
Below are our first iterations of our hi-fi pages we built and presented for a meeting with GDD who were very happy with the progress we made. We also gave them a choice between a darker blue and lighter blue navbar in which they ended choosing the latter.
All that was left was conducting user testing to finalize our product!
USER TESTING
Keeping Accessibility in mind
We had groups of college students test our hi-fi prototypes to get a gauge of how GDD’s target audience would like the new redesign.
There was an overall great reception from the groups. However, one tester brought up how our color scheme may lack readability. They were correct, as we failed the online color accessibility test quite harshly. Another also pointed out how the ‘Bear Jams’ page lacks visual engagement and suggested a slight reorganization of that page.
Thus, we made our final adjustments including adjusting text color for readability and reorganizing information architecture to better student needs.
Home Page
Bear Jams Page
GDD Reimagined
After optimizing for readability and engagement, we have the final hi-fi prototype we delivered to GDD!
REFLECTION
My experience leading a design project for the first time
GDD was a special project for me, as it was my lead designing a UX project which develops some unique reflecting points:
Take the initiative to communicate: My team’s hesitant nature when redesigning GDD could’ve been relieved if I let our client be more involved throughout the design process.
It’s okay to let loose creatively: Being a project manager made me feel greater pressure to play more by the book design-wise. I wish I let my team explore more of the fun wishes GDD had for us.
Readability is key: Being more considerate of our redesign’s readability would’ve enabled us to deliver our final product quicker.
Redesigning GDD was ultimately a successful process, and it taught me what a leadership position looked like in the realm of UX.
Check out my other work here!
Bringing light to unrepresented features for a more enjoyable pickup experience.
USER EXPERIENCE • MOBILE • DESIGN CHALLENGE