WWDITS – Personal Project
Personas Game Flow Style Guide Wireframes Hi-Fi Mockups UI Motion
This personal project is a work in progress and is still being updated.
“What We Do In The Shadows” is an open world action-adventure RPG based on the popular TV show of the same name.
Take on the role of the show’s various characters in a bid to conquer Staten Island! Complete a range of quests across New York City; defeat rival vampire gangs, stave off unwanted werewolf incursions, beguile and deceive local humans, and increase your neighbourhood renown to secure your place on the Supreme Worldwide Vampiric Council.
User Personas
The first step in this project involved establishing user personas – fictional ‘characters’ that represent the game’s target audiences. They include information such as demographics and Jungian archetypes, as well as key goals and pain points relating to their experiences with games.
These personas help shape and guide the development of my game project, ensuring that I’m always putting my players first.
Game Flow
Once I knew what type of game I wanted to design, and I knew who I was designing it for, I drew up a game flow to help me visualise the key journeys and gameplay loops that players would experience.
Style Guide
Since this project is based on an existing IP with a huge fan base, I had a lot of sources available to build out references and moodboards. The challenge came in narrowing down my options! I was really drawn towards the neon elements used within the show and its promotional materials, especially their contrast against the more traditional, gothic vampire aesthetic. This was a key driver in developing my UI art direction and mission statement.
UI Mission Statement
Taking inspiration from the horror and dark comedy themes of the TV show, What We Do In The Shadow’s UI style is atmospheric and distinctive. Juxtaposing gothic decadence with modern day simplicity, the UI contrasts grungy, antiquated textures and fonts with bold colours and sharp, angular shape language.
Mood Boards
UI Colour Palette
UI Fonts
Tile States & Shape Language
Wireframes
After establishing a game flow, I identified some key journeys and screens that would best showcase the game’s UI and created some simple wireframes. Designing an open world RPG, I had a lot of information and game mechanics to juggle, so establishing a solid foundation of simple wireframes allowed me to keep track of how I was going to present all of this information in a choesive and accessible way.
MockupS
With a solid game flow, UI style, and key wireframes in place, I started creating high fidelity mock-ups to highlight a variety of screens and flows throughout the game. What We Do In The Shadows is an open world action-adventure RPG, so I focussed on screens and UI features that would demonstrate how the player would navigate the world and customise their characters.
COLOURBLIND ACCESSIBILITY TEST
UI Motion
One of the most exciting parts of this project has been creating animations and previsualisations for specific screens and flows. I particularly enjoyed recreating the title screen which pays homage to the TV show’s opening credit, complete with animated bat silhouette transition!
Credits:
- Character renders created using The Sims 4
- Vampire Dagger created by Capritor Studios
- Mansion interior created by RNG Vision
- City Street scene created by ENTANGLED
More of my work
