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.

Endship

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.

 

Endship

Competitor Analysis

Many games 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/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., 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.

Endship

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
Endship

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.

Imagery from current app (left), and the redesign (right)

Imagery from current app (left), and the redesign (right)

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
Endship

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
Endship

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.

Endship

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.

Endship

This is the general narrative communicated through the UI:

  1. 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)

  2. 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

  3. 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

  4. 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)

  5. 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.

Endship

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.

Endship

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.

Endship
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.