Unfinished Business
UX Design | Programming
Video Walkthrough
The year is 1997.
You are a medium called to investigate a haunted mansion, and the murder of an up-and-coming jazz singer that took place 75 years ago.
❖ Trust your intuition
❖ Hunt for clues
❖ Solve Puzzles
Find out who killed the Prima Donna, and help her ghost escape purgatory.
Overview
Unfinished Business is a 2-D point-and-click adventure game for the PC and Mac. It has elements of a who-dunnit, with puzzle and explorative interactions.
This digital experience was built by a team in 9 weeks.
Our Goal: To create an engaging, rewarding player experience with an impactful narrative.
UX DESIGN
As the UX Designer, I focused on the flow of the gameplay, the experience design of the interactive portions, and facilitating user testing during development. I worked with our UI Designer and Artist to bring these designs to life.
The majority of my efforts went into the design and iteration of the puzzles the player encounters.
Research
During Pre-production, as a team, we researched puzzle adventure games as a genre and their audience.
Hidden Object games have a player base that skews toward older women, but we hope to attract a younger audience with our game's supernatural elements.
For more about our research, target audience, and comparables, please check out our Production Bible.
User Persona
To better visualize our target audience, I created a user persona to understand our player's motivations.
Core Game Loop
The core game loop is the cycle the player experiences throughout the game. This experience essentially provides the backbone for Unfinished Business's user flow.
You can find a detailed user flow chart in our Production Bible.
Wireframes
During Pre-Production, I sat down with our Environmental Artist, Jasmine Mitchell, to plan how the user would roam the game's setting from start to finish. Our artist did a series of sketches to represent the mansion's floor plan. From there, I created a very rough walkthrough in Figma.
 |  |
|---|---|
 |
Environment Layout
_gif.gif)
Figma Visualization
I worked with our UI Artist, Brandyn Harris, to design wireframes of Unfinished Business's screens.
Using these wireframes as guides, I began to implement these elements in the Unity engine as I worked on our game's systems.
.png)
Pause Panel Wireframe
Slide Puzzle Wireframe
Final Design
Final Design
User Testing
Reflection and iteration are the most important when it comes to game development. As both UX Designer and programmer, I was heavily involved in designing, building, and testing Unfinished Business' puzzles.
The Clock
The Concept: Players must explore the mansion to find a scrap piece of paper with a time on it. Players take that paper to the face of the clock, where they must move the clock hands to the specified time.
Functional Wireframe
This puzzle was very challenging to build and unfortunately, this shows in our initial playtests.
The instructions were unclear. Users were unsure what they were supposed to do with the clock.
The users were confused as to how to move the clock hands. I put colored circles to indicate where the users should click and drag, but that was not enough.
A fair amount of our playtesters couldn’t read an analog clock. They could figure out the numbers, but the most common problem was that the users would switch up the hour and minute hands.
So when approaching how to solve this problem, I had to do a lot of leg work on both the design and the code.
I reworked the math on my rotation calculations to improve the motion of the hands, so there was a decreased chance of running into a graphical glitch.
I also came up with a highlighted area, to show up when the player clicks on one of the hands. This highlighted area is there to signal to the player that these are the correct bounds that they need to click and drag inside.
This vastly improved the player experience, and people would quickly catch on to the controls.
It’s effective, but subtle enough to not break the immersion of this narrative experience.
Old version
_gif.gif)
Reworked version
The Slide Puzzle
The Concept: The player must unscramble the ghost's mixed tile paintings to unlock the attic door.
_gif.gif)
Users found that it was difficult for their eyes to follow the tiles.
Some found that the lack of animation made it feel very unnatural and jarring.
This was the first puzzle the player encountered, as many users found this puzzle extremely frustrating.
Taking that feedback, I coded in a simple sliding animation for the tiles as they move.
This little animation was effective.
This flows better, and users would pick up on the tile movement faster, leading to faster solve times.
Old version
However, this was still very difficult for players.
As a result of these findings, we moved this puzzle to be the last one the player will encounter.
Reworked version
PROGRAMMING
As the sole programmer, I was in control of designing game systems, implementing game mechanics, handling user interaction, and anything you can think of.
Game System
This flow chart represents the structure of Unfinished Business.
Game Manager is a singleton that keeps track of the player's progression.
-
When the player completes a puzzle, Game Manager updates to unlock the subsequent environments for the player to explore.
MASTER SCRIPT refers to the script that stores all lines of dialogue in Unfinished Business.
-
When the player interacts with an object or triggers a cut scene, the Dialogue manager calls and runs the coroutine to display the appropriate dialogue from Master Script.
.jpg)
Game System Architecture
Dialogue System
.png)
The d'Dialogue System from the Unity Asset store provided the framework I used for Unfinished Business's dialogue system.
I expanded the functionality of the display system and expanded its unique structure to enhance gameplay.
Functionality was added to display character names and item sprites, as well as change the environment when dialogue is active. It was also reworked to fit into my existing Game System.
The most challenging aspect of developing this system was refactoring existing mechanics and systems to play nice with the asset without breaking any component.
As an example, this is the code that runs when the player enters the upstairs hallway and triggers a cut scene. Lines of dialogue are loaded into an array that is then executed by the Dialogue Manager.
_gif.gif)
.png)