UX & UI Designer - Elder Scrolls Online
My Ownership
My responsibilities on Elder Scrolls Online boil down to a fairly simple directive: make the game easy to use and engaging for players, while preserving the UI and existing flows that made the game great to begin with.
Within that framework, my usual work process involves ideating within problem spaces and testing prototype solutions for our console and keyboard UIs. Once prototypes show some promise and have received team feedback, I transform those rough wireframes into high fidelity mockups. When those mockups are in a high fidelity state, several rounds of reviews involving stakeholders and engineers are conducted to ensure that ideas are within scope and align with outstanding design goals for the current roadmap. After the handoff to engineering is complete, I’ll typically be on standby for any questions that pop up as implementation progresses.
Group Finder Feature Breakdown
Overview
Group Finder at its core is a way to simplify access to group content across the entire breadth of ESO. As the game adds more and more features, it becomes difficult to find like minded individuals to pursue specific content with. The Group Finder acts as a bulletin that can be browsed through with specific filters. If no groups are found, the player can always post their own listing to fill up a group.
As the lead designer on the team, it was my job to incorporate as many activities into the feature as possible, while keeping the experience cohesive between categories of activities. Then, I conveyed that to the multiple engineering and design disciplines working on the feature.
Initial Brainstorming
The planning for this feature involved extensive wireframing and flowcharting to make sure the initial vertical slice met all stakeholder expectations. While developing the initial wireframe, discussions with the product owner were frequent to ensure there were no “Grand Reveals“ that missed the mark.
At this time, player profiles are generated and integrated into the core design of Group Finder. Competitive Analysis of similar features in our competitors is done to evaluate common themes that players will expect from our group finding tool.
Early Mockups
The early mockups of group finder used some internal assets. However, due to the rapid iteration of the design, the polish came later.
Typically, the early wireframing phase is quickly passed due to the number of high quality assets I have access to. I find it invaluable to move an idea from low fidelity to high fidelity as soon as possible.
At this point, many aspects of the design are blocked out and accounted for. However, the specifics need to be iterated on to be closer to the final, desired experience. As an example, the roles that are present in the listing (shown as tan icons with white numbers on the listing in the image to the right) was iterated on nearly a dozen times, before we landed on the version that went to live. This can be seen in the difference between the two images to the right: the top image has all of the roles listed individually, whereas the image below has the roles condensed.
An additional major change to the flow was the initial click into the feature in the left navigation space. Initially, I wanted to show players all / many of the available listings, so the player could browse through. As server limitations were discussed with the engineering team, it became apparent that the rate of listing refreshes requested by the player was sluggish when they wanted to go to a specific category. (Shown as the “All” category in the image to the right.)
Later Mockups
As the project progresses, mockup fidelity improves. At this point a functional prototype created in Axure is available for internal “playtests“, which yields valuable feedback. The time it would take to implement and test the feature was substantial, so gathering early feedback was crucial.
The UI Engineers I work with on a daily basis were incredibly valuable in providing their thoughts and feedback. They helped me identify pain points in the design that were overlooked, resulting in a smoother experience for players. I find this kind of feedback and iteration to be crucial in the development of any feature, but especially one as large in scope as Group Finder.
During the later months of development, I also used our internal tools to help populate the data needed for the various options within the “Zone“ and “PVP” categories.
Launching The Feature
My work isn’t done even after we begin locking our builds for release. During our PTS cycle, we received numerous comments on our forums for possible improvements and additions to Group Finder. The Product Owner and I would sit down and evaluate our current list of changes and prioritize them based on the value they would provide based on the remaining development time.
Post launch, my eyes and ears open for feedback from players about the feature. Some pieces of feedback are actionable, while others are too large in scope or involve too many teams given the rest of the release schedule. When bugs trickle in from players, the UI Design Lead and I prioritize and request fixes, where appropriate.
To the right are screenshots from the live server.
Additional Features
Scribing
Scribing was the “Back of the Box” feature for the most recent chapter update. For this feature, I designed the flows for crafting and equipping new skills. Additionally, I designed the “Scribary“ where players can view all the scribing content in the game.
An important component of scribing involved surfacing as much information to the player as possible during the crafting experience without overloading them. Armed with information, players have agency to chase locked content in the order desirable for their playstyle.
Skill Styling
Skill Styling was a small feature that allowed players to spruce up their abilities with a new color or animation. My work focused on the application of styles and the messaging of those styles to other players in game modes, such as PvP.
Tales of Tribute (ToT)
Tales of Tribute exists as a mini-game within the many pieces of content that is ESO. Players can queue up from anywhere in Tamriel to kill a few minutes while they wait for their next adventure.
While I contributed to many parts of the gameplay during development, I was mainly focused on:
Collections menu
Pre-game deck selection
Post game match rewards
Tooltips
Card Elements
Tales of Tribute Deck Viewer (Collections Menu)
For ToT, this screen serves as a portfolio of all the decks and cards the player has unlocked.
Initially, I had intended this screen to be an actual book that the player could not only carry around, but also flip through - similar to a modern day card binder. However, after several iterations, it became clear that using our existing flow for collectibles would be more fluid. While the idea was cool, having a separate piece of UI pop onto the screen would take players out of our existing collections flows. If we implemented something so unique for this feature, the next feature requiring a similar solution would create numerous splits in our flows that are arbitrary and confusing for the player.
The footprint of the screen was a particularly important problem to tackle. It is hard to keep track of your 13+ cards when you can only see a couple at any given time. One major issue throughout this entire project was legibility of icons and text. The collections window was no exception.
Eventually, I decided to make the cards 1:1 with the size they would appear while playing ToT. Players would need to identify cards at that size regularly while playing, including new cards and mechanics they had not encountered before. I believed this was the best way for players to begin recognizing those patterns. Additionally, this format allowed for 6 cards to be on screen at the same time, or roughly a third of each deck. While this number was not ideal, it was the happy medium that allowed for greater transfer to the actual game itself, while still allowing for a broader view of the deck and its unique mechanics.
Tales of Tribute Pre-game Deck Selection
The patron selection screen was my personal favorite to work on. There were interesting problems to solve when it came to player recognition of game mechanics.
The major culprit of this was recognizing that the patron coins (shown on the the right side of the screenshots) were an integral part of gameplay. First time players typically did not interact with the patrons at all, which of course would eventually become a problem when another player beat them senseless with the patrons in a match.
To help alleviate that issue, the design I came up with had a 2D and 3D component. The UI would be used to lock in the patron deck, which would fire an animation. This animation would move the world space, 3D coin object onto the board. The objective was to link the player choice of their patron with a piece of the gameboard being set up. In turn, this would link to gameplay mechanics with that coin. It ended up looking pretty cool, and our audio designer did amazing work to make the action of locking in a patron feel impactful.
There were a couple bumps in the road while designing this flow. Players go through a snake draft to get their patrons. The first player picks the first patron, second player picks patrons two and three, and the first player picks the fourth patron. I wanted to help reinforce this style of drafting, so players would understand this flow the first couple of times they went through it. To that end, my initial design had a built in delay after each coin was drafted. It was largely a miserable experience for our internal playtesters, especially those that were more experienced. It made the UI feel sluggish - a valuable lesson learned that we luckily were able to iterate on before the feature launched.
Target Markers
The target marking system was designed to apply simple markings to entities in the world, which players could apply meaning to. The hardest challenge for this feature was the input, given how many keybinds are taken up, especially on console (gamepad). Additionally, there were discussions on the behavior of the markers while in PvE vs PvP activities with combat and system design.
Infinite Archive
Infinite archive was a new mode that required a mix of HUD and standalone screens.
As the player cleared stages, the HUD helped convey the progression through the archive. This was supplemented by announcements in the middle of the screen.
The standalone screen shown in the pictures on the left were a way for players to track their buffs throughout their progression. As this mode is in theory endless, the buff tracker needed to be able to handle a large / infinite amount of buffs, but not dominate the screen.
Mail Improvements
This feature was an improvement of the mail system designed to help players collect their rewards more quickly (Take All Keybind) and automatically delete the empty mails. Additionally, the mail’s first attachment was displayed as an icon next to the mail name to give the player a small preview of their goodies.
Quick Select Wheel Upgrades
With the increase of options in the quick select wheel, there was a demand to increase the number of available quickslots. This feature expanded the number of slots the player had access to. It also granted the player more flexibility for what was placed on the main / primary quick select wheel.
