Illustrative Work
Illustrative Work
Due to my Japanese background, I am largely inspired by the culture and traditions and often incorporate these into my illustrations.
Below are some of my previous works, both commissioned by others and for personal use.
All work is drawn and coloured digitally using Adobe Photoshop, Illustrator or Procreate.
Due to my Japanese background, I am largely inspired by the culture and traditions and often incorporate these into my illustrations.
Below are some of my previous works, both commissioned by others and for personal use.
All work is drawn and coloured digitally using Adobe Photoshop, Illustrator or Procreate.
Evercore Heroes (Project-V) - Battle Pass
Overview
The goal of this task was to design and implement a battle pass that is engaging and enticing to players while also accommodating to the needs of the monetization team. With the help of an engineer, the battle pass could be updated dynamically using Xsolla so that the monetisation team could make changes for future battle passes later down the line. The project also involved designing all elements around the main battle pass screen, for example the earning of battle pass experience points through the post-match reward screen.
My Role
UX researcher, UX designer,
UI designer, Implementer
Tools Used
Adobe XD
Illustrator
Photoshop
Miro
Unreal Engine 5
Xsolla
Process
Research
As per any of my designs, I started by researching competitor games to gain insight into what they do well or what could be improved as well as understand what the conventions players are used to seeing or interacting with. A number of battle pass screens from different genres of games, for different consoles and with different layouts were examined.
Aside from competitive benchmarking, employees at the company were shown screenshots of battle passes from different games. They were asked questions such as their preference for one layout over another (e.g. single track with both free and premium rewards vs dual track where free and premium tier rewards are separated out).
(Click to enlarge gallery)
Some key insights & Design Implications
“Personally, I like the single track, but only for the space it provides in the background for artwork to shine. If we can achieve this with the double tracks, then I’d prefer that since it’d be less frustrating.”
Preference for free and premium tracks to be separated out, as long as there is enough space on the screen.
“Can we get rid of the connections list in our battle pass screen? I feel like it’s a bit redundant on this screen. Battlepass should be special."
There are features on our screen that feels like it would just take up space or even result in cognitive overload and visual clutter.
-
There was a large preference for the dual track layout with free and premium rewards being separated out. The reason for this being that it felt easier to read, and from a monetisation perspective, it also helped highlight the premium tier more.
-
There was preference for a progress bar close to the current tier level (as opposed to having individual progress bars above each tier) as it felt that there was more of a connection between the two. Also, it meant that if a player navigated away from the current tier level section to another, they would have to navigate back to see their progress before the next tier is unlocked.
-
There was general consensus that having a claim button for each tier was overkill, but being able to claim individual items is still good while also having the option to claim all items in one go. This made me feel that perhaps items could be claimed individually with a right click (as opposed to having a separate button) and this would be indicated through the use of a tooltip when the item is hovered over.
Design
Flow Diagram
Tools used: Adobe XD, Miro
With research and analysis phases complete, it was now time to make informed decisions and sketch out main screen states based on which layout we should opt for, what features we may want to include and how players would interact with the battle pass. Creating a user flow diagram also allowed me to address any issues that were uncovered through my research and cover any potential edge cases that may arise quickly before creating further designs.
Interaction Design
Tools used: Adobe XD, Photoshop, Illustrator
Completing the flow diagram, I proceeded to sketch out the flow on paper and created low-fidelity mockups and prototypes. This allowed me to better see the flow in action and allowed me to better communicate the design to others. This was iterated on thoroughly until I got to a point where I felt an initial design could be created in high-fidelity and an initial implementation could take place before being tested with the wider group.
Exploration of layout designs and flow:
Low-Fidelity Prototype displaying parts of the overall flow:
(Click to enlarge gallery)
Medium-Fidelity Prototype showcasing situation where player has levelled up tiers and has returned to the Battle Pass screen:
Iteration
High-Fidelity Design and Implementation
Adobe XD, Photoshop, Illustrator, Unreal Engine 5
With feedback from players as well as changes to the visual style guide of Evercore Heroes while also working on the Battle Pass screen, iterations were made between the first version and the current version in-game.
High-fidelity mockups of the new hero roster flow
Latest implementation of the Battle Pass screen available for players
Some of the solutions made:
-
While not entirely possible before, with the newer, more lightweight style of the game overall, removing the connections list on the battle pass screen became possible. Removing the navigation bar was also made possible without the design looking awkward. This was a major plus since the original design was always to give as much space as possible to the battle pass especially with the majority of players preferring to not unnecessary information on this screen.
-
I implemented the improved use of colours in the visual design to better denote the difference between the free and premium tier. We wanted to make the premium tier feel more special so the colour scheme was changed from teal to gold.
-
Additional animations and sounds were added over time as initially intended by design and decorative elements were changed to better match the new style guide.
Evercore Heroes 2024 © Vela Games. All rights reserved.