Hearthstone: How to Create an Immersive User Interface

[Music] uh first of all thank you all for coming uh it's great to see you guys here um my name is Derek Sakamoto I'm a senior user interface designer on Hearthstone and um I'm here to talk to you about how we went about creating an immersive user experience uh really quick bio um I've been at blizzard for a little over 12 years now um my first job was on World of Warcraft designing the UI for that um I worked on vanilla to Wrath of the Lich King and um after six plus years of that um it was time for a change for me so I was fortunate enough to be able to move on to team Pegasus which in turn became Hearthstone yay right um so for the next 30 minutes I'm going to talk about talk to you about some of the high level um ideas and principles that guided us to get Hearthstone where it is today in terms of UI and game um so number one is finding your seed um Let's get physical and UI gets to sit at the big kids table

so um finding your seed what am I talking about to me the seed is like a muse or like it's like an image or a movie or song something for your team that they can all look at and understand the direction that your game is going to go in so um before I show you our seed um I'll show you what it Hearthstone was like before we had a core idea to work from and um as a warning people outside of Team five have not seen these images and maybe a lot of people on Team 5 have not seen these images just because um the team is growing so I introduced to you Warcraft Legends um this is a build called Fire and Ice and this was the build that got us green lit and I think at this time we had maybe the Rogue and the Mage and then warlock was still work in progress but clearly this is not um what we wanted you know for for hearone another idea we had was um having a world map where you unlock you travel across a Azeroth unlocking regions and zones doing um single player quests and and content to unlock them

and this is actually a screenshot of our flash prototype we created the whole game in Flash first and um this was all working we had Adventures that worked single player and those were all done by Ben bro I think and here we go this is a um the pre-alpha visual Target for our game and I think everyone's pretty happy that we didn't hit this target um it just has no life it looks like Tron and there's it's super complicated right this is not what we wanted for AR and there's a bunch of other stuff that we did you know for single player there's books there's crazy weird 3D cards there's hologram cards which I'm I'm just glad I have a job after this stinker uh Hearthstone in the forest you know this mockup had me stumped um M uh and this was matchmaking and then um this is a real gem uh we knew that when we were doing our matchmaking we didn't want to have a screen with a counter going up you know just counting

sear searching for players or whatever so I kind of went too far the other way and this is what we ended up with superhero I fire be Pur power to the Forsaken you go B fight right pretty awesome right uh so let the record show that the path to Hearthstone as it is today was not obvious or clear to us um so this is why you need a seed otherwise you're just running around in the bushes right you just out in the weeds doing whatever and um this video was created by one of our 3D artists and it was a result of a super long meeting between me and the artists just trying to figure out what what could we do you know what what would what would be our um vision and so here's this box you know you zoom into it there's a world map there's zones to choose from um you choose your hero and it rips open the map and you zoom down into this crazy world where people are battling right it makes it feel like it's alive there's other people there with you um until you

find your match bam like that and then you zoom out and then you're on the game board and um that's not really Hearthstone it's kind of hearthstone today but um I think this really gave us something to latch on to like this could be something you know this is pretty neat um and so that's why you need to find your seat and once this box was kind of box Ida was established um it kind of grew Roots into the team into the team's minds and hearts and um it grew strength and was able to grow up into this big into this tree and it branched out and created all kinds of different fruits which I'm about to show you so this is our box if you haven't seen it if you haven't played our game and once we had that we had a framework for um what we wanted to do with our UI you know it feels like maybe a a jewelry box or a music box or something and it came became more obvious about how this stuff was going to work we wanted little trays and little things like keys that would kind of fit in that environment came up with the making an idea for making lame loading screens

like tightening hinges and that kind of stuff and then once we had this box it was always sitting on the table and we were kind of one day we got to thinking where is this table you know um and we decided Well maybe it's in an inn or a Tavern and that's something like that and once we had that idea it kind of just created another like burst of creativity so this is like our splash screen for mobile um this is the loading screen it's like you're walking into the tavern pushing up the doors and there's a really warm inviting glow coming in um except for when you know the servers are full and there's like a sign outside it's like tables full but um that was pretty cool and then here's the key art um we informed the key art you know but u in turn the the artist who did this really fleshed out the world in the context of playing Hearthstone in the World of Warcraft and it really got us excited that's that's cool right and this is um something was really awesome like this seed was strong enough that we were able to give it to to a third party and they were able to

