League of Legends Client Update: Art Directing a Consistent and Scalable Interactive Brand Identity

[Music] all right so before we start just a friendly plug to please fill out the GD survey after this talk we really want your feedback I want to hear the good I want to hear the bad please give it all to us and also please please please turn off your cell phones please okay so let's start hello my name is Laura DeYoung and on the art director of League of Legends at Riot Games I'm a visual designer by trade and I've been working in interactive media for 18 years and 12 of those years I have been lucky enough to work in my dream industry which is the games industry I am still so happy to be here I can't even put words on it but ok before riot I worked at EA and I worked at Ubisoft helping to direct the visual direction in UI for games like Far Cry 3 Assassin's Creed 2 and NBA Street and I've been at riot for four and a half years and when I started I was the visual design director for League of

Legends and kind of for Riot as well and now as art director my focus has shifted to managing artists and serving more as a creative stakeholder on League and today I want to talk a product project we've been working on for four years and that's building the new client for League of Legends and okay we just launched our open beta last November and we will be launching the client soon two players I'm sorry I still have to say soon I imagined I was going to be able to give you a date but it's soon and the project lessons are still very fresh when I say fresh I mean we've been updating this PowerPoint right at the end based on developments that are happening back at the studio right now so the information we're going to share is really fresh and I and I hope there's gonna be some lessons for you because we're learning some lessons every day so the majority of the talk will focus on design decisions but I also wanted to share some of the organizational lessons we learned along the way so we'll do a little bit of both okay so today I'm going to focus on three things so first is just a brief history of the

client you kind of need that to understand all the work that went into this and then the eleven lessons that we learned we learned way more than eleven but I'm going to just share 11 with you today for the second time and then the status of the client today which by the way is a lesson in and of itself all right so before we dive into lessons let's go back to 2006 when two entrepreneurial gamers gathered a small group of developers to pour their hearts and souls into League of Legends and it would have been easy to slap a free-to-play game on a web browser but the team wanted a dedicated client so players would have a stable competitive gaming experience and the development team could add features and build content continuously without disrupting player experience right so a nice contained experience and they launched the game using Adobe AIR and I've unearthed some old forgotten images

of the first client and I know some rioters they're out there and they're kind of cringing because we've come a long way artistically since these samples but I think it's still fun to look back and by the way the next series of images are a bit of a mix from the very first release and some different versions that we did over the years we couldn't find everything from the very first release so from a designer's perspective this is not really pretty but it definitely served its purpose players could see which of their friends were online they could chat and Nick they could invite them to a game they could check out their champion roster and their abilities amazing I'll admit their character stats with our runes and mastery system and purchased champions and skins and the online shop and most importantly they could launch a game for the client right they could play but we had designed ourselves into a corner and it was becoming incredibly difficult for the client to do anything else

immediately after launch the player base expanded far faster than anyone had expected and the growth of the game made it very challenging to step back and dedicate attention to the client and teams wanted to add content right everyone's excited like let's add stuff the game's great so they want to add new game modes and they want to add champion BIOS and they want to add patch notes and community videos and eSports announcements and everything that you possibly imagine and the team the dev team responded to these demands by slapping on tech art and audio without any clear vision for the UX or the visual design and this went on for years and we continued to build on the client because League was always in ketchup mode when I got here four and a half years ago we were actually still in catch-up mode so it's really crazy and in 2013 that band-aid approach was really not working anymore the league air client was inconsistent both visually and functionally we lacked a strong visual brand to tie our different

UIs together and set us apart from other games and we didn't have a set of visual style guides or tools for our developers and what that meant was that instead of hyper focusing I'm making really cool for our players they would spend time reinventing the wheel for each feature so each new piece of content like new game modes or this was the rune combiner and if anybody remembers this thing but I know you maybe you want to forget it but it wound up with teams customizing their visual design work so they were like hey I got a new feature and there's no rule so who's gonna do this the way that I think I should do it and the back end was not functional for developers it was risky to add or subtract content because there was a high chance that any change would break the client and this picture I put in this Jenga tower because I heard engineers refer to the tech as a Jenga tower and you know you would go and talk to them and say hey can I just you know swap out this graphic with this graphic and you get this like no no you can't swap those graphics because players

might not be able to play the game if we swap those graphics so it really was the Jenga tower not anymore at that time it was and the players felt the pain and by the way we shared their pain and these quotes that I'm sharing this is the g-rated stuff from our forums and I'm gonna read it out loud at riot your client sucks GG riot with your terrible god awful client and my personal favorite I do not know what I did in a past life to deserve this shitty client whoever you are out there we really want to fix this client for you I feel you so when a project has gone this far sometimes the only solution is to nuke it from orbit really that's that's where we were at we're like there's nothing we cannot polish this to it there's nothing left that we can do with this so we hit the reset button with a dedicated team so this is introducing the art team that were hungry to make the client a great experience for players the LCU team is quite large it's bigger than this but this talk is mostly about the artist

