StreamRaiders-Cover-Responsive-Profile-Page

StreamRaiders

RESPONSIVE GAME FEATURE

Client: Stream Captain
Role: UX/UI Designer
Team: Myself & Mike Mariano (Lead UX Designer)
Tools: Figma, Zoom, Adobe Photoshop

The Problem.

Deducting from Discord

Stream Raiders is a game created for Twitch streamers to play with their viewers. Through a #feedback channel on Discord, it became apparent that badges were an underutilized feature in the game. Mike, (UX lead designer) tasked me with exploring how we could display badges throughout the game in a more impactful way.

At the time, I worked as a visual designer for Stream Captain and helped mainly on social media posts. With the game going through multiple updates at once, the developers never prioritized designing a profile screen for their users. Mike felt it was a feature that I could get started on and present to developers.

Discord-Feedback-transparent

How might we create more value around
badges and in-game achievements?

The Soultion.

Before and After of Profile Page for the desktop version of Stream Raiders

Emphasizing Player Achievements

Without a full-profile created, there currently isn't a way to showcase long-term achievements within the game. Player scoreboards are shown per battle, but otherwise, there is no way to show-off your long-term progress. The current player "profile" only shows a user their earned badges. These badges are not visible to anyone but the user themself. I decided to design a profile page that highlighted player achievements and statistics. I created a user flow that would link units in the game to players' profiles.

User-Flow-for-viewing-Profile-Screens.2020-12-29-21_46_50

Prototype of the user flow for viewing player's profile screen on desktop

GOALS:

  • Design a profile page that showcases user achievements
  • Create more cohesion between the UI of Mobile Lite and desktop
  • Create an option for users to share their profile on social
  • Lower priority - Create an Event Badges screen with sorting capability

CHALLENGES

Working towards Responsive UI Design

One of the challenges in designing for Stream Raiders is how the user interfaces are different for desktop and mobile. Their mobile was developed using React while the desktop version was created in Unity. Buttons and other UI elements were not consistent and I had to try to create cohesion between the two. I was advised to use mobile elements on the desktop screens since they would ideally be switching the desktop version to React in the future. Color styles for the screens were not important in my mockups since the color scheme of the UI changes with each new event. I utilized the system font and typography treatment in my designs.

Mobile-Home
Desktop-Home

Screenshots of Mobile vs. Desktop version of the Stream Raiders Battle Screen

PROJECT SCOPE

Presenting the Profile Screen

To share this idea with the rest of the team, I prepared a scope sheet with my mockups on Google Docs. Link to scope sheet here.

This file was shared with developers, the general manager and the CEO. Over Zoom, I presented the mockups and described the thought process behind each idea. Afterward, we discussed the feasibility of incorporating each into the game.

The team was overall impressed with the designs and positive about our ideas. However I found out that there are new features about to be added to the game such as "quests" that would change how achievements would be counted.

Screen-Shot-2020-11-13-at-4.09.48-PM

MARKETING INTEGRATION

Social Sharing for Profiles

After designing how a profile page could look, Mike and I discussed how it could help increase player engagement and growth if these achievements could be shared on social platforms. I designed how the share profile screen would look. Then, I used a background design (that I made for other marketing posts) to create a template that could generate a Twitter post graphic with user stats.

Share-Profile-2
Screen-Shot-2020-11-13-at-6.09.14-PM

IMPROVING A FEATURE

Organizing Badges

Another request for this design scope was to improve the sort ability of earned badges. The drop-down sort menu was already designed for the mobile interface, but I had to design how the badge elements would be arranged. Mike, the UX lead suggested I create a grid and a list version to view the badges. I came up with the idea that the user could pick a badge to be displayed with their username on leaderboards and on their profile.

Leaderboard
Battle leaderboard with badges displayed with usernames
View-User-Profile
Mobile User Profile
Event-Badges
Badges screen in grid-view mode
List of badges for mobile version
Badges screen in list-view mode

RETROSPECT

Not a Priority Feature

In the end, the profile screen feature is still considered a low priority compared to other updates that are expected to drive profit. I knew when assigned it, that it wasn't a high-priority project. I wish I was provided information on the release of the "quests" update, so I could factor that into my design.

Although my designs will not be implemented soon, Mike was impressed by my presentation and felt I did well explaining all the ideas thoroughly before letting the team divulge into feedback. Overall, I'm grateful for the opportunity to work on adding a feature to their great game.

If I were to work on this again, I would want to pursue user research to help validate the need. It's clear that it's a feature expected by players, but it is hard to gauge how building it will positively impact the players/company. It could be worth doing user testing with the prototypes to see if players enjoy the changes.

View More Projects

GaydarDATING - Mobile App

VanguardFINTECH - UI Redesign, New UX Feature

Project MannaBUSINESS - Responsive Website

Contact

Want to work together?
Drop a line - joyce.isleta@outlook.com
Check out this fancy sheet of paper - Resume

© UI-Joyce 2021