SOLUTION
A "phase 1" style guide that allows for purposeful yet simple integration of elements for Club Sports at RIT of varying levels of competition/prestige, in order to gauge what elements are most successful and used across 50 organizations.
TASK
Develop a design system for 50+ club sports organizations to use across various logos, apparel, and departmental merchandise; there is a need to create brand unity while promoting club individuality.
SKILLS
Branding, Design Systems, Graphic Design
INTRO
This was my final project for New Media Design Interactive I. Past project examples included mainly instructional sites or storytelling sites. I was inspired by classic point-and-click adventure games, which restrict the user and emphasize the user’s interaction with the content. I was also driven by the character designs and narratives of games like Clue and Danganronpa, so I wanted to also incorporate brand design that highlights my own character designs.
INDUSTRY
RESEARCH
It was initially hard to find a style for the characters, so I decided to design the different rooms of the game first, since these were the crux of the interaction design, and I wanted to make sure they were designed carefully. I pretty easily stuck to creating simple vector shapes because I knew that they would be easily scalable for different viewports, and would have ample options for experimenting with how the user interacted with them, since they would not be elaborate illustrations.
Afterwards, I wanted to make the character designs complementary to the room designs, but still intricate and compelling to emphasize the narrative experience. After some experimentation, I eventually landed on the style.
From there, I developed a style tile that would guide my design decisions for the website.
USER
FEEDBACK
I thought that a linear user experience would be relatively simple to plan for, but I ended up going through multiple iterations of the different UI elements, and how the user would navigate through the house.
One iteration I had given the user a lot of options in how they explored the house, but as I planned for different viewports, it became apparent that there would be too many elements to balance.
I decided to constrict the user flow so that the user can only go back and forth between the different chapters of the narrative, rather than, for example, being able to go back to read the testimonies from the 3rd room. This had many benefits, as the UI was able to be simplified so that the user could focus on the game, the UI was easily scalable, and the simplicity of the user flow emulated the experience of going through the crime scene room-by-room to uncover different clues.
UX DESIGN
I had gone through a few different iterations of how the user would interact with the different rooms to find clues about the crime scene. I initially had no visual indicators of where the different clues were in the room. This was a visually elegant solution, but area mapping using CSS made it relatively hard for this method to be responsive, and through user testing, I found that this method inhibited the user experience. I found most users were confused as to what to interact with, or would simply skip through the page thinking there was nothing to interact with.
The screen where the user tries to finish the game is something else that went through different stages. I initially was just going to make the user select out of the 3 who the killer was, but I quickly realized it would be pretty easy to do trial and error, disengaging the user. By having to type in the specific number, it requires higher user engagement.
TAKEAWAYS
Doing a product design from start to finish allowed me to understand that every part of the design process would have immense influence on each other. Notably, seeing how my user flows had to change in order to spotlight storyline and character design was something that I didn't expect, especially considering I didn't think much variability was possible in a linear user experience.
If I were to do a similar project, I would framework the structure of the website with CSS grid and more JavaScript to make the responsive features were more equitable across viewports.
In this 6 week design sprint, I was able to understand what features of the product had to be prioritized in order to have a finished design.