Revamp Arknights’s Dashboard

The design was developed in March 2021 and published first short process on Instagram

As Arknights players, every day we will see the main dashboard of the game every time we log in. When we access the main dashboard, there are many things that we can do, from finishing some stage to reading some stories.

Findings

But when in the dashboard, there are some things that are feeling off from what I see and can be developed to a better UI.

Dashboard’s pain point (UI Source: Arknights)

For the dashboard, I find some things that can be improved to meets the goal. First, the 🔃 icon seems unclear to the user at first glance, is it something to refresh the dashboard or to rotate the dashboard. Second, the ongoing banner information is not highlighted to persuade the player to pull on the banner. Third, the similarity content between free banners and paid banners is slightly different. Fourth, the minor adjustment on the contents to be better when using English copy.

From these findings, there’s still room for improvement on how to develop a better dashboard. Starting from the Information Architecture of the dashboard, we can find some points on how to manage the structure to help the information be better informed.

Information Architecture

Information Architecture(IA) helps to determine the fundamental information shown to the user. From here we can find a way or two on how we will layout the information in a screen by the information provided from the IA.

Here are my findings on how the game about the overall dashboard’s IA should be

From the IA, there is so much information that is shown to the user on the dashboard, some of it is already clear and minor readjustment on the recruitment content. By merging the recruitment button, users can access both contents with one click.

Wireframe & Design

After viewing how the IA’s dashboard is structured. Wireframing is one of the littlest efforts how the layout will be.

The layout isn’t far from the original one to prevent a new learning curve for the user. The change needs to be processed one by one for the user can adapt to the design. The hierarchy of the button is represented by the size of the button for the user to easily click the button on the dashboard.

The new design is implemented after finding the layout for the content. The design also uses some new visuals to differentiate the level of the button too. Some buttons need to appeal to the user above the other. For example, the store button’s color is blue so the button looks more appealing to the user and will drive the user to click and see it easily for them.

Besides the new UI visual, some of the pain points before also repurpose and change to attract and be easily understandable to the user. The banner is bigger to tell the user what’s ongoing in the game and the status above the banner as “Breaking News”. The recruitment is combined into one so users can access both contents in one button. Then, changing the edit button by using text to make less expectation on what will happen when the user clicks it. Minor adjustment for the English version game is to adjust the text to be fit in the game when there’s an event ongoing or not.

Thank you for reading until the end. That’s some finds I found for the dashboard. Please share and comment to talk more about the UI or the game itself.

--

--

--

UI/UX designer and icon crafter. Likes to talk about design & UX and open to collaboration

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Blue Sky Ideation

Free Design Resources

Design WhatsApp for the blind.

A girl holding a phone with WhatsApp open in it.

The New Phase of the TelosTask Platform

Remaking color for Indeed’s design system

The 5 Best UX Mobile Apps for Your Inspiration in 2017

UI vs. Logo Gradient

Ironhack Prework Challenge 1 — Design Thinking Process: Citymapper

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Romy SWN

Romy SWN

UI/UX designer and icon crafter. Likes to talk about design & UX and open to collaboration

More from Medium

Case study: Better experience of Google Meet

Case study: Designing the High Contrast Light style for Microsoft Azure Maps

A piece of San Francisco Bay Area on the High Contrast Light map style.

Open SMS application with predefined details from Resco Mobile App

Health industrie | E-commerce & user buying journey