party up!
PARTY UP!
Gamer Connection App // UX & UI
SERVICES:
Research, UX design, prototyping, UI/visual design
TIMELINE:
Five Weeks
DELIVERABLES:
Research, UX design, prototyping, UI/visual design
TOOLS:
Sketch, InVision, Illustrator, PopApp, Google Slides, Balsamiq Mockups
Seamless connections for gamers
Over the years the popularity of gaming has increased exponentially. What was once an activity for one person has now become a massive industry in which users are connecting with each other online on a daily basis. Accomplishing goals in games has become an activity that is done better in a group as opposed to alone.
I, personally, am a huge gamer which is where this project began. Playing a game alone or with strangers can be a frustrating experience, one that my friends and I encounter on a regular basis. Often times you will be paired up with players who don’t communicate or even worse are rude or annoying on the microphone.
In two weeks I was able to develop Party Up!, a mobile app that connects gamers to each other by the platform, game, and chat preference that they are looking for while they game.
Party Up! is a mobile app that makes finding someone to game with easy. What was the design process behind this? Keep reading to find out.
01- Empathizing with the user & defining the problem
Having previous knowledge of the gaming landscape gave me a good start to my project. Although I had my gripes about the current problems I knew I had to do research in order to find out what other problems current users may be experience. I did both quantitative and qualitative research, sending out surveys to gamers online and conducting interviews online while I actually gamed.
​
The information I received from my online interviews was fantastic. I was interviewing gamers through my headset in an environment where they felt completely comfortable. I did a total of 12 interviews, 9 male and 3 female, and received a total of 25 responses to the survey I posted online. I wanted to uncover the following themes.
-
What do you not like about being paired up with with random users?
-
How are you currently looking for players to fill your team if you don’t have anyone online?
-
How important do you feel communication is while you game?
Organizing my data using affinity diagrams
“I want to quickly find people to play with. Also, I’m tired of playing with a bunch of newbs who don’t communicate!“
These trends started to emerge to form a mental model of my potential users:
-
They feel random users are rude, not on the same skill level, annoying, or a combination of all three.
-
They currently do not use sites such as LFG to find groups because it is 'too much of a process'.
-
They want to communicate and share common social sensibilities with their teammates.
​
My next step was creating user personas from the data that I had gathered. The persona I created allowed me to identify pain points that current users are experiencing. This persona helped me keep true to my user and develop features that alleviate their frustrations.
THE PROBLEM:
Gamers wanted a quick and easy way to connect with other users. The important factors for determining who they wanted to play with were their skill level, their communication style, and the games they played. My designs had to be:
SEAMLESS
Allow a quick connection from app to platform for users to be able to game quickly.
CUSTOMIZABLE
Give the user the ability to search criteria that is important to them.
QUICK
Create a system where users have to take as little steps as possible.
FAMILIAR
Use colors, fonts, and patterns that gamers could identify to make them feel comfortable.
I used these principles to drive my designs as I moved forward into creating prototypes.
02- Ideation
At first, my idea was to create a mobile version of the LFG sites. The more I ideated on this concept, the more I realized that it was too complex. My user persona wanted a fast way to find people to play with so a complex system did not fit with this model.
​
Thinking with information architecture helped me determine what information was most important in quickly find other users. I asked myself:
How can I make the process of finding someone to game with faster?
I went back to my research and identified that when looking for teammates users were looking for the following things:
-
Users wanted a system that helped them identify the skill level of player they are matching with.
-
Users wanted to be able to search for other users who shared the same social sensibilities as them.
-
Users wanted to know what other games they may have in common with other users.
This insight led to a major change in my app. I would now match users individually by the factors that were important to them in a quick and visually appealing way. This concept fit my persona’s desire to find skilled players quickly so that they can get to dominating the virtual playing field.
Progression of a user profile
03 - Prototyping
Low Fidelity Prototype: My initial concept was to create a mobile version of the LFG sites. I wanted to put this idea down on paper to see if I could make such a complex system work. I created a paper prototype flow for the users setting up their profile and identifying what they were looking for. Getting a concept down of the main ‘match exploration’ screen was vital in creating a more concise and to the point version of my app.
Mid Fidelity Prototype: I shifted concepts from my low fidelity prototype to my mid fidelity prototype. My main objective now was to present the most vital information in the simplest way possible. I looked at current ‘matching’ apps such as tinder to draw inspiration from. A simple, clean, but informative layout was what I was create for my users so that they could find partner to game with quickly.
​
You can find a working prototype of my wire frames here on InVision.
Design Inspiration
The ‘feel’ of my app was extremely important to me. I created a style guide for my app that gave the users that ‘gaming’ feel that they were familiar with. The colors that I used really set the mood for my users. I created a ‘light’ theme for my app that did not feel natural enough. I then shifted to a ‘dark’ theme which really was the ‘aha’ moment of my app design. The new dark color theme felt natural for a user and having that dark background really paired well with a gamer who would be using his mobile phone in the dark to access the app.
Style Tile: Using the right colors and fonts was key to getting the 'feel' that I wanted
The next step was creating the ‘cards’ that they users would be presented with when looking for a match. Again, Tinder was a big inspiration for this model so I started to create the user cards. When I first created the user card I was placing the game information that the user was looking for within the main profile card. This ‘card within a card’ system did not feel right to me but I could not put my finger on why.
'Card within a card' design that did not feel right
Iron Hack very graciously provided us with mentors during the time we were working on this project. I was fortunate enough to have a mentoring session with Christie Lemon, a senior UX designer with a lot of experience. She immediately identified this problem I was having without me even having to say anything! We worked on this problem together and came up with a solution. I would now only use the ‘card’ style for the games that the users are interacting with and no I would no longer stack them within another card.
Christie to the rescue! Mentorship helped break through a design block
High-Fidelity Prototype
I used sketch to create my high fidelity prototype with flows for on-boarding, identifying likes, exploring matches, unlocking match picture, and sending match a message. View full prototype in InVision.
04 - The end product
Final prototype features:
Log in screen, account creation, setup wizard, match exploration, match request, messaging with match, and profile page layout.
On-boarding wizard walks the user through creating their profile
Match exploration allows user to find key details about who they are matched with
​
Future considerations
​
If I had more time to ideate on Party Up!, I would add a feature to save created searches. Creating a custom search that a user could save would speed up the process of finding people and also allow them to do more of a custom search. Speed and matching common users is a very important value of Party Up!, adding these features could improve an already awesome app.
​
Key Learnings
​
-
Reference Data.Referring back to the user research that I had gathered was crucial. Having the user who I was designing for in mind allowed me to hone in on features that would separate my app from the rest.
-
Color and fonts set the tone. Selecting a dark color theme really gave my app the correct feel. Fonts gave my app the ‘gaming’ personality as well.
-
Last night a mentor saved my life! Using the mentors made available to me was an incredible resource. Getting a fresh perspective on my work, as well as affirmation of work well done, from a mentor helped propel me to the finish line.
-
Iterate, iterate, iterate! The more I put down my versions on either pencil and paper or digitally the more I was able to flush out ‘bad’ ideas and incorporate useful functions.
Closing Thoughts
This was an extremely challenging but at the end of the day fun project to work on. I stayed true to my design principles to give the users a dating app that was fun and interactive but that they could find a serious relationship on. It was really neat to see all the different ideas that my cohort classmates had and how they came up with a solution for the challenge we were given. At the end of the day we all used the UX Design approach to create a piece of work that we can be proud of!