UX UI DESIGN | PERSONAL PROJECT

GUILD WARS 2

MMO GAME

ABOUT:

The project involved redesigning the games official website and the in-game UI in order to improve the user experience. Guild Wars 2 is a massive online multiplayer game with over 1 million players. I tackled this personal project since I wanted to showcase that games can also benefit from UX designers, not only websites and applications and that good UX should be universal no matter the field.

REFERENCE: Personal Project

ROLE: UX UI Designer / Web Designer / Interaction designer

TECHNOLOGY: Unknown

TOOLS: Axure, Photoshop, Rotring 600 Pen, Dotgrid.co Paper, Koh-I-Noor colored pencils

PROJECT INFORMATION

GOAL:

The goal was to improve the overall user experience for both the website and game since I’ve noticed some serious flaws during my testing, mostly regarding flows, unintuitive UI, user having to go constantly back & forth to perform certain actions or users having to search for information. I tackled this project due to wanting a new and more unique challenge, while showcasing the fact that UX is not only for websites and applications but other fields can benefit from it as well.

MAIN PROBLEM:

Users have to perform too many interactions to perform certain tasks, new users are struggling to find out what happened in the game so far, the users have to go back and forth between tabs, new users struggle with the UI, users have to browse multiple tabs to find out the information, website information is hidden under tabs leading to additional interactions

SOLUTIONS:

please see the below slide for a more detailed look at the main problems and the solutions I proposed.

MY UX APPROACH:

I STARTED BY DOING A WEBSITE ANALYSIS

Why I did this:  to identify early issues with the website so I could then create a website that would solve these issues
How it helped: by pointing out what should I avoid and help come up with multiple solutions based on the identified problems

AND A USER AND COMPETITOR ANALYSIS

Why I did this: before I started the design I wanted too see what competitors are doing, in order to discover what makes it unique as well as get an idea of what their layout or design patterns are, in order to keep the familiarity between users so they won’t be faced with something too creative that would prove difficult to interact. This also helped get an initial idea of the users, where they spend their time online, what are the key online resource they visit, estimated  age group, tech proficiency and so on
How it helped: by identifying what layout they are used to seeing, what type of interactions they are used too, what are the features that makes this product stand out, why people love this game, what resources I could use, what are the most common things they do online, all this influenced the website layout

I THEN RESEARCHED AND IDENTIFIED UX ISSUES AND DONE A SERIES OF USER INTERVIEWS

Why I did this: in order to get user insights about how they interact with the website, what they are having problems with, how often they visit the website, what they do on patch day, what are some resources they visit, what they think of the initial design, why they love the game, what they feel like needs improvement on the website and game and so on. All this helped validate that my own habits were similar to the users and the issues that I’ve identified were also something that other users felt like needs improvements
How I did this: by using Skype for interviews and testing, by researching on forums and reddit and by testing the game to discover flaws and see how both new and veteran users interact with the UI and have problems with. This involved chatting with players that were just starting out, as well as getting friends to test the game for the first time and pay attention to their questions, problems, dilemmas and body language, tone of voice
How it helped: by identifying critical issues and problems for different users, based on their level of experience, which helped build an affinity map and thus have all the important information constantly visible, during my UX process so I could tackle each problem

THIS HELPED IDENTIFY THE USER GROUPS AND THEIR GOALS, ISSUES, PURPOSE AND INTEREST BEHIND VISITING THE WEBSITE

Why I did this: I’ve separated users into different groups to identify how each one interacts with the website and what their needs and frustrations are and what actions they perform as a result
How it helped: this helped identify that the press would mostly get the information directly from the developers either via early access or via e-mails, which meant they won’t be arriving to the main website too often, thus the website didn’t need to be tailored for them. However there was a group of existing players that make community videos with each release which meant having easy access to the information as well as further help prove that the community is passionate and that there are a lot of events happening and thus a “upcoming events” section was needed

HAVING THIS DATA I THEN TACKLED THE WIRE FRAMING AND VISUAL DESIGN OF THE WEBSITE

Why I did this: due to time constraints I was only planning on designing the home page and since this was only single page it was faster and easier to tackle the wireframing / ux and visual design at the same time.
How I did this: by blocking in the initial layout in Photoshop, similar to a low fidelity wire frame. Once this was in place I started building and refining each blocked area, creating individual UI elements and using smart objects so once a change was made to a UI element it would apply to all instances
How it helped: by cutting down workload and delivering the final result faster since I was tweaking the final UI element instead of a lo-fi element

SINCE THE GAME WAS MORE COMPLEX I’VE MAPPED THE FEATURES & FLOWS IN AXURE

Why I did this: to understand the flow and user journey for different actions, how the systems are tied together, what actions are performed most often, how many interactions they require to achieve a final outcome and determining what can be improved
How I did this: by testing the in-game UI, mapping all the features in Axure to help get a sense of the high level flow and by doing a heuristic evaluation of the in-game UI
How it helped: by clearly identifying areas that I can improve on, how I can integrate new features into the existing UI, what can be done better as well as other 50 small improvements and additions, a small part of them making it in the final design due to time constraints

