Changing Navigation Mid-Flight: 'War Dragons', a UX Redesign on Mobile

[Music] hi everybody thank you very much for coming today i'll start with a quick overview of what we're going to talk about so i hope you've had a really good lunch thanks again for attending this session and i hope that you're enjoying this year's gdc and of course san francisco so i'm here today to discuss how we devised and released the ux redesign for the live mobile game war dragons last year during this session we'll cover the importance of creating a vision establishing a clear design rationale community involvement utilizing a phased rollout plan for changes for a live product and the testing methods used and how we remain data informed to insist in our key decisions so hopefully this all sounds great before i launch into that here's a quick bio so that you know who i am so i'm james and i work at pocket gems here down in downtown sf as the director of ux i joined the industry back in 2002 and i've been fortunate enough to work with

some outstanding teams on some really awesome ip over the years i've worked at companies that include ea disney lucasarts rumble and of course pocket gems so the current pocket gems stable of games includes war dragons that we're going to talk about the award-winning episode and the recently launched wild beyond now needless to say that without the great team over there at pocket gems this talk wouldn't be possible so now you've got a little more context about myself let's just get on with this talk so war dragons war dragons was launched in 2015. it's a 3d real-time pvp title and has had 27 million and counting in stores to date now we're very fortunate to have a truly passionate player base in our games that interact with each other on a daily basis and just to illustrate how passionate the players are here's some quick facts about them typically players run over 20 battles per day on average that's roughly about a three-minute battle and 20 percent of players in the top

leagues have never missed a war battle for their entire get type their entire time in the game that's really quite incredible when you start to think about it we even have players that have married one another who met through the game's social features so it was evident that we had a game that people played and clearly loved and why did he want to redesign the ux so we held stakeholder interviews and a common opinion that we heard was that the game was inconsistent to navigate and in places complicated to understand as i've explained the game was created in 2015 which in mobile terms might as well have been from a previous console generation now there was a real desire to improve simplify and standardize how our players could access the game content as we observed players interact with the product in person it was like watching a game of digital table tennis as their hands just zipped across the phone accessing numerous buttons placed in varying positions to navigate the screens it was tiring enough just to

watch this happen let alone have to do it now with the addition of new features the original screens and flows have become well modeled now if you've ever worked on a live mobile product that has run for a few years then this scenario is likely going to sound familiar to you products evolve and systems that made complete sense at launch can lose their cohesion and effectiveness over time as new content gets added now our testing confirmed that it was easy for new players to become disorientated we wanted to help ease that burden now by competitive research we had identified common patterns in the most successful titles we realized that they shared consistent mobile design patterns especially in regards to their navigation and our product didn't do this in its current form the older screens we had in the game were often inefficiently using screen space which in places resulted in barely legible content there was an over-reliance on fixed-width stacking pop-ups and

overlays that didn't utilize the full screen space available so applying the principles established by jacob nielsen in jacob's law we aimed to simplify the learning process for our users by providing familiar design patterns in our suggested redesign we believed that we could adopt and implement those proven mobile design patterns into our game and significantly improve the ux as a whole so we'd identified why we believed a redesign was worthwhile and this allowed us to craft a vision this enabled the entire team to understand what we were hoping to achieve we wanted to have more engaged players we wanted improved accessibility to core content we wanted structured and predictable navigation within the game we hoped we would find performance improvements too and definitely an upswing in early player attention and a familiar yet improved experience for existing players this was a fairly uh compelling argument and there was consensus by and across the team

we felt that if we delivered upon all of those components the product would be better and the players would experience this and therefore would accept it but first let's be clear there was a definite risk involved with this because the product was live and i have been in operation for some years and with a passionate player base we were very cautious not to do something that would result in elder player angst and eventual churn we wanted to make sure that changes we planned made sense and were of value to the players and that is why we targeted simple quality of life improvements alongside the underlying navigation restructuring work we equally wanted to make sure that we were not changing the best parts of the game so as to lose our players understanding our players was imperative as we were about to change their game so communication would be key both internally and externally in order for this to succeed first we needed a plan as this was a financially successful live mobile title there was a lot at