fully realize that Tavern as the BlizzCon final stage and that thing is incredible and we're still trying to figure out how we can chop into little pieces and get in the office but so far so far no dice um this doesn't really have anything to do with anything except that um a lot of us either worked on Wow or big wow fans and our game was inspired by wow and then we kind of went full circle and now it's inside of wow which is really cool to us um so the obvious question having a c that's awesome right that's great but how do you find one you know that's that's the real that's the real question and having done so um I have no idea I mean but I can tell you kind of how we went about searching for this um in the beginning we started out with this really awful flat parchment garbage and we then we decided Well this game should probably be 3D and we want it to be more physical um as a side note this mockup was called

Simon says I think I don't know uh and then we knew we wanted more magic as well and then on top of that we wanted to layer some charm which is kind of one of our things and then finally we kind of said well let's really make it feel valuable and feel constructed and this is kind of where we ended up so finding your seed um the path to your seed is never direct unless you're super lucky or a Super Genius or something which were neither um you should actively look for it early in in your project um just because it'll make the rest of things go so much smoother um because it it just makes everything better it makes everything fit fit and feel like it's one thing um and I think I think you must find it if if you want to have a shot and having your game be something special and have a have a true Vision uh I think you need to find it uh okay section two Let's Get Physical what the heck does this mean um into development we had been doing 3D UI and um I took a step back and was thinking about what what the trends were

in UI development at the time it looks like everything is moving to Flat UI design you know everything's really slick really smooth and just completely 2D I mean it's completely um maybe two-tone or something like that and um once we really started thinking about it and thinking about what was right for our project um we kind of just embraced it we're like dude Let's Get Physical you know physicality is is can be big for us and um I have no idea if this age range is right or not but um so um this idea of physicality really started to um Trace Roots through all of our project and uh influence things in expected ways and some unexpected ways so it makes things feel valuable you know these are objects people can relate to um the materials people can know whether they're worth something or not because they're Gold and Gems and these kind of things and it's important for us because as a free-to-play game we really want to respect you know players time and money that that they spend and give

them things that um feel really good and being a card collecting game the core experience is open the pack [Music] right so a lot of us as we we had we collected cards as kids and there's something about opening a pack of cars right there's the crinkle the foil there's the smell when you open it and um we kind of used the tools we has which are visuals and sound to try to replicate that joyous of an experience you know something that cool um another thing is that this physicality um unifies The Experience I'm going to show you a couple screens oops this is like our announcement screen for next Ramis um this is just our matchmaking spinner and then this is our store so you're selecting cards Cs and the store moves around and um these are all

different uis they live in different ples but uh I think having them all be physical and move in the same similar ways like there's a lot of Bounce going on there's a lot of over rotation kind of things makes them feel cohesive whether the player realizes it or not um here's an unexpect semi unexpected one it's a happy accident with touch and that um hearstone was supposed to be uh the main platform was desktop and it would be nice if we got into but it was not a sure thing by any means and so when we designed things like the cards they would tilt as you drag them around and they swoosh and when you tap the board like dust flies up all this kind of stuff once we translated it to touch it was like a little bit magical to me anyways and for me that's the best way to play the game is with your finger actually moving around these pieces and it feels like you're part of that world this is kind of a selfish one it's it's fun to work on this stuff a couple of us like to to make things like one guy whittles I like to do some woodworking on the side another guy is

into like World War II stuff where it's old and you can just feel the construction of it and for us to be to geek out on that while we're building stuff is really fun and this is kind of a big one as a card collectible card game you you really need to have this over over the shoulder appeal appeal which is that if someone's walking by and they see your game being played you know they need to be interested and be like oh maybe that's cool maybe that's something I should try as opposed to um you know it's like this Tom and Jerry stuff but um as opposed to being seeing all these words and numbers and just being kind of turned off by the whole thing up front without really getting giving it a chance um this one is also in for selfish reasons now these are click board clickables these are things to fidget with while you're playing the game or 3D guys do a crazy job on these things um and I included this particular one because U my 2-year-old almost every night asked me to play Hearthstone and what he means by that is load up