that's who's represented up here and we collected 11 lessons from our experience rebooting the client and I hope they will help you examine your projects from a different perspective and maybe even inform your design philosophy and your processes and I tried to keep this presentation focused to around 40 minutes so I've packed our years of development into these really quick lessons but before I dive in an important caveat the development process was not smooth and it was not perfect game development is iterative and I think a lot of you know that it's often pretty messy so getting to this point has involved a few false starts pivots expected and unexpected challenges all of which have led to some pretty hard learnings to us okay so let's go no matter how big a team is I believe the first step is to identify clear goals so having a shared understanding of what you want to accomplish allows artists to explore different directions while still trying to achieve the same goals right

we're all like going towards the same goal post or running the same direction so the goals we established they weren't groundbreaking but it gave us a shared understanding and we wanted the clients visual identity to achieve three things first provide a flexible design for developer efficiency second represent league's unique and eclectic fantasy world and most importantly resonant with players okay for flexible let me let me explain to you what I mean by that we needed the artistic style to be something we could dial up or dial down and change depending on the needs of the product so league it's ever-evolving it's changing all the time and the client's artistic choices needed to be flexible and provide a sandbar for developers to continuously add content okay and at riot we do aim to craft every piece of art and make it feel super special to players but with the client we need to balance that with scalability and systems thinking there's

not many opportunities to have a one-off in in a design system okay so represent leagues unique and eclectic fantasy world what I mean by that so we wanted the client to not only represent leagues IP but to actually deepen the fantasy so there is so much I P going on and we wanted to connect that to players and have the new client be a sort of extension of that fantasy and then finally resonate with players our most important stakeholder players in the end it doesn't matter how nice the art is or how nice a design is if it doesn't resonate with our players we have absolutely failed okay so before we dove into design mode we had to understand and appreciate the diverse complex and sometimes ambiguous regions and characters in our universe so we have 12 regions in league including a region like demacia which is a lawful militaristic society of fiercely proud

people who value honor and justice and you can contrast that with a region like zon which is a polluted industrial under city whose wealth stems from black market trained traders and unrestricted and sometimes really unscrupulous inventors if anybody saw the Warwick update that we did recently you know these people do some pretty unscrupulous things so within these twelve regions we have a range of Champions and fantasies yeah so Garen a brave warrior loyal to his land who fights for justice no matter the cost I think era it's kind of boring and then my favorite Oriana who's an intricate kind of creepy clockwork girl and a celebrated feats of superior piltover enginee i love Oriana and at the same time we have this absurdly cute teemo who's like a mushroom tossing yordle who appears to really enjoy being the ultimate trol of summoners rift and yes he is the

devil if you play our game you know it's true okay so we have a diverse universe with tons of regions a broad range of Champions and a mix of fantasies so how do we achieve our design goal represent leagues unique an eclectic fantasy world it's gonna be pretty tough okay so we tried the obvious design choice in the beginning super obvious let's represent every region and every fantasy let's try to blend them all together and see it we get of course that's gonna be great but when you try to communicate everything through a design you end up communicating absolutely nothing so here the team was working with a concept we called modern fantasy so think modern materials mixed with a fantasy shaped language and this look was intended to bridge the gap between high fantasy champs like rise and sci-fi feeling champs like Lucian and this concept sort of meets our goals by trying to

represent all the league's unique an eclectic fantasy world but that's really all it does because by trying to be everything it lacked a distinct visual flavor and again we really saw the client as our opportunity to not just represent league but deepen players engagement with our IP through visual storytelling and this design just wasn't quite doing it so we began to narrow our focus and identify identify common themes and we started to ask how okay so what are the common themes and experiences for every League of Legends player what did they see in every single game and that brought us to the Nexus so the goal of every League match is to destroy the opposing teams in Nexus which is an edifice of crystallized magic and here's an exploration of the concept of the Nexus and it's a nice looking design but the design did not uniquely represent league's eclectic fantasy world we kind of felt like the crystals could be any game and there

isn't much of a story to be told about the Nexus and I'm honest with you it's just kind of like you blow it up you hit it and you blow it up so we didn't feel like that was much there but we did think that narrowing the focus and finding common themes were the right approaches to this design challenge but we realized hey we actually need a narrative so digging into the cultural artifacts of specific regions that brought us to the region of piltover so piltover is a thriving progressive city and the cultural center of our universe were art craftsmanship and trade walk hand in hand so piltover power comes not from their military but the engines of invention Commerce and forward-thinking so they're kind of like the innovators of our universe we love them and our team immediately latched on to this specific piltover artifact called hextech and in our universe hextech is a superior technology that