stake should we not succeed the nature of the changes we had planned made the logistics of delivering the redesign into our players hands a real challenge the team had to balance continuing to support our existing players in the live product whilst concurrently designing and building the redesigned screens in the background to best avoid player meltdown and a broken game we did we decided upon utilizing a plan which used the approaches of discover explore test and listen to help we identified key practices in each of these stages and then devised a phased rollout plan that would enable us to receive player feedback at regular intervals if at any time it looked like we were in trouble we have a collective understanding that we first try to address the issues and if all else failed we'd pull the plug on the redesign and focus elsewhere so this slide introduces the phase rollout plan and as you can see the phases included concept engineering

phase one and phase 2 internal pocket gems and external testing android release which was our ios pilot and then finally the worldwide release now the key idea of the rollout was to allow us to get feedback on the plan changes at multiple different stages of the development and to review it to catch any uh show stopping issues each phase of the timeline saw an intentional increase in the amount of users that would that we would receive feedback from now in the concept phase this is when we began exploring and establishing the design patterns for the redesign we'd identified the existing product relied on an overuse of pop-ups and our intention was to replace all of these with full screen mobile design layouts and implement a standard back button in the upper left of the screen the goals here being to address the issue of player disorientation we had seen in testing then to enable faster access to content we restructured and collapsed the ia where it made the most sense and to improve the ergonomic design of

the navigation and make it more thumb friendly we replaced the old filing cabinets that had been positioned in the top center of the screen and we implemented a new sub navigation menu situated underneath the back button positioned at the side of the screen considering the game was played and held in landscape we thought these changes aligned well with the underlying principles described in fits law we were making the navigation elements easily selectable and positioning them close to our users so when we had a prototype that we felt was ready to share we sent this out as a password protected prototype to the gpf and what is the gps i'm pretty sure you're all wondering well this stands for gameplay faction this is a group of our most highly engaged players they are forum moderators and social media influencers and they have the ear of many a war dragon's player and hearing their opinions was critically important to us as we progressed with the redesign so we gave them about a month to play around with the prototype and provide

feedback as you can see from some of the quotes the initial the initial early feedback we received was positive they liked the prototype overall it was considered an improved experience the key element seemed to resonate well and the redesigned navigation appeared accepted the prototype was serving its purpose and was allowing us to sound out engage any resistance to the new designs plus we have provided our elder most engaged players with full disclosure and super early visibility on what the team had planned for the game they could see that we hadn't created a new alien system the quality of life changes that we had implemented in the prototype were recognized and applauded now there's one thing to note that when we sent out the prototype we sent it out individually to the players they'd all signed ndas so they couldn't discuss with anyone except ourselves so conversations at this stage were siloed and we found that this enabled us to elicit a good amount of feedback from the from them this way and we ensured also that this kept conversations

focused that's so worth remembering for later on at the end of this time we collated their comments and reviewed and it seemed we were hitting the right chords with the most dedicated players as we just discovered there were no hard no's at this point and we deemed it safe to move from the concept phase to the first engineering phase and actually begin implementation now the prototype felt good to both ourselves and the gpf players it's always easier to get a better read when designs are playable on the intended target device and uses hands right so we were iterating upon the screens as we received feedback but at this point that had only really included some suggestions in minor tweaks here and there certainly there were no major objections that should that should derail us from forging ahead now we began to concentrate upon implementing our core gameplay loops these were the screens most touched by players and included the management and the training of their dragons how to initiate attacks upon other players tackling these screens kind of like made

a whole bunch of sense to us we also didn't have a large amount of engineering resources available to us at this point so we used this the first engineering phase as a yardstick to gauge how long screens using the redesign the further screens would take to implement we definitely didn't want to overburden the engineering sources that we had available with a million in one changes right from the get-go so consulting with the engineering teams to what was achievable in q1 this helped define and focus the early redesign work the backbone of the redesigned components was really established within these core screens the thinking being that once we had refactored the menus for these screens it would be an awful lot easier and faster to implement and share assets and modules across others and here was our consistent navigation screen sub navigation and full screen content mode beginning to take shape as we moved into q2 for 2018 the core screens were completed

