FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL...

34
FINAL PRESENTATION d&d companion USEREXPERIENCEDESIGN:UXD16 MARK PURTELL

Transcript of FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL...

Page 1: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

FINAL PRESENTATION

d&d companion

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

Page 2: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

Introduction

The D&D Companion was born out of my desire to design an app that took all the hard work out of playing Dungeons & Dragons. Dungeons & Dragons is a game where essentially create your own version of The Lord of the Rings with you and your mates as the heroes. You create your own character and head off into fantastic worlds filled with magic and adventure.

It’s good nerdy fun - if ever so slightly juvenile!

Like a lot of games though, playing requires you to spend a large amount of time record keeping and collecting various tokens and counters that represent treasure you find, items your receive and spells or curses that are inflicted upon you - keeping track of everything is not easy to say the least and (in my opinion) kind of gets in the way of the fun!

My plan then is to harness the power of UX and try to design an app that can streamline this record keeping nightmare and make it fun and simple to maintain.

Page 3: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

interviews

I interviewed 4 players of the game to find out what were some of the things that frustrated them about the game, and what they would look for in an app

“It’s annoying when you play with people who cheat... they’ll cheat with the dice rolls, or not mark down damage or cheat with buffs or debuffs...”

“Sometimes it’s hard to keep track of spells you’ve used already...”

“When there a 5 or 6 players all rolling for their actions then it’s really hard for me to know who’s done what”

“The app shouldn’t take over the game”

“I’m updating stuff on my character sheet all the time... it gets messy!”

Page 4: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

who is this for?

Player Characters The Game Master

Generally, people who play Dungeons & Dragons can be classified as:

• Predominantly males of all ages

• Tech savvy - very comfortable with smartphones, tablets and computers

• Detail oriented

THERE ARE 2 MAIN TYPES OF PLAYER:

Page 5: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

Types of players1. PLAYER CHARACTERS

A game of D&D will typically consist of 2-6 players. Games are generally quite long, unfolding across several weeks/sessions, during which a players character will grow and improve as they defeat larger and more dangerous enemies and find more valuable treasure.

Ideally, players will grow quite attached to their character and are likely to reuse the same character across several games.

The app will focus on this group of users as they have the most amount of permanent record keeping to do.

As games progress, players need to record:

• What their character is (ie wizard, warrior, thief etc)

• What they look like

• Injuries sustained

• New skills learned

• Spells learned and used during the game

• Items they possess

• Treasure they find

Page 6: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

Persona #1CHRIS - D&D PLAYER

Gender: Male Age: 18-45 Job: Any Ethnicity: Any

Profile

Passionate. Happy to play casually, but always very detail oriented and quick to jump on cheaters or people who aren’t playing in the spirit of the game.

That being said, they are usually quite happy to push the rules as far as possible to get the best result for them.

What do they need to do?Keep their character updated.Manage equipment and items quickly.Manage your characters actions in battles.

Pain pointsNot being able to find key character info quickly.Not being able to tell DM easily about key actions their character accomplishes.

Characteristics

Tech smarts

Extrovert

Passion

Imagination

Luddite

Introvert

Measured

Fact focussed

Page 7: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

2. THE GAME MASTER

Every game needs a Game Master who essentially acts as the ‘story teller.’ They are in charge of the game and are responsible for describing the settings and characters that the players encounter and controlling any of the enemies and minor characters in the game.

Unlike the Player Characters, these minor characters and enemies typically won’t advance or grow during the course of a game, so a Game Master will likely have less record keeping to do than the other players.

Nevertheless the app can still provide an easy way to record the statuses of all enemies currently active in the game.

Types of players

Page 8: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

Persona #2TAM - D&D GAME MASTER

Gender: Male Age: 30-45 Job: Any Ethnicity: Any

Profile

People who play D&D for long enough eventually start playing as GM. They’re typically older and a bit more experienced and cynical - They have their own ways of playing/runing the game and are a little less likely to embrace change.

Conversely much more imaginative and able to think on their feet - Game Master’s have to be able to think quickly to create stories around the individual players actions whilst also maintaining continuity with the other players in the game.

What do they need to doProgress the game story - ENTERTAIN!Keep track of all characters and NPC’s in the game.Allocate items and treasure to players.Check game rules and info.

