Kyle Johnson
Pharaoh's Purse: Tower Defense Game  
      A tower defense game designed in a pixel art style, developed by MemeRegime Studios. It's Inspired by Ancient Egypt and has a tone described as both "witty, and 'off-the-cuff' ".  Usability, Accessibility, User Retention and on-boarding were issues with the initial build. MemeRegime lamented that their ineffective UI stemmed from their developer background and lack of resources and were eager for assistance from a small team of scrappy UX/UI students. A primary gameplay mechanic is that you have to spend gold to build towers but if you run out of gold it's game over.
Problem Statement:
Problem 1: 
Usability, Accessibility, User Retention and on-boarding were being negatively effected by the existing UI.
Problem 2:
MemeRegime is a small developer-minded team. Aside from handling the interconnected complexities of code and game design, they were additionally faced with the daunting task of creating and programming in-game UI. 
How might we improve the gamer's experience by prioritizing usability and accessibility?
• Identify and begin to improve user pain points.
• Conduct an accessibility audit.
• Run as much user testing and A/B analysis as we could within 3 weeks.
Potential Users | Target Audience
      From correspondence with MemeRegime and our initial survey we were able to ideate a target audience of PC, Web and Mobile gamers in the Millennial and Generation Z demographics. They would be motivated by nostalgia, interested in strategy or indie games and have familiarity with newer games utilizing a pixel art motif.
Project Requirements Make this into a 3 up graphic.
• Client requested deliverables to be in a Pixel Art style and to reference Ancient Egypt. 
• Client stressed they were needing the most help with the tutorial and help screens.
Roles + Responsibilities
• User Flows
• User Testing
• Research 
• Usability Testing
• Visual Design
Scope and Constraints
Timeline: 3 weeks
Budget: pro bono
Tools Used: Figma, Notion, Google Suite, Whimsical, Loom, Zoom, Maze, Agile
• Dependent upon developers and pixel artist's timeline(s). 
• Coordinated meetings across several different time zones.
• Dependent upon user interviewee schedules.
Process | Discover
Research Methods:
• Screener Survey
• User Interviews
• Competitive Analysis
• A/B Usability Testing
Screener Survey:
• Have you played any tower defense games?
• Do you enjoy playing tower defense games?
     83.3% of participants have experience and enjoy playing tower defense games and expressed having an affinity for unique aesthetics and gameplay. We included demographic questions and utilized this survey to generate a contact list for additional user testing. We were able to generate personas pulled from quantitative data as well as insights pulled from follow-up interviews.
Initial UI Tested
Scenarios Tested:
• Read the story
• Have them go through tutorial mode
• Play through eight waves on the first map
• Users felt the main menu call to actions were too small to be legible.
• Additionally, Users were unsure as to why the menu buttons were not aligned.
• Users found issues with the clickable area of the volume slider.
• Users were unsure as to why the logo obstructed the background art.
• One standout user quote in regards to the composition was, "Why does the P in the logo look like a Cheeto™?"
• Users reported extensive problems with legibility.
• Users tended to exit out of the story immediately.
• The text styling of the main paragraph of text broke accessibility standards by using a decorative, display typeface as a body typeface.
• The  text styling of the main paragraph broke accessibility standards as it was set in Papyrus.
• Users were unsure as to what the color coding implied.
• Users noticed the "next page" call to action was not centered.
• Users did not have any way to exit to desktop or go back on this screen.
• Users found the "Tut"-orial pun funny, but additionally confusing.
• While Papyrus was used properly in a visual design context, a visually impaired user reported extensive issues with legibility.
• The menu buttons offered overviews of the maps, but users reported they would like more information in regards to gameplay elements of each level.
• Users lamented that there was not a clear hierarchy in regards to the difficulty of each level and often tested on harder levels rather then the tutorial.
• The radio buttons did not read as a toggle.
• The majority of users skipped past this screen instantly and reported text was not legible.
• The "Continue" call to action was hard to read due to issues with contrast.
• The text styling broke accessibility guidelines as it was a decorative typeface used as copy.
• Users reported feelings of high cognitive load due to the layout and felt this screen could use less negative space.
• Users found playability issues as the shop menu obstructed the field of play.
• The shop menu did not read as collapsible, and when collapsed it had to be toggled again to use.
• Call to actions were hard to read and engage with due to issues with contrast.
• Users were unsure as to how to progress and noted that there was not a clear indicator of progression.
• Users were unsure as to how gold affected gameplay mechanics, and felt it could be more effectively displayed in the shop module.
• Main call to actions and gameplay elements were obstructive to the gameplay area.
• Users found frustration with not being able to pause the game.
• A visually impaired user found the color palette unaccommodating. 
Followup Interview Questions:
• What is the biggest pain point for you?
• What can be done to improve your experience with the game?
• Did you struggle to determine how to play the game/what the goals are?
• Are there portions of text or areas of explanation you find confusing or that can be simplified
• Did you find the colors to be difficult to differentiate?
• How did you manage navigating through each page?
• Were the transitions smooth and simple to understand?
• There is something that makes this tower defense game unique, can you identify it?
Qualitative Data ( User Quotes) A:
• “How did I die?”
• “How do I know how hard each level is?”
• “Not in love with the font!”
• “I don’t know nothing is clear?”
• "Why does the P in the logo look like a Cheeto™?"
• *Skips through instantly*
• "Where are the health bars?"
• "Is that me behind the gold?"
• "Am I winning or losing?"
• "How do I start the next wave. Also, what wave am I on?"
• Users had extensive difficulties with text readability..
• Knowing how to play the game was not intuitive.
• Tutorial was not clear and users skipped through it due to high cognitive load.
• Users could not enjoy gameplay due to usability issues.
• Users who were gamers reported enjoying the gameplay itself, but non-gamers reported feelings of frustration and high cognitive load.
• Users were unaware of the "gold as health" gameplay mechanic.
• Users were unable to develop strategies or be receptive to the unique worldbuilding due to ineffective UI.
By making design decisions around the needs and frustrations of users we can:  
• Develop more effective UI.
• Qualm issues with playability.
• Shine a spotlight on the unique heart and spirit of Pharaoh's Purse .
Process | Define
User Personas:
     Insights from aforementioned user interviews and survey screens allowed us to ideate personas and attune to the needs, actions, values and emotions of our target audience.
