Context
Approach
Vision
Concepts
Process
Scenarios
Prototyping
Additional
Learnings
Impact


TOP
BACK

Kinsta Cloud

A Cloud Platform (PaaS) that is designed to help companies and dev teams deploy and manage their applications faster and more efficiently.

Complex interface

Prosperous Universe has a unique UI of crowded tables, drag and drop interactions and 3D maps.The game is essentially played on the web browser on a desktop with multiple screens. Expert gamers would often prefer to access all the data from the tables with a simplified Mobile interface and perform important transactions. All of the familiar game interactions and screens being adapted to simplistic mobile interface brings its own challenges.


My Role

Product designer


Collaborators

Martin (Product Owner),
Michael (CTO),
Nick (Marketing Manager)

THE APPROACH

Truly agile

A small,nimble and a remote team of 5 people consisting of a Game designer, a UX Designer, couple of Developers and a Marketing manager we are truly agile. With every week scrum meetings moving the cards on the Kanban board we assess the complexity of the stories and tasks.

I had 6 major tasks to be accomplished:

1. Adapt the game web UI to Mobile UI
2. Create a brand new website for the game.
3. Create a dashboard and admin hub for the game.
4. Create a design system.
5. Adapt the existing game web UI to the new design system.
6. Present concepts for the remodelled game web UI.

I performed several iterations of design sketches perfecting the user journey and different states of the interaction. After arriving at a satisfactory solution, I designed the wireframes to be reviewed by the team. For the website, I presented a theme and designed an interface concept.


VISION

Simplistic interactions

We wanted to simplify the interactions on the mobile interface for the gamer to achieve important transactions with minimal effort. We wanted to maintain a similarity by keeping common color scheme and the sci-fi theme.

The website has to be contemporary maintaining a game theme and be able to tell the story, give out information on the development roadmap and allow gamers to easily purchase the licenses.

BRAINSTORMING

Asking questions

Adapting to the mobile UI


We wanted to go for a tile interface, because it is a folder structure and the ease of access is important.





CONCEPTS

Initial sketches

Tables to tiles and cards










Getting closer




Material transfer interactions










Getting closer


PROCESS

How we got there

Initial sketches to wireframes to detailed designs


After evaluating all my concepts and thorough brainstorming, we as a team arrived at a common solution for the interface and material transfer interaction as they are the crux for the application.

I later developed them into wireframes and detailed designs.
Some of the key workflows were :
- Basic Functions
- Communication
- Creating Command Cards
- Contextual Menus
- Single and Multiple Material Transfers

SCENARIOS

Displaying stacks

Wireframes to show the key workflows





Stacks are essentially collections of command cards(Inventory, Ships, Materials, Buildings etc) for each planetary base player create.



Basic functions



Measuring the pros and cons of each type of representation gave a lot of clarity in our approach. While displaying the Stack structure on the home, it is essential to Edit, Delete or Create new stacks. Along with these, the other basic functions include Notifications, Profile, Licenses etc.



Communications and Groups



Players will be able to view each others profiles and start a chat or create a chat group to communicate with other players.



Command Cards





Viewing Command Cards





Context Menu



Material Transfer





THE FINISHING

User Interface Design
















Login Screens with user id and password entry flow

Apart from the above interfaces, I designed the empty states, error states and for other corner cases.

ADDITIONAL

Website and Admin hub



Webiste has been completely designed and developed from scratch following a sci-fi theme and modern UI.
Art work has been provided by internationally acclaimed freelance artist Mark.















Apart from these pages, I have also designed Login, Signup pages for the hub. On the website there are more pages to explain gameplay, roadmap, blog etc.



LEARNINGS

Striking the balance

While designing the mobile user interface I came up with a design which was not in match with the Website sci-fi theme. So I had to make more iterations to get the right balance between both.



The two iterations of the screens.


IMPACT

The launch

The website was developed in parallel and launched along with the license purchase and account pages.The website was well recieved and we collected the feedback from the gamer community on Discord channel. We further re-designed About and Team pages and added to the existing site. There has been a steady growth in the game revenue after the launch.

The app is still currently in development