UX Design Case Study: Boardgaming-event organizer app
I attended two courses offered by Designlab recently: the UX Research and Strategy and the Interaction design course.
Throughout the courses I had the opportunity to work on an application with the guidance of an expert mentor. Instead of the “default” application idea suggested by the course material, I chose to work on my own idea: a boardgaming-event organizer tool.
The UX Research and Strategy course is structured according to the 5 stages of the Design Thinking framework (Empathize, Define, Ideate, Prototype, Test). In the first part of this article I’m presenting the case study following this structure, then in the second part I’m highlighting some interesting parts of the design process completed during the Interaction Design course.
At the end of each section, I will list some further readings to help beginners getting to know the given research method better.
The idea behind the app
I’m a boardgamegeek. In my home country, we have a quite big (and growing) community around this hobby. Our Facebook Group has more than 2500 members at the moment. Most of the posts are about asking opinions, or linking interesting contents, however, I’ve noticed that there are many posts about organizing gaming sessions. In most cases, a given boardgame provides the best experience with certain player counts. For example to get the most out of playing Battlestar Galactica, 6 players are needed. Another possible use case is that someone wants to try out a game, but does not have a gaming group for it.
There are some boardgame clubs and pubs in Budapest and in other bigger cities in Hungary, where players can gather and play together. My idea was designing an application to make organizing boardgaming sessions easier. It is great to be virtually connected with other boardgame geeks, discuss ideas online, but the most important part of a boardgaming experience is playing a boardgame. My intention was to help connect the members of this community in the offline world. The application would not only support the experienced, seasoned gamers, there are many newcomers in this hobby, and at the start they need a little help to find their company, and proper games for their level or games which they found thematically interesting.
The Research
First steps
I started the process with a Research Plan. It contained:
- research questions — for example: Gathering enough players for a certain game is a common issue, or it happens rarely? How a gaming night flows in a club or a pub? Is the organizing smooth, or people have to wait a lot for each other? How hard is to find participants for a game if it is a last-minute idea? — ,
- methodology (I established that I will use the following research methods: contextual inquiry, user interviews, online survey and competitive audit),
- description of the possible participants (demographics, how can I reach them etc.) and the schedule.
Empathize Phase — User interviews
First I prepared the interview script, which contained:
- an introduction — like asking permission for being recorded; what is the purpose of this research — ,
- questions — concentrating on how can I encourage the users to tell their stories).
I could conduct 6 interviews with some members of the Hungarian boardgamer community. 2 of the 6 interviewees are boardgame club organizers at the moment, and 1 of them was a club organizer some years ago.
I could gain really interesting insights about the users’ painpoints, their experience with the problem space.
For example I asked these questions:
“Can you walk me through the process of planning a gaming session?” — I found that asking about a process encourages stroytelling.
I also asked about the possible problems caused by a player’s behavior during a gaming session. One of the participants gave a very detailed answer:
“The problems can be the followings: someone is
- being late,
- not paying attention during the rules explanation,
- giving the game up in the middle of a gaming session,
- not giving up, but having a “don’t care” attitude, like playing on phone etc. (in this case sometimes he had to ask the player to leave, because it ruined the experience for the other players).”
I have conducted user interviews before, but this was very special because as a boardgamegeek myself I had a prior understanding of the experience, and it was great to see parts of the puzzle I have never thought of before. This part of the research made me understand that I should not have any assumptions or pre-conceptions, even if I think I know the problem space (or a part of it).
Further reading
- How to Conduct User Interviews by IDF
- 5 Steps to Create Good User Interview Questions By @Metacole — A Comprehensive Guide
Empathize Phase — Contextual inquiry
I visited one of the most popular boardgame shop and club in Budapest (Gémklub). I spent 3 hours there, and did the followings:
- observing the gaming sessions (I tried to answer for example the followings: How smooth are the gaming sessions? How many interruptions do occur? What are the reasons of the interruptions? How much time is “wasted” between two sessions? Are there any “lone-wolves” searching for a group to join?),
- taking pictures and notes,
- interviewing the shop assistant,
- interviewing some of the players around (to understand their mindset).
Limitations: I could not observe how the players organize a gaming session before they go to the club (e.g. I could not sit next to someone posting about a gaming session on Facebook).
An example for my findings: one group I observed had a hard time choosing their next game to play. After half an hour, they were unpacking the third one. Then they asked the shop assistant to explain the rules of it, and finally they started to play.
Some examples of the insights I got thanks to the short interviews:
- being late, leaving too early can be a big problem,
- the player count can change in the last minute (“I’ve brought my girlfriend with me, I hope it is okay”).
I have never done a contextual inquiry before, and I found this technique really useful for these reasons: as an observer, I can see the users’ actual behavior. During the user interviews, the users are self-reporting, they can leave out important factors, many things we do experiencing a problem space are unconscious actions. The other reason is that I could observe the physical environment, this helped me understand the context of the experience better.
Further reading
Empathize Phase — Online survey
I constructed a detailed online survey to get to know my target audience better. I got 66 responses, all of the participants were members of the boardgaming community. According to them, the completion time of the survey was around 25 minutes. I used Google Forms.
The sections of the survey were:
- Demographics (interesting insight: most common professions are: developer, engineer, student),
- Boardgame categories (favorite categories, game mechanics),
- Gaming session: with whom and where do you play; organizing,
- Gaming session: circumstances (e.g. During an average gaming session, what causes unnecessary waiting?),
- Online presence (e.g. Facebook Group membership; regularly visited boardgame-related websites),
- Functions of the application.
Some of the findings:
81.3% of the participants reported that the cooperative game category is one of their favorites:
Most of the players (76.6%) have already experienced playing in a boardgame club. And even more interestingly, in almost half of the cases (44.2%) the players don’t know in advance whom are they going to play with:
While many questions provided quantitative results, I included some parts which gave qualitative results.
For example, I asked: “ Have you ever organized a boardgamer event / gaming session? (To a club, or to your apartment, or to a friend’s flat, or within other circumstances)” 87.1% of the participants have already organized. As a follow up question, I asked: “If so, please write down what are the usual steps of organizing an event. What is the chronological order?” As an example, I learned that there are different starting points of organizing, mainly these:
- games (e.g. “we want to play with these”),
- a date (e.g. “let’s meet there on Saturday”),
- a certain group (e.g. “play with old friends from college”).
Constructing a good and valuable survey is a difficult task. Not only there are questions you must forget (like “Would you use this product?”, “Would you buy this app?”), it is also hard to structure it well, to maintain a good flow, a logical order. Wording of the questions is crucial, too (like you have to omit double negatives). After constructing this survey, I tested it: I asked some people to try it out; and I also asked an expert market researcher to review it. My advice: if you don’t have time / knowledge to create a good survey, you should avoid this method, because the results can be misleading.
Further reading
Empathize Phase — Competitive audit
At the time of the research, I found only one competitor: GameFindr.
I analyzed the followings:
- the website (interface, functionality),
- the Kickstarter campaign page (767 backers pledged $30,144, so it was pretty successful),
- the mobile app (interface, functionality, Play Store reviews),
- the Facebook page.
I conducted a complete walkthrough, I tried every function of the web app, took screenshots, and created 2 accounts to try out the “adding friends” option. I concentrated on these usability heuristics as well: Learnability, Efficiency, Memorability, Errors, Satisfaction. As a result, I created a detailed analysis with screenshots and descriptions.
Some examples for the Learnability issues
- There is no onboarding flow at all. The most important thing inside the app is to complete your profile (it is basically a gamer finder application — you can find gamers based on proximity and interest), the app should help the user to start filling out the profile (like LinkedIn).
- The interface does not explain the applied terminology.
An example for the Error-management issues: After my two account became friends, I decided the click on the “Report” link. I expected the system to ask me if I’m sure, and I also wanted to know the consequences before I do the action (e.g. before I empty the recycle bin, it asks me if I really want to delete the files, and it tells me that the consequence of my action is that the files are going to be deleted without the option of restoring them). After clicking on the “Report”, I had to refresh the page, then this appeared on the page: “No contacts yet.” And the app did not list this user on the “Matches” page anymore. It disappeared forever, there was no way to add this Friend again. (I checked from the secondary user’s account as well, my first user disappeared.) So if a user accidentally clicks on the “Report”, there is no recovery from the error.
Overall, what I found is that the user flows were not clear enough, the UI (both web and mobile) is not intuitive, but the most significant problem is conceptual: the prerequisite of organizing an event is making friends, which is not easy, because there are not enough users. Although the app has been released, it contains bugs and unfinished features, and there is no sign of these being fixed in the near future (in the last Kickstarted update — which is almost one-year old now — the creator informed the backers about some financial issues).
Further reading
As part of the Empathize Phase, it would have been nice to conduct diary studies as well, I know some of the “hardcore” gamers of this community, I could ask them to track their gaming habits (when, with whom, and how many hours a week they play, and so on), but in the end I could not fit this method in my quite tight schedule.
Define Phase — Empathy Map
After collecting all the above-mentioned data, I created an empathy map.
I tried to look for common patterns. I could identify 3 different personas with different mindsets and attitudes:
- the gamer, who is open-minded enough to play with complete strangers (yellow),
- the “antisocial” player, who is only willing to play with his/her usual groups (green),
- the boardgame club organizer (blue).
Obviously there were many overlaps, so I did not create separate maps for each persona (if I had more time, that would have been great to construct different maps to separate their mindsets even more).
This technique helped me to synthesize the research findings, and to identify separate groups of users. I can imagine this method is even more useful if you work in a team.
Further reading
- The Practical Guide to Empathy Maps: 10-Minute User Personas
- Adapting empathy maps for UX design
- How to Run an Empathy & User Journey Mapping Workshop
Define Phase — Storyboard
I also created 2 storyboards (one “current state” and one “future state”) to illustrate a user experiencing the problem I’m planning to solve. I tried to include many decision-making points, and also the possible painpoints.
After creating the storyboards, I visited the above mentioned boardgame shop and club (Gémklub) again to ask some users to review them.
I also sent out the two storyboards and wrote instructions to 6 other participants — they did not have time for a test in person. This remote form could also produce valuable results. (One of the participants wrote more than 12000 characters, which is pretty impressive, I could gain great insights thanks to him!)
Storyboards help to create context, to better understand why the user does something in a given situation. The storyboard review allowed me to get feedback: the story created could be a real user story? Does it match the reality? I was surprised how much great insight I could get thanks to this method.
For example one of the participants pointed out this:
“It is not real, that someone waits 35 minutes without knowing the possibilities. The user would first go to all of the tables, and ask the groups about their plans (maybe one group will leave after the current game, the other is going to play the same again etc.). So without information, no one would wait 35 minutes.”
Further reading
Ideate Phase — POVs and HMW questions
As a next step of my research, 4 sets of Point of View (POV) statements and — accordingly — 4 sets of“How Might We”? (HMW) questions were created to frame the problem.
A POV statement consists of the followings: user (or persona), need, insight. The HMW questions help to create solutions.
An example:
POV: A club organizer needs to find a better way to promote a club event, because the ways available at the moment are not effective enough.
Some of the related HMW questions: How might we create an interface, which allows the organizers to promote their club events to the nearby players? How might we support the findability of nearby (and at the given moment open) boardgame clubs?
I found that creating POV’s is a great way to look at the gained insights from a different angle, it truly reframed the issues I have defined eariler.
Further reading
Ideate Phase — Crazy 8
I tried out the crazy 8 technique (which is used during the second day of a Google Ventures design sprint). The goal of this technique is to sketch ideas during a short period of time. You set a timer (you have 5 minutes), fold a paper in half four times, so you get 8 panels to draw. It means: 40 seconds/sketch. So you won’t have time to add many details, it is all about ideas and exploration.
It is suggested to make 2 rounds, usually the best ideas come from the second round.
I used this POV statement as a starting point:
“A boardgame player (who does not only play solo games or only with her/his spouse and/or kids) needs to find a good way to organize or join a gaming session, because the channels/ways available at the moment don’t provide effective search/filter functions, and browsing is also quite difficult.”
I loved this method, the ideas popped out of my head really quickly, and the timeframe did not allow me to overthink everything or to care about the little details. Highly recommended.
Further reading
At this point the UX Research & Strategy course almost came to an end, only a short prototype and test part was included.
Prototype Phase — Landing Page
The course material instructed me to create a landing page for my app, its purpose was to test whether the users understand the main idea of the app or not. (I knew it was only a “demo” of a real prototype phase, later on, during the Interaction Design course I created a clickable prototype of the app itself).
How I constructed the landing page:
- the hero section communicates a clear message, there are no other disturbing elements, I tried to avoid distraction (if too many things compete for attention, nothing gets highlighted),
- I avoided using meaningless stock photos,
- the icons reflect the core functions and benefits,
- I considered using the speech bubbles a way to engage users,
- the call-to-action appears not only in the hero section, it’s got a separate section, and it is well-recognizable,
- I paid special attention to the wording (e.g. it should not be gimmicky)
Further reading
Test Phase — Usabilityhub and Peek Test
I tested the landing page using the following tools:
The instruction of the test was “Please take a look at this image and answer the questions.” And the 3 questions were:
- What is the main purpose of this product?
- What are the most prominent functions of it?
- Are the benefits of this product clear?
I got 26 responses (participants came from all over the world).
The results showed that the landing page was able to communicate the main idea.
Only one user said that the benefits are not clear.
I’ve used usabilityhub before, and I would recommend it anyone, it is an easy and affordable way to test your product.
During a Peek Test, a random user answers 3 questions about the uploaded prototype. The questions are (in the free plan you can’t change the questions):
- What is your first impression of this web page? What is this page for?
- What is the first thing you would like to do on this page? Please go ahead and try to do that now. Please describe your experience.
- What stood out to you on this website? What, if anything, frustrated you about this site? Please summarize your thoughts regarding this website.
The user liked the idea and the presentation of it:
“Overall I think it is good, it is interesting. Something I would definitely use. The only portion I would want to search is that who is already organizing games. I like it overall. Maybe make “we are launching soon” a bit bigger. Everything else is good.”
The video is still available here.
Obviously it is always better to conduct a proper usability test, but this Peek Test can serve as a nice addition to the other methods, it provides a quick result; and it is free, the project’s budget is not a factor.
During the Interaction Design course, I had the opportunity to start to think about and to design the interface of my boardgaming-event organizer app. In the following part, I’m highlighting the most interesting aspects of my coursework.
Goals and painpoints
Business goals
It is a personal project. My intention was to “give back to the community”, so at least the first version of it is not going to be profit-oriented. I can imagine that in the future I may start a crowdfunding campaign (with advanced functionality).
The main goal is to help the gamers to organize their gaming sessions more easily.
Other goals for example:
- help “newbie” gamers to start the hobby,
- help club organizers to reach their potential members,
- let the gamers plan their free time more effectively, involve more people,
- help to improve their social life, strengthen the human factor of gaming.
(It needs to be noted that I also identified the business’s pain points.)
User goals
The users are gamers, club organizers. The boardgames inherent nature is that they are played by at least 2 people (except for solo games). Somehow the players have to be in the same physical space (although there are some online boardgaming websites, and tools that can fully simulate a boardgame — like the Tabletop Simulator). If someone only plays with people who live or work with him/her, he/she may not need an organizer tool. All the other gamers could benefit from using this application. The goals of the users are for example:
- organize their gaming sessions more easily,
- plan their free time more effectively,
- increase their social net by gaming,
- show their hobby to their friends, co-workers and family (the boardgaming scene could be even more inclusive by using this app),
- get gaming buddies for more complex and long games,
- try out the new hits more easily (they don’t have to own a copy to try it out),
- try out more complex games without going through a 20-page-long rulebook (because other more experienced gamers can teach them),
- organize their club more effectively,
- play games spontaneously if they have unexpected free time.
Users’ Pain points — an example
The alternatives available at the moment does not support effective boardgame session organizing. People mainly use different Facebook Groups, but these are not searchable/filterable enough.
Further reading
I’ve not found any article explaining the importance of defining the business and user goals better than Jesse James Garrett in his book: The Elements of User Experience. Here you can find a little summary of the layers of the design process.
Function list
After defining the business and user goals (taking into account the main painpoints and trying to answer the following question: “How do the business and user goals align?”), and using the collected research data, I was able to create a list of the main functions of the app.
Next to the necessary (not app-specific) functions — (e.g. Sign up (Registration) / Log in; Profile management; Account settings — I could identify the core functions needed for an MLP (Minimum Loveable Product).
Examples for the core functions:
- Submitting a gaming session,
- Joining existing gaming sessions,
- Listing existing gaming sessions,
- Searching / Filtering existing gaming sessions.
I found it really hard to narrow down the initial function list to create an MLP.
Further reading
How to Build a Minimum Loveable Product
Card Sorting and Sitemap
Card sorting and tree testing are among the commonly used methods which help to determine a product’s information architecture.
I used the card sorting technique to organize the functions inside the app. I added each core and additional function as a card in Trello, then I asked users to sort them, here is one result:
It was interesting to see how participants grouped the different functions, for example one of them found it logical to show every game-session related content on the Home screen, while an other created a separate group called “My Sessions”.
Based on the results of the card sorting, I designed the sitemap of the application.
Further reading
- Improving Your Information Architecture With Card Sorting: A Beginner’s Guide
- The Pros and Cons of Card Sorting in UX Research
- A really interesting presentation about card sorting in practice (it is in Hungarian)
Main user flows
The next step was designing the main user flows. Instead of using a low fidelity sketch or a process modeling software, I tried out this technique.
The main idea of this method that it treats the user flow as a conversation: first the user sees something, then does something. As a result, something happens, and the user sees the next thing, and again: does something.
“Each moment in a flow is like a coin with two sides. The screen is showing something on one side, and the user is reacting on the other side. My flow diagrams illustrate this two-sided nature with a bar. Above the bar is what the user sees. Below the bar is what they do. An arrow connects the user’s action to a new screen with yet another action.”
I found this technique extremely useful: it helped me to think through each important user flow before thinking about how the interactions would appear on the screen. So instead of starting with lo-fi wireframes, this allowed me to get the essence of the interaction.
Further reading
- Stop Designing Pages And Start Designing Flows
- Site Flows vs. User Flows: When to Use Which
- Creating Perfect User Flows for Smooth UX
Product Requirements
To have a better idea of what features and user interface elements are needed for the user to achieve a goal, product requirements were identified, an example:
Prototype & Wireframe with user flows
Although this task was not part of the course material, I made a clickable prototype of the app using UXPin (I’ve already used Axure RP and Indigo Studio during my previous projects, and I wanted to try out a different software). I also created the following map with Adobe Illustrator (next time I’m planning to use Sketch).
The next step would be to test the clickable prototype (by conducting usability tests), and do as many rounds of iteration as possible. Then the visual design would make the process “complete” (by complete I mean that — after the development — the product would be releasable, in an ideal world a product design process can’t be complete ;) ).
At this point the course ended, but I’m planning to continue designing the application in the near future.
I will write a review of the online courses UX Research and Strategy and Interaction Design by Designlab in my next article (spoiler: I highly recommend enrolling!)
If you liked this case study, please check out my previous one: BLESZ.HU Redesign Project (xLabs coursework)
Final note: obviously there are so many UX research & design methods I have not used during this project, here are two collections:
Special thanks to my Designlab mentor, Patrick Multani; to my awesome brother, Daniel Kis-Nagy, who has supported me along the way toward becoming a UX designer; and to Martijn van den Broeck for his great portfolio advices.
If you have any comments, please reach out to me here or on Twitter:
