square

Visual Design, Mobile UX/UI

Infinite Jonathans

Infinite Jonathans is a massive multiplayer choose your own adventure, narrative game. Using existing art direction, I was tasked with designing the user interface and visual identity of the game.

Background & Overview

Infinite Jonathans is a multiplayer choose your own adventure game where the choices and fate of Jonathan, the main character, are decided by players' votes. This game was one of the first narrative-focused games our studio has shipped. The narrative and art in this game are very playful and comical, and I wanted the UI to reflect that. I was tasked with:

  • Redesigning the mobile user interface
  • Designing the visual identity
  • Prototyping an onboarding experience.

For this project, I worked with a lead designer who provided feedback and outlined the project requirements. I also worked closely with the artists to make sure the interface and art were cohesive. I handed off my prototypes and designs to the lead developer once they were finished and ready to be implemented.

bigPic

Breakdown

Role

Duration

Team

Tools

UX/UI Designer

2 Weeks

1 Game Designer, 1 Developer, 2 Artists,
1 UX/UI Designer

Adobe Photoshop, Adobe XD

Problem &
Tasks

Prototype an onboarding process for a narrative-based game

Redesign the visual identity

Art

jonathan
aart

Here's some reference for what was happening on the art side of the game. These pictures were illustrated by Ivan Maranan and Hasibe Erdemir.

Early Solution

My first idea was to show a comic book style animation explaining the rules and universe of the game. In the end, I imagined it would be voiced and be the first thing users see when they enter the game.

Pros:

  • Lots of room for creative worldbuilding
  • Very immersive

Cons:

  • Takes up a lot of time of the user
  • Requires either headphones or a quiet space

Feedback

The most important feedback I got from this design was that forcing the users to have headphones or be in a place where they needed to hear it, was not user-friendly. Pulling in extra resources for this prototype also would have been very expensive for the team and based on our timeline, I decided to take the feedback and instead:

  • Make the onboarding text-based
  • Make it faster for the users
  • Make it less expensive for the team to prototype
tut1
tut2

Final Solution

For every step of the process, I kept having to remind myself to "keep it simple". The mechanic of the game was not unknown and never changes so keeping it short and getting the players in the game as fast as possible was the priority.

Pros:

  • Short and simple

Cons:

  • Very linear
  • Not as immersive
     
mockup1

Final Prototype

On one hand, I had originally pitched the hyper immersive animated onboarding and on the other hand, I prototyped and handed off the design for this streamlined version. I do think if I had more time and resources there could be a happy medium that combines both prototypes. This was one of the first narrative-based games Simple Machine has shipped so I wanted to design an onboarding that would reflect that whimsy of the game world.

Takeaway

One design element I would like to revisit in the future is the body text font. I would be interested in trying a font that is simpler and maybe more legible for people with dyslexia.

06ac928a_original

Visual Design

jono_big
pic1
pic2

Most of the art for Infinite Jonathans was completed before I designed the visual identity. My task was to design a user interface that fit the mood, colors, and overall narrative that was drawn by the artists.

  • Organic blobs
  • Comic-book inspired fonts
  • Bright colors
jonovisuals

Takeaways

If I were to continue working on this project, I would love to explore:

  • Audio transcription

Because the game is a complete narrative experience, it would be interesting to see how we could adjust the interface to be mimic an audiobook. This shift would make it accessible to a wider range of people.

Contact 

Currently
Freelancing and actively looking for full-time, part-time, or freelance opportunities in UX, UI, or visual design.

Email
dangddanny@gmail.com

Elsewhere
LinkedIn
Instagram
Twitter

Resume
Download

Back to top Arrow