this board and launch that rocket ship so uh that's why that's in there so um another cool unexpected thing is that fans have embraced it you know once if you design these things to be physical it's kind of not a big leap to see that they could be brought into the real world and I think fans are really starting to connect with it and once they build these things it really jazzes us up and you know gives us makes us excited because these are things we designed but people are actually realizing these things for themselves so we have cakes you know we have um wooden boxes we have this thing which I mean it's a play piece but it's cool that he was excited to make it let's just say that uh there's wallets and then this cake really Takes the Cake if you know what I mean like I want one of these at my birthday and then this is the Holy Grail right this is the box and I think everybody wants one of these things this things is awesome so this image is terrible Terri I I included it because our because Ben

bro hates it uh makes him feel really Oogie um so taking the stance on physical UI you know doing this um it's not all roses there's definite downsides to doing it um but I think if you are aware of the downsides and you have answers and and reasons for why they're okay I think um it's it's it's good to do these things so number one it's hard to expand on the left side of that screen there's um our nine Heroes and it's like what happens if we add another one I don't know right um but our stance on this is that um it's finally crafted everything has its place and we tend to design from now and what that means is we have tight deadlines we got to we can't you know try to foresee everything in the future and make it expandable in all different ways that may or may not happen so we design for now and that's why things try we try to make things have their own little homes and um we do have the tradition on the team of screwing over

our future selves um we say oh what about this thing well future Derek will figure it out he'll be smarter by then right and obviously this time comes around and we go dang you pass Derek you're such a jerk like and that happens all the time just always cursing our past selves another downside is that it's very res resource intensive to create um this is our just our collection manager this is like two years of my life which is awesome um um but these are all the things that we go through to try to get to where we are you know and it may not seem obvious when you look at it but it's it's a tough road to get there and um the argument to this is that our game is UI we don't have huge Virtual Worlds and monsters running around um all we have is our board and we have the box so it's it makes sense for us to invest our resources in doing this um this is a big knock against us this is this screenshot is from Reddit um we look at Reddit a lot and are sad

sometimes but um this issue is not the most efficient navigation and so for this example it takes a ton of clicks to do something that maybe should be a lot more straightforward and our answer to this is that we generally design for flavor over efficiency we design this box to fold open the drawers to slide around all for you to have a sense of place of where you are in this box you can't instantly jump from place to place because we feel that that kind of disconnects you from the experience however uh when things are this bad um this is going to even get worse when we go to to phone because some of these screens need to be moved into separ two separate screens um we realize this is a real problem we need to solve so it's something we're looking at and so it's nice to have um a point of view but once um things start affecting the player I mean we have this in the middle of our campus engraved in bronze um gameplay first so this is that there's definitely times when you need to make compromises

this is a future issue maintaining across multiple platforms we have desktop tablet and um phone in the future and I mean desktop and tablet are pretty similar which is good but phone is a complete complete overhaul so moving forward is going to be challenging I think but um from a company perspective it's worth it you know it's be take a step back if we can get traction into the mobile space because it's someplace that we should probably be going so let's get physical physical U UI is awesome in the right context next there are significant cost of doing it it's great for touch devices and um if this if physicality is not the thing for you you should find that tradeit that you know most informs your games and really run with it to its full potential because you'll get a lot of good results out of it um this is my final point which is UI gets to sit at the big kids table uh and what I mean by this is that this is not true of every project but I've seen it where designers come up with a game they come up with mechanics and then they're like to slap a UI on

top of this thing right um and the other aspect that of that is um I've seen UI be kind of a second class citizen in terms of production right maybe they get a dedicated programmer maybe not or maybe a dedicated artist and so um these are some issues that I think we tried to address so we didn't want to be off in the corner you know eating chicken fingers and hot dogs and spilling milk on ourselves and crying or whatever we wanted to be at the big kids table and so it's it's a testament to our leadership I think that UI design was given a fair shake and was given a You Know parody with game design and um one way this works is that sometimes designed would you give this very um loose design I mean maybe a couple sentences and we start doing mockups and then design would come and be informed by those mock-ups and it was kind of like a canary in the coal mine situation where if the UI was super complicated looking then maybe design needed to take a step back and see what design was causing those those complications and

