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

The W.O.W companion app gives players access to small parts of the game while away from their computers.

Project Learning Focus

This project focuses on learning Material design and Human interface guidelines, the UI design strictly follows the design patterns of both platforms, such as spacing, navigation and buttons

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

They need a mobile solution to check that information when they don't have access to their desktop devices.

Insight & Discovery

I chatted with 7 daily players to confirm my observation and talked about their daily interactions and in-game habits

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

First, I conducted a quick competitive analysis of a few companion apps and game-related apps to better understand what functionalities they have, why they are helpful, and the design patterns they use.

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 user flow for the companion app is very simple. The intention is to give players access to the small parts of the game that are the most important to them.

wow-user-flow1x.png
Design solutions

Using the user flow above as guidance, I sketched out possible solutions for iOS and Android platforms. I made some changes along the way while referencing the results from my competitive analysis.

Understanding the human interface guidelines & Material Design

wow sktech 1.png

After studying and experimenting with both platforms, I ensured the grid and elements strictly followed both design guidelines

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

Design Strategy

I picked some colors off their website because I want the companion app to feel and look like it is part of the game

swatches2x.png

Typography

wowfonts.png
Design Iteration

After completing the high-fidelity wireframes, I recruited some players to test the companion app. They provided some excellent feedback and suggested keeping the app elements as consistent with the game as possible. For example, the gold formatting on the auction screens and the gear color coding (indicates item rarity) on the character info screen are important in the game.

*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

As a player myself, I would find it very exciting if this product existed. However, it could require a lot of effort and time from a business and technical standpoint because many players have more than one character and might even be on different servers. But I really enjoyed this project. Especially learning about both design guidelines.

*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