the engineering effort shifted to the other first level navigation screens and the events screens understandably we wanted to make sure that we were using our time effectively and our engineers identified ways to bring marked improvement to the performance of the game's ui screens in relation to their code structure we were testing internally and all roads pointed to a good place so as we tackled those other key menu screens the team was really gathering momentum our dragonrider screens were now far more accessible as we'd surface their access points the top level of our hud by reworking the ia in addition we positioned the rider models front and center in a much more prominent manner so players could now clearly enjoy their aesthetic designs in-house guerrilla testing of the latest bills seemed to confirm that these changes were well received we also began to update the chat screens making sure that they adhered to the the new navigation design principles too now as the engineering phase two

continued we were allocated just a few additional resources so we took to addressing one of the key collection of screens accessed in-game that being the event system so this aspect of the game features time-based events that players really got into with the aim of being able to win new dragons and other awesome prizes now our events are a key revenue driver for war dragons and each event runs for a time period of three months now when we ran design reviews and heuristic evaluation for the old designs we observed that it was designed using non-mobile friendly patterns as you can see in the slide we identified that it was plagued by discoverability sequential content and accessibility issues and it was extremely easy to lose track of which branch of rewards a player was in whilst navigating through the content due to for poor formatting so first we applied the core navigation structure that we had deployed elsewhere to these screens then we took a step back and reviewed our earlier competitor analysis and

again leverage this to help us reach our design solution removed with the undersized and awkward to navigate windows previously used to display multiple content branches and we instead messaged this via a carousel now we took care to limit the number of elements for use in the carousel so as not to create unnecessary scrolling and to avoid causing player interaction fatigue and we address discoverability issues via the illusion of continuity half images color cues and information sent we use large phone friendly panels with clear imagery depicting which prizes were available all aimed at driving player engagement time and in here we injected personality and visual interest at the top of the panels of each branch by using branded imagery content that was once spread across 18 screens could instead now be viewed and accessed in just two plus we created the icons for the

branches at an increased size for far easier interaction than before to reduce further clutter we just like we displayed details and information for the individual prices placed in a small pop-up which was dismissible via a close button this set of screens alone elicited some of the most positive responses that we'd had from on-site testing okay so now it was time to get the build back into our players hands again we were really eager to hear their thoughts having received such encouragement previously so we excitedly began the fourth phase and thus featured some heavy amounts of testing so we ran on-site a b testing during which we gave testers the old and the new versions of the game to interact with these testers were mobile gamers but they hadn't yet played war dragons so the results unanimously pointed towards the new design being preferred by the testers we were hearing comments like well this just feels more modern and better suited for a phone and this is just easier to understand this was

awesome we'd also been running system usability tests during the on-site testing which resulted in solid scores and it was clear that what we had done wasn't breaking the game as a further means of informing and preparing the community for the incoming changes we presented the screens via a live demo on our facebook stream so far so good i mean what could stop us now clearly we're in the home stretch right actually no although they had liked it initially in the wireframe and prototype phase when we gave them access to this new restricted build now the elder players didn't approve this is by far the most difficult phase to get through we clearly reminded the players they'd all participated in the feedback loop months earlier we wanted them to uh you know to understand that this was our changes were targeted at both new and old players alike and we wanted them to help us understand exactly what it was that they now disliked

first we just really wanted them to calm down the key thing here was that we wanted the community to see and understand that we were truly listening and valuing their input just to illustrate the level of disdain that we witnessed in the comments we received well here it is on the next slide so this was really worrying to us as the players were hugely invested in the game and most have been playing it since it first come out in 2015 and here they were rejecting the designs in high fidelity now that they had it in their hands here they were rejecting the buttons here they were rejecting the layout changes here they were rejecting full screen content mode and in places to change from horizontal to vertica to vertical roster selection as you can see from the quotes some of the other elder players were threatening to quit if we released it this was exactly what we had wanted to avoid at all costs our elder players walking away due to the plan changes it was tough reading and it certainly had

the potential to become a dark time not quite this dark but you know you get the picture but the rejection was really worrying were we really going to have to drop the redesign after so much work and effort well no not so fast we clearly had to evaluate the feedback we were receiving if you remember i explained earlier that during the initial prototype testing this had been carried out in siloed discussions with individual players now the elder players were testing the new build as a group and as such this enabled close forum discussions to take place between themselves this yielded very different results very different having the product in their hands with these new designs was suddenly perhaps too real for some now we wondered if we were having to deal with a pack mentality and the trick here was trying to decipher what might be subjective as opposed to objective feedback that we could use to improve the product i mean there's absolutely no no point in testing if you don't listen

