Attach Charms
As part of the progression overhaul for New World, perks and attachments for weapons/armor was getting a rework from the ground up. For the UI/UX team, this meant a brand-new interface and user flow to modify perks.
I was tasked with creating the high-fidelity motion mock and any new supporting art assets. The goal to create something that felt like a premium experience while staying within proprietary engine constraints.
Collaborating with the UX Designer, I took her wireframes into Photoshop to redress them with our asset library. Next iterating from the initial design, I had opportunities to suggest changes that ensured visual layout consistency among the game's other screens such as the width of the search bar and reducing text bloat. I illustrated a new circular frame for the gems to slot into, and with After Effects, created a couple VFX animations for the charm slots behaviors. I also re-mixed some existing effects from reward flows, cutting down our production estimate and ensuring the feature would meet the deadline.
Before and After - UX Wireframe by Aslanta Chen.
Changes I made:
- Centered "ATTACH CHARMS" header text for more prominence, providing better balance of the two stages of flow since they are a recursive Step A to B process when attaching multiple charms.
- Decreased the width of the Search bar to maintain visual consistency with other screens.
- Revised CTA to a short label and removed "SLOTS" to reduce text clutter
- Removed Reset Changes button so we could bind it to a hold action on the footer (not present in current example image but was implemented), following reset paradigms in other screens for behavioral consistency.
Any changes I make to a UX Designer's initial wireframe is communicated with and approved by them. I do not make changes unilaterally, but advocate for change when I find through my own analysis there's something to improve for the user's benefit. The UX Designer also gets a clearer picture once brought into this phase of development and typically have their own tweaks to recommend. The artmock becomes a very productive iterative cycle to achieve the final design.
Reusable Scoreboard
One of the game's pitfalls we had was that every game mode had it's own separate scoreboard logic, and so every time you intended to build a new mode, a new scoreboard screen would also need to be built. This would incur time for engineers and the UX team to facilitate.
Our initiative was to create a reusable template, that game designers can take and run with for any future modes. For this task, I was given a lot of liberty to rework the layout provided by the UX Designer, define the margins and limitations of cell data to present on each flow. I needed to create a layout that could stand up against multiple types of modes and display mode-specific data.
I created a motion-mock, set the limits on the columns of data Game Designers would have access to for each mode, and established a visual pattern for the header to display core information regarding end game results.
Below is a gallery that showcases the different modes that needed to be supported by this scoreboard.
Featured Game Mode
The Activity Finder in New World was getting an overhaul at the request to showcase more modes, with the intention to have a more seasonal cadence of rolling out new and temporary modes for players to engage with.
We were tasked with updating the Activity Finder screen to rearrange the display of modes into a grid, with the newest mode being pushed to the first in the list. This "featured" mode would also need to have some call to action to drive engagement.
I created the motion mock and new VFX to highlight new modes, working through iterations with stakeholders to define the optimal number of modes to display per row, while maintaining safety margins for localization of text and preventing overflow.
When it came to the graphic and text of each mode, I needed to bear in mind the state behaviors and different points of information each mode would have to provide. For example, the featured mode of Capture the Flag would only be available for a limited time, so the time left to play would need to be visible from the Activity Finder hub screen. And an upcoming mode like Casual Invasions needed to display a date of when it would be available and be dimmed to infer its currently inaccessible.
For the layout of each mode "tile", I strived for consistent arrangement regardless of how much information is presented. The date and duration strings were relegated to a third line, and the mode's title was given the first two lines. This was in part a constraint to keep the implementation cost down by preventing the need to handle multiple edge cases text alignment, which while doable was a little obtuse in our engine.
Here's an example of the margin guides and an edge case of text overflow when localized to other languages. I worked with Design Technologists to address these issues, where we opted for shrink-to-fit on the rare case where the two lines would not be sufficient.
War Declaration
As part of the Visual Redesign to New World's UI interfaces, War Declaration was due for evaluation and updates.
My responsibility was to examine and redesign the user flow of declaring war between two Companies claiming a territory.
The original flow contained all of the necessary information but required five stages of screens to complete the process of declaring war.
Declare War -> About War -> Siege Window -> Siege Tier -> Confirm Payment -> War Declared
After declaring, you'd be kicked from the flow and placed back in the game world, where you would then have to return to the map to reach the 'Manage Army' button where you assign members to different groups for combat.
I primarily sought to reduce the number of steps, while retaining the important information the declarer needs, like the cost to declare war and when/where the war will take place.
I folded the majority of information into one main screen. Having the ability to select what level of war camp you want to purchase and with which wallet now in one place, instead of two screens.
The "about war" screen was moved to a nested overlay that could be accessed by pressing the 'About' button. Experienced users are no longer burdened with information they already know but can retrieve it if they need a refresher. Even with screen reductions, I managed to include new information, adding details regarding competing factions, benefiting from being informative and more theatric. After declaring you're now presented with a confirmation screen and the option to go straight to managing your army.
The new flow resulted in something clean, easier to navigate, and more effective at leaning into the next steps of preparation beyond declaring war.