Board Game Tutorial Mobile App — A UX Design Case Study
My mentor once told me that you either step forward in growth or step backward into complacency.
So, after being in marketing for more than nine years (4 of the in a CPG company and 5 in tech startups and companies), the question for my personal growth as a marketer is, “Which high-value skill am I weakest at as a growth marketer?”
It was obvious. I need to up my UX Design game. So, I enrolled in RED Academy’s UX Design certificate program. In the course of 10-weeks, I was able to apply UX principles of user research, design thinking, user interface design and prototyping, information architecture and more to a project. This is a case study of that project.
To my UX design, product-focused and growth friends and colleagues, please give me feedback. I can only get better by being told where I need improvements in my design process and thinking.
Gracias!
The Problem Scenario
Imagine you’re at a board game cafe or you’re out with four friends. You’ve played the same board game over and over again (Monopoly, Clue, etc.). You and your friends want to try out a new board game. How do you learn a new board game in an easy, quick and accurate manner?
My hypothesis was that people would prefer a learning method that got them playing as soon as possible. Also, people would prefer interactive and visual way to learn a new board game rather than just reading a manual.
User Research
To validate my hypothesis, I conducted user research. I interviewed five people who played board games regularly and then used Amazon MTurk to get 61 survey responses.
Demographics
I gathered demographical data to highlight any biases in my data. Most of the respondents are college-educated, employed, 25–35 years old who play one to five board games a month (see Figure 1 — Demographic Data).
Learning Methods and Factors
In terms of learning methods, I looked at the three most popular methods for learning new board games:
- Reading the manual
- Watching a video
- Getting a live demo from a friend
I also looked at three learning factors:
- Competency — learn strategies so I can beat my opponents
- Speed — Start playing as quickly as possible
- Accuracy — Learn all the rules correctly
I was not surprised by the most popular learning method — getting a live demo from a friend. However, my hypothesis that speed is the number one learning factor to the learning method preference is wrong. 39% of the respondents indicated that accuracy (learning all the rules correctly) is the number one learning method factor (See Figure 2 — Learning Method and Factors).
Qualitative Data
I also gathered qualitative data for each of the learning methods.
Reading the Manual
What I love about this learning method:
- “Everything you need to know in one location.”
- “I like going on my own pace.”
- “I like the images and diagrams for game setup and strategies.”
What I didn’t love about this method:
- “It’s so slow and boring.”
- “If I don’t understand something, I have no help.”
- “Can’t learn obscure rules.”
Watching a Video
What I love about this learning method:
- “The host can be engaging.”
- “I like being able to see what I’m supposed to do.”
- “Seeing how things work.”
What I didn’t love about this method:
- “Long video.”
- “Not as stimulating.”
- “It’s moving fast and sometimes I learn slow.”
Live Demo
What I love about this learning method:
- “Easy to ask questions.”
- “That I can gain insight into strategy.”
- “Can get straight to the nitty gritty of what I need to know to get started “fast and then learn more as I go along and play.”
What I didn’t love about this method:
- “Them keeping secrets so they can beat you.”
- “The rules are often distorted and the person doesn’t know or care.”
- “You don’t learn the strategies.”
Insights from the User Researc
From my user research, I deduced five main insights that will drive the rest of this project:
- Visual — users prefer to learn visually or through an interactive demo.
- Trust and Accuracy — users care about learning the board game accurately. They will not sacrifice accuracy for speed.
- Control — users want to be in control of the pace of their learning.
- Strategy — users want to learn strategies and tactics to beat their opponents.
- Speed — users don’t want to take a long time learning the board game, but start playing the game as quickly as possible.
User Persona
From my user research, I created a persona I’ve dubbed, “Sam the Social Seller,” (see Figure 3 — User Persona).
Sam is a 26-year old sales associate at Sephora living in the Liberty Village neighbourhood in Toronto, Canada. She’s competitive, cynical and a visual learner. She’s won the top seller award at Sephora for the last two months. For fun, Sam enjoys going out with friends and meeting new people. She recently joined a group on meetup.com that meet twice a month at a board game cafe.
Brands that she loves and respect are Artizia, Lulemon and Stella Artois.
Her motivations are social (hanging out with friends), “all I do is win, win, win” (win at everything), and “get shit done” (proactive learner).
Her goal is to beat her friends at every board game.
Her frustrations are wordy manuals, boring tutorials and inaccurate demos from friends.
User Stories
From my user research and persona, my user stories are as follows:
- As a user, I want to learn board games so I can play with friends.
- As a user, I want to know how long it’ll take me to learn a board game.
- As a user, I want to know enough of the rules to get started playing accurately.
- As a user, I don’t want to just read the rules and mechanics of the game, I want to be shown it through a simulation or sample game.
- As a beginning user, I want to learn the beginner’s strategy to playing a board game.
- As an intermediate and advanced user, I want to learn more advanced board game strategies.
MVP Feature Set
I originally wanted to design a mobile AR app. After discussing with more users, I’ve narrowed my MVP feature set to the following:
Must Haves:
- Interactive walkthroughs of board games
- Be able to search through different board games
- Save or bookmark board games for future reference to learn more advanced strategies
- Length of time to learn a new board game
Must Haves:
- User ratings and reviews of board games (be like a Yelp for board games).
- Signup for app to save the bookmarked board games to the cloud.
Not Needed:
- AR capabilities
- Sync learning a game with friends through bluetooth
Paper Prototype and Usability Testing
Based on my user research, persona, insights, feature set, I put together a low-fidelity paper prototype.
From my five in-person paper usability test, I learned the following:
- Users couldn’t read my handwriting. Even though it’s a low-fidelity prototype, I should make sure it’s readable. If I’d known Sketch at this point, I might have done it at Sketch. But this is Week 3 of 10. We didn’t touch Sketch until Week 6.
- The icons for saving or bookmarking board games was confusing. I’m not a UI designer. But I should have aimed for consistency. In one screen, I used the star icon. In another, I used the bookmark icon.
- The popular searches in the search screen was very popular and useful. People don’t like staring at a blank screen.
High Fidelity Prototype
I designed a high-fidelity prototype using Sketch and uploaded it to InvisionApp using their Craft plugin.
Overall, I wanted the prototype to be clean and simple to use. When Sam is in a board game cafe with her friends, she should be able to find a board game really quick.
If my prototype looks similar to another app, it is. It is heavily inspired by the Khan Academy iPhone app.
I have seven main screens:
1. The Explore Screen
The explore screen is where users can explore board games. I’ve structured the information by categories. Users would scroll through each category horizontally, much like what Netflix has done.
The main hero banner will highlight popular games.
2. Search Screen
The search screen will highlight popular searches.
3. Search Results Screen
4. Empty Bookmarks Screen
If the bookmarks screen is empty, there is a call-to-action to explore the library.
5. Filled Bookmarks Screen
6. Board Game About Screen
The board game about screen shows the number of players the game is for, how long it’ll take to setup and learn and the average playing time.
Board games will have three main options: Game setup and rules, basic strategy and advanced strategy.
7. Board Game Tutorial Screen
The board game tutorial screen is interactive. That means they can drag and drop different pieces of the board game. They can also swipe to the left or to the right to remind or fast forward the tutorial.
Invision App Prototype
The link below is an interactive prototype using Invision App.
Final Feedback
Feedback I’ve received from the instructors is as follows:
- There is too much white and empty space. I need to make sure I’m maximizing the utility of empty space.
- My original persona was not rooted in my user research data. I’ve tweaked it and changed it so it highlights the insights from my user research.
- Less is more. The hardest part of the UX design process is figuring what the real must-have features. If I had it my way, I want all the features in the MVP. But, the art and science of the UX design process is defining the core features that will deliver the app’s value to the user.
As I mentioned above, I’d love to hear any feedback you have. This is my first one designing an app using the UX design methodology.
Thank you to the following instructors and mentors who helped shaped this project: raykanani, Apurv Ray, James McNab and Sarah DeCaria.
Originally published at Ramli John.
