A monster-slaying action RPG featuring real-time co-op play on mobile. Join the hunt!
Developed by Colopl, Inc. Published by goGame.
This project I was tasked to revamp the GUI navigation to incoporate swipe gestures and access to a new feature menu. The objective was to create a bottom navigation that resonates more with a Western audience. Japanese titles are known for their overwhelming GUI and I was up for the challenge of cleaning the flow with different strategies of hiding and revealing information.
THE UIUX BRIEF
The main target audience of the application is the Western market. We used prototypes and User journeys to plan our strategies of condensing the information and saving more screen real estate.
If it works don't fix it!
New Art Icons for shop
Lead UIUX Designer
1 Months ( Excluding Development )
The Design process involved a lot of prototyping with reference to screen trees. We needed to create a flow that made sense and get the prototypes done early for developers to plan the architecture. We were in a hurry to complete this so that the new GUI could be implemented as part of a big patch that was coming up in the following month.
We lay out all the screens of the old application navigation and benchmark against other apps like Clash of Clans as we design our own unique version of a efficient navigation.
Art team were engaged to do concept sketches of the different categories. While this was happening different main menus were replaced with placeholder for the first stage of planning.
Once the Art assets were 3/4 done we were able to use them to create prototype mockups to simulate the behaviour and user experience of the new features.
Documentation was added of the journeys and flows of the new features. This helps developers reference functionality, behaviours and where to pull and fetch backend API data for the screens.
The hand off included Overflow, PDF and Mp4documents for reference. Since this was not a web based project we didn't need to use Zeplin. All art assets were provided by the in-house Art team. Main purpose of the documentation was to be a reference of the behaviours and flows.
It takes way too many steps to get to where you need to go. Over the course of the titles release we experience a drop in engagement and the analytics team were able to identify the drop rate was due to heavy navigation steps. To address this we started brainstorming creative ways to reduce the steps by incorporating swipe gestures, accordions and off canvas alerts.
New Bottom navigation This slide shows the corresponding menus that show up under the Quests button
We give more space and padding to items to reduce over crowding of information.
Reduce the information
Drop down accordions greatly reduce the clutter of information.
New Shadow Quest
Shadow Quest feature added to the game in the GATCHA menu.
SubMenu Nav for Shop
New art icons for the Shop menu.
Gatcha Preview Animation
GATCHA animation preview to entice the user the participate in the raid.
Below are the final production wireframes for the project. (In some projects I cannot showcase all of them due to confidentiality issue).
(For this project Design systems were not required). All the art assets were created internally by the ART Team
I think the new changes in the navigation GUI will translate well to its loyal fans. The usage of swipe gestures to navigate between menus is more intuitive and accordions help to condense the overwhelming GUI. It was the first time we used prototyping as part of our production pipeline and it proved very effective.
It was a great experience designing and interface and knowing that it will land in the hands of all the fans. Dragons project is a solid game with a die hard loyal community and it was nothing short of a pleasure working on this title.