harnesses the power of magic through a master crafted mechanical object so champions who can't typically control magic or channel magic they can do so now with the hextech device that's very convenient if you've ever land against Kaitlyn she has that rifle and she has a crazy range you can thank the inventors of hextech for getting beat up in bottom lane okay so here our hextech device concepts created by our world building team and in each iteration of this Bo the artists attempted to communicate that a hextech device is expertly handcrafted the blue is a reminder that the source of power is magic which courses through the entire hextech device and then this glove not sure of the bow went but anyway you can see the glove the glove followed the same principles uniquely handcrafted and visible magic coursing through the device so the team gravitated to this device it kind of became our muse particularly the glove and armed with this hextech theme the team the team started to form a shared narrative oh

yeah hextech gives a champion the power to control and channel magic and we explore the idea of the client B of being a physical representation of a hextech device so the client could serve as a magical intelligent partner that navigates players through the experience so it works right Jessie seemed like it worked so now we had a narrative that inspired us which is great and it was time to roll up our sleeves and explore this concept as a design and at this moment the clients UX was not nailed down we didn't know what the menus were gonna be we didn't know what all the buttons were gonna be in all the interactions and that's absolutely fine we really didn't care about that we just want to get a feeling for how how hextech would work it was translated to an interface so we keep those explorations super super loose but we always recall our design goals and after many iterations we wound up with a few options that we kind of liked but they didn't quite meet our goals and again provide a flexible

design for developer efficiency represent leagues unique and eclectic fantasy world and resonate with players those were our goals okay so on one side of the spectrum we had designs that looked like this super lightweight easy to develop easy to develop take on hextech so it meets our flexible design goal and if you take a look like those little sort of white icons in the middle of that was our one big hint that this was a machine so you can see this is about as light as you can go and again this means our goal of being flexible there are no heavy intricate machine parts that would be difficult or time-consuming to design and animate and while it's flexible it did not provide insight into league's unique an eclectic fantasy world and I'll add that I really don't think this would be this would resonate with players either so we have this on one side and then on the other side out of spectrum we had these runes page prototype that was rich in theme it totally embraced the theme of hextech craftsmanship and the machine and during

the review I just want to say we were viewing this and the team was liking it we're all like feeling really good and team was on board kind of like yeah we can keep building on this and people were brainstorming different ways that we could expand this and then someone asked hey what if we decided to add another room type to this screen so I was like like quiet crickets chirping and people looking at the floor because me too because we've gotten really caught up in this the cool factor had distracted us and we had lost sight of our goal because the design that a great of translating hextech but it lacked flexibility it's a super super compact design with interlocking elements which require each element to be rendered to look like integrated machine parts it had to make sense and it wouldn't easily we wouldn't easily be able to add or subtract from a design like this but we did see something promising in this design even if it was missing on the goal of flexibility so we decided to

explore each element in this design and deconstruct them into a visual system that would meet all of our goals so we wanted to kind of take this with us to the next step and this is one of my favorite moments of development I love this time which is deconstructing a visually interesting thing concept whatever into systems and rules that will define a design language I absolutely love doing this so as a visual designer having a defined design language helps you make deliberate design choices throughout production it keeps the work consistent and it will help you and your team to understand and communicate why design is or is not working you will now have a shared language to communicate with each other so it's not just like hey I feel like it's this it really helps so in a perfect world also each iteration evolves the design rules and pushes the product closer to the design goals so by the way I do think it's great to have those rules upfront and early but be ready to dial them in as you make new discoveries during development so let's break down together in this room what

was and what wasn't working on the rampage so I really want you to understand all of it so what worked we liked the sharp edged directional magic it didn't read like random smoke it looked like it had purpose and we felt it could be used to reinforce functionality we liked some of the shape language you're beginning to see here the design didn't feel like ribbons and Scrolls and familiar fantasy elements it felt more like a sharp well crafted technology and we liked how responsive it belts players are getting feedback that helps them understand their interactions and it was kind of fun too so we like this and what did not work so the machine metaphor was way too dominant if we took all this heavy rendered material and metal and put it next to a league illustration it would really compete with it if you know our splash illustration you saw in the beginning there it would there'd be a competition and the compact design with interlocking parts was inflexible if we started change buttons and where things replaced we would need to redesign and repaint the whole background to keep all the

elements feeling integrated like a machine it was it's almost like too real and also we need to have a very specific type of artists around to pull this off consistently it's really not scalable and it doesn't allow us to leverage all the talent the team just so you guys understand League is a really big team as a lot of people on the team but the team is all made up of tiny little feature teams so there's not a central UI team it's not like everything's gonna go through a central group just doesn't work that way so that's why we really had to think about scalability so from this exercise we now have a shared understanding what's working and what's not working which informed our next step which is establishing a design language all right so to create a design language we first focused on hex text two primary elements magic and metal and as you design it is so tempting is so tempting to focus on execution but before you dive in I think it's really important to divide to define the purpose of your primary elements ask when where and why

