The Scope
Roles:
- UX Research
- UX Design
- Visual Design
- Prototyping
- Usability Testing
Tools:
- Figma
- Google Surveys
- Maze
- Adobe Premiere
- Adobe Lightroom
Team and Timeframe:
Four weeks from initial ideation to finished prototype. While this was a solo project, I regularly consulted with my cohort-mates and teachers at Thinkful, as well as my mentor, Tom Green.
The Background
While it isn’t a widely known series, HER Interactive’s Nancy Drew point-and-click adventure games have had an active enough player base for the company to produce games for over twenty years. With 33 different games to choose from (all with unique settings and plots), there’s no shortage of things to explore. These games garner positive reviews from players and have excellent replay value.
However, the latest game in the series, Midnight in Salem, marked a turning point. Not only was the game built in the Unity game engine — a first for Nancy Drew — but the graphics, user interface, and navigation all underwent a drastic change. Unfortunately, this change was not well received, with the game receiving low ratings from players.
The Case
As someone with a love of these games, I decided to do what I could to help improve the quality of this game by redesigning the UI and improving the gameplay experience. Since the game was already published, constructing a mod in Unity would be the best way to make these changes. When completed, players would install the mod on top of the base game to change the UI and mechanics.
With this in mind, I had three key goals:
- Improve the visual appearance of the UI components (inventory bar, tools, cursor, subtitles, etc.) to match the aesthetic of the old games while still acting as an update.
- Change the gameplay mechanics to resemble the original mechanics, thus preserving the mental models of the previous games.
- Add new accessibility features and improve the existing accessibility measures to create a broader player base.
The Usual Suspects
Based on my own experience as a Nancy Drew player as well as the results of a user survey I dropped in the “Nancy Drew Games” Facebook group, I came up with the following information about my target audience:
- Young adults - specifically millennials - and older.
- Long-time players of the Nancy Drew games.*
- Players of Midnight in Salem.
*For this project, I defined “long-time players” as people who have played the games for more than ten years and have played more than ten games.
The Result
As a starting point for future development, the limited function prototype walks players through a game tutorial, a minigame, and the beginning elements of in-world navigation. It adds several new features, such as a journal (with task list) and a navigational overlay. It’s also visually designed with updated fonts, color scheme, and branding fit to suit the savvy sleuth.
DISCOVERY
Proto-Personas | User Surveys | User Interviews | Competitive Analysis
The Clues
Before I started, I completed a playthrough of Midnight in Salem and took images of the various screens. I would use these in my user interviews, as well as a baseline for layout considerations. In addition, I researched the different iterations of the Nancy Drew UI that HER Interactive has utilized since the series' conception, again for interviews and layout comparisons (as regular players of the series have established mental models that coincide with these UIs).
After this, I began a web search for reviews of the game and videos of game walkthroughs. I could use these to start creating assumptions about what the players might want. Finally, I made two proto-personas to serve as a reference before I collected more data.
After completing my initial research, I created a user survey and dropped it into the “Nancy Drew Games” Facebook page. In the interest of including additional players outside the target audience, I did not use a screener. From the 287 responses, I selected five individuals that fit my target audience to interview. I asked the participants about their experience with the Nancy Drew series in general and Midnight in Salem, focusing on gameplay strategy, most used tools, and opinions on the design of the different interfaces.
Finally, I completed an in-depth competitive analysis of six point-and-click games — four outside the Nancy Drew series and two within that utilized different UIs.
The Findings
Let's take a look at some key findings:
First, most users have the same strategy when playing.
All of the interviewees mentioned using a combination of clicking all over the screen and searching for the red-outlined magnifying glass cursors as a critical part of playing the Nancy Drew games. In addition, many check the journal/task list function during gameplay to ensure they can progress in the game and keep abreast of essential elements or clues.
Current gameplay mechanics in MID confuse users.
The addition of mechanics involving the right mouse button — such as camera rotation and clue interaction — aren’t familiar to point-and-click games and were identified as a pain point by users. It also crops up as an issue of accessibility for users with limited hand function or users playing with a laptop trackpad.
The new black-and-white interface resulted in a loss of information.
With inventory items appearing as white silhouettes in the UI, all five interviewees mentioned they didn’t have the same information as they did in previous iterations of the games. This loss of information compounded when several items in the inventory had roughly the same appearance due to their white coloration.
“Midnight in Salem doesn’t feel like Nancy Drew.”
This quote was a common theme in both the interviews and the survey. The use of the Unity engine, the minimalist design of the UI, the new gameplay mechanics, even the loss of smaller Easter eggs (such as Nancy’s “it’s locked” response to locked doors) disheartened users. While HER Interactive did it in the name of bringing modernity to the Nancy Drew games, the complete abandonment of their previous styles left users dissatisfied.
Similar games have a diverse array of interfaces.
While the mechanics of a point-and-click adventure game remain consistent across the genre, the user interfaces vary depending on content. Some have an ever-present interface on the screen, while others hide them in menus. Functions within the UI also vary — while having an inventory of found items is expected, not all games require found objects. Despite this, skeuomorphism in the visual design UI (such as a valise in The Testament of Sherlock Holmes and the cellphones used in Nancy Drew) seems to be the standard.
DEFINITION
Personas | User Stories | How Might We's
With the data I had collected to this point, I created three personas.
With these personas, I crafted user stories based on the gameplay’s most common complaints and issues. In addition, I brainstormed several questions regarding the design through a “How Might We” exercise.
The Direction
Based on my research and work defining these critical issues, I decided to include the following in the mod:
- Changes to gameplay mechanics to accommodate laptop users,
- A newly-designed UI that reflects previous Nancy Drew design styles,
- A journal and interactable task list, like the older games,
- A more detailed tutorial to help ease the games learning curve,
- A navigational overlay to help players navigate difficult areas, and
- Instructions for puzzles and minigames.
DEVELOPMENT
User Flows | Sitemap | Content Strategy | Sketches | Wireframes
With guidance from the user stories and my defined direction, I created several user flows and compared them to the original:
I also created a sitemap for the mod to establish what I needed to build. At this stage, I also began writing original content for the journal and task list based on the tone and phrasing in the other games.
With all of this in place, I began sketching everything from layouts to initial cursor and logo ideas.
With an idea for how to proceed in place, I was finally able to start building wireframes. As you can see, things are beginning to take shape!
Now that I had a general layout, I could move on to visual design.
DESIGN
Branding | Prototype, v1
The Look
A new UI calls for a fresh appearance. To this point, I began compiling a mood board centered around Nancy and the various locations she’s visited in the series. After all, most UIs in the series appear more than once, so they should fit thematically with several games. First, I looked at the art for the original novels and stills from the series; then found artwork that reflected locations Nancy had visited in the past (castles, catacombs, libraries, etc.). To add a game-specific element, I also looked into images with a fiery or smoky aspect, as Midnight in Salem deals with the suspected arson of a historical monument.
From this mood board, I created a color palette based on both smoke and fire. As red and blue are common to the Nancy Drew games in general (blue is Nancy’s favorite color, after all), I felt this would be a good fit.
With the color palette in place, I looked at the typefaces and logo. For a retro look that’s still relevant, I researched the typeface employed on the original Nancy Drew novels, Lydian (still used for various books today). After this, I turned to Adobe Fonts to look for complimentary typefaces. For the game’s subtitle, I chose Benguiat — a font best known as the title font for Netflix’s Stranger Things, meaning it was perfectly suited to highlight the mystery and drama aspects of the games. In-game, I wanted fonts that were softer, more feminine to represent Nancy. I chose Feltro, a handwritten typeface to highlight the journal sections, and Mr. Eaves as the primary font.
When it came to putting together the logo, I again looked to the past. Every iteration of the Nancy Drew logo included a silhouette, most of the time looking over her shoulder passively. I wanted to keep the profile but update it to a more active position. I felt the Midnight in Salem silhouette was appropriately dressed (no skirt or heels for an 18-year-old who regularly traverses catacombs and sewers!), so I decided to keep that. However, to create the illusion of motion and action, I decided to break from a traditional silhouette and create a windswept effect with Nancy’s hair. I brought her arms up to more active positions as though she were interrupted by something behind her in a dark room.
Accessibility Concerns
As a big focus of this mod was to improve the accessibility of the game, I focused on several areas:
- Widening the line spacing to at least 1.5 times the height of the font,
- Setting a minimum font size of 18pt,
- Adding the navigational overlay for users who have low vision,
- Removing the right-click functions to accommodate users with limited mobility or who play on a laptop,
- Improving the color contrast of the text to be AA compliant with WCAG, and
- Finally, increasing the UI elements’ color contrast (inventory bar, cursors, etc.) to ensure they do not blend with any in-game surface.
I also began to look into creating audio cues, such as error notifications for incomplete tasks and navigation cues to further aid players who may have blindness or low vision.
The Prototype
Finally, with the layout and branding in place, I began development on the prototype:
This prototype had a minimal function by design, focusing on the game’s tutorial (encompassing nearly all of the user flows) and a minigame mentioned by the interviewees.
The Testing
Prototype in hand, it was time to begin user testing. Testing occurred on two stages - with five participants in proctored Zoom sessions and on the Maze testing platform with 67 participants. The proctored participants were hand-picked from the survey (and were members of the target audience), while the Maze participants came from all walks of life. Each test had four tasks to complete, spread over two scenarios. On top of this, I asked additional questions regarding the design during the proctored sessions.
The Good
Review scores of the prototype were generally favorable, as can be seen below.
Overall Usability: 4.8/5
Overall Usability: 4.6/5
The most common comments in the exit interview praised the design of the interface, and many expressed a wish this interface had been the original interface for the game. In addition, the interviewees offered insight into ways to improve the game’s new features, such as adding a “Suspects” tab to the journal.
The Bad
While the new interface was well-received, several issues needed addressing:
- Users expressed confusion due to a lack of sound feedback, such as dialogue.
- The new click-and-drag navigation was not well-received by Maze testers.
- When turning, the available clickable area was too small.
- Lack of error messages when attempting to check off incomplete tasks led to confusion.
- The order of the tutorial left users confused about UI functions early on.
In addition to these specific issues, users expressed several concerns regarding the limited functionality of the prototype.
The Ugly
Despite the wealth of qualitative data gained from the Maze testing, I ran into serious issues with the program, specifically extreme lag not found in the base file due to the prototype’s size. This lag resulted in several problems:
- Combined with the length of the first task, no participants completed the game tutorial flow, resulting in a lack of information regarding the back half of the tutorial.
- Twenty-seven participants dropped from the test overall as a result of the lag.
- Following each task was a question asking to rate the previous flow by its usability. Unfortunately, due Due to the lag affecting the performance, this data had to be thrown out.
DELIVERY
Prototype, v2 | Mockups
The Solution
With the feedback received from the user testing, I built a second prototype. While it still has limited functionality, it expands upon the idea of the navigational overlay, adds a new section to the journal, and re-arranges the tutorial flow to make more sense. I have also included more elements (such as a save page, loading screens, and dialogue boxes) to heighten the game feeling and show off more re-designed components.
While this prototype is larger than the previous one, I feel it meets the original goals and flows I built at the beginning of the project. However, due to the limitations of interactions in Figma, this prototype does not include the changes to gameplay mechanics that were highlighted in the testing.
The Future
As I do want to continue pursuing this in the future, I have several options for development to continue:
- First, develop the mod using the Unity engine. As the simplest solution, this will simply replace the current game UI with the new one and add the new elements I have created in the prototype. Instead of further testing with a Figma prototype, I would switch to alpha and beta testing as I developed the mod.
- Look into creating a ‘remaster’ mod in the Unreal engine, with the option to navigate with WASD keys. A mod like this will improve the graphics and mechanics of the game overall. A game in the Unreal engine will also run better on non-gaming computers (like the ones used by most Nancy Drew players) and allow for more detailed backdrops, like the original games. A remaster mod would be an ideal option based on the reception to a fan-made remaster of Nancy Drew: Treasure in the Royal Tower (also built in the Unreal engine).
- Redesign current and add new achievement badges. While this is a low-priority goal, it would help encourage exploration and involvement, as fostered in previous games.
- Add customization options to the phone. While not necessary, this is a common element of the previous games.
- Look into adding additional accessibility options, such as audio cues.
A Few Final Thoughts
Despite the technical difficulties suffered on the back half, I learned a lot during this project, including, but is not limited to, the following:
- When testing in Maze, the prototype files need to be optimized (compressed images, smaller files, etc.) to reduce lag time.
- Additionally, I should split up any long testing tasks (such as the tutorial) in Maze to reduce the possibility of participant bounces.
- Time management was difficult for this project, given the size of the prototypes and the project’s scope overall. In the future, I should look into further reducing the range of my projects to fit my timeline.
- Building the prototype in a program other than Figma (possibly Adobe XD) may have removed some limitations (i.e., changing the cursor).
Thank you for reading!
Feel free to check out my other case studies: