Company Background

Dragons Project


A monster-slaying action RPG featuring real-time co-op play on mobile. Join the hunt!
Developed by Colopl, Inc. Published by goGame.

1. PROJECT OVERVIEW

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.


DESIGN CHALLENGES

If it works don't fix it!

  • A big part of the challenge was to make the navigation better but by no means destroying what UX solutions that worked
  • Shadow Quest

  • Subtle introduction to Shadow Quests in the Gatcha Menu.
  • New Art Icons for shop

  • This was an important business objective we want the user to be attracted to this section as it is the main method of monetization with in-game currency.
  • New Behaviours

  • The interface needs to make it very obvious you are able to recognise actions buttons like Tabs,Accordions,endless scroll and etc..

  • My role

    Lead UIUX Designer

    Project timeline

    1 Months ( Excluding Development )

    2. My Design Process

    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.


    Step 1. OVERFLOW

    Collecting Requirements

    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.

    Step 2. SKETCH

    Look and Feel

    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.

    Step 3. FLINTO

    Prototype

    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.

    Step 4. OVERFLOW

    Documentation

    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.

    Step 5. OVERFLOW

    Hand Off

    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.

    3. UNDERSTANDING THE PROBLEM


    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.


    Persona type:
    Casual Gamers

    QUESTS Tab

    New Bottom navigation This slide shows the corresponding menus that show up under the Quests button

    SHOPS Tab

    We give more space and padding to items to reduce over crowding of information.

    4. INFORMATION ARCHITECTURE


    5. INITIAL IDEAS

    Reduce the information

  • We prototype the usage of different functionality behaviour to reduce the information to an amount more appropriate for a Western audience.

  • Swipe gesture functionality

  • Endless Scrolling

  • Fixed menus

  • Overlay Popups

  • Accordion Drop-downs

    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.

    (click thumbnails to see more)

    6. Production wireframes

    Below are the final production wireframes for the project. (In some projects I cannot showcase all of them due to confidentiality issue).


    7. Design Systems

    (For this project Design systems were not required). All the art assets were created internally by the ART Team


    8. Final Thoughts

    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.


    Key takeaways

    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.