BLIZZARD / STARCRAFT II
StarCraft II Player Profiles
StarCraft II is the ultimate real-time strategy game where three unique and powerful races wage war across the galaxy. Access player profiles to view in-game stats, progression, and the intergalactic ladder.
CLIENT
Blizzard Entertainment
PRODUCT
Website Feature
ROLE
UI/UX Designer
TIME
Apr 2018 - Jul 2018
OVERVIEW
Revamping Profiles
StarCraft II is an real-time strategy game where three powerful races wage war across the galaxy. Players can access their profiles online to view personal stats, progression, and the competitive ladder. My team and I took on the challenge of revamping the old website profiles to match the visuals of the new website. We wanted to serve our players with an updated and appealing experience when surfing the web for their intergalactic data.
Goals
Redesign the online player profiles to be easier to navigate and browse data
Update the visuals to be more appealing and consistent with the site
Strengthen the StarCraft brand and build its reach and relevance to players
Challenges
Reach players who want to learn more about their game data and stats
Identify the strengths and pitfalls of the old pages and redesign a better solution
Reduce the maintenance cost for player profiles and improve automation
My Role
Main UI/UX and Visual Designer
Created interactive prototypes, reusable components, visual mockups, and motion graphics
Collaborated with a team of product managers and engineers
DISCOVER
Assessing Player Profiles
Problem Statement
The player profiles on the official StarCraft II website should make browsing and discovery easy for players who are interested in viewing their personal in-game data and stats.
The old profiles are outdated and not well-structured to serve players the information they want to see. The pages are also inconsistent with the new visual language of the rest of the site.
Questions
We had many questions right off the bat…
What do players want to see on their game profile?
Is what we are currently showing on the profiles valuable?
Will players use the profiles more if we improve them?
How might we reduce maintenance cost and utilize automation?
DEFINE
Identifying Users & Features
Target Audience
Our mission for the website updates was to generate awareness for StarCraft II and give users a compelling reason to play Blizzard’s preeminent sci-fi strategy franchise. With the game going to free-to-play, we wanted to target new and lapsed players.
Refreshing the player profiles would help increase engagement with players who are coming to the website to view their personal game data and stats, as well as encourage them to progress in-game more.
Key Features & User Goals
Based on our research and evaluation of the old profiles, we identified the key features for the new profiles. We discovered which features performed well and which ones to keep. We wanted to create impact and value for the users visiting the site in search for their profiles.
Profile Summary
Show users a high level snapshot of their account personalization, levels, and games
Gameplay Statistics
Show users their gameplay statistics for race wins, seasons, and career rankings
Race Levels
Show users a summary of their levels and progression for the each race
Rewards
Show users their collection of portraits, decals, skins, and animations earned
Achievements
Show users the achievements they completed for all of the modes
Ladders
Show users a summary of their competitive matches, ranking, and the global ladder
EXPLORE
Redesigning a Solution
Legacy Profiles
With our goals, user needs, and features redefined, we were ready to upgrade the player profiles. Building off of the previous profiles, we needed to find opportunities to improve the information hierarchy and visual representation of the game data for the new profiles.
Our goal was to design a new solution that gave a clearer understanding of the data, improved the visual hierarchy and high-level player information, and utilized existing functionality.
MATERIALIZE
Developing the Visual Identity
UI
The visual language of StarCraft II utilizes cool tones, textures, and stunning game art. For the player profiles, we wanted to reflect that identity and apply the new visuals of the site. I adapted the new web styles for typography, UI, and reusable components for the profiles.
With the Free to Play rebrand, it gave us a good foundation to base our visual designs off of. The updated colors and UI gave the website a fresh new look and feeling. We wanted to make sure we celebrated the profiles on the web as appealing as they are in game.
Loading icon animation I made in After Effects and implemented on the web player profiles
Visuals
We worked closely with the StarCraft UI and Art team to produce visuals for the web player profiles. We wanted to celebrate the cosmic interface and new branding of the site by creating visually cohesive pages that supported all of the player data pulled from the game. I had a lot of fun working with the galaxy art and overlaying clean UI to bring it all together.
DELIVER
Launching Success
Results
We successfully launched the new and improved StarCraft II web profiles for players around the world to browse and explore their in-game stats, progression, and ladder rankings. Some highlights:
Increased player conversion and engagement
Update was well received by audience, players found the new profile design sleek and easier to navigate
Accomplished our goal to reduce site maintenance cost, consolidate redundant data, and improve automation
Proud team members and excited stakeholders!
Takeaways
It was a great experience working with my product management and engineering counterparts to understand the technical complexities of game data profiles and how they can best be displayed on the web.
I learned a lot from working on this project.
Identifying the key parts of a successful visual overhaul
Communicating ideas and design process
Creating visually stunning experiences and interactions
Thanks for reading!
Tools used:
Axure RP
Adobe CC Photoshop, Illustrator, and After Effects
Special thanks to:
UI/UX Designer Hawke Bassignani
StarCraft producers and developers
Our players and fans
Check out the
StarCraft II Player Profiles!
More Projects
Heroes Orphea Announcement
Website · UI/UX · Visuals
Overwatch 2 Announcement
Website · UI/UX · Visuals
Overwatch Seasonal Events
Website · UI/UX · Visuals