you should use your primary elements don't decorate so our magic needed to be deliberate we didn't want it to be simply window dressing like just smoke just hanging out not doing anything and magic by the way is such a fun concept to play with and I feel like there's plenty of room to explore and reimagine magic for our game you know for example you have bright elegant magic like Gandalf the white that communicates comfort and hope Thank You Gandalf and you can contrast that to Lord Voldemort it's a sharp erratic lightning spells you know it feels really violent and then there's room for whimsical silly interpretations of magic like anarchist pocus we wanted hextech magic to feel like a magical intelligent partner that guy's players through the client want to be beautiful still but we wanted to feel like it's it's guiding you so we formed three core tenants for our application of hextech magic in the client so first its viscous hextech magic tends to stick around and has some weight to it falling

somewhere between water and smoke it lingers so players don't miss an important communication it's also directional so it's always moving toward an intentional directions or thirds intentional path so as you see in this example it's not a poof of smoke magic has an edge that along with motion guides the players attention and this is a really early sample if you saw it outside of a container you'd also see those are very clear as one-hour magic then also it's focused so the highest value or the brightest brights feel like a gathering of concentrated magic and a white-hot light is used to attract the players attention toward pivotal moments and here's some magic incorporated into one experience in the client okay so let's imagine that a player cues up for a game they wait a moment and then the client finds a match for the player and this prompt requires the player to accept and around the perimeter we've used an interpretation of magic to indicate the duration the player has to accept the match it starts from one side

of the accept button ends on the other side of the accept button so it kind of frames it and also I want to add that we define magic as being limited to primary buttons an important gameplay UI so magic serves to draw the players attention to key interactions just like that that timer and the button so now that we define magic let's take a look at the other hextech elements metal so like magic metal had to serve a meaning for meaningful purpose and for this design challenge we followed the simple rule which is simple beats complex and we studied the hextech concept art and these intricate hextech artifacts were complex and elaborate designs they're really beautiful and there's so much attention to detail and every inch of the design and we love the shape language that was happening in these examples and we believed we could extract the shapes and they would work really well in a UI but first we we had to simplify this and as visual designers

our job is to simplify the world and as game developers I believe we should make visual design choices that provide clarity so players can focus on playing the game and not like fighting the UI so we reduce the shape language down to three or shapes squares circle and diamond and okay I know this doesn't look groundbreaking doesn't look groundbreaking but when you see them presented like this but these were the primary shapes we stripped out of the hextech door concept that you saw earlier and started layering and combining to create a shape language and here's an example of how we combined these shapes to create simple hextech elements and I'll add that we also made some early decisions about what these shapes would indicate like they do have purpose so for example diamonds are normally used to point players to a specific piece of important information or an interaction so now we wanted to simplify the rendering of the metal so

that it wouldn't compete with our content like this splash art so through color shape language in motion we felt like we could communicate the metal and mechanical nature of hextech so how do we do that so maybe we did that was first we chose gold a color that people associate with quality metals it seemed like an easy choice we added a soft gradient so there's an odd specular lighting so it kind of hints at being a metal without us rendering out all the metal and then a sharp edge shape language that gives the impression of something mechanical so by the way we're getting into impressions now rather than literal interpretations of a machine it's becoming more metaphorical which by the way will be more forgiving when you're designing screens because remember form follows function right it does and when you have things a bit more abstract it could be more forgiving and you're gonna be able to deliver on that okay so also yeah there it goes we saw a big opportunity for motion to support the idea that this slim elegant line

work was a machine and when you think of a mechanical movement you think of industrial machinery with weight and inertia that creates a sense of physical tangibility so we decided to apply that physical tangibility to our metaphorical hextech machine like line work to communicate that it was a machine without rendering the metals this is a very early test we just had this very simple line work and we we worked one of our motion artists who just said hey let me just take a crack at this he did this about two days and it gave us a lot of confidence that we would be able to make this view machine-like and here's how it all comes together this is a champion select screen where you can see how we're combining all the elements and balancing them with crazy colorful detailed splash art so we have at the center a gold-medal hextech ring which feels like a mechanical lens focusing the champion combined with a magic animation that directs the players eye to the next interaction which is the next player picking a champion and as we were

