CHRIS STUART

UI UX GAME DESIGN ART

WWW.FIEND.GAMES

CONTACT

gateio

gateio

gateio

TITLE

GAME DESIGNER II

FOCUS

UI DESIGN

UX RESEARCH
SYSTEM DESIGN

Daybreak Games

4 years 3 months
H1Z1
3 Years
- PRESENT

NEXT PROJECT

MORE INFO

TITLE

GAME DESIGNER II

FOCUS

UI DESIGN

UX RESEARCH
SYSTEM DESIGN

Daybreak Games

4 years 3 months
H1Z1
3 Years
- PRESENT

NEXT PROJECT

MORE INFO

H1Z1 is the Battle Royale game that solidified the genre.

Parachute in with over 100 players to loot, craft, drive and fight for survival.

Escape bullets, bombs and toxic gas to be the last one standing in the massively multiplayer arena.

KILL OR BE KILLED!

ENGINE

Forge Light

FORGE LIGHT

Proprietary MMO Engine

150+ players per match

PLATFORMS

PC

Live Game Service

Steam

Paid and F2P

Marketplace

Playstation 4

Xbox ONE

TOOLS

DESIGN & ART

Photoshop

Photoshop

Illustrator

Illustrator

Animate

Animate (Flash)

Actionscript 3

Scaleform

Scaleform

Axure

Axure

Balsamiq

Balsamiq

HTML5

HTML5

CSS3

CSS

XML

XML

PRODUCTIIVITY

Perforce

Perforce

Hansoft

Hansoft


Jira

Jira

Trello

Trello

Confluence

Confluence

Wiki

Wiki

Office

Microsoft Office

Google Docs

Google Docs

Open Broadcaster Software

OBS Studio


RESPONSIBILITIES

UI

DESIGN

WIREFRAMES

CONCEPT / PRESENTATION

DETAILED MOCKUPS

INTERATIVE PROTOTYPING

DOCUMENTATION

FINAL ART

ANIMATION

SCRIPTING

LOCALIZATION

UX

RESEARCH

STUDIES

COMPETITIVE ANALYSIS

USER RESEARCH

USER / USABILITY TESTING

INFORMATION ARCHITECTURE

HEURISTIC EVALUATION

HCI PRINCIPLES

STORYBOARDING

WIREFRAMES

FLOWS

COPYRIGHTING

GAME DESIGN

SYSTEM DESIGN

CAMERA DESIGN

COMBAT DESIGN

PRODUCTIVITY & LEADERSHIP

PLANNING

ESTIMATION

PRIORITIZATION

TASKING

DIRECTION

MENTORSHIP

AGILE / SCRUM

PROJECT HIGHLIGHTS

IMMERSIVE MENUS

An active level background creates a strong first impression, connecting the player with their avatar and introducing them to the world.

  • A highly optimized "live facade" environment keeps the menu footprint light without sacrificing detail.
  • The player's character is featured throughout in full detail, granting ownership and a visible sense of progression.
  • Seamless control of the player character allows for immersive menu interaction.
  • Animations, music, sfx and camera transitions tie together to set the mood.
  • Breadcrumbs combine with a shallow menu design to keep players on track.

PRIME TIME ESPORTS READY UI

Growing esports and broadcast needs required a full-featured spectator UI.

  • An ADMIN HUD for referees, behind the scenes spectating, match control and team setup.
  • An OBSERVER HUD for broadcasters, optimized for prime-time television and live streaming, with familiar easy-to-use controls.
  • A VERSUS HUD broadcast mode for displaying live combat statistics for multiple simultaneously engaged factions.
  • Clear identification for up to 70 teams or 150 individual players with dynamic or manually set color patterns and iconography.
  • On-demand display of event, promotion, partner, and esport team imagery.
  • Live event support and research.

ESPORTS UI FEATURED IN THESE LIVE TOURNAMENTS & EVENTS:

Fight for the Crown

The CW Television Network

H1Z1 Pro League

Twin Galaxies

Caesar's Entertainment

Facebook
H1Z1 Showdown

No Kid Hungry

Over $100,000 raised for charity

H1Z1 Invitational 2015   H1Z1 Invitational 2016   H1Z1 Invitational 2017   Twitch Con

H1Z1 TwitchCon Invitational

2015, 2016, 2017 - Over $940,000 in prizes

H1Z1 Elite Series

$250,000 prize pool

Dreamhack


PAX
Tokyo Game Show



H1Z1 Royalty Showdown

COMPETITIVE BRACKETS & STATISTICS