and act upon the feedback right well there was a lot of back and forth and we intentionally gave them time to adapt to the design one of our awesome project managers thank you justin was involved in direct communication by the close forum group and he spent a vast amount of time repeatedly explaining why we had made the choice choices that we did and backed it up with examples and research now while some of the players began to soften their dislike through time using the build others continually threatened to rage quit the game if we persisted with the launch of the redesign i mean of course we really were listing it wasn't just lip service the switch from a horizontal to a vertical roster selection to that for the time-sensitive pre-attack screen was a consistent source for complaints from our elder players and that seemed to be the one main change that they absolutely refused to entertain they were explaining that as a horizontal selection it was easier to scan and pass the roster information

quickly which is exactly what they had to do on this particular screen and that now they were incorrectly selecting dragons in the new vertical screen so we listened evaluated their feedback and actually in recognition we reverted this this was a crucial moment as the players could now see that we were not ignoring them we also switched the matchmaking based selection over from the right to left after hearing lots of opposition to the initial design this particular complaint seemed to be more about change resistance as it had been previously located on the left however once again we accommodated these requests in a further iteration now as we evaluated the other requests and there were a lot that they were making we had to balance this against development time and ask ourselves if we truly believed that these were game breaking issues for the other players at large or perhaps a set of personal dislikes once again our phased release plan came into play now although there were some emotionally

fueled points being argued by the elder players we know we had to consider that the previous internal testing had gone well the on-site a b testing and sus schools all pointed to a more usable and improved product we'd done our homework and based everything on best practices and establish design patterns our research and research had led us to these solutions so was this just a storm in a teacup and should we abandon the whole redesign now well we still unanimously believed as a team in the steps we had taken to measure our changes so we decided to release to android and get more data points so let's remind ourselves that this was possession positioned as our android test and ios pilot prior to releasing worldwide this was an important gate that we had to pass through now once it was released to the android community we observed the anticipated change resistance that we had expected but the key thing to note here is that the actual level of resistance was far less than we had been preparing ourselves for the much feared wash of total rejection

it didn't appear actually anything but that sure there were folks that didn't like it but it didn't mirror the level of rejection we had just been going through from the elder players and before we knew it a few days had passed the forums and reacted and then moved on to another topic to debate so there was still an air of anxiety due to the level of emotion and the elder player feedback we'd received and although the android release feedback contained some negativity towards the changes we were still seeing our players continuing to engage with the game using the new designs well why wasn't everyone rage quitting as it being forewarned and then it started getting super interesting we switched on the in-game surveys then we started to receive those results and we began to eagerly review them to find out what a mass volume of players thought of the work we had done talk about a feel-good factor they weren't quitting they were telling

us they actually appreciated the change that we had made respondents were in their thousands they were overwhelmingly telling us that they liked the feel of the new design they told us they believed it was better than the previous one and they were here confirming that access to otherwise buried content had now been surfaced and made easier to get to suddenly the positive news was flowing again here we had here we had him here sorry now we had hard quantitative data from our android community the survey results filled the team with confidence and as we assessed the proportion of users that were encountering the problems with the new design and if i could stay on this slide all day i would okay so the anxiety we had experienced previously was becoming just a memory we still had work ahead of us but we were but we had the really hard data from our community to back us up and it was such a key turning point and the team was grateful that we had held firm in our belief that we needed more data from a wider number of players we re laid the findings back to the elder players and it was really pleasing

to see that on the whole they accepted this we gave them full disclosure into the questions we had asked and the level range of players that we had asked these two as we approached the full worldwide release we tackled some last remaining issues we're really aware that loading times for certain sections were far too long so we targeted this as an area to improve additionally we refreshed the prices and ranked screens with a new visual direction and continued the roll out of the sidebar navigation the community reaction to these changes was unanimously positive even the key elder players got on board with this so then it was time to finally let it run in the wild we'd done that we are of course a free to play game that means that we aim to do things that can help improve our metrics from a business perspective well the improvements we saw in our metrics were fantastic there was a thirty percent increase in player time spent in the game there was a twenty seven percent art dow increase there was a 10 early player retention increase

