Embedded Files
Putting It Together
Duration: November 2022 to June 2023
Exercise Overview
The third project in the Google UX Design Course required me to design something for social good.
I noticed how many tabletop role playing game groups tend to fall apart.
I came up with the idea of combining the matching of dating apps with the tabletop game finder services already available.
I chose to design a tabletop game finder app and well as an accompanying responsive website.
I found this exercise rather interesting.
The Problem
Many tabletop players have difficulty finding groups they want to stay with using many current services available.
Groups fall apart when certain personalities cannot mix.
The Company: Custodians of Valor
Custodians of Valor is an organization that focuses on providing support for tabletop game players of all varieties.
Currently, the company is in need of an app that helps Users find games in their area as well as a website that provides similar as well as additional services.
The Goal
Develop an App that helps match similar Tabletop Players so they can play together.
Also build a responsive website that provides the Apps features as well as other features requested by Custodians of Valor.
My Role
UX Designer creating a User matching app and accompanying responsive website for Custodians of Valor.
My Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
User Research
Interviews
I decided to focus on the searching feature first.
I created questions focused on what kinds of things players search for and conducted interviews.
I found the responses widely varied depending on the Player.
It appeared I needed to account for a lot in my design.
One consistency I did notice is the excitement everyone had in order to be matched by their interests.
Personas
Based on the interviews, I created two personas and a problem statement for each of them.
Amal Problem Statement:
Amal is a tabletop role player with anxiety who needs to find a group with a similar open minded and creative play style because they want to feel like they belong and will be among friends.
Ekon Problem Statement:
Ekon is a Ravenloft campaign setting fan who needs to find an experienced group playing a Ravenloft campaign because they want to have fun playing with Ravenloft Players who play by the rules.
Competitive Audit
I conducted an audit of a few competitors' websites. It provided insight into gaps and opportunities I could address in this project.
View the full
and
App Lo-Fi Design and Testing
Ideation
I started drafting designs for the app.
Here I tried a Crazy 8s exercise to help flesh out some ideas for the home screen.
Digital Wireframes in Adobe XD
After drafting some paper wireframes, I used Adobe XD to create digital wireframes.
Here is the home screen.
Home Screen
I provided a list of upcoming games right up front.
I also had important features accessible at the bottom.
Many of the screens followed a similar design.
Low-Fidelity Prototype
The User flow for this prototype centers around the User searching for a game to join.
The flow starts by signing into an account and leads to searching a database.
View the Dragon Scouter
Low-Fidelity Usability Study Parameters
I ran a usability study with people from a gaming club using these parameters.
Type
Unmoderated
Location
United States, Remote
Participants
5 People
Length
15-20 Minutes
Usability Study Findings
I found my current design needed some work.
Finding 1
Users found the initial sign in screen confusing.
Finding 2
Users had a hard time finding games using the App and didn't understand the purpose of it.
Finding 3
Users had a hard time finding the game profiles and found the game profile layout confusing.
App Hi-Fi Design and Testing
Accessibility Considerations
I tried to follow these ideas when designing my mockups.
Provide a tab with a person icon that allows the User to change the accessibility of the app to suit their needs.
Use large buttons to help draw the Users attention to important features.
Use large icons to also help draw the Users attention to important actions.
Mockups in Adobe XD
I made numerous changes to help streamline the app for the Users.
Welcome Screen
I decided to provide less information upfront to help the User focus on the key features of the app.
I felt the Users now have more control on how they want to proceed towards their goal.
Look For Game Screen
I decided to simplify the design to help the User focus on what they want to accomplish.
I moved the Search bar higher up on the screen based on User feedback.
High-Fidelity Prototype
The High-Fidelity prototype followed a similar flow to the Low-Fidelity prototype.
View the Dragon Scouter
App User Flow
Here are the main screens a User goes through to search for a game on the Dragon Scouter app.
Website Responsive Design
Dragon's Cove Sitemap
At this point, I decided to move on to designing a responsive website similar to the app.
I made sure to include some of the additional features of the website in my sitemap.
Wireframes, Mockups, and Testing
After sketching some paper wireframes, I made some digital wireframes using Adobe XD.
From there I made a Low-fidelity Prototype and ran a usability study.
View the Dragon's Cove
The usability study provided me insights that I included in the mockups I created next.
Using Adobe XD again, I made a High-Fidelity prototype.
View the Dragon's Cove
Website Responsive Design
Here are the responsive designs for the homepage of the Dragon's Cove website.
The different layouts still need work, but I like how they came out for each screen type.
Final Thoughts
Impact of the App
Users welcomed the idea of matching players by their interests to help them find similar people.
Each version of this product received positive feedback and enthusiasm.
User Quote:
"I really want this to be a thing."
Next Steps for the Project
I feel I can start to expand on the design and focus on other things.
First, I want to go back to the app design and start developing the account creation more.
I need to gather research on how user's define game categories and rate a good experience.
Using my research, I can develop the match making questions for the account creation process.
I can begin to test my results and fine tune things.
From there, I wanted to look at the game information screen and see what I can change to improve the experience.
What I learned
The project for this exercise built on the skills I learned from the previous two in the Google UX Design course.
I really started to work more with Users on this one, which I really enjoyed.
While my imposter syndrome did make somethings difficult, I felt much more confident this time around.
I felt capable of not trying to find the perfect solution but accept what I could in each design phase.
Thank You!
Thank you for taking the time to review my work with the Dragon Scouter app and the Dragon's Cove responsive website.
Google Sites
Report abuse