UI heavy systems such as in-game brackets, badging and rewards promote competition, skill progression and replayability.

  • Seasonal brackets focus on meaningful player statistics.
  • Stats are updated almost instantly in game and on the web.
  • Dynamic, visually stunning promotion animations reflect the skill and level achieved.
  • Competitive achievements and ranks can be publicly flaunted as player icons, emotes and skins.

IN-GAME HARD AND SOFT CURRENCY SHOPPING

H1Z1 has multiple intertwining currency systems attached to several in-game markets.

  • Virtual fitting room previews give players a simple WYSIWYG shopping experience.
  • Purchase of hard currency through Daybreak and Steam money markets is seamlessly blended into the gallery.
  • Hard currency purchase and spending flows are simple, reducing interference, confusion and CS requests.
  • Individual item and currency conversion screens have a purpose build look and feel.
  • Built-in support for key code submissions and steam trading data.

LIVE PRODUCT DEVELOPMENT

Extensive user research and testing allowed the UI team to focus on problem areas while avoiding unnecessary changes.

  • We gathered feedback through:
  • Multiple avenues of usability testing with eye movement tracking.
  • Targeted in-game surveys and polls.
  • Social media, discussion forums and public polls.
  • Influencers, dedicated and professional players.
  • In-house meet and greets.
  • User personas.

DEEP CUSTOMIZATION

The customization screen is highly extensible, supporting over 100 skin releases per year.

  • The same familiar interface is used to modify all visual aspects of the player's character and vehicles.
  • Hundreds of customization options are split into intuitively organized and shallow categories.
  • Players can seamlessly try on all skins in the game with a direct point of sale to purchase items they don't own.
  • Skins display an assortment of stats related to their use, for renown and rewards.

ENGAGING REWARD SYSTEMS

Our crate opening experience was designed to be best-in-class, with a focus on fun and immersion.

  • Players control their own character during the crate opening sequence, shooting the crate to open it.
  • The crate's health ties to the rarity of it's contents, building tension for rare finds.
  • A cinematic camera combined with varying levels of particle effects present loot in it's appropriate glory.
  • Experienced players can opt to skip right to the prize.

PERSISTENT GROUP LOBBIES

A collapsible friends list allows players inspect, manage and invite their friends at any point in the main menu.

  • Voice and chat support combined with connection status indicators make team coordination a breeze.
  • While queuing with friends, players can browse the entire menu, customize their character, open a crate or anything else.

TWITCH PRIME INTEGRATION

Among the most streamed games of all time, consistently in the top 10 for two years, we were proud to be one of the first to work directly with Twitch to offer Twitch Integration.

  • View and play with streamers through a dedicated in-game portal.
  • Analyze Twitch-specific leaderboards.
  • Interact with Twitch Prime promotional rewards and links.

MODERN CUSTOMIZABLE HUD

H1Z1 has a simple shooter style HUD with a display-on-demand design.

  • A minimalistic design keeps the HUD light, with only the most important information displayed as needed.
  • Customizable reticles, reticle modes, and colors allow our legacy players to play alongside newer players without changing preference.
  • Numerous other HUD elements are tied to in-game options for changes in visibility and or layout.
  • Care was taken to leave room in the HUD for common streamer overlays.
  • Tested against colorblindness.

TARGETED CHALLENGES, PROMOTIONS & SURVEYS

Individually targeted game challenges, store promotions and surveys give each player a unique experience.

  • A dynamic notification panel can be updated and displayed anywhere in the front end with client micropatches.
  • Capable of displaying text, images, and links ( internal and external ).
  • Challenges are data driven and tailored to each individual.
  • Promotions are semi-random and displayed prominently.
  • Small-form surveys are presented in an unobtrusive manner, often granting a reward for completion.
  • Targeted survey feedback proved invaluable for evaluating new and upcoming features.

ONBOARDING

Shallow menus and contextual tutorials do their best to ease players into one of the most hardcore competitive shooters on the market.

  • New players are funneled to training zones where competition is lax and the tutorial HUD is fully active.
  • The tutorial HUD gives players controller and gameplay hints as-needed, not all at once, including reminders.
  • Rewarding challenges encourage players to learn new mechanics.
  • Load screen hints and diegetic signage remind players of the basics.

KING OF THE KILL

Previous incarnations of the game were titled KOTK and featured a much more stylized UI.

  • KOTK was rebranded as "H1Z1" in 2017, meaning the UI needed a new coat of paint in only a few months.
  • Detailed user and market research allowed us to single out the most important features to focus on.
  • We seized the opportunity to improve flows, usability and make numerous quality of life fixes.
  • Shared component libraries allowed our UI artists to make quick changes with minimal engineering requests.
  • In-game markets were simplified with an improved gallery, resulting in increased click-through and week over week revenue.