Project Overview
Cool Bricks is a 3rd person shooter mobile game with a non-sense adventure theme. Players can choose from a variety of quirky characters and embark on missions in a world where nothing needs to make sense. The game features squared or sharp-edged elements, giving it a distinctive visual style. The objective is to complete levels, defeat level bosses, and unlock new features.
Objective
The goal of this case study is to create an engaging and intuitive user interface and experience for Cool Bricks that enhances gameplay, promotes progression, and stays true to the game's whimsical and unique theme. This initial iteration will concentrate on the main page, aiming to provide easy access to essential game features and enabling players to complete important tasks with minimal navigation.
Last Iteration
January 2025
Tools
Figma, Photoshop, Adobe Illustrator, After Effects, Adobe Animate, Blender, Unity 3D
Client
Hooqt Games
My Role
UX Designer and UI Artist
My Responsibilities
Creating wireframes and prototypes, conducting usability studies, ensuring accessibility, and iterating on responsive designs. Designing high-quality visual assets and UI components and creating detailed mockups and high-fidelity designs.
Design Process
The Cool Bricks project focuses on creating a user-friendly experience for a diverse audience. Using research, creative ideas, and careful design, we crafted an engaging and intuitive interface that enhances gameplay. Our iterative process incorporates user feedback to deliver a polished product.
Personas
User Personas Identified
Our personas help to ensure that the game design decisions are user-centric and cater to the diverse needs and preferences of the target audience.
Casual Gamers
Enjoy light-hearted and humorous games with simple controls.
Competitive Players
Seek challenging gameplay and progression through levels.
Collectors
Interested in unlocking characters, weapons, and achievements.
1. Casual Gamers
Profile:
Casual gamers are individuals who engage with light-hearted games that have simple controls. They typically play games to relax without investing substantial time or effort.
Characteristics:
These players prefer games that are easy to learn and play, with whimsical themes and engaging visuals. They usually play in short sessions and appreciate features that allow them to make progress without extensive time commitment.
Goals:
Their primary goal is to find entertainment and relaxation through gaming, seeking a sense of accomplishment without excessive difficulty.
Pain Points:
Complex interfaces and challenging gameplay can be frustrating for casual gamers. They favor straightforward navigation and clear instructions.
2. Competitive Players
Profile:
Competitive players seek challenging gameplay and progression through levels. They are motivated by competition and often aim to achieve high scores and ranks.
Characteristics:
These players invest significant time in mastering the game and enjoy features like leaderboards, achievements, and competitive modes that measure their skills against others.
Goals:
Competitive players strive to improve their skills, attain top rankings, and gain recognition within the gaming community.
Pain Points:
Lack of challenging content or poorly balanced difficulty can diminish their interest. They require a game that constantly tests their abilities and offers new challenges.
3. Collectors
Profile:
Collectors are gamers who are interested in unlocking characters, weapons, achievements, and other in-game items. They enjoy the sense of completion and pride that comes from amassing a comprehensive collection.
Characteristics:
These players are detail-oriented and patient, willing to invest time in exploring every aspect of the game to uncover hidden items and secrets. They appreciate games with rich content and numerous collectibles.
Goals:
Their main goal is to complete their collections and achieve 100% game completion, often sharing their accomplishments with the community.
Pain Points:
Limited content or the absence of rewarding collectibles can deter them from engaging deeply with the game.
Competitive Analysis
In our competitive analysis, we examined popular mobile shooter games to identify successful UI/UX patterns and studied games with unique visual styles to understand how to maintain consistency and appeal. We found that Brawl Stars, Candy Crush Saga, and Fortnite align well with the Cool Bricks proposal. Brawl Stars is known for its vibrant visual style and variety of characters to unlock, appealing to both collectors and competitive players. Candy Crush Saga, popular among casual gamers, features intuitive gameplay and a whimsical visual style. Fortnite, primarily known for its battle royale mode, also includes a substantial amount of collectible items, skins, and challenges. These examples illustrate how different elements such as collecting, competitive play, and engaging visuals can be integrated into a mobile game to cater to a diverse audience, much like the proposal for Cool Bricks.
Information Architecture
Design
Paper Wireframes
In the early stages of our design process, we developed paper wireframes to conceptualize the UI/UX layout. These wireframes were crafted with our target personas in mind, ensuring that their needs and preferences were at the forefront of our design decisions. Additionally, we conducted a thorough analysis of our competitors' interfaces to identify opportunities for differentiation and innovation. This foundational work allowed us to create a user-centric design that stands out in the competitive landscape.
Digital Wireframes
To better visualize our layouts, we turned our paper wireframes into digital ones. This shift helped us refine our concepts and create a more interactive experience for usability testing. We focused on designing for small-screen phones first to ensure broad device compatibility. This inclusive approach allowed us to create a product that appeals to a wider audience, fostering a more diverse and extensive community.
Low-fidelity Prototype
Once the layouts were ready and approved, I began designing the UI’s first prototype to evaluate its usability and proposed features. An initial flow was created to support the most important parts of the UI, allowing us to observe how players navigate and perform tasks. This approach helped us identify any potential issues and refine the design to ensure a seamless and enjoyable user experience.
Usability Study
Our initial usability study revealed that some of our hypotheses were correct. However, we identified necessary changes to the main page to provide seamless access to the game's key features and minimize unnecessary navigation.
At this point, we were informed that some features, such as the season pass and friends, will not be present in our first release and should be disregarded for now.
Findings
1. Hero Selection: Implement a carousel layout that allows players to manage heroes effectively, including purchasing, activating, and unlocking special abilities directly from the main page.
2. Heroes Stats and Hero Deck: Eliminate these pages and simplify their information and functionality, incorporating them into the main page to minimize unnecessary navigation.
3. Shop Page: Design the shop page for easy navigation through various categories, ensuring that users can quickly locate and acquire desired items without any hassle.
4. Progress and Achievements: Make game progress and upcoming achievements prominently visible and easily accessible at all times, keeping players motivated and engaged throughout their gameplay experience.
2. Heroes Stats and Hero Deck: Eliminate these pages and simplify their information and functionality, incorporating them into the main page to minimize unnecessary navigation.
3. Shop Page: Design the shop page for easy navigation through various categories, ensuring that users can quickly locate and acquire desired items without any hassle.
4. Progress and Achievements: Make game progress and upcoming achievements prominently visible and easily accessible at all times, keeping players motivated and engaged throughout their gameplay experience.
Refining the design
Style Guide
Our objective was to create a user interface that was clear and intuitive, striking the perfect balance between complexity and simplicity. We chose glossy style graphics in contrast to the sharp-edged elements of the game, ensuring the UI would stand out and break the rigid forms of the game’s graphics.
As the game uses a vector cartoon style for its elements, the UI was also designed to align with this vision, incorporating guidelines for visual elements such as icons, windows, colors, and fonts.
Typography & Colors
The typography and color palette were chosen to align with the game's vibrant and whimsical visual style. We opted for a bold and playful font to enhance readability and complement the cartoonish elements of the game. The color palette features a harmonious mix of bright and contrasting colors, creating a lively and engaging atmosphere while ensuring clarity and distinction across various UI components.
Creating Assets
Initial designs for icons and other UI elements were created to represent the game’s offerings, with some elements intended as placeholders. Each asset was crafted to blend seamlessly with other UI components and the background, while also being inviting and prominent for player interaction.
A series of treasure chests and currency icons were designed to enhance the shop's appearance and provide a more accurate representation of the desired aesthetic. These assets seamlessly blend with the overall visual style, ensuring that they contribute to a cohesive and engaging user experience.
To enhance the game's interface and provide an appealing representation of potential power-ups, we designed a set of placeholder power-up icons. Each icon is crafted to seamlessly integrate with other UI components and align with the overall game aesthetic. As the game design team is still defining power-ups at this stage of development, these placeholders ensure a cohesive visual experience and smooth transitions once the final icons are introduced.
Mockups
Main Page
Following our usability study findings, we assembled mockups with iterations to address user needs and pain points that had been discovered. To ensure easy access, all essential features have been added to the main page.
The carousel design integrates comprehensive navigation directly accessible from the main page, allowing players to select and manage their characters seamlessly. This dashboard includes intuitive icons and shortcuts for character upgrades and managing power-ups.
Progress tracking is another feature offered straight from the main page. Players can quickly navigate through worlds and stages, follow their progress, and keep track of their achievements. By centralizing these key functionalities, players can efficiently handle all character-related activities without navigating through multiple menus, thus enhancing overall gameplay fluidity.
Power-up Management
Power-up management became easy and intuitive with the addition of folding buttons and floating windows. Players can effortlessly select and equip power-ups, view descriptions, and even purchase locked ones directly from the main page. This streamlined approach enhances the user experience by providing quick access to essential features without unnecessary navigation.
Hero Stats
Hero stats can be checked without navigating to another screen. We implemented a toggled button that opens an overlay window, providing quick and convenient access to all relevant information. This feature enhances the user experience by allowing players to check on hero stats seamlessly within the same interface.
Key Mockups
The key mockups highlight the design solutions implemented in Cool Bricks. These mockups showcase the refined user interface and experience, focusing on essential game features and interactions that enhance gameplay while maintaining the game's whimsical and unique theme. Each mockup visually represents how players navigate and interact with the game, ensuring a seamless and engaging experience.
High-fidelity Prototype
Main Page, Shop and Settings Flow
Conclusion
The main page navigation and its key features were significantly improved for a seamless user experience. We implemented a carousel layout for hero selection, enabling easy management of heroes directly from the main page. Centralized functionalities, such as power-up management, hero stats, and progress tracking, provide quick and easy access. The shop page was redesigned for easy navigation through various categories, ensuring users can quickly locate and acquire items. By streamlining these features, we enhanced the overall user experience and gameplay fluidity.
Takeaways
The Cool Bricks project underscored the importance of a user-centric approach and the value of iterative design. By focusing on main page navigation and essential features, we significantly enhanced the overall user experience. The streamlined design for hero selection, power-up management, hero stats, and the shop page contributed to a seamless and enjoyable gameplay experience.
Next Steps
The next steps involve developing the Gameplay HUD, Victory, and Fail screens. These elements will be designed to maintain the cohesive visual style and intuitive user experience established in the current interface. Our goal is to continue refining the game, ensuring that every aspect contributes to a polished and engaging player experience.
LET'S CONNECT!
Thank you for your interest in my work! Should you have any inquiries or wish to share some thoughts, please don't hesitate to reach out.