AND THEN STARTED THE WIRE FRAMING AND VISUAL DESIGN FOR THE IN-GAME UI

Why I did this: I now had the sufficient data and understanding of how everything is connected, what are the user problems, what are the flows that they perform most often and thus solve some of these via wire-framing and later on via the visual design
How it helped: by easily coming up with solutions for those problems via wire-framing and test different approaches as well as refine them during the visual design phase to flush out any issues

I CREATED A PRESENTATION TO GATHER USER FEEDBACK SHOWCASING THE NEW FEATURES AND IMPROVEMENTS

Why I did this: having a small group of users to provide information was great however the game has roughly one million players thus I knew the community would be an important factor in the design
How it helped: by clearly identifying their concerns, what can further be improved and what they absolutely love, having over 600 comments by the end, really helped get a good idea of the overall community response

THE RESULTS WERE ABSOLUTELY OVERWHELMING

At this time the design has reached over 30.000 views and over 600 comments, making it really really overwhelming by the amount of support and feedback the community provided, showcasing that they truly are passionate and want to improve the game. It also got featured in community videos, forums, on social media and on top websites like Massively, Engadget, Ten Ton Hammer and so on.
And below you can find a video of the

INTERACTIVE PROTOTYPE

Here are some sketches from

MY UX PROCESS

The experience was really eye opening, below is

WHAT I LEARNED & WAS REMINDED OF

1. there are two groups of people, those who like lists view and those who like grid views, tailoring the UX UI for both could be a solution by having an option to quickly swap between mods similar to e-commerce websites
2. game character panels should feature a way to cater towards people who enjoy complex UI’s and those who like minimalist UI’s by having a way to hide or display that set information or via addons
3. Retaining the existing navigation or layouts are really important for some people, which further shows that redesigns should be published in segments so the user can accommodate the changes in time
4. Grid views although liked by many it’s also disliked by many due to the Windows 8 metro feel, thus a lot of testing and feedback needs to be done to test that it’s appealing to the majority of users
5. strangely enough people tolerate sliders in games a lot better then I would have initially thought
6. Using images of concept art has a real positive impact, in-depth testing should be conducted to see the appropriate size & number of elements displayed per row
7. Keeping the art style consistent between the website & actual game is important as this ensures consistency and a unified image of the product
8. People really like reading lore and thus the UI & UX needs to be tailored towards this by incorporating the ability to read set lore easily, be it by right mousing on an item and choosing a read lore or by other means
9. Some gamers put an emphasis on visual aesthetics while others put an emphasis on functionality, thus a balance needs to be struck so users can toggle between a simple UI or visual appealing UI
10. Keeping the number of interactions as low as possible is important but some creative liberties can be taken if it’s to improve the overall flow, accessibility, clarity or ease of use
11. Since there’s over a million players, there are multiple user groups within the main user groups, that each want a different thing be it to have the ability to read lore, perform certain activities with guild members, perform certain actions faster so certain design decisions won’t please everyone
12. MMO’s need to be social, thus letting players do activities or post that they are looking for a certain activity is crucial, especially in guilds
12. Future content needs to be kept in mind when designing a UI for an MMO, since during a year they can have a dramatic set of new features introduced or content and finding ways to implement them might require dramatic changes to the UI and UX, if they weren’t planned from the get go
13. Having to go back & forth between tabs is a real bad idea since users are really concerned about the number of clicks, more then actual web users due to their heavy interactions with the UI on a daily basis
14. Hiding and revealing certain features and UI elements until a player reaches a certain level is a good approach, that ensures new players won’t get overwhelmed by the amount of things they have access to
15. Improving the UX of a MMO is also about adding new features that will enhance the user experience for both new or existing users, by encouraging interactions and social aspects, while avoiding user group separation or users playing alone. This means the UX is not just about the interface and it extends to other parts of the game to improve the users feeling and mood when they use the product.
16. A good way to remove back & forth navigation is to have tabs or a search function for areas like lore, dungeons,etc
18. Keeping the same art style and art direction is really important, to ensure consistency between old & new UI changes
19. Without having access to the actual game developers data you can’t really measure the impact of a new UX UI in order to see which is better, you can only assume
20. Making users visit an outside resource for example a website to gather data, is a bad approach due to it breaking immersion or distracting them from the actual game experience which could lead to missed events, items, messages and so on

THE IMPACT

Learned what users like and dislike when tackling a game UX and proposed fixes to multiple UX issues, including severe interactions issues such as users having to go back & forth between tabs, opening multiple panels to find information, not remembering what happened since the last update, not knowing about certain features, while also creating consistency between the look of the game and the website, driving user collaboration and making the UI more engaging and friendly for new and veteran, while requiring less reading and clicking. As a result the redesign got over 20.000 views in under 48 hours, over 400 comments, featured on news websites like Engadget, Massively, TenTonHammer reaching the second page of Reddit and multiple requests to “hire this guy” showcasing my ability to understand user problems and tailor to user needs while showing that UX principles can also be applied to other industries.
View the full 28 page design presentation below
View design presentation
Thanks for browsing,

VIEW OTHER UX PROJECTS

or share this project with your friends, it helps