Problem Discovery

In early 2024, Top Shelf Games decided to improve on their concept for a new mobile game. They put together a design and development team for the project, and my role was to lead the User Interface Design.

The concept was Pickle. - a mobile arcade game based on pickle ball. Very few competing apps existed, and the ones that did were not performing well. Problematic gameplay and a lack of engagement was causing users to delete apps and leave bad reviews.

Team Research

Secondary Research

Secondary research was conducted in the form of competitive review analysis done on existing pickleball games. A target market already existed, and they were leaving public reviews of everything they liked, disliked, and wanted to see changed. Data from this was collected in order to better understand who the users were, what they wanted, and the negative emotions caused by some of their gaming experiences.

Other research on trending mobile games was conducted, with efforts being divided among team members. Ultimately, the data collected was organized into the following categories:

• Reasons for download

• Reasons for delete

• Feelings

• Likes

• Dislikes
  
  

UX research data collected indicated users are attracted to:

• Free, easy to learn games that they can "pick up and play"

• Games that have some competitive element

• Feeling rewarded for their gameplay

• Customizable experiences
  
  

However, there are several problems creating negative feelings:

• Gameplay bugs, glitches, and other problems with game rules cause lots of frustration

• Lack of engagement causes users to feel bored, not want to return, and ultimately uninstall

• Users reported inconsistencies with pickle ball rules, paddle shapes, and other visual elements

Primary Research

In order to better understand these feelings and their causes, competitive usability AB testing was performed with randomly selected users. Hands on experiences and reactions were recorded of the gameplay.

The team's User Experience Design lead had participants play two competing games. They were instructed to "think out loud while they play, and openly share any thoughts that cross their mind." Afterwards, an interview was conducted to get a better understanding of their experiences.

The data collected contained a wide variety of user feedback. In order to prevent confusion, the UX team took the data through various stages of mapping and organization. Ultimately, the users' likes, frustrations, and needs were synthesized into a User Persona and presented to the rest of the team.

User Persona

Matt represented the most common user archetype, and he became the new standard for Pickle. With the help of Matt, the problem was becoming clear:

Lack of engagement is a problem from the very first launch, without competitive elements and feeling rewarded users get bored, and glitchy gameplay turns boredom into frustration-causing them to uninstall.

Mapping a Solution

In addition to bug free gameplay that follows pickle ball rules, users need a simple yet engaging layout, and to be provided with a large variety of rewards to unlock.

User Flows and Wire Frames

The first step in bringing this solution to life was designing user flows. After designing the flows to be as simple as possible, they were turned into low fidelity wire frames. The wireframe screens were tested with users to ensure navigation was intuitive.

Low Fidelity Testing

Early testing was a rather simple process. Pickle. is designed to be straightforward for users, so they were simply asked to:

• Unlock and equip a new paddle

• Use the new paddle during a match

• Return to the home screen after completing match
  
  

Matt navigated through the app without any instructions and had very few problems:

• He felt like the layout was intuitive, and it did not cause any confusion

• Despite paddles and other UI designs being absent, Matt knew exactly what to expect from the different tabs

• He felt motivated to return by the concept of unlocking different paddles
  
  

Easy user navigation meant this first round of testing was a success. Now that a layout had been decided, it was time to create the UI graphics and bring Pickle. to life.

User Interface Design

A light green color was chosen for the background, and it was matched to a cool color scheme. Users do not like the feeling of chaos or confusion, so these colors will help keep them calm.

Dual tone buttons featuring only text were added to the home screen. They draw in Matt's attention- making navigation intuitive, and the use of simple text instead of icons provides him with even more clarity.

High Fidelity Testing and Results

This round of testing focused on how specific design solutions and interface elements were causing users to feel.

How do you feel about the organization of the home screen? How do you feel when browsing through your shop and collections? Does anything stand out to you about the interface? Are there any parts about the layout you don't like? Why? What parts do you like? Why?

After recording users' answers and compiling the data, the feedback was clear:

• Users were confused as to why the home screen showed 3 separate paddles

• Buttons felt "flat" and the interface as a whole lacked depth

• Colors were too light (font colors were not all adhering to AA and AAA standards)

• The game did not feel competitive enough

• Users did not feel rewarded enough

Final Iteration

Now when Matt picks up his phone to play Pickle. he is not met with visually straining elements, uncertainty, and frustration. Rather, Matt opens his phone to a straight forward game that makes him feel good. Earning coins to unlock paddles is both fun, rewarding, and motivates him to keep coming back.

To solve for these issues- colors would have to be bolder, buttons needed to pop, unlocking paddles would have to be more rewarding, and a new competitive element would need to be added.

Additional Graphic Design

Data collected thus far indicated strong user needs for visual variety, and unlockable rewards. Without them, users feel like their experience is too repetitive, and get bored. The solution to these needs was Pickle.'s biggest UI challenge- the creation of over 35 different unique paddles and characters.

Conclusion

Pickle. was recently submitted (7/21/24) to the app store, and is currently awaiting approval. In the meantime, you can check out a prototype preview of the app here:

The results of the final design iterations were great for Matt, who now felt rewarded for his gameplay and more motivated to keep playing. The final product, Pickle., is a fun, simple arcade game that provides its users with an engaging experience.

Reflection & Collaboration

Pickle. challenged me and pushed me in many new ways as a designer. One of the most beneficial experiences working on this project was getting to work in collaboration with other designers and developers. Having teammates to help with the UX research allowed me to focus on the UI elements, and getting those integrated with the developers. In the early stages of our collaboration there were many challenges:

• Ideas would not always translate between design and development

• Exports would be optimized on one platform but not another

• Learning how to replicate UX/UI layouts in game design engines was difficult
  
  

Overcoming these challenges often took several rounds of redesigning, resizing elements, the use of several different design soft wares and platforms. This was happening while trying to balance user feedback, developer needs, and what Top Shelf Games' wanted as a company.

This was my most difficult project in many ways, but it pushed me to grow as a designer, a collaborator, and it deepened my understanding of how design and development work together.

Top Shelf Games wanted to go with a simple, arcade feel for Pickle. Everything from the buttons to the colors should be playful and inviting. The UI Design process for Pickle. existed in two phases:

1. Designing the buttons, frames, and icons

2. Designing an entire collection of unique paddles and characters to go in the game

Basic UI Elements

The characters cycle through automatically as various AI opponents. This keeps Matt from feeling like he is battling the same enemy every time, improving his engagement and overall experience.

The paddles are all unlockable in the shop, and occupy five different tiers. They are sorted based on rarity, and give the users a wide variety of rewards to earn.

These changes were taken into consideration and Pickle. got a full design upgrade:

• Buttons were made to occupy more space, while their gradient and shine added depth

• Arrows were added to the home screen to make the scroll function more clear

• An unlock graphic/animation was added in when users buy a new paddle to feel more rewarded

• A leaderboard button was added to the home screen so users can see how they compete versus friends and other users worldwide