Paper Ponds
Designing an illustrated tablet fishing game for the iPad.
Team Members:
-
Olivia Butler, UX/ UI Designer
-
Sarah Banks, UX/ UI Designer
Project Overview
Paper Ponds is an iPad game designed to deliver a relaxing yet captivating experience. Unlike many app games, which don't typically prioritize relaxation, Paper Ponds stands out with hand-drawn designs and engaging gameplay.
My Role
As a team we conducted background research to learn more about game heuristics, performed user interviews, developed our original assets, wireframed, user tested, and finalized a high-fidelity prototype over the course of three weeks.
For this project we used Figma, Adobe Illustrator, Adobe Photoshop, autoCAD, PROcreate, Trello, and Google Suite.
Background Research
To kickstart game design, my team and I researched gameplay heuristics, exploring their impact on user experience.
Referencing 'The 'Rules of Play' by The Interaction Design Foundation, we discovered operational and implicit rules—explicit guidelines versus guidelines understood through gameplay.
Applying these insights to our fishing game prototype, my team utilized a walkthrough tutorial, covering key elements and engaging users through the Power Law of Learning.
As you will see, this integration of objective and implicit rules formed an unspoken dialogue between the game and the users, guiding users through the virtual game space, reinforcing the use of gameplay mechanics, and fostering an immersive user experience.
Objective Rules
Our objective rules were communicated to users using a walkthrough tutorial. This comprehensive guide covers crucial aspects such as fishing mechanics, menu navigation, item usage, and transitioning between in-game locations.
Utilizing the power law of learning, we implemented a hands-on approach. For instance, when introducing new icons, the game prompts users to interact by tapping on the icon. Subsequently, as users access icon menus, the game provides step-by-step explanations. We also designed the walkthrough to intentionally revisit game menus at multiple points, prioritizing recognition over recall for a more user-friendly experience.
Implicit Rules
In terms of gameplay and location-related items, our design aimed to guide users through the game without giving them explicit instructions.
For instance, users can access the map while on the fishing game screen, enabling travel to their campsite. Notably, at the campsite, there's no map button; users return to the map by tapping a back button. This intentional design choice communicates to users that the campsite is exclusively accessible via the map.
By reinforcing the implied function of the map button, we provide users with a spatial understanding of the virtual game space. These implicit rules establish an unspoken dialogue, enhancing the user's interaction with the game.
Competitor Analysis
We next analyzed games like Club Penguin, Animal Crossing (emphasizing shadow and fishing mechanics), Tap, Tap Fish, and Fishing and Life for insights into style, gameplay types, aquarium concepts, and game mechanics.
Direct Competitor: Fishing and Life
"Fishing and Life" closely resembled our envisioned project style, featuring a unique design and interesting gameplay. We analyzed the navigational heuristics on the main gameplay screen, focusing on the mobile experience.
A notable finding was the crowded UI on the small screen.
1. Settings
2. Coins
3. Bait/Tackle Quick Choices
4. Log In Streak
5. In-Game Rewards
6. Paid Gameplay Promotions
7. Objectives and Rewards
8. Current Bait Type
9. Restore App Button
10. All Fish Caught So Far
11. Shop
12. Current Fish Caught
13. Aquarium
14. Upgrade Button
15. Cast Fishing Rod Button
Indirect Competitor: Tap Tap Fish
We analyzed Tap Tap Fish, an indirect competitor focusing on collecting and managing a fish tank. The game involves users in events, competitions for special items, and using in-game currency to unlock new fish.
Strengths of the game include a fun and unique style, easy fish collection, enjoyable decorating features, and relaxing game modes. On the flip side, weaknesses include an abundance of ads, frequent prompts for real-money spending, and a cluttered UI with multiple menus.
To enter the shop, users tap the bottom right menu, unveiling a cluttered interface consuming nearly half of the gameplay screen (as seen in the first photo). Even during standard gameplay (shown in the second photo), the screen is crowded with distractions, urging users to make in-game purchases.
These elements diminish the overall user experience, potentially causing disengagement or prompting users to exit the game.
User Interviews
We created interview questions for potential users to understand their motivations and preferences in gaming. The goal was to uncover unique aspects that distinguish games for different users.
We interviewed eight people familiar with video games, asking a series of 14 questions to grasp what contributes to a positive gaming experience for them.
Interview Objectives:
-
Assess how users interact with casual games.
-
Determine how users select games.
-
Determine what motivates users to continue playing games.
-
Understand how users navigate through in-game menus.
-
Assess how users feel about game walkthroughs.
User Insight
Casual mobile gamers seek games that allow them to play at their own pace, provide simplicity without excessive repetition, and offer rewards for achieving goals or overcoming personal challenges.
Research Analysis
Affinity Diagram
To begin to synthesize our research, my team and I pulled key statements from our interviews and organized them into an affinity diagram, summarizing each category.
User Flow
We used a user flow to visualize the flow of our game. We wanted to introduce gameplay with a concise walkthrough, but needed
to organize transitions from one item to the next.
This is the first iteration of our user flow walkthrough. Purple items mark the initiation of distinct walkthrough flows.
Initially, we explored the idea of triggering certain walkthrough segments, like the tackle box, through user-initiated navigation. However, we realized this might cause confusion among users.
Our goal in designing the walkthrough was to make gameplay tools clear without overwhelming users with excessive text. Ultimately, we found that encouraging users to directly engage with and play the game was the most effective approach.
This early-stage user flow was particularly helpful before starting the wireframing process. Although the final product differs from this initial flow, having it in place significantly sped up the prototyping process. Revisiting and refining the user flow proved more efficient than redoing the entire prototype from scratch.
-
Fish appears
-
User taps fish
-
Timer appears
-
User taps
-
If user taps before timer runs out, fish is caught
-
If user does not, fish swims away
-
For the first tutorial catch, users are able to try again indefinitely
This is the preliminary user flow in which users were instructed on how to catch a fish (left) compared to the final flow (right). Although they share similarities, in the final flow users were guided to tap on the fish shadow rather than in front of it. This adjustment aimed to make gameplay easier.
Feature Prioritization Matrix
We analyzed user research findings and brainstormed potential features for implementation. To organize our ideas and control the project scope, we used a feature prioritization matrix.
Early on, we chose to create a clickable Figma prototype, a decision that, while time-consuming, proved feasible.
Additionally, we were committed to incorporating an original illustrated style and wanted to include a walkthrough to assist new users in navigating the game.
Wireframing
Wireframe Sketches
When considering how to design a distinctive and immersive game, my team struggled with translating these concepts into our game. Beginning the process with a few sketches allowed us to ideate on the essence of the gameplay experience we wanted and explore ways to bring it to life.
After consideration, we chose a semi-realistic style with a paper-cut motif to align with the calming essence of paper crafts. Below are some of our initial quick sketches: I focused on the tackle box, Sarah iterated on the tackle box while also sketching the map and menu, and Olivia took charge of sketching the icons.
Wireframes
We started by wireframing three main game screens: the main fishing screen, the tackle box, and the map. We also began importing some of our basic drawn assets, such as the background of the fishing screen, and the line art of the map screen.
During the wireframing phase, our emphasis was on fine-tuning the position of menu and tool icons. Following this, we explored strategies to enhance the clarity of the walkthrough and achieve a more streamlined visual experience.
User Testing
The primary objectives of our user test were to gather comprehensive and general feedback on our walkthrough. We aimed to assess the ease of user navigation—identifying areas of potential confusion and ensuring a user-friendly experience.
Our goal was to determine whether users understood how to use tools and icons to navigate between various screens, play the game, and access in-game information.
User Testing Results
From our testing, we discovered several key insights:
-
First and foremost, users really enjoyed the game concept and wanted to be able to play the game.
-
Secondly, the walkthrough was perceived as text-heavy. To address this, a potential solution was to introduce gameplay concepts at a more gradual pace.
-
Additionally, users expressed a desire for a motivating element or challenge within the game, as this was unclear when users played the prototype.
Hi-Fidelity Prototyping
Style Inspiration
Inspired by various illustrative styles (shown below), we recognized the need for clear style rules.
The decision to adopt a paper-cut style came after Olivia presented artwork she had designed for a different project (two birds, shown at the bottom). Impressed by Olivia's work, myself and my team member Sarah committed to designing our game around this distinctive style.
Style Guide
The asset creation followed a three-stage process: initial line drawing, flat color application, and final rendering.
Given our three-week timeline, we streamlined the design process. One team member handled the initial line drawing and applied base colors, while another team member executed the final rendering, adding drop shadows, a paper texture, and various visual effects for lighting and depth.
To enhance the visual style, we intentionally applied a color distortion known as chromatic aberration, creating a vintage-camera-shot ambiance.
Additional Style and Animation Guidelines
To streamline our design process, my team and I established clear style guidelines for object assets, animations, and area backgrounds:
-
We opted for a desaturated color palette to mimic craft paper, limited object colors, and applied gradient shading, drop shadows, chromatic aberration, and paper texturing. This involved layering two different paper textures over colored illustrations.
-
Objects were crafted with rounded yet sharply contrasting edges.
-
Our animation style prioritized smoothness while also emulating real-life movements. For example, in our prototype, fish animations varied between 1000ms to 1800ms between frames to achieve diverse movement speeds, and menu overlays eased out when entering the frame with a speed of 500ms.
After completing the asset design process, we integrated individual assets into larger scenes. The goal was to enhance user recognition and foster a cohesive and familiar visual experience through the reuse of assets.
Final Prototype
The Prototype Animation Process
Personally, developing the playable fishing game prototype turned into a passion project, taking around 40 hours of my own time. Despite Figma's conventional use as a design tool, I pushed its limits to create the game prototype my team and I envisioned.
One of the things I found difficult was designing the fish animation while also considering that the fish needed to be clickable. One way I used figma to work around this challenge was to create an animated component.
I started by making a frame the same size as the prototype, set the background to transparent, and placed our fishing rod asset and the asset of a fish shadow.
Keeping the fishing rod in the same place from frame to frame, I devised a component composed of ten separate frames. When the prototype was active users would be able to see the fish's shadow moving along a predetermined path.
Using 1ms delayed transitions, smart animate, and linear animations, I was able to animate this movement virtually step by step.
In order to make clicking the fish transition to another frame in the prototype, I had to keep this component on the main mage of my prototype. The fish shadow was itself a frame, and clicking on the shadow would transition the prototype to another frame.
This was only one of the many workarounds I deployed during my prototyping process.
While this prototype was an incredible challenge to design, create, and execute, The strong interest from users wanting to experience the game firsthand is ultimately what motivated me to develop a more interactive prototype. While Figma may not be the ideal platform, my commitment to crafting a unique and engaging prototype helped me navigate its constraints.
The final prototype is an interactive game that can be played on Figma. It integrates all of the hand-drawn assets, style, colors, and research my team and I worked on over three weeks surrounding game rules, user research, research synthesis, procedural asset development, wireframing, and prototyping.
Future Development Opportunities
While we achieved a lot, there were still areas we wanted to improve with more time. We aimed to add more fishable areas on the map, include a greater variety of fish, maintain consistent colors and typography, introduce more complex game mechanics, and further develop the tackle shop. Additionally, we considered the possibility of coding the game if time allowed.
In Conclusion
In this three-week UX/UI design project, our aim was to improve tablet fishing games by addressing issues like disruptive ads and lackluster gameplay. We conducted intensive research, user interviews, and various design phases to create a functional Figma prototype.
Our process involved creating original hand-drawn assets with a whimsical paper-cut style, organizing user flows, and refining based on user testing. The three-stage asset creation ensured seamless integration into larger scenes for enhanced user recognition.
In conclusion, our fishing game prototype represents a successful blend of creativity and user-centric design. From brainstorming to the final prototype, each step aimed to enhance the tablet fishing game experience through thoughtful UI design.
