Imagery from current app (left), and the redesign (right)
Ryo
Product Designer
The game where friends roast each other
Overview
Endship is the first party game designed to enable people to use their creativity to produce comedic responses to personalized prompts about the players. It has been on the web and app stores for over 3 years; but I was asked to redesign it from scratch. I was also asked to create a physical card game with a consistent look.
Timeframe: All of my work (including the physical card game, the entire app's UX and UI, and the landing page) was completed in three weeks.
My Role: I was the sole person to design the UX & UI, and conduct UX research.
Tools: Whimsical (for wireframes) and Figma (for high-fidelity mock-ups)
Discover
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 (not their own), and points are awarded for each vote.
The one with the most votes in the end wins.
Competitor Analysis
Many games have one or more of the following elements, but Endship is the only to have all four:
- Creative – Players must write their own answers (e.g., Balderdash, Tabloid Teasers)
- 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
- Comedic – Prompts were designed to provoke funny responses (e.g., Joking Hazards), not intelligent/academic ones (e.g., Ex Libra), or ones that rely on shock value to be funny (e.g., Cards Against Humanity)
- Equal Participation – Unlike games that require one player to “sit out” each round (e.g., Cards Against Humanity), everyone participates equally
These core game elements establish key differentiators for the UX.
User Research
Since the game's release, thousands of games have been played, and hundreds of rounds have been played and observed by the developer. I also played several games after which I interviewed the players to get feedback. From all the aggregated data, I came up with two user archetypes.
UX Audit
The primary archetype I decided to focus on was the University Student. Therefore, that was who I empathized with as I completed a full UX audit, from which I found:
- 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 accounts)
- 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
The Card Game
Physical Elements
Rather than a voting system to pick the category, I decided to design a hexagonal board, with each side corresponding to a roll of a 6-sided die. I designed this to look a bit like a ship's steering wheel.
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 included:
- Unique imagery for each card
- Somehow nautically themed
- The same exact wavy water line must be visible to separate the text area below
- Retain the charming simplicity of the previous version (but make it different)
Timing of Covid-19
These designs were finished right around the time the global pandemic had forced virtually the whole world into their own national lockdowns. This effectively eliminated the priority for a physical card game that required people to play in person, and so development has been halted indefinitely.
Luckily, none of the card designs were wasted, since they were all incorporated into the redesigned app's UI.
Ideation & Validation
Wireframes & Problem Solving
I made sure to solve specific user problems with the needs of the business in mind. Examples include:
- An interactive carousel was implemented to convey a large amount of content in the app, since the business model centered around the purchase of card categories
- I created a simple system of prompts to tell users what to do next at any given time in the game, thereby solving a problem identified in the UX audit
- Users no longer log in upon opening the game; which means no elaborate security measures were necessary, since there is no risk to users
User Feedback
Throughout the design process, I got feedback from people familiar with the app, the app developer who will implement the designs, and existing users. I largely knew what areas of the app needed improvements on because of the UX audit, but I discarded ideas and concepts that did not receive mostly positive feedback.
Results
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.
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" (with the treasure map icon)
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 flag), 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!
Redesign Comparison
A sample of screenshots from the older version are below, with the closest equivalent from my redesign in the bottom row.
Landing Page
Current 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 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 at the bottom.
Takeaways
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.
Don't reinvent the wheel, even in a redesign that's supposed to be different
There were several aspects of the old UX that seemed to work well already, so I did not radically change them. For example, the bottom bar which shows the status of the players during gameplay could've been changed completely. However, it was not actually a problem that needed to be solved, so it stayed quite similar.