Pain pointsPlayers completing actions - not notifying the GM.Cheaters lying about dice rolls.

Characteristics

Tech smarts

Extrovert

Passion

Imagination

Luddite

Introvert

Measured

Fact focussed

Page 9: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

so what should this app actually do?Help all players spend less time managing their character and the rules

of the game and more time enjoying the story.

Page 10: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

make it easier for players

APP GOALS

Let characters create a character through the app.

Make it easier for players to manage their characters and keep them updated.

Let players view basic information about the other players, including their status and remaining health (hp).

Design a way for players to share items, spells and equipment with each other during a gaming session

Let players accomplish actions through the app (for example; attacking an enemy) easily, automatically notifying the DM of the action in the process and reduce work for him.

Page 11: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

and make it easier for DM's too

APP GOALS

Design a way to create a gaming session that other players can join using characters they’ve created.

Easily monitor the players in a game session and the actions that they accomplish

Be able to access game rules and information about items and any of the various monsters that the players will be fighting.

Be able to allocate items to specific players during a gaming session.

Be able to accomplish actions on behalf of the characters or monsters they are in control of in the same way that normal players can.

Page 12: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

tone of voiceGENERAL STYLE RULES

Don’t write for babies

Our users are tech savvy and they’re intimately familiar with the subject matter, there’s no need to dumb down the language.

Keep it light

Our users have quite an irreverrent sense of humour - copy can reflect this with a tongue in cheek, self deprecating style.

Given that this app also deals with quite complicated content, care should be taken to ensure the copy remains lighthearted to hold attention.

Keep it quick

Our users are not the kind of people that want to spend time reading unneccessarily - so copy should be kept concise and direct.

Page 13: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

Competitor analysis

Page 14: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

competitor analysis

Character sheet is overloaded - hard

to determine what’s important

Skills page is marginally simpler. Still too much unneccessary

clutter.

Lots of detail. Includes information on items, skills and

spells

Includes in built dice roller.

PLAYER MINION

Page 15: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

competitor analysis

Character sheet has clear hierarchy

although not designed for mobile.

Good labelling of itemsAllows DM to prepare entire

encounters in the appComprehensive

creature database

DND BUDDY

Page 16: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

competitor analysis

Allows you to store multiple characters

Easy to edit player characteristics

Really simple UI, but possibly too

spaced out. Could be condensed

Keeps track of spells and powers that have a finite number of uses

DND BUDDY

Page 17: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

competitor analysis summary

WHAT'S ALREADY BEING DONE OPPORTUNITIES

Managing characters

Including in-app dice rolling functionality

Including maps and story content for DM’s

Including rules and creature info for everyone

Networking - allowing players to connect in game.

Managing encounters - damage, player spells, effects etc.

Simple enhancements to UI to make everything easier to follow

Page 18: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

features & flows

Page 19: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

feature prioritisation

EASY

IN SCOPE

HIGH PRIORITY

LOW PRIORITY

HARD

Character creation

In game dice roller

Edit character functionality

iPad version

Shared game sessions

Sharing items with other players

Player On-boarding

Handling battles in app

Sign up Simplify Character screen

Monitor remaining spells & abilities

Monitor players in game session

Access game rules

Allocate items to players

IN SCOPE

General feature Player feature DM feature

Page 20: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

Home

Character creation

Character created

Join game

Create game

Choose character

Create encounter

Create enemies

Player lobby

DM lobby

Set initiative order

Attack

Player actions:

Edit StatusEquip itemGive itemManage

Cast spellTake damage

DM actions:

Edit StatusGive itemManage

Cast spellTake damage

DM

Players

End turn

Level up

End game

DM action

Player action

user flow

Page 21: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

designs

Page 22: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

design: character creation

1 Basic details 2 Set Character statistics 3 Select Skills 4 Review

& confirm

RATIONALE

To keep character creation simple, the app breaks it up into 4 manageable steps

These shorter steps also help reduce user fatigue by overwhelming them with too many tasks and choices.

The creation process should allow users to see how many steps are involved overall, and give them opportunities to go back and edit any mistakes they may make along the way.

It should also try to use more touchscreen friendly interactions to speed up the process eg, sliders and custom checkboxes.

Page 23: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

design: character creation1 BASIC DETAILS 2 CHARACTER STATS

