Mobile UX, 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

For this project, I worked with a lead designer who provided feedback and outlined the project requirements.
I collaborated with a 2D artist and 3D artist to develop assets for the design.
When the final design was approved, I handed off my designs to the developer.

Breakdown

Role

Duration

Team

Tools

UX/UI Designer

4 Weeks

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

Adobe Photoshop, Adobe XD

Problem &
Tasks

Redesign and prototype a new idea for menu navigation

Refresh visual identity, while staying true to the original

Research & Planning

Before I started the redesigns and mockups, I took some time to play an early prototype and get a feel for the information architecture and existing flows. I noticed some features that were in places that didn't make sense and decided to group them to make three buckets of information:

• Singleplayer
• Multiplayer
• Hats and Cosmetics
  

Moodboard

I love love LOVE making a mood board. Having direction and vision early on is very important.

First Solution

For the first solution, I decided to try three-page navigation. I wanted the information to be separated but exist in the same hierarchy. Having the primary menu be in the middle and the other menus be to the left and right of it. Using the buckets of information I gathered in the early planning stage, I laid out the menu navigation using buttons to move between them.

Pros:

• More screen estate at the bottom center
  
• Less information overload

Cons:

• Not scalable with more screens
• User has less control

First UI Design

For the first pass at a visual identity, I drew a lot of inspiration from HQ Trivia. Some design choices I made:

• Leaderboard prominently displayed to engage users with the multiplayer aspect
• "Hi Username!" conversational tone and dedicated place for a username and profile
• Circular motion and animation to convey high energy and fast-paced gameplay

Second UI 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

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.
 

Second Solution

Using what we had learned from the first solution, we built upon it and decided to move toward tab bar navigation. In this solution, we can show the user where they are in relation to the other pages. At a glance, a user can deduce what else is present in the game as well.

Pros:

• Information structure is clear to the user
• Can go from A -> C without having to go through B

Cons:

• Takes up a lot of real estate at the bottom
• Requires more icons to show information
   

UI Design Ideation

When we were brainstorming another idea for the menu navigation, I stumbled upon an old visual mockup I made. In this mockup, I had taken a more retro approach to a visual design with flat colors.

The important part of this mockup is that I did actually throw around the idea of tab navigation very early on in the process. This taught me the importance of documentation and revisiting old ideas.

Final Design Mockup

Since we had already built a visual language, putting together this mockup was not too time-consuming. The most difficult part of this mockup was designing the icons to be succinct and clear.

Looking back, I would spend more time iterating on the hat icon (left). That one has the potential to look ambiguous.

Final Prototype

The final solution was much more user-friendly. It shows the user where they are in relation to the other pages, and it shows them information about what else is in the game.

• Added tab card navigation
• Removed rotational animations

The biggest feedback and repercussion of this design was the use of the bottom of the screen. It meant that elements that were previously there had to be reworked.

Visual Design

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

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.
 

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