UX research, branding, App design
Project context
A student project at DesignLab's UX Academy - Originally, Seek aimed to be a mobile app that helps new players take the first step into a game of their choice. There are many guides out there on the internet but the information is scattered and it could be difficult for new gamers to find others in the community to help them or play with them. Seek wants to buff up new players so they can get into a game better and enjoy it better. After a slight pivot in the process of this case study, Seek focuses on connecting like-minded gamers to play and improve together.
Details
Role: UX designer, branding designer
Skills focus: UX Research, responsive web design, branding
Timeframe: October 2020 (3 weeks)
Background
From the project brief and my personal experience, I had formed an initial hypothesis that new gamers find it difficult to learn how to play a game better (especially when they are new or mid-level) because guides and related information are scattered over the internet instead of one place. This is particularly so for games with steep learning curves in genres such as MOBA (multiplayer online battle arena) games or some MMORPGs (mass multiplayer online role-playing games). As such, to understand if this is truly so and what the market thinks, I guided my research phase with the following goals:
1. Understand why gamers want to pick up a game (Why do gamers want to improve?)
2. Current behaviour of users. To understand a gamer’s process of picking up a new game. How do they go about learning how to play it?
3. Pain points? To uncover any pain points in the above process that could be a focal main problem statement.
Is the problem valuable in targetting?
For my market research, I wanted to focus on why the gaming industry is worth jumping into! On top of that, I sought to understand whether gamers do want to improve their game in the first place (which is the premise of this case study) and why they want to do so. These would provide evidence that the problem at hand has value and is worth looking into.
Interviews
Using my provisional personas as a guide, I recruited 8 avid gamers for a 1-to-1 interview. The user interviews were to meet the following research goals:
- To understand why gamers want to pick up a game.
- Why do gamers want to improve their game?
- To understand a gamer’s process when picking up a new game.
- To uncover any pain points in this process that could be a focal main problem statement.
An affinity map was developed after the user interviews had concluded to discover user patterns.
Overall, many insights pointed towards gaming being a social thing on top of self fulfillment for the interviewees. However, within this process, there are difficulties when playing with others (majority had some problems playing with either friends or public in team games like MOBA). This included varying enthusiasm level (which hindered some’s learning process), toxic community in public matches, being matched with players who lie about their mmr/rank, and different skill levels. On the contrary, only 1/8 mentioned that he gets overwhelmed by the amount of information on the net and none explicitly mentioned it was difficult to find information online when trying to improve. This proves that my initial hypothesis that scattered information is challenging to gamers who want to learn is wrong and calls for a pivot!
From my research findings, my initial hypothesis was proven wrong. Thus, I looked back to see what problem people truly had when learning how to game instead so I could pivot to that problem. It was clear that there are multiple problems when playing with others in team games, particularly MOBA games (Dota 2 came up quite a number of times from the interviewees). This is in line with the fact that gamers game for social reasons - if this social reason is potentially causing them a problem, it would be a problem worth solving. In this case, ‘ideal friends’ would refer to like-minded gamers with similar enthusiasm and skill levels who can play and learn the game together. From this main problem statement, some ‘How might we’ statements pop up in mind: In this case, ‘ideal friends’ would refer to like-minded gamers with similar enthusiasm and skill levels who can play and learn the game together. From this main problem statement, some ‘How might we’ statements pop up in mind: In this case, ‘ideal friends’ would refer to like-minded gamers with similar enthusiasm and skill levels who can play and learn the game together. From this main problem statement, some ‘How might we’ statements pop up in mind:
New main problem statement:
Gamers need a way to find ideal friends to play team games with because playing alone can make learning difficult.
In this case, ‘ideal friends’ would refer to like-minded gamers with similar enthusiasm and skill levels who can play and learn the game together. From this main problem statement, some ‘How might we’ statements pop up in mind:
1. HMW match gamers to other gamers of similar skill and enthusiasm levels
2. HMW enable gamers to ask personalised questions to improve their gameplay
To better understand how a potential Seek user could feel and to ensure all future designs tackle the above HMW statements, I set about creating an ideal persona, and drafted a storyboard for him.
Brainstorming and user flows
As part of brainstorming, I conducted a crazy 8 session remotely with 2 other gamers to brainstorm some ideas on how to solve this problem. Participants were given 8 minutes to sketch or write about 8 ideas on how to solve the ‘How Might We’s.
From our discussion, we narrowed the potential solutions to the following based on what best solves the problem:
- A party finder app that helps gamers find like-minded individuals to play and learn together to improve
- A mentor matching system
- Review system for team mates and mentors
The core of this solution lies with the party finder; as such, this will be the portion I will focus on first for this project.
Information architecture
With the task and user flows, I can clearly see the pages that would be needed on the app. This naturally guided me to do a cardsort to discover how users would categorise such pages. An open card sort was done with Optimalsort for this with 9 participants were recruited. The average time taken for the cardsorts was about 2 minutes, indicating the task was relatively straightforward. Notably, the card sort showed me that users would separate the party finder options from the searching for mentor options. I took note of this in particular since my original task flow for finding a mentor was incorporated within the party finder flow as well - but it seems this may not be intuitive for users.
To get a sense of the layout and visual hierarchy, I sketched the core pages for the party finder task flow and prepared a low fidelity prototype that will be used for usability testing right after this stage. At this point, I decided to focus on one genre of games first - MOBA - since focusing on too many different types of games (MMORPGs or FPS) may lose some of the focus of the app. In particular, I looked at designing for Dota 2, since 6/8 of my interviewees from the research phase mentioned they play this game.
A moderated low-fidelity usability test was conducted to see how users interacted with the Seek app. 5 participants were recruited for this test since 5 is the ideal number of participants to conduct a usability test according to Nielsen Norman. These 5 participants were all avid gamers, who play Dota 2. The usability test was conducted in person since I wanted to see how users interacted with the app prototype (were there any buttons that seemed too difficult to reach on a phone for example).
Reworking UI components (sketch)
With the insights from the usability test, I did some quick sketches to redesign some core pages. For example, in the edit profile page on the right, more details have been added.
To minimise manual input and streamline the setup process, I picked a “link” button on the right instead of a text field for the discord and steam IDs. Notably, I’ve also toyed the idea of having tabs to indicate multiple games under one profile (instead of the original drop down list). However, tabs are used to indicate different subpages which in this case was difficult since the games section in the profile was in the middle of the page (and kept this way to keep all profile edits in one page). I settled for a button format (lined and not filled since its not the most important CTA of the page) to indicate the different games. The form below utilises a likert scale where possible to minimise the dropdown lists on the page since dropdown lists may be a chore for iOS users (it brings up the options below which can be irritating), which is what this app was designed for.
Before starting on the hi-fidelity wireframes, I started designing a brand for Seek. This was done by developing a brand style guide and UI kit for the app. In my mind, the brand Seek was one that gamers could relate to - it should showcase enthusiasm for learning yet at the same time remain a sleek and cool design that gamers liked. I noticed that gamers appreciated dark versions with bright RGB colours (think gaming PCs or even gaming tools like discord being a default dark mode) and wanted to incorporate that for some familiarity as well. In addition, many games tend to have a mascot character, so I wanted to design a mascot for Seek as well.
Now that the visual design and aesthetic is in place, I proceeded to develop the hi-fidelity interfaces while incorporating the revisions at the same time. From the hi-fidelity screens, I developed a prototype as well.
View hifi prototype
Main changes from UT
1. Profile setup
The manual input of steam and discord IDs has been changed to a ‘Link’ button system instead. Tapping on the “Link discord/steam” will prompt the user to sign in to their Discord or Steam and thus link the accounts.
2. Partyfinder
The mentor searching system has been removed from the party finder page to avoid confusion. Multiple positions may be selected for queueing via checkboxes instead of just one in the drop down list before.
3. Chat Lobby
The party members are now clearly listed on the top of the chat lobby. Tapping on their profile pictures will bring the user to their profile page which lists their overall rating, discord and steam IDs, past matches and most importantly, reviews from other players.The review button has also been shifted to the bottom left to be more reachable.
4. Reviews
An “additional comments” segment has been added under the reviews segment for more in depth reviews.
My immediate next steps if time permits would be to conduct a second usability test on the hi-fidelity design to get user sentiments on both the branding and the new user flows. Subsequently, I would begin designing the mentor flow, which is the secondmost core feature of this product.
As an avid gamer myself, I have had experienced this problem before myself which made the process even more enjoyable. My initial hypothesis was proven wrong and I had to pivot to another more prominent problem from the user interviews in the research phase which I found quite interesting! Throughout the research phase, I had to constantly remind myself not to lead anyone on in the interviews to ensure I avoid confirmation bias since it was a problem I personally faced. This case study was also fun because I had to design for an app instead of a responsive site! I focused on observing how users interact with the app during the usability test in person as well - this helped me realised when some CTAs were difficult to access and thus led me to make some small adjustments to layout. If I had the opportunity to do this project again, I’d love to hear more insights from the female gaming audience. In the interest of time, I could not find many female gamers to interview (despite being one myself). I wonder if the insights would have been different if I had the opportunity to speak with them. Nevertheless, the project was a meaningful and enjoyable one to me!
