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