maybe removing those or mitigating those problems so here's just an example here's our play screen we used to have a ton of texts on this describing the play mode describing the hero class and their power and all these numbers and we just got rid of it all because nobody reads right we know this um and also we didn't want this screen to be too scary to just frighten people off before they you know actually play the game and they would learn all these details through um playing the game which is what we want in this case we had designed a board and we had the menus that we liked um but only seven fit so we're like well maybe we'll just shrink them down as you start adding them and I think we all decided that this was not a good idea because it would mess with the physicality of our stuff when you see things zooming bigger and smaller it's subtle but it affects your perception of of the value of these things I think and having just a 7 minu limit is is an interesting playm mechanic I

think um our decks used to be 60 cards and that would mean that the area on the right would scroll three whole pages worth and that's like really hard to keep in your mind at any given time and it was a deal breaker for new players for sure and we so we reded reduced the deck size to 30 and even that is quite formidable to new players so we're working on trying to ease that transition as well this is a pretty old mechanic um the priest hero power used to give the next menu play plus one attack and plus one Health and so we need to show that on the board and clearly it clutters up the board with more numbers um and it encroaches into the minion space so the hero power was changed then you that's an example of push back and so the he the priest just heals to from anything and this is very old but um this is a concept of the chain where an idea where in card games you play a card your opponent can play a card in response to that card and then you can say no no no I want to play a card in response to that card and you can see this gets really complicated visually and so it was on the chopping block and

then from a design standpoint it really just bogged the game down and wasn't cool so it's was gone that was the design aspect of it and here's the the UI pipeline uh the game pipeline version of it where we have access to the same resources as you know the full game because we kind of are the game so here I am the singular genius right this is this is our team around 2012 um I'm just toiling away in obscurity obviously but that's clearly that's not the case it's it's a real team effort I mean a third of our team you know we have a design director art director 3D guy designer and Tech artist all kind of like working together on UI and as we expanded recently this we're a lot bigger now um we doubled our UI design Department which is we got another guy and and uh that's Max ma over there and he's doing the uh phone transition for for us and then so now we have even more Firepower it's crazy what we can do do with his team like

this and so getting to see the players uh I wanted to show you what it what it looks like to take a feature from beginning to end and who's involved with each step so here's um uine Design This is a version of our wireframing this is about as wire framy as we get we don't use Vio or anything like that it's all back of the napkin stuff um so this is UI UI design and then programming if we think there's some issue that might come up with our our initial sketches and now we're just iterating with UI design and 2D and then at this point once design feels like we have the requirements in our mockup like they may not look good but at least they're there then uh they usually drop out of the discussion and we just kind of Weedle away um trying to figure things out um once we get to a point where we think we have a good idea we bring in 3D to look at it and say is this reasonable will these things actually work being modeled out and will they be able to slide under each other and all this kind of stuff and then here you'll notice there's a

big change between these two and this is part of our design process where in the middle of mockups design will find out oh wait we need to show Rewards or we need to have keys that open and close these things or something like that so that's why that that um mockup changed so drastically and this is when 3D and programming are coming in to really start doing production on it and then here's the final deal this is what it looks like modeled and then we bring on Tech art to do effects and programming so this is it in motion [Music] yeah so that's everybody all working in concert and I think it the results are kind of cool I don't know so that's how the sausage is made um to recap yeah so find your seed you know it'll make your project better and it'll save you a lot of work in the long run physical uis are awesome in the right

context and good things will happen if UI appear to the rest of development I guarantee it so that's all I have to say I'd like to leave you with a little bit of our culture that was good so uh thank you all for coming um I hope you have a great GDC and I don't know if we have time for questions or comments [Music] [Applause] yes um so I was just kind of curious does uh blizzard plan on like kind of releasing any tools to the unity Community trying to get back to the community because of obviously their success with hearstone um do I need to repeat the question on these or is that okay um there are currently no plans to allow like modability or anything like that like like kind of what we did on on wow um just because of our audience and

