CHALLENGE

The game ‘Star Trek Fleet Command’ has viewed the necessity of offering the feature of a Daily Login Reward Popup. This feature has to fit inside the aesthetics and overall experience of the actual game.

ROLE

Hired as a Product Designer to be involved in user research, competitive benchmarking of hardcore games, wire-framing, rapid prototyping, and writing test scripts for user testing from a remote position.

ESTABLISH UX PROCESS & PIPELINE

Collaborated with key stakeholders, Directors, Product managers, Game Designers & Dev. leads on the studio and publisher side to define and execute a studio wide user centered game dev. strategy

- Educated the company on value of UX and built a strong culture of player first mentality

- 3 Pronged UX integration approach in Pre- Production, Production & Post-Production phases of game development​​​​​​​

APPROACH

I started by concentrating the majority of my investigation on current studies and interviews about habits and exercise. By defining and developing many archetypes, I was able to discover the primary factors that motivate people to exercise and to focus the app on accountability. I then proceeded to prototype and user test the ideas.

Key aspects

WHAT'S THE GAME ABOUT?

Star Trek Fleet Command is an MMORPG (Massively Multiplayer Online Role Playing Game), set in the Star Trek universe. It's a 4X strategy RPG with an innovative focus on the exploration of the Galaxy and expanding your base. Top 50 grossing competitors of hard core genre games on mobile like Game of War, Game of Thrones, Kings of Avalon etc.

CLEAN AND DEEP

The player has to know what th next step should be in every moment.

-Difference between ‘Already Collected’, ‘About to Claim’ and ‘Next Day’ items must be clear.

-Value of the items should increase to reward users loyalty.

MOBILE FIRST

The iteration between the user and the game is tactile. The UI has to feel responsive and rewards player input.

ON BRAND

Star Trek is an established IP with its own cinematic style. The Popup has to feel like its part of the Star Trek universe.

UX/UI Process & Pipeline Establishment

Incorporating player feedback in all phases of game development

In a typical game dev. pipeline, player feedback comes very late, usually after an alpha or beta build is released. We wanted to accelerate the process and wanted to involve players way earlier to capture player pain points and fail fast to reduce dev. time by avoiding pitfalls.

UX spec. writing & rapid protoyping

After multiple iterations of the process, we paired UX designers with game designers in feature spec. writing phase to follow UX heuristics in early spec. writing and wire-framing phase and perfected a rapid prototyping pipeline, that allowed us to get player feedback at multiple checkpoints in the game dev. process.

Industry Leading Rapid Prototyping Pipeline

- Being a small game dev. studio, our dev. capacity was limited and oriented more towards production and core game feature prototyping, we didn't have the dev. capacity to build feature prototypes for feature development and validation in pre-production phase. I and my team took on the challenge. Through trial and error, we built the most robust rapid Prototyping pipeline using only Design tools with zero coding.

- Example of cross-discipline pre-production cycle, depending on feature complexity we could scale the pipeline from 3 to 5 weeks windows.

- This pipeline with rapid prototyping allowed us to user test at two stages of pre-production using low and hi-fidelity prototypes

Establishing Target audience & Personas

VIA USER RESEARCH

Studies were done to understand motivations and persona types of hard core strategy gamers. Different players played these games for different reasons, ranging from hyper competitive killer achievers who love to dominate the leaderboards to strategists who liked building and leading their alliances to victory acting as a mastermind.

VIA COMPTETIVE BENCHAMRKING

We built a strong culture of playing and researching other games and competitors in our genre to understand what worked well for them what cause player friction, we regularly broke down games for competitive analysis.

Low-Fid UX Prototyping

- Low-fidelity prototypes built on wireframes and feature spec. were device ready to be tested by stakeholders and players alike!

- We could A/B test feature designs and resolve conflict if there were strong opinions or disagreement between Product, UX and Game Design

Hi-Fid UX Prototyping

- High -fidelity prototypes were built working with art and UI teams, they reflected the feedback generated from low-fid prototype

- We could A/B test aspirational versions of our core features and gather feedback on animations, transitions and, UI style and VFX.

In this design, we wanted to prioritize the fact of clearly and visually distinguishing the different days, so that the player does not feel confusion and understands what is happening on the screen without the need for any explanation.

To achieve this, and following the Ux wireframe, we separated each day into different frames (cards), differentiated by color and transparency. The colors used in this design are all part of the external UI Guide of 'Star Trek Fleet Command' (shown to the right).

The heading and subheading are centered in the popup window to achieve visual symmetry and balance the composition.

The design of the cards is the same for all days and is inspired by the design of another element of the game. This way we achieve that the player sees a design that he recognizes and immediately understands that it means reward.

Each card displays the information of the corresponding day as well as the rewards for the player.

All cards share the same structure that surrounds the important information and, starting from the bottom, they fade until they become completely transparent.

Past days are shown in a blue color from the color palette of the Style Guide and future days are the same color at 50% opacity.

The current day is shown with a solid green color, without transparency, and with the letters in a larger size and elevated compared to the rest as reinforcement of its importance.

The timeline shows the player's progress, reinforcing once again the importance of the current day through the green color. It's another visual feedback for the player to understand in which day he currently is.

The design of the button is inspired by the game's own design guide, where the green colour is associated with progress/rewards.

User validation

Me and my UX design team peer reviewed each other work frequently, we wrote test cases for user testing done frequently at our publisher's lab in Ireland. Example of user testing feedback (Note: Illustration purpose only, not real data points)

MAKING THE EXPERIENCE MORE REWARDING

The two designs shown here come as a solution to an unlimited days reward system that also aims to spark curiosity and desire in the user to continue playing to get the next rewards. To do this, I made three important changes:

1. Both the days cards and the timeline below expand to the right, even outside the screen, allowing the player to drag the screen and scroll through the reward system.

2. The bar that shows progress on the timeline extends slightly beyond the point corresponding to the current day, subtly inviting the user to want to keep moving forward.

3. I have decided to replace the rewards for the following days with question marks that only show the type of reward and its rarity, but not the specific reward. In this way, we achieve that the user is curious and wants to know what the rewards that he does not know are, but that, judging by the level of rarity are succulent rewards...


Once the ‘Current Day’ rewards is claimed the card adopts the same blue color as previous days but it doesn’t change it’s transparency to still show the player in which day he/se is currently.

Go to the App
contact

Let’s connect!