Realm Defense
Realm Defense is a featured mobile game in App store with a large population of players. It has a lot of positive feedback and waits to improve the design, I have been invited into the team to do re-design and adjust parts of the elements for each interface.
Assets / Elements
The assets redesign - the texture is built in Illustrator and Photoshop, the reference is from 2D mobile game and Moba game.
Improvement workflow of wireframe
Main Problem - I have found out the main problems for each page and re-design the workflow from feedback in App store. The workflow between the main page and sub-menus has been re-design by my concept.
The original version of the guide page is a cartoon book-style interface. It lacks straightforward direction and misleads players into next step or find out the correct information instantly.
Guide Page
The guide page is important to the new players, which gives the users the first impact and helps the game. The function of this page should be clear and straightforward. What I am thinking of revision is adding small elements to the page, and matching the style to give more clear instruction to players.
The revision - What I have contributed to the revision of the interface
I have added the texture to call-to-action buttons, which shows the selected buttons clearly.
I have inserted the arrow animation at the beginning of the active page, leading players to pay more attention to the guide.
Animated UI
Upgrade Page
There are new features about tower upgrade functions in the game that will be added in this original page. we will allow each type of tower to equip a gear known as Runes. Runes are powerful artifacts that alter how a tower functions while engraved on it. For example, engraving a Frost Rune on an Archer Tower will make it shoot Ice Arrow which slows down the enemy upon hit. Based on the requirement, I design three versions to meet the team's desire at the beginning.
The textures are matching each theme and layout. Since the game has its own style, the second texture and third layout have been chosen to be iterated design models. I have re-design the elements, including fonts, buttons, and textures, based on the third layout.
First edit for three new versions
Updated Background
After the background setting down, I have added details for the frame of layouts. The style of texture is the most important
part for this design, so I have done the revision for the button, fonts, and cartoon paper. The red dot is the popular UX design for upgrades, guiding the users into the next step. I have added this feature to my design to match the original workflow of the upgrade function in-game.
Latest version