frame rate also improved significantly which is kudos to our engineers they've done an awesome job refactoring the screens reason to celebrate so are we finished well today there is still a dedicated and active worldwide community who including those elder players that are still playing war dragons the team continue to bring improvements the existing features on a regular basis as we listen and refine and help where we can it's certainly true that a game evolves over time and so do the players and their needs and we definitely have a belief that it's a marathon not a sprint that mentality for supporting a live product so learnings well establishing and defining a product vision is essential researching and identifying the design patterns to you to use made achieving team alignment an awful lot easier and helped focus our workload a stage rollout enabled the team to

constantly receive validation be that from the prototype stage to the full worldwide release it was a plan that allowed us to execute with no issues involve the community as much as you can and do exercise sound judgment in evaluating their feedback get to understand your players bring them along with you on the ride iterate and use a test tirelessly utilize both qualitative and quantitative data alongside all of the aforementioned to assist you in your decision-making process and perhaps the most critical one for me believe in your team thank you i think we've got time for any questions if anybody wants the microphones hi how's it going can you talk about how lifetime value of those elder players contributed to your decisions about what

you would and wouldn't accept i have no idea what they actually were contributing but if you found that really they're bringing all the money ultimately would you have completely scrapped the entire design if at the end of the day they definitely were influencing our revenue yes you know they did get on board like i say it was an extremely delicate balancing act that we had to do so you know that's why we consulted them first and foremost the the gps the elder players there was around 10 to 15 people right at the beginning and because they are so so so ingrained in the dragons community we felt that was just like a really solid place to go and consult with so yeah i mean it was a happy story right hi um you spoke a little bit about how the community received your game changes differently compared to when they were shown in wireframes and prototypes and then when they were shown as a group could you explain a little bit more about why you believe that differed is it because of the group mentality and

maybe they had um friends who were affecting their opinion or you mean uh what could do i do i do i have a hypothesis as to why it was so different when they received it yeah yeah i mean just the the fact that they were siloed conversations to begin with meant that they weren't sharing you know and discussing with anybody else there and it did just keep it completely focused yeah and then just the very fact that you know they were all together as a group i don't know it's just this natural reaction of one person saying well i don't really like this anymore and other people jumping onto that you know onto that particular argument that was what we saw okay thank you so um you had metrics up there that showed in an uplift in your arp dow and your engagement um but you're still supporting a live game so how did you tie those metrics directly to the redesign um well that's the part of the vision that we established at the beginning

yeah we definitely were trying to look at increased frame rate through refactoring of our code uh we knew that uh you know it was a disorientation issue that we that we'd witnessed in testing with new players so we felt strongly that like by redoing the navigation that we would actually improve early player attention which is exactly what we saw yeah and then what was the last one i can't remember sorry my my brain has blanked on me oh yeah um i think we got lucky there more than anything you know i mean the fact that players stayed in the game more time now you know like a 30 increase of actual time spent in the game there's 30 more time for them to actually spend something yeah does that make sense sure okay hello hello um i'm just wondering do you think it would have relieved some of the anxiety of rejection from the

larger community um if you would um even though like the elder players like their opinions are definitely like very important because they know what they want from the game but if you had also involved like maybe a group of slightly newer players sure well i mean we we did do this you know we you could see through the stages that we had you know we brought people on site who and you to get their feedback that that was all evaluated there from from from the on-site testing you know and then obviously sharing it via the facebook live stream as well that was for everybody to see right it wasn't just the elder players so we did try to make sure that the community had visibility but it was key for us as i say just to get that elder player buy-in because they were like basically social media influence influences for dragons yeah okay thank you hey quick question uh you had mentioned at some point that you use navigation principles when designing uh i just wanted you to go over what navigation

principles you mean by that well we were you know we used we you know we used our competitive research to see what other successful mobile design patterns you know we saw and the one thing that we saw that was like you know a really repeating motif was the the consistent navigation the back button the sub navigation where things are in your ergonomic thumb range yeah because the game had been created in 2015 and it really wasn't built with like you know solid mobile design principles you know in practice and that's what we tried to do i think that's all we've got time for thank you [Applause]