© 2019 by Cecilia Peng 

Why Redesign

Old Rune Page

Rune is a really important inventory in War Dragons playing experience, but the old rune page design is not so user-friendly. Like you can see in the old screenshot, the whole layout is not smart enough. There is a lot of empty space, and the sort and filter functionality is hard to use. 

What I want to achieve in this project is simplify the procedure for players by improving and streamlining how they can sort and select a certain rune in their inventory.

Step 1: separate the 2 main functions apart as 2 tabs

In your rune page, you can either upgrade or salvage your runes, but the use cases are quite different. When you want to upgrade a certain rune, you want to quickly find, in most case, the newest or rarest one rune to upgrade. But if you want to salvage, you want to have a way to quickly select multiple ones. They are 2 different actions so it makes more sense to separate them.

 

Step 2: redesign sort and filter menu as a panel

The whole rune list is a really big content for players to search through and maintain, a good sort and filter functionality, therefore, is quite crucial. 

In my design, I introduce a search bar first so that players can do an instant free search when they have "the one" on their mind. Then I designed a brand new "sort by" and "filter" expand button. Players can sort by newest, level and rarity, and they can further filter them by choosing type, category and rarity(allow multiple selections). A reset button is also provided for players to quickly go back to default(“Sort by Newest” as default since it's the most common use case).

Step 3: redesign visual elements to better serve the new design

I redesign the rune cell to better rearrange all the info and show off rarity so that players can easily search through. Since all the rune images already existed and they had their own color code, my rarity gem design followed the original colors in our game. 

Hi-fidelity Mockups

Upgrade & Popup Confirmation

Salvage & Popup Confirmation

I designed a checkbox "show equipped" as a secondary sort button. It should be by default checked in upgrade page and all equipped runes will show in front because in most user case, players will want to upgrade equipped runes to gain more attack power. And in salvage page, it should be be default unchecked to avoid unintentionally select all and then salvage. 

Change a rune flow from dragon den

Wireframe