Overview
Navigator Games, a studio based in Vancouver, B.C., primarily focuses on the "Iron Maiden Legacy of the Beast" game. They often receive requests for a page containing information about in-game items. Achieving a high rating (4.7/5) on Google Play and the Apple App Store makes having such information readily available crucial.
My task was to create a solution that would be easy for both game players and content moderators to use. Since the company already had a Newsfeed on WordPress, I decided to leverage this CMS for my solution. This approach reduces the IT team's maintenance workload and minimizes the learning curve for content moderators. Most importantly, it ensures that players receive the requested feature efficiently.
Role
Research, UI/UX Design, Information Architecture, Front-end Development
Tools
Design: Photoshop, Invision Development: WordPress (PHP, Javascript, HTML, CSS, AWS S3, etc.)
Goal & Challenge
- Provide easy access to and search for items for players while they are in the game.
- Enable quick and efficient item maintenance for content moderators.
The biggest challenge was accommodating two distinct user groups: visitors (players) and content moderators (game designers). This is because the way information is loaded and accessed differs significantly for these two groups.
Proposal solutions
For players
- High Performance: Ensure optimal performance.
- Limited Use of Images: Due to small phone screens, prioritize text over images.
- Fast Page Load Times: Players are impatient, so aim for quick page loading.
- Clarity and Readability: Make content easy to follow and understand, even if it's lengthy.
- Accessible Depth: Ensure easy access to each screen and items.
- Accessibility: Link pages together using icons to prevent players from having to navigate back and forth to view full details.
For in-house maintenance users
- Automate the system: Game designers already organize content in spreadsheets for internal use, so we can use the same spreadsheets for uploading to WordPress.
- Easy maintenance: Designed for simplicity, making it accessible for anyone to learn and use.
- Organized Content: Content is categorized for easy retrieval and editing.
Design Research
I researched competitors' games to identify trending layouts and determine user preferences. I played competitors' games and examined their wiki websites. I created a deck to document the pros and cons of these websites and to identify potential elements to implement in our project. Concurrently, I initiated the creation of a SWOT Analysis for RPG games to inform future projects.
Research Deck
SWOT Analysis
Wireframe
Once I had a solid design direction, I began creating low and high-fidelity mockups, which were then transformed into prototypes. I used Invision to conduct flow tests and functionality tests with our internal team.
Mobile First
The entire page was primarily designed with a mobile-first approach (horizontal size) because the site needed to load within the game.
User interface
The game has its own color scheme, limiting my color options. I aimed to balance the colors with the items and images on the page.
Flow Chart
I linked all pages in Invision so that the team could test its functionality before WordPress development. I collaborated with game designers to enhance the screen flow.
Final work
The final work was delivered in collaboration with game designers to ensure alignment with the game's content layout. It was verified and approved by the IT/engineering team.
Building in WordPress
The company use WordPress site for Newsfeed. This technology was chosen so it is easy to build and maintain compared with plain HTML. However, implementors did not consider site performance nor maintainers' technical abilities.
To mitigate the maintenance problems, I decide to build custom the blog type, so it is easy to learn and adapt for future users and it would not interface with existing code base. Also, I knew that if I use the PHP, HTML, CSS and limit solution with 1-2 plugins, it would have least impact on performance for web and app users.
I used a plugin to enhance search functionality and content linking. However, to ensure a seamless user experience, I needed to write custom JavaScript and CSS code. I also utilized HTML data attributes for pre-filtering and 'secret' linking. This approach allowed the most relevant content to be pre-loaded for the user. While this part of the solution demanded the most code, I was extremely pleased with how elegantly I was able to implement it.
Performance Testing
The team had never used a similar system before, so I had to convince them. After finishing the prototype phase, I asked another designer to create a simple page using the traditional company method, while I created a simple page to compare the performance impact using GTmetrix. I knew my approach was faster, but it's helpful to visually explain it to those who have never used this technology before.
CSV Uploader
When I began planning how to organize content, pages, categories, and other details, the game designer shared a spreadsheet containing all the game characters, items, and other less important information. Initially, I had the idea of converting this information into JSON, which would allow me to use only the data I needed and format it according to the website's requirements. This approach would also avoid the need for any changes to the existing spreadsheet format, which could potentially cause issues for other teams. However, I had to consider some technical and future-proofing complications.
After discussions with the game designer and other teams, we agreed to update the spreadsheet to align with the wiki requirements. Once we had an agreed-upon spreadsheet in CSV format, I was able to leverage the CSV Uploader plugin. This plugin enabled the upload of the CSV file and the creation of new pages with a custom WordPress post type for each line item.
This solution proved to be highly effective, saving a significant amount of time, streamlining the process, and reducing the potential for errors when compared to the manual uploading and editing of individual pages. Content moderators were able to update content rapidly, ensuring that new information for players became accessible within hours rather than weeks.
Optimization & maintenance work
Kept track of users behavior via Google Analytics. Our team did a monthly meetings to discuss results and what can be improved and updated.
