20-somethings are seemingly only good at two things: killing, and lying about killing. Liars at a Houseparty is a web-based murder mystery game where users uncover who killed showboat Liz at her own party.
DESIGN OPPORTUNITY
Develop a responsive web-based product (HTML/CSS/JS) with a linear user experience, an aspect of gamification, and a corresponding brand design.
DURATION
6 Weeks
TYPE
Personal/School Project
SOLUTION
Liars at a Houseparty is a murder mystery web-based video game; uncover who killed 20-something Liz by listening to testimonies and investigating her house.
__________________________________________________________
How can a linear experience keep a user engaged from point A to B?
Being able to walk a user from A to B seamlessly yet creatively is essential to exceptional user experience design. There are a variety of strong physical and digital A-B experiences that I was inspired by. Point-and-click adventure games, which restrict the user, 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.
Branding should immerse the user into the experience.
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.
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.
First Iteration of the Lockup
Final Lockup
Drew
Liz
Mela
Raleigh
UI that strings the user forward and backward.
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.
finished design.
__________________________________________________________
