Project Overview
Background
Documentation
Research
With this game and its randomizer being so near and dear to my heart, I already knew of some amazing trackers out there.
Vado's OoT Randomizer Checklist and
track-oot.net in particular are fan favorites. However, both of these are browser-based, with a somewhat poor mobile experience. Still, they provided an excellent starting point for me when thinking about all that would need to go into the randomizer.
Additionally, based on my interactions with the community and with new players of the randomizer specifically, I took into consideration the kind of folks that would be most likely to pick up the game and find a mobile tracker useful. Based on this knowledge, I made the following assumptions about the target audience:
- Users are already somewhat familiar with the vanilla game, though it may have been some time since they played it. However, this should also work for those who want to learn about the vanilla game at the same time.
- Users are exporting seeds from the official Ocarina of Time Randomizer - while others exist, they are meant specifically for streamers, who would be unlikely to use a mobile app tracker.
- Users are playing the regular version of the game, not Master Quest (MQ) settings. Any tracker should be able to work for both if specified, but the logic is very different, meaning the deep focus should be on the regular version first.
Because I play this game myself and am quite familiar with how to run a randomizer, I decided to set up a spreadsheet of the most important logic - such as what items are needed to get into each dungeon, any items that are needed to complete the dungeon with various randomizer settings, and the natural item progression of what might be replaced as you progress through the game.
View Logic Tracking Document
I found it important to review the design and graphics of the game, too. Considering that most trackers use direct sprites from the game, I knew that a tracker app would be somewhat "locked" into the general style of the game. Below are several (poorly taken) direct photos from my ancient gaming television:
I also set up a functional tracker for myself that I could use on my phone, and experimented with that before translating my discoveries into mockups. In order to follow the game in a set state for this design, I played through a little less than half of a randomizer seed, keeping track of everything through Airtable, then set up my Figma file for this game specifically. Below are various screens from this tracker in the same state the design is in.
Item Tracker
Dungeon Tracker
Overworld Tracker
Skulltula Tracker
Design
Designs
UX/UI Design
Figma
Like always, the first thing I tend to do with design is set up my color palette. I decided to grab the colors directly from the official OoT item screen palette, knowing that video game designers are often quite intentional with the colors they pick for contrast.
Also, did you know that purple was a popular color to use in games from 1996 - 2002 because it was one of the few colors that maintained good contrast between different screen types?
I also needed to select a couple other colors to visually show progression. For this, I chose to use shades of green and red, for "content available" and "locked behind items", respectively.
From there, I focused in on layout and navigation. The average user either was going to be tracking their items in real-time - adding them in one by one as they found them - or inputting everything they had done in the game at the end of a play session. Both of these would require quick navigation to and from various sections, leading me to set up the bottom bar navigation like this:
- Game refers to the game options - like what generated seed this is for, a reset button, and options to start a new game. Other settings and account info was also planned for this screen in future releases.
- Items refers to the item tracker, one of the main features of the app. The selection of current items is what allows the player to see their available and unavailable sections throughout the rest of the app, making it very important.
- Dungeons refers to the game's many dungeons, which can be checked periodically for progress. Since one of the key items to complete the game - medallions - are locked behind these, it's important for players to be able to reference them fairly quickly.
- Other refers to other randomizer settings, which have grown quite extensively even since this app was created. By grouping them all together within the app, it gives room to expand as the randomizer itself becomes a larger project.
I opted to arrange items in the same way they are presented in most trackers - as tappable tiles that progress through item upgrades and follow a logical order of what is available in the game - but for the other main screens, I decided to present the options as a basic list format. This way, the user would easily be able to select what they need, and more options could be added over time.
Within most of these interior pages are simply more lists (as players often expect checklist formats for collecting checks as they go through games). However, the dungeon screen required something a little different in terms of organization, simply because they are such a big part of the game and don't fit a traditional "checklist" format for newer players. Additionally, in randomizer settings such as keysanity (which moves keys to various other parts of the game including in the overworld), users would need a way to see their dungeon inventory at a glance.
By making sure that the inventory-type screens and checklist-type screens were designed in the same way, this not only limits the development template patterns needed, but makes the app an overall better user experience with a low learning curve.
