top of page
PngItem_652246.png

Companion App

Studying Human Interface Guidelines & Material Design

wow1.png

*The logo and images in this case study belong to Blizzard Entertainment

#UI #UX #iOS #Andriod #Humaninterfaceguidelines

#Materialdesign

INTRODUCTION

World of Warcraft is a massively multiplayer online role-playing game (MMORPG) released initially in 2004. W.O.W Classic is a remake of the original game based on a release from 2009 by Blizzard Entertainment.

wowscreenshot2x.png
Overview

About

With the W.O.W companion app, gamers can enjoy certain aspects of the game even when they are not in front of their computers.

Project Learning Focus

In this project, we are dedicated to mastering Material design and Human interface guidelines. Our UI design adheres closely to the design patterns of both platforms, including proper spacing, navigation, and button placement.

Duration

4 Weeks

Platform

  • iOS

  • Andriod

My Role

UI/UX Designer

Tools

  • Figma

  • Photoshop

  • Discord

The Journey

Empathize > Define > Ideate > Design > Prototype > Testing > Iterate

  • Competitive analysis

  • User interview

  • MVP

  • User flow

  • Low-High fidelity wireframes

  • Prototype

  • Usability Testing

  • Iterate

  • Feedback & Critique

Problem Discovery

The Problem

As a player myself, I noticed two common problems the majority of players encounter.

Players are losing gold

Missing cheap items
Missing high selling prices

Missing Speacial Events

Not informed of important events quickly enough

wow-character1x.png

In situations where desktop devices are not accessible, a mobile solution is necessary to access the required information.

Insight & Discovery

To verify my observation, I conversed with seven players who play on a daily basis. During our discussions, we delved into their daily interactions and habits within the game.

MVP

Chat

Connecting with their friends and other players in the game.

Updates

Keeping track of important updates and special events

Auction House

Access their auction items while they are away because gold is important to them

To gain a better understanding of the features, benefits, and design elements of companion apps and game-related apps, I performed a brief competitive analysis.

Learning from others

Learning from Others
wow ref 3.png
wow ref 2.png
wow ref1.png

Reddit - Forum Layout

World of Final Fantasy Companion App - Auction house layout

User Flow

The process of using the companion app is quite straightforward. Its purpose is to grant players access to the crucial aspects of the game, while keeping it simple and easy.

wow-user-flow1x.png
Design solutions

Based on the user flow, I created sketches of potential solutions for both iOS and Android platforms. Throughout the process, I made adjustments while taking into consideration insights gained from my competitive analysis.

Understanding the human interface guidelines & Material Design

wow sktech 1.png

I carefully studied and experimented with both platforms to ensure that the grid and elements adhered to their respective design guidelines.

wow3.png
ios wireframes.png
wow-android-wireframe2x.png
The theme

Design Strategy

I selected certain colors from their website to ensure that the companion app seamlessly integrates with the game by having a consistent look and feel.

swatches2x.png

Typography

wowfonts.png
Design Iteration

Once I finished creating the high-fidelity wireframes, I enlisted a group of players to test the companion app. Their feedback was very valuable, and they recommended that we maintain consistency between the app and the game. Specifically, they highlighted the significance of certain elements such as the gold formatting on the auction screens and the gear color coding, which indicates item rarity, on the character info screen.

*Keep the app elements as consistent with the game as possible

In-game

Before

After

Gold formatting on the auction screens

iteration1.png

Gear color coding

(indicates item rarity)

iteration2.png
HOME
wow-screens-home2x.png
Auction House
wow-screens-auction2x.png
Chat
wow-screen-chat2x.png
Login & Character info
wow-screens-login2x.png
Final Comment

Speaking from personal experience as a player, I find the idea of this product very thrilling. However, it would entail a significant amount of effort and time from a business and technical perspective since many players have multiple characters across various servers. Nevertheless, I thoroughly enjoyed working on this project and learning about design guidelines in the process.

*This project was developed during the Career Foundry UI design course

Let's get social

I'm open to work!

Send me an e-mail:

christychan04@gmail.com

​

Connect with me on Linkedin!

  • LinkedIn
emailwhite.png
bottom of page