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:
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:
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:
Cons:
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:
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:
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.
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:
Cons:
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.
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.
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.
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