Easing new and existing players through the game-creation process
Timeline
4 weeks
tools
Adobe XD
role
UX/UI Designer
How might we ease players’ experience through the game-creation process?
Introduction
Settlers of Catan has been a board game that is widely known and has been one of my favorite games to play in get-togethers with friends. Colonist.io (One of few online Catan platforms) is one of the few games that has brought the fun in playing from home with friends and I have thoroughly enjoyed the experience.
(Current page)
Problem
New and existing users need an easy-to-navigate website to find the information they need and spend less time joining/creating a game. This also includes an "auto-matching" feature for quickly joining existing games. I believe that more users would be able to enjoy the game if the interface and flow were to be updated. For the purpose of this project, the focus will be on redesigning the web browser dashboard and not the game itself.
Goals
Increase the number of conversions of new users to loyal users
Provide easy access to users looking for information
Ease the flow from landing on the main page to starting/creating a game
Solution
Accessible information
Information at arm's length by means of clear navigation and collapsible side bar.
Prominent CTA
Begin playing with call-to-actions that are easily seen on every page for quick access.
Auto matching feature
"Quick play" button for joining existing rooms with players. No more creating rooms and waiting randoms to join.
Research
In order to obtain qualitative research data, I decided to conduct user interviews with participants who were in our target market.
Target Market
Users who have previously played “Settlers of Catan”
New users who are looking for new games to experience online
Existing users who are currently playing on colonist.io
Interviews
The interviews consisted of three participant: One for each group mentioned above.
Persona
Based on the user interviews, I was able to understand what kind of people our users were and created the following persona.
Sam
25 Years old
Part-time Retail Manager
Story
Sam is a part-time retail manager and part-time student attending college. When he is not working, he is either studying or taking breaks to catch up with friends.
One of his favorite board games is ‘Settlers of Catan’. He has been busy lately but he tries to spend time online talking or playing games a few times a week with his friends.
He has been looking for a way to play ‘Settlers of Catan’ with his friends but with everyone having busy schedules is a bit difficult
Action
Starts searching for an online version of ‘Settlers of Catan’.
Goals
- To find a online Catan game to play in his spare time
- To look for a way to spend time with his friends online efficiently
- To recommend the game to his friends
Frustrations
- Games that take long to set up
- Games and websites with poor navigation or direction
- Wasting time
Competitive Analysis
As competitive analysis, I looked into the main competitors’ games, which consisted on both native and web based games, to discern the plus, minuses, and features to identify what aligned with our users’ needs.
Insights
After researching our users and competitors, I came to the conclusion that the MVP for this project would consist of the design of the website being similar to a dashboard of a game for familiarity to new players, a ‘create game’ as well as a ‘auto match’ button in a prominent location for easy access, and clear navigation for users to find information they need faster and efficiently.
Ideation
rapid prototyping
Sketching and brainstorming on how to better redesign the website while including the new features. Testing early and often, this was the final sketch for the new layout. Try out the InVision prototype!
User Flow
Prototype & testing
Reflection
On this redesign process, I tried to update the look of the website to a style that is very familiar and modern while keeping changes to content and structure to a minimum. This way, developers wouldn’t have to change too many things in the skeleton code.
Contributions 🎉
Although this was a personal project, I posted my findings and design decisions in the community board on the official Colonist.io Discord channel. It got enough attention that the Colonist team reached out to me to become a contributor and consult with me to slowly integrate and tweak a few things on their official website while taking into account the constrains they had that I did not know of when I started this project.