defining our design language engineering and UX were deep in exploration - we were all working together and by this time we really felt like we had to bring everything to the table and kind of make something together because we don't want to work in a silo so strong artistic technical and UX solutions were being proposed but we needed to test these assumptions because we could talk all day but we needed something to point to the tee needed a target we needed a North Star like what are we making together like we need to see this thing so we challenged ourselves to create a sample video to solidify the vision for ourselves and also to share it with the studio so for this challenge we created a series of interactions that the player would experience getting into and out of a game so you're going to see right now it's kind of a play game flow and there should be a game in there but it won't be he'll just kind of see a victory or

defeat screen and then you'll see us transition out so I'm gonna play that right now we premiered this video at a company-wide events and the entire client team was watching an anticipated [Music] the heart is the strongest muscle [Music]

okay so company erupted in a standing ovations actually I think one of our best moments as a team at the studio there was laughter there was legitimate tears people were so happy I can't tell happy every was it was an emotional moment for the team because we worked really hard on this and we were energized and we came back and went full steam ahead art audio engineering and UX had this shared North Star right we knew exactly what we were making together and that feels so good it feels great and it often transition translate translates to like crazy production velocity right like we're all on the same page and they went back to work solving the respective challenges back to the studio and that

brings me to my last lesson which has constantly come back to the table so for many many months the visual designers and the UX designers crafted beautiful designs and beautiful art assets but there was one major issue engineering had a Herculean task of rebuilding the client from scratch and they had to launch a product that would not disrupt players and as always with development beyond Earth's technical obstacles and their production velocity velocity was inevitably impacted but art designs velocity was not so if you can imagine what kind of happened was we all started working together and when I said the engineer slowed down I mean we were going forward and they had to go all the way back and redo a whole bunch of things and after several months of work and kind of reworking the tech the engineers dug deep into the tech and they compared it to what we were trying to do creatively and they discovered that for the lowest spec computer what

we call the toasters performance was going to be a pretty big issue specifically for our motion targets and this is really where we made our mistake and if there's something you guys take away from this I hope you take this away and that wasn't allowing the different disciplines on our team to fall out of step with each other for too long this is something we don't we don't try to do it right like we actively try not to do that but we had a lot of rationalization about why that was happening because the engineers they really had to fix some crazy right and art and design they didn't want to just sit around they wanted to keep making things so our disciplines fell that step and they felt fill out a step longer than we expected we should have constantly performed reality checks and closely collaborated with engineering testing the tech critiquing the work in the build and trying different methods to achieve similar results so it's not enough to just bring everyone to the table you have to keep talking sharing and testing each other's work like even if you fall out of step with each other you need to find time to come back together again whenever you can as much as you can to

talk and make sure everything is still in sync so the client is still in beta and we're analyzing player feedback and pain now so let's revisit our design goals and take a hard look at the project first provide a flexible design for developer efficiency represent leaks unique and eclectic fantasy world and resonate with players provide a flexible design for developer efficiency okay holistically we believe we delivered on this goal this lighter weight hextech design system provides a sandbox for developers to create and launch new content and they can do so while maintaining a consistent look and feel so we feel really good about this the designers crafted style guides and toolkits and by the way some of them are here today so they're going to be able to share them with you to provide guidance to the teams and we've shared these style guides on behan so you can check them out there's but those those are the really edited ones we have some pretty detailed stuff and however there

are some limitations to our current iteration I want to share that too we currently for example have a super-tight color palette which is blue and gold which limits our ability to communicate different types of devote design elements and their purpose for example in the client we originally planned to have goal to be only used for containers like important information but sometimes now it's also used to indicate an interactive element and this can be confusing for players and it's a direct result of us not having enough colors and elements even to play with so that's something we want to revisit represent leagues unique an eclectic fantasy world we receive positive feedback from players and the design community on the hextech themes will feel good about it we're proud of the design but we could have pushed the design further to maximize immersion and for example we're using web tech to build our client but we don't want it to feel like a website right want to feel like a game and we

didn't go far enough to update traditional web design patterns like drop-down menus I mean drop downs they suck and they don't feel fun or interactive and we do have some drop downs in there and the most important goal deliver a client that resonates with players the players have spoken we have not delivered on this just yet and while the theme has hit the quality bar players are focused on the most important part of the client which is performance right and we've all heard the mantra a game play is king for our client performance is definitely King and right now we're making all the art and technical decisions to maximize performance for our players so that's a big focus but everybody's back at home working on right now here we go so this video that's playing right now is our new target and this is the target for our first full launch of the client I'm sorry there's no audio here coz no the audio really pumps things up but this if you can imagine the last video I was showing you can kind of you can kind of

compare and see where we've had to pull back some of our work and after we optimize performance by the way we'll be back to listening to player feedback to inform future changes and also back to improving the client and adding things back in so on League I'll tell you know feature is ever complete it really is never complete we're always looking for opportunities to improve the experience for players so it's gonna be ongoing and there is no secret sauce and understanding how to improve player experience as game developers we just have to ask the world of game development has really changed and we can get instant feedback from our players now I advise you to do that so for the new client we baked player feedback into production so last March we launched alpha to get early player feedback and then last November we launched we launched beta for another round of feedback and that's actually where we got a lot of the feedback about performance and for any