hopefully we're trying to make you know a really tight experience for players that's really highly designed um go ahead go for it how long did it take to find the seed and how many people were working on the project uh up until that time um it's hard to say but I think it was it's definitely Le less than 10 and it probably took um it's hard to say because we're also bringing people on but maybe a year or so something like that uh along the lines of how UI design was influencing game design I'm wondering if there's been Hearthstone UI design influencing wow UI design like perhaps with the Garrison or or something along those lines like are you cross-pollinating we defin we have a a UI group that meets together and but there's no explicit cross-pollination but I think people in the company are starting to look at this style and saying that maybe there's something there that we can bring into other games

that's for sure yeah you mentioned with the NAX ramas where you had to change your mockups to add like the keys and the rewards were there any other points where things really changeed the way that you had to approach it because of some element or was it more in the direction of where you could change the priest hero power because the UI needed it to change um it kind of there's examples of both I can't think of any of the top of my head but definitely there's situations where we just had you know this was the mechanic so we have to deal with that you know um I I can't think of any up the top of my head but definitely there's sides where you know we have to compromise or design has to compromise thank you yeah so uh we all know that hearstone have a lot of the uh brilliant visual effects there in the games but um I feel that when we move that to the mobile platform so a constraint by the um Power of the mobile device uh there is a great decrease on the frame rate so how do you make the decisions between the tradeoff of a great brilliant an awesome effect with a very smooth uh

frame rate to uh guaranteed experience thank you um this is more of a question for engineers but um I mean do you do you sacrifice some of the effects there no we don't intentionally sacrifice any effects we design the coolest effects that we can make and then smart guys figure out how to optimize it okay thank you so a successful card game usually create a Hu lot of opportunities for illustrators for doing all these card illustrations and I want to know like uh where Hearthstone team find all the illustrations for their card do they use existing art resource from the blizzard library or they actually uh hiring and giving commissions to other illustrator create a new card um it's actually all of those things we have a pool of existing art which we use and then if there's things not there then we'll commission either um external artists or we have internal artists who will handle those things so um there's our art

director right there uh yeah so so is all those things uh so I'm another UI designer so it's cool to hear the big table comment um when you uh when you guys were early on in the process um what what kind of or did you make any argument about the validity of the UI design and that hey this is as important as the game design uh you mentioned like you guys don't have a big world you know it's all UI stuff MH um so did you make that argument or did you show like data analytics or so I was very fortunate in that I had worked with a design director for a number of years on World of Warcraft and that experience made us really think hard about ui's role in Game design and so I think we came to an agreement together on that I did not have to sell you know you know somebody on this idea that that's the case but um

I think you can look at any kind of board board game type translation of that you can make that argument like this game is UI you know it's important and and maybe hopefully maybe harstone could be an example of that I don't know you know I I would like to think that could be the case hello there uh during the creation on designing the UI how much were you locked down with the overall gameplay design pardon me how much how much uh how much were you locked down already with the gameplay design um we were locked down in the in the fact that it was going to be a card game okay nothing else but the game design was progressing the same yes they're progressing at the same at the same time and they're and that like I said kind of they were informing each other of what this could be you know um once we started getting into this physical space then the design started think differently about you know how things work which is kind of cool one more question uh how much time do you expect

the creation of the hearstone UI for phones to take and do you have any planned release date this s next one um soon next couple months is what I can say um it's it's pretty far along and it's looking pretty awesome so okay thanks yeah okay um I think that one more okay um yeah noticed that you uh in arstone you can't really make anything during the other player turn yes I wonder if this was like early game design decision or if it was like you explained before also something that was driven by the UI design uh this is not it was semi UI but it was really the designers who um didn't like that flow of play because um you have to pay attention a lot you know you have to be and so it just felt like it wasn't a good flow for us I think and once we switch to the idea of these maybe

secrets that could trigger another play something like that it just made it like when it's my turn it's my turn you know I'm trying to solve a single player puzzle and I think that is kind of the appeal of the game and will we get more de slot took you this long to get this question um I had to ask it it's we know it's an issue and we are looking at it yes that's not like a handwave answer it's it's really something that's on our radar okay that about does it thank you so much