popthelock2

Visual Design

Pop the Lock 2

Pop the Lock 2 is a multiplayer, fast-paced arcade game for iOS that I had the pleasure of designing a visual identity and user interface for.

Background & Overview

In 2019, Simple Machine wanted to release a sequel to Pop the Lock, a four-year-old arcade game, with new game mechanics and fresh visuals. I was tasked with redesigning the visual identity and menu navigation system for the game. 
The project requirements included presenting the different features of the game such as:

  • Multiplayer: Where players can host and join others matches and find the leaderboard
  • Solo Modes: A place for several different modes a player can play solo. (Classic, Endless, Memory, etc
  • Hat Collection: Where players can buy hats and equip owned hats
pic6

Problem &
Tasks

Refresh visual identity, while staying true to the original

Inspiration

visual1
visual2

The original game elements that I lifted elements from but also changed quite a bit.

The original prototype handed to me by the developer.

information

First UI Mockup

For the first pass at a visual identity, I drew a lot of inspiration from Jukeboxes and Arcade cabinets.

  • Primary colors evoke a playful almost kiddish aesthetic.
  • Flat, retro-inspired, solid colors.
  • Strokes and Circular elements for added contrast.
ui2

Moodboard and Sketches

moodboard2
moodboard1

Inspired by HQ Trivia, PGA Golf Shootout, and carnival aesthetics. Also tied into more modern gradients, and summery looking colors.

Second UI Mockup

This second mockup was a step in the right direction. It added a lot of gradients and more modern colors. The feedback I got was it looked too "sporty" and too similar to other games on the market at the time (HQ Trivia).

  • Competitive, so I tried to make that aspect reflected.
  • More gradients.
  • Visual aspects that created a sense of motion (fast-moving, circular, etc)
v2

Colors

pic2

Final Design

Between the first visual design pass and the design of the interactive prototype, I changed up the visual language to make it stand out from HQ Trivia. Design choices I made:

  • Each menu has a gradient to go along with it
    Added white space at the top of the screen to ground players and be a space for info
    Reserved the bottom of the screen for interaction and buttons
UI_1

Prototype

For the interactive prototype, I worked with the developer to nail down the menu transition animation. To me, it was important for the animation to be spatial to show users the information they were coming and going from.

  • Bubbly buttons to move back and forth between pages
  • Rotational animation to reinforce the circular motifs

Feedback

After testing it we realized it was not scalable if we planned on ever adding more pages. If a page was ever more than one page further than where a player wanted to go, then they would have to move through and watch extra animations that were not necessary. We often found ourselves getting lost even within this three-page structure.

Eventually, after seeing this prototype and watching beta testers use it, we had ideas on how to build upon this design and improve it.
 

ptl2-menurot

Visual Design

pic8
pic9
visual
pic7

A balance I had to maintain was staying true to the original game while still reinventing it. Multiple ideas were considered before the team and I landed on the final design. The visuals were inspired by carnivals, arcade cabinets, and HQ Trivia.

  • Four different gradients
  • Circles, dots, and rounded shapes
  • Font: Oduda
pic10

Takeaways

Exploring different ways to layout our features was enjoyable. I liked learning the strengths and weaknesses of each menu navigation type. Ultimately, there is no clear cut solution as to which menu navigation system is the best. It depends on the user and the information a product needs to convey to them.

Menu navigation and information architecture is complicated! Although the solutions we came up with early on seemed like they suited our needs, ultimately the type of user who would interface with the menu dictated the end product.
 

square

Visual Design

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

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.

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

Inspiration and Art

aart
jonathan

When I joined the project there was already existing art assets that I had to consider when redesigning the rest of the UI and visual design.

jonomood3

First UI Mockup

Very very barebones. I focused on highlighting the art foremost and then finding good typefaces to complement it. Feedback I got was:

  • Not playful enough.
  • More emphasis on art.
visualmood3

Moodboards

aart
jonomood1
jonomood2

Second UI Mockup

Added more colorful UI elements, used a lot of organic blob shapes, and playful designs.

  • Step in the right direction, but was now too visually stimulating. 
jonovisual2

Type

type2

Final Design

Removed unnecessary clutter. Floating textbox instead of grounded. Centered titles, less noise.

jono_big2
menuMockup
06ac928a_original

Visual Design

jono_big
typography
jonovisuals
backgroundjonathan
mockup1

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