league players out there in the audience I just want to say thank you so much for testing the client thank you for your feedback and we really really hope and we're working really hard to deliver something that's really worthy of your passion so thank you and please keep getting this feedback by thing and finally I just wanted to add this here that we're taking our design system of hacks Tech and we're involving the theme outside of the game so other teams have taken our hextech interpretation and they've implied it to their products so merch is used it for packaging this is a package that we you that we created in collaboration with Funko pop where the team and reinterpreted hextech in print form and last year the team used the hextech metal language and the for the art of league of legends website and for the book so you can kind of see it all through that so for us the real test of this design is in its application and also in its reinterpretation and we're very excited to see how hextech will be applied to other experiences for players in the future and that's my talk

[Applause] okay so I have a I have a bunch of time I have 20 I've about 25 minutes left I probably talked too fast sorry it's supposed to be 49 I didn't talk too fast but anyway I've about 25 minutes left and we have two mics so happy to answer any questions there are two visual designers here with me in the audience from this team named Kevin and Ted they're right down here and they have some of our tool kits and our style guides and things like that if anybody wants to talk to them too and check them out so are there any questions hi hi I was wondering if you could speak a little bit about your choice in typography and stuff like that we sent something that happened after you had settled on your basic shape language in terms of that stuff and how much

iteration you did the typography yeah yeah absolutely so when we actually started on typography even before we worked on the designs this came in really early because we knew were gonna have to craft our own font or kind of do a interpretation of a font because we have so many languages that we have to support so for the main thought that's even in this presentation which is both were Pro we were looking at the League of Legends logo and which yeah which is very busy but it's a it's a it's a serif font so that's really what happened we were looking at a league of Legends logo and we were looking for fonts that would be complementary to that so we picked a serif font that is reminiscent of league of legends and then a sans serif font for all of the body copy because that needs to be very very legible so something with a bit of character that has that fantasy league feeling and then something really simple that's for all of the body copy and explanatory texts and bios and things like that okay thanks hi hi can you talk through

the creative process for prototyping and creating wireframes but more visual design is actually applied to these or experience because I assume you don't just jump right into you know super complex illustrations and how those interactions are actually yeah they did so the teams like our disciplines are all working at the same time and we definitely have UX designers that are embedded with the team working with the visual designers but I will say that there were some times where the visual designers were helping out with the UX as well so when I say that the process was very organic they don't the UX designers don't hand off finished wireframes to the artists it's it's not that that's kind of you know we described as waterfall it's not usually how we work especially not in the beginning so when we got to a place where you knew what kind of features we'd have to have on a screen they would start putting together some wires and they would sit with the visual designers they kind of do it together and then the visual designers would start doing some designs and we've had many designers

even say to us it's not always easy to do a wireframe if you don't have some idea what the design is so I would say it was really iterative and over time the wireframes became like more and more like the designs right as though as the designs tighten up the wireframe tighten up so it's kind of happening at the same time like this so that was really what the process was okay thank you you're welcome hi hi yeah I just had a question about you know like making really large impactful visual changes to games yeah I mean personally I work somewhere where if we make you know if we have a game that's generating so much money we're afraid to change anything there all these customers paying so much yeah so I was wondering about the strategy about because there's no doubt that you know the game you know it looks beautiful and it continues to to do that but it it changes so much and I wonder if there's any thought or weighing the risks of you know making the game that looks even though it's more beautiful looks so

different that players almost don't even relate to it I was wondering if you could yeah that's one of the reasons why we start releasing things early to players you try to feel it out for them you know we start showing them some designs even even before the beta she's saying hey this is kind of the direction that we're going so we can start getting feedback and also giving them a moment to warm up to it because change change is hard right it changes tough like even if you're changing or something you don't really like and I think a lot of us can relate you get used to like a broken tool or whatever you're like don't change it I'm fine and we know this and we're we're really empathetic to it by the way we experience it ourselves when you know maybe a new splash comes out it's our favorite champion we're like wait what just happened you've been over to the arts desk so we are really empathetic but what we try to do is just get things in front of people as early as we can that's that's our main strategy get things in front of people as early as we can and we talk a lot to each other on the floor we play the game a lot we're very invested in the game and you know we're expected to have our finger on the pulse of what's going on with our