Empathy/Journey Maps:
User Scenarios
• As Danny I would find Pharaoh's Purse on
• Effective Tutorial and gameplay mechanics capture my attention.
• I start to stream Pharaohs Purse on my twitch channel.
User Flow
• As Morgan I would: read the story to learn more about the world of Pharaoh's Purse and go go through the tutorial mode to begin crafting a strategy.

• As Danny I would tab through the tutorial and story impulsively play through eight waves on the first map and express my observations on my twitch stream. I would probably revisit the tutorial after feeling immense confusion.

     I updated the user flow from the initial build to incorporate the requested tutorial screens, requested overlays from user's as well as to understand and better communicate the potential path's user's would take. 
Process | DEVELOP
     Four up Sketches I created after revising a user flow to include more helpful tutorial overlay's. Sketching helped me ideate screen real estate as well as quantify the amount of screens and overlays needed for the eventual digital prototype.
     Digital Wireframes allowed me to expand and iterate from my initial sketches. I began to plan for features such as tutorial overlay's, upgrade menu's as well as expanding the gameplay area itself.
Visual Design:
     Visual Design was explicitly indicated to not be within scope for this project. Yet, the initial build's UI was identified in user testing as being a huge issue. From the perspective of our usability and accessibility audit we had to account for issues with color contrast, legibility and hierarchy.
Process | Deliver
Prototype V1:
      The client requested whatever design decisions we made to reflect either the Ancient Egyptian as well as pixel art themes. The new color palette was a decision striving to pass accessibility standards as well as reference the look and feel of night time in Ancient Egypt. Additionally, we expanded the gameplay area to take up the most screen real estate and displayed a collapsible sidebar.
Prototype V2:
     We added a leaderboard to hopefully attract user retention, as well as a hover state for the map select to increase usability. Additionally, the pursuit of usability dictated the need for a pause menu, more sequence overlays for the back story, as well as an overlay which outlines the modifier game mechanic.
Main Screens:
• We redesigned the main menu and UI elements to fully display the key art. 
• The Map Select screen now has the option to return back to home.
• Additionally we added a hover state that displayed difficulty levels as well as enemy types for each level. 
Story Screens:
• We added a portrait of Pharaoh Ramses to build upon the meta.
• The story overlay has been resized to occupy the screen real estate more appropriately.
• The exposition has been broken up and allow the user to go forward and backward to combat previous findings of high cognitive load.
Gameplay + Leaderboard Screens:
Make into paragraph fix the callouts or place within page break.

• The gameplay area has been resized to occupy the most amount of screen real estate.
• Gameplay mechanics are clear and within reach.
• We grouped the gold and shop elements as requested.
• We utilized progressive disclosure in the shop sidebar as well as in the upgrade gameplay mechanic.
• We implemented a leaderboard in hopes of increasing replay value.
Overlay Screens:
Make into a paragraph. fuckin fix the callouts figure this out.
• Users reported experiencing high cognitive load so we broke up gameplay mechanics into different overlays.
• We used overlays to address the issue of users being unsure as to how they were progressing throughout the game.
• We created a tower type overlay to allow users to better understand the meta and formulate strategies.
• The select modifiers screen has been redesigned to fix the issue of the broken select mechanic.
Tutorial Screens: make into a gifs animados
Quantitative Data | Heat Maps: fix spacing
     After our final round of user testing we ran our prototype we used the Maze analytics program to gather quantifiable data . The participants for this section were first time users tasked with following certain "mazes."
Qualitative Data ( User Quotes) B:
• “I forgot it was a Figma Prototype.”
• “I would love a mobile port-out of this!”
• “I like how you increased the visibility, it’s so much easier to see.”
Insights: ( This could be a paragraph?)
• User's who played the initial build identified improvements from existing pain points.
• User's expressed the tutorial as being helpful and felt an affinity towards the meta being formed.
• User's felt they were able to start and stop as well as return to home at any point.
• User's felt a bigger connection as well as understanding of game mechanics and lore.
• Heat Maps as well as Qualitative Data indicated our Accessibility and Usability audit indicated improvements from the initial UI.
Next Steps: ( This could be a paragraph?)
• Add a story mode, give the users something to come
back to over and over again.
• Make the area of effect indicators more clear.
• Mobile Port
• Health Bar’s for all characters on screen.
• UI Animations and Sound Design
• Microtransactions, leaderboards, skins, etc.
What I learned: ( This could be a paragraph?)
• Team Building
• Communicating design concepts with developers.
• Iterating from User and Client feedback.
• Prioritize business reqs.
• Time Management
Tools & Methodology
• Git/Github
• Zeplin
• Figma
• Photoshop
• Agile
• Maze

You may also like

Back to Top