Sticky footer keeps track of selections. ‘Next’ link is inactive until all required actions have been completed

Simple choices here that players will be familiar with

Players roll dice and enter the scores in on this screen.

Players can use this link to go back to previous step

Sliders are used here for ease and speed

Page 24: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

design: character creation3 SELECT SKILLS 4 REVIEW & CONFIRM

Simple custom checkboxes are used here. Players simply toggle on the skills that they want for their character.

Choose skills that your character can use during a game

A final opportunity for a player to review the choices they’ve made for their character

If they reconsider any of these options they can go back and edit their selections

Page 25: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

design: character screensINTRODUCTION

Players can review character information here and monitor their equipment, skills and spells.

Traditionally players accomplish this using pencil and paper, which can be tricky for players to keep track of.

The app aims to simplify this by breaking it up across several screens, organised by category.

Page 26: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

design: character screens

The app divides a character’s information across 4 screens: Core information, Equipment, Spells and Skills A set of tabs at the bottom of the screen allows for players to switch between these screens. These tabs are also used to navigate to battles and encounters when appropriate

Page 27: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

design: character screensImportant information about the character is displayed here

A characters health is displayed as a radial bar that runs around their portrait.

Other key information used in game will be displayed here

Players can navigate between screens here

1 CORE 2 EQUIPMENT

Characters can switch out other equipment in their inventory by clicking on the relevant links.

This screen displays the weapons, armour and other items that a character is currently using.

Page 28: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

design: character screens3 SPELLS 4 SKILLS

A players spells are displayed on this screen.

There are 2 sections on this page:

A player can only have a limited number of spells available to use at any one time. The top section displays spells that are currently available to use.

The second section displays the spells that a player can equip to use.

This screen is a simple list view of the skills that a character has. These skills are all constant and do not have a limited number of uses.

Page 29: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

design: battle screensINTRODUCTION

These screens cover how battles are handled within the app.

Battles take place between the players and a preset number of opponents controlled by the DM.

Players can attack any of the opponents still in play or help their team-mates.

Most actions involve rolling dice and entering the score into the app. Others may involve an exchange of items, or changing of a players’ equipment.

Page 30: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

design: battle screensSeveral concepts were trialled detailing how players could accomplish actions during a battle

One option involved interlinked menus through which a player could map out what action they wanted to accomplish and on whom.

I moved on from this approach as I felt it took up too much space and didn’t easily allow players to view contextual information before they decided what action to accomplish.

A second option involved a menu overlay. But this approach broke up the action into too many individual steps.

The final approach went for a more visual approach, whereby players clicked on the player or opponent that they wished to interact with. This triggers a modal where the player can select from a list of available actions.

Page 31: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

design: battle screens1 HOME

Core info about the player is still displayed here

They can toggle between viewing basic information about either the other players or their opponents

Clicking on a player or opponent will bring up a list of contextual actions

Players can still access their character information

2 MODALUpon clicking on a player, it triggers a modal where they can choose which action to complete

Available actions will depend on whether a player has clicked on another player, or an opponent.

Page 32: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

final project: http://oeg50f.axshare.com/#c=2

Page 33: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

More prominence could have been given to CTA’s on the Battle screens though, as some players did not realise which actions could be completed.

Additionally, too much emphasis was given to the players details on the battle screen (the entire top half of the screen). Reducing the size of this area would make it less distracting and allow players to focus more on completing available actions.

The tone of voice was also judged to be too cold. More warmth could be added to make the app more engaging overall.

testing & reviewTESTING WITH OTHER PLAYERS

THESE FIXES WILL BE CARRIED OUT IN THE NEXT ITERATION OF THIS APP

In the end the full prototype was not finished in time for complete testing to be completed. Core layouts were completed in time though and I was able to show these to other players and talk through my ideas for how it would work.

This demo produced a largely positive response. Players agreed that the layout of the character sheet was much simpler and easier to follow.

They also liked the idea behind the battle screen and being able to click on other players or opponents to initiate actions.

Page 34: FINAL PRESENTATION d&d companionres.cloudinary.com/general-assembly-profiles/image/...FINAL PRESENTATION d&d companion USER EXPERIENCE DESIGN: UXD16 MARK PURTELL Introduction The D&D

USER EXPERIENCE DESIGN: UXD16 MARK PURTELL

thanks