Description
The player is put into the shoes of a candy shop owner and must fill out orders from customers, creating mixed bags of candies. The candy selection acts as a piano, playing a note every time one is clicked, so filling out orders creates a fun little tune. This, mixed with the colors and idle elements of the game, aims to create a unique and immersive blend of addicting and creative gameplay.
Click & Mix is playable HERE.
Role & Context
- Solo Project
- Period: Third University Year (2024)
- UI Design module
(Click Images to Expand)
UI/UX Process
Brief Review
This project had no specific brief other than showcasing my UI design skills, so I created an Idle, Clicker game for a demographic new to gaming. I started by creating a mind map to explore the potential UI elements for the project.
After mind mapping, there were three aspects I needed to focus on while designing the UI:
Beginner Difficulty
- Easy Navigation (Helps players quickly understand the game)
- Low-Stress Gameplay Indicators (Keeps gameplay enjoyable and not overwhelming)
- Simplicity (Reduces distractions and cognitive load)
- Accessibility (Ensures everyone can enjoy the game, regardless of abilities)
Clicker Gameplay
- Sound & Haptic Feedback (Makes clicking feel satisfying)
- Progress Indicators (Motivates players by showing achievements)
- Touchscreen Controls (Ensures smooth and intuitive interaction)
Idle Genre
- Information Clarity (Keeps players aware of progress and goals)
- Satisfying and Positive Feedback (Rewards actions to maintain engagement)
(Click Image to Expand)
Mind Map
Requirement Analysis
After brainstorming ideas, I proceeded with planning the project’s requirements. As with my previous projects, this involved creating a flow diagram and a feature list.
(Click Image to Expand)
Flow Diagram
Feature List
Market/User Research
After the requirement analysis, I conducted market and user research—my first time doing so before designing a UI. I believe this research greatly improved the final product. Below are the resources I used, along with a summary of the key principles I discovered.
Idle & Clicker Genre Sources
Beginner-Friendly Game Sources
Mobile Game Sources
Idle & Clicker Genre
- Simplicity and Accessibility: Create an intuitive UI with clear navigation and minimal learning curve, since “little to no learning curve” is essential for idle games. Use large icons, simple menus, and visual cues like highlights to guide players effortlessly
- Relaxation and Aesthetic Appeal: Use pleasing colours, soft tones, and smooth transitions to provide a calming experience, as “navigation must be easy to understand, and colors need to be pleasing“. Subtle sound effects and uncluttered layouts further enhance relaxation
- Gameplay Focus: Highlight key gameplay elements like resources and upgrades while avoiding distractions from “complex and overflowing menus.” Use clean layouts and thoughtful design to keep the focus on core interactions
- Short-Session Friendly: Keep mechanics simple and introduce features gradually to match the “relaxation and respite” players seek in short sessions. Use bite-sized tutorials and rewarding visual feedback to maintain engagement
- Polished Presentation: A clean, engaging UI is vital to stand out in a competitive genre where “well-made UI and UX are in the top-3 things to pay attention to.” Even minimalist graphics can enhance the experience when thoughtfully executed
Beginner-Friendly Games
- Clarity, Consistency, and Familiarity: Use simple language, consistent icons, and design elements to create a clear, familiar UI. “Make sure that our choice of icons and colors is consistent“
- Effective Visual Design and Readability: Design visuals that capture attention and guide players, ensuring “visuals for any graphical user interface design are an important key point.” Choose clean, readable fonts to enhance accessibility
- Anticipating and Preventing Mistakes: Create intuitive flows and anticipate user mistakes, as “anticipating mistakes is often less frustrating than trying to fix them after.” Provide helpful prompts and feedback to guide players
- Empowering Players and Giving Control: Make players “feel empowered” by designing a UI that gives them control, with clear, intuitive buttons and options that enhance engagement
- Responsive and Seamless Interaction: Ensure “responsive controls keep players engaged without frustration” by making UI elements intuitive and immediately responsive for smooth interaction
- Accessibility and Continuous Feedback: Follow the POUR principles: “Perceivable, Operable, Understandable, and Robust” to ensure the game is accessible. This includes clear visual cues, operable elements that respond to user inputs, content that is easy to read, and designs that work across devices and browsers
Mobile Games
- Clear and Non-Distracting HUD Design: The HUD must show important information while “not being distracting” allowing players to focus on the gameplay without unnecessary clutter
- Adapting to Mobile Limitations: Mobile devices with notches and other features limit screen space, so design the UI to adapt to these constraints without sacrificing clarity or functionality
- Understanding Player Behavior and Needs: Designers should understand player behaviour to guide actions and decisions, more specifically, Interaction Experience Designers. “IXD designers should study how a user interacts with games” to ensure the UI aligns with player actions and expectations, as well as create a seamless and enjoyable experience
- Tailoring Design to Player Demographics: Players’ needs differ by genre, so “the audience of each genre has a different personality.” Adapting the UI to suit the target audience’s preferences enhances engagement
- Gender-Specific Art and Design Styles: The art style should be tailored to attract different demographics. “The art style of a game designed to attract women is very different from a game designed for men“
Mood Boarding
After completing the market and user research, I created two mood boards for the project. I focused on these two mood boards because only a few UIs needed to be designed.
(Click Image to Expand)
Gameplay HUD
(Click Image to Expand)
Settings Menu
Sketching
Once the wireframes were complete, I developed an interactive prototype in Figma. This prototype featured the finalized UI designs, incorporating AI-generated elements and fully functional and navigable UI components.
(Click Image to Expand)
Clicker Gameplay HUD
(Click Image to Expand)
Idle Gameplay HUD
(Click Image to Expand)
Settings Menu
Prototype
After completing the research and wireframing, I began working on the Figma prototype. This included the finalized UI art and early screenshots of the project.
Final Result
I’m quite satisfied with the final UI of Click & Mix. It captures the mobile game art style I was aiming for and feels user-friendly and straightforward. Of course, there’s always room for improvement, and I look forward to making enhancements as I continue working on the project.
Achievements
- Accurate Mobile Art Style
- Consistent Styling & Principles
- New, Thorough, Design Process
- Use of Diagetic Elements
Shortcomings
- Design Process Order (Swap order of research & mind mapping)
- Accessibility Issues (Mainly colour contrast related)
- Settings Menu (Could have been a popup menu)