Endship has been on the web and app stores for over 3.5 years. I was asked to redesign the entire experience from scratch, and to make a physical card game with a consistent look.
Timeframe: All of my work (redesigned mobile app, landing page, and new card game) was completed in one month.
My Role: I was the sole person to do the UX & UI design and research.
Tools: Whimsical (for wireframes) and Figma (for high-fidelity mock-ups).
Game Rules
Endship is the first party game designed to enable people to use their creativity to produce comedic responses to personalized prompts about the players. The core gameplay is relatively straightforward.
Every round, one player is randomly selected to become the “captain.” The captain is the subject of a prompt that everyone uses to complete a sentence.
After everyone is finished writing their answers, they then vote on the best answer (but not their own), and points are awarded for each vote.
The one with the most votes in the end wins.
Competitor Analysis
Many competitors have one or more of the following elements, but Endship is the only to have all four:
1) Creative — Players must write their own answers (e.g., Balderdash, Tabloid Teasers)
2) Personalized — Strategy is not limited to selecting “the best card” to appeal to the sense of humour of whoever’s turn it is (e.g., Cards Against Humanity, What Do You Meme?); the content is actually about a specific player
3) Comedic — Prompts were designed to provoke funny responses (e.g., Joking Hazards), not intelligent or academic ones (e.g., Ex Libra), or ones that rely on shock value to be funny (e.g., Cards Against Humanity)
4) Equal Participation — Unlike games that require one player to “sit out” each round (e.g., What Do You Meme?), everyone participates equally
These core game elements establish key differentiators for the UX.
User Research
Since the app has been released, the developer has tested and gotten feedback on hundreds of rounds he played personally. I also played several games and interviewed the others players afterwards; and the analytics of thousands of games were also utilized for user research. From aggregating all the data, I came up with two user archetypes.
University Students
Cards Against Humanity — a self-proclaimed “party game for horrible people” — was a major inspiration for this game. This “horrible people” sentiment largely appeals to university students, who enjoy being “edgy” with their friends.
Many similar games can feel stale and lose appeal when players keep seeing repeated cards; but these users like the fact that Endship has a lot of replay value, since people write their own content.
They want to be able to jump into a game with their friends spontaneously—no elaborate setting up.
Team Players
Research indicates that many companies have enjoyed using Endship as a team-building game, by sharing laughs and creating new inside jokes together. This is especially the case for small or medium companies (e.g., tech startups), or small, tight-knit teams within larger companies.
One thing that’s very important to Team Players is the ability to self-regulate the content — so that people can enjoy the game without anyone being offended, which is HR’s biggest fear.
They want to set time aside for the game, so it is more planned and controlled.
UX Audit
The primary archetype we decided to focus on was the University Student; so that was who I empathized with as I completed a full UX audit of the current app. A few concerns emerged from this:
- The very first screen requires either Google+ or Facebook login, which may deter some from playing (e.g., data privacy, or simply not having such account)
- The app did have an appealing charm to it, with its cartoonish and colourful UI elements; but some of the content lacked professionalism
- There were some cases where users were not sure what to do next
Physical Elements
One thing that differs between the app and the card game is the category selection process each round. Rather than having a voting system (which is more necessary for an app), I utilized a simple 6-sided die. With a die, it made sense to design a hexagonal board, with each side corresponding to the die.
These simple elements are both cost-effective for the company, and useful for the players.
Cards
The current version of the app had simple line drawings, which strategically used the same character in colourful situations. With a physical card game in mind, I had to be more strategic with the visuals, because one of the requirements was that each card must be monochromatic.
Requirements for the cards I made were:
- Unique imagery for each card
- Somehow nautically-themed
- The same wavy water line must be visible to separate the text area below
- Retain the charming simplicity of previous version
The Global Covid-19 Pandemic
These designs were finished right around the time the global pandemic had forced the whole world into their own national lockdowns. This effectively eliminated the plan to launch a physical card game, which required people to play in person; and so all development effort moved toward the mobile app.
Wireframes & Problem Solving
I made sure to solve specific user problems with the needs of the business in mind. Examples include:
- The business model relates to the purchase of card categories; so I wanted to use a carousel to convey how much content there was for users to play with, in a fun and playful way
- I made a system of prompts which tells users what to do next at any given time in the game, thereby solving a problem identified in the UX audit
- We eliminated user sign-ups, because they were unnecessary, and only reduced sign-up rates
- An onboarding character was previously used to explain the rules. While some users liked the humour, I designed the app to be so simple that onboarding would be unnecessary. This made it easier and quicker for users to jump into a new game
User Feedback
Throughout the design process, I solicited feedback from users and adjusted accordingly to increase gameplay intuitiveness. Every individual cards was also tested to see how funny they were and to make sure their grammar made sense.
Visual Design
The previous version had a loose nautical theme, including submarines, sharks, and throwing daggers. I wanted to narrow the theme to focus on pirates, which helped me to make a UI that felt consistent throughout the experience.
I kept the aesthetic simple and charming, but with more professional-looking visuals. After experimenting with the backgrounds, it became clear that I had to be strategic about colours, so light blue is often used a neutral background colour.
User Journey
I designed the UI to communicate a subtle narrative that works alongside the experience of the user; like a story with a beginning, middle, and end. This is the general narrative communicated through the UI:
- You see a far-away look at a ship docked at an island. You can decide what to tap on (including “How to Play” — like its treasure map)
- The background changes to a first-person view, where you are now on your island, getting ready to set sail, and waiting for others to join you
- You are now on the ship (with the captain’s avatar on the large sail), where the main part of the adventure is — writing your answers
- You can see the shore just outside; either for you to pass by (if the game isn’t over yet) or for you to dock (if this is the last round)
- You have reached the end of the game, and you have found the treasure chest (where “X” marks the spot)!
Redesign Comparison
Here‘s a side-by-side comparison of some of the major game screens.
Landing Page
Previous Website
The current landing page has all the content necessary to use the app. However, in addition to making the website consistent with the app UI, I wanted to make it far more visual, and less reliant on text.
Redesigned Website
I used the ship graphic that I made for the app, but I added an explorer with a telescope at the front. I did this to turn the “How to Play” section into what looks as though it is the zoomed-in view of what the explorer sees — the explanation in the clouds, and the island below.
What I learnt
With colourful UI elements, avoid gradients.
Eliminating the gradients in the backgrounds, and using light blue as a relatively neutral colour, really helped clear up the UI elements on each screen. This color contrast made it a lot more usable.
Don’t reinvent the wheel.
There were several aspects of the old UX that seemed to work well already, so I did not radically change them. For example, the fundamental user flow remained pretty much the same as the old version. In fact, the game was designed with a similar user experience as the competitors mentioned earlier.
My biggest challenge: I had to use colour strategically, for things like statuses, cards, avatars, buttons, etc. I experimented a ton (including with various backgrounds) and ended up having fewer colours in the backgrounds and more in the UI elements.