community so we read their feedback we really do by the way if you guys wonder if we read the forum's we read them and they comments get sent around it's like hey I think we should fix there's a lot of really unhappy people on the forum so that's the best thing I can tell you is we just communicate with our community as much as we can and we try to get things in front of them just so they can get used to it and get a feel for how they're gonna react to it thank you you're welcome hi I had a great talk by the way thank you so much awesome information for us he kind of asked a similar question I was going to ask but I had kind of two questions one being how do you filter the amount of player feedback community feedback because I know that's that's probably a lot to deal with and then leading up into my next which was how much did you guys work with other departments on your team like art departments whether it was the effects department and design okay I can answer

both for feedback it really depends how it comes in how hot it comes in or how I would even say how it's sensitive we are - it may be we were uncertain about something and suddenly a bunch of people are talking about it on reddit we're like oh no it's true and we'll all start talking about on the floor but I I wouldn't say we necessarily filter it what we try to do is read it and mine for Nuggets so if somebody's saying oh my god I can't like if I can believe you do this like we we go through all the cursing and get to the ADA really unhappy with how we change the summoner icons it's not clear flash is not clear to them anymore because we made it to orange they're just used to out of the corner of their eye at being bright yellow and they're unhappy about that and then we'll look around for other comments like that and we kind of mine that data and and then really we just talk to each other like yeah that's probably wasn't a great decision it looks pretty but maybe we took it too far as far as gameplay so I don't know that really answers your question I don't think we have a set way of going through our feedback and for your second question about working with other teams

we did so all of those hex tech concepts that you saw we work very closely with the Foundation's team so our foundations team is like an IP development team and they're absolutely awesome so they had really kind of rough concepts for hextech and they gave them to us and then we started developing the idea of hextech more and then we kind of handed it back to them and it went back and forth a few times and we loved this collaboration it was really fun to have the visual designers in the motion artists working with the concept artists and developing a theme like this so yes we definitely collaborate whenever we can and it's it's it's really awesome it's we learn a lot when we do it it was very beautiful thank you thank you so much hi all right thanks for the talk I have a question about as you're developing the new UI do you have a separate client that you run the new UI on against the after the backend server obviously just being on to play the game or do you have a UI mode that you switch

between hextech and the old client like how do you get that a be testing like actually done during development I don't know if I can answer that question can you when you guys answer that question okay separate build AHS repeat it what he says yeah okay are you paid testing client with actual players or is it all internal yes yeah yeah you could you could play both versions you could switch back and forth from one client to another because we didn't want to just flip the switch and suddenly have people go into that because we knew like there's a lot of players and there are a lot of regions and so it is very hard to predict that and even when we roll out it's going to be region by region like we do things very slowly because what we

don't want to do is we don't want to interrupt we don't want to interrupt anybody's goal you've actually played a game thank you okay you're welcome I got two little questions free and before I 1 I want to say the new clients awesome thank you I've been really enjoying it recently looks really great and everything oh well thank you so much you know for example compared to the old client where you had the little watch window where you could be able to spectate high-level players games and for example to Chad that you could collapse and everything were you making the updated version of the client what decisions were made in order to you know what remained in the client itself for example a lot of people complain you're talking about like you can't minimize the little with the players or friends tabs so it's kind of weird for them but at the same time I'm guessing that was kind of intentional when you guys mentioned that you want to be relatively minimalistic to it but how do you exactly decide what staying and what's

not the friends tab was intentional that won that decision we made a long time ago and that's a real commitment because we've a look at the design it's um it's balanced with that with that piece in mind and it's really because what we know about league is that it's a better experience to play the game when you play with your friends no matter what and I think anybody who plays the game you know I meet everybody it's like really playing with my friends so that was why that that decision was made but as far as features what we're shooting for is feature parity and then we're going to start adding new features so once we ship the client it's really not done if you remember how I described League of Legends like it really big t made of a lot of little teams right now LCU owns the entire client this what we call a team it's lowly client update team they own it but what's gonna happen once we release the game to really some kind to everybody is that it's going to break up into small teams and they're gonna go back to working on new features so you're gonna see things popping into the client over the next few years but for now the most

important thing is feature parity right and for the second question now that you know you guys have gone into this entire thing of developing the looks of hextech and everything yeah how you think there's an effort going on eventually to update piltover champions that for example right now Caitlyn she's from piltover but the guns and how it looks and the effects I think doesn't really feel like the hextech percentage yeah in the cloud itself mostly yeah I think Heimerdinger does kind of fit that because of the blueish thing she starts everything but and for example Gallio right now I have the hextech ski and it just looks nothing like the current position Rex are you talking about the old Cal yeah I know they're working as play I don't know anything about it but yeah but no III think that the answer is yes and as a Merrifield text X been bopping around the game for a while there's been the idea of X Tech and it's been slowly evolving into what it is now I would say a lot of this IP work was really only completed pretty recently

like the work that we were doing the the Foundation's team was still working on what hextech is so yes I think we look for opportunities now whenever we're doing a champion update we look for opportunities to link them back to all the faction work we're doing and I couldn't show you we have a lot of faction work that's done shape language in color and culture and everything about the place so when you see a new splash come in and if the champions from Ionia or from freljord you'll see that there might be some motifs in the background and some changes that we're making to the champion too so that they land very solidly and what we consider now to be the definite look and feel of that region that realm but it's going to be a slow process because we can't really just update everything at once right because we're more focused on really gameplay changes that are going to be super important to the to the players so we focus there first and then we just find our opportunities to keep making the art more consistent across the board alright thank you and well this thing I don't know if anybody in the room here that was in the league clang update has

to do with this but my dual partner says thank you very much for adding the particular mode it was horrible it was just killing his PC every time we played yeah we're gonna work that's and that is exactly what we're working on so there's the critic feedback that's like the big thing that we're working on right now is like how to get that all how to get that all performing well for the potato the toasters for all of those so yes and the two artists are right down here talk to them thank you very much you're welcome hi hi thank you for your talk I'm curious to hear about how the new client has impacted use your player engagement with VIP for specifically them accessing the news on the client the store or the you know creative content that's published on the client and is there any room for improvement oh yeah there's there's gonna be room for improvement I think we're we're still figuring out I don't know if you know if you've seen our universe website but we put up the universe website now that explains all

of the regions and there's stories about our champions and everything's there so we can start getting the sort of a story of our IP out there and you know we do surveys as well like asking players how excited are you about the lore and how much more lore do you want to see and and we get mixed feedback but a lot of players do want to understand more about the world and that's one of the reasons why we do this but as far as relating it straight back to engagement it's hard for me to do that right now and with the client not particularly being finished or out there I think it was for us it's more about of course the one engagement but it's about immersion because before we had so many different styles and so many things going on we didn't have factions you didn't know where these champions were from it's hard to be immersed in that it's like a kind of a scattering of really cool creative stuff so what we're looking for in the game is having that sense of emerge and having it feel like everything was thought through and all the pieces fit together thank you you're welcome hi

that was really amazing I got goose bumps looking at everything so congratulations thank you so much I was just wondering how does your team work you know ui/ux team is everyone's hyper specialized in a little field or is everyone a bit of a Swiss Army knife where they can do everything and do your artists to you implementations or they just leave it to the engineers how does that work in a big team like that so that's a really good question so first on the type of people on the team we have both we have people who are specialists and we have people that are more like a Swiss Army knife and like one of our motion artists Andrew he is he's like everything like he can do everything he can do this beautiful motion work he can think of tools he's very technical it's a kind of a savant brilliant guy so he is a Swiss Army knife and and some of us are we're way more on the art side right like myself like way more into graphic design and art and thinking about design so our

team is I think a healthy mix we also have an artist that's really into UX right who loves happily banging together his own wireframes and share them with the UX designers so I'd say we have a mix on our team we have specialists and we have people that are more Swiss Army knives and then as far as how we work together is that what the other part of the question was like the d-day specifically do you X only or do they dabble a bit individual no yeah everybody yeah I would say I would say that there are some people who don't but like I said there was some people who definitely do so it's just kind of like it just totally depends like Jessica one of our artists she's an amazing illustrator like insanely she does splash illustration as well she's also a visual designer so in the beginning when you saw that really rendered take a pecs attack we did that look like a machine a lot of that was just as rendering and she can she can render way further than that that was actually pretty rough compared to how far she can go so that's that's it yeah I think we should have a mix of people we have probably like three or four people that are more Swiss Army knife and then we probably have three or four people there are more

specialists so in terms of if you want to expand your team what do you look for in applicants or people do you mean for a specific discipline because you have to think that like the LCU team is kind of a cross discipline art team so do you mean specifically for like an a team like LC you or do you mean for a like a discipline like motion graphics versus visual design or um well I guess you know if say you have a UI artist who is very interested in UX and you know they feel like should I should I show more visual stuff to you or should I show more design stuff or would they be worried that they can't code any new actual UI weird yeah we wouldn't be worried about whether or not you could code like that would be seen as a plus but I think what we usually ask applicants to do is kind of pick we talked a lot about being t-shaped at the studio so you're deep in one thing and then you have interests and you have like a t-shaped mindset right you understand multiple types of development and you have different skills so

normally when somebody when somebody you know applies to Riot we want to know what their Deepti is and then everything else it's by the way we love it like the more tha people are it's it's really fantastic because then they're gonna be able to fill in the gaps on the team like sometimes when the UX designers were too busy visual designer could jump in and help out with the wireframes that's very useful because it unsticks the team so that's kinda how we do it I think that's that's all thank you so much thank you thanks everybody [Applause]