top of page
Sara Ryder
UX & Level Design
Game Specs
Constraints
Tech Debt: This was a smaller team, so we were constantly managing feature scope to ensure we could create a polished product
Time: 10-week project timeline
Small Team: There were no artists on our team, so we had to closely monitor asset cohesion throughout the development cycle
Goals
1. Establish a clear player progression through difficulty ramping
2. Deliver weekly prototypes for review to support an iterative process
3. Research and implement UI/UX best practices for mobile games
4. Keep players engaged throughout the match loop
4. Collaborate with the team to ensure a smooth transition from tech demos to a polished state
Research
The Hidden Treasures: Match-3 What works?
Clear color and shape delineation between match items
Busy border items lead to unclear eye tracking
Breaks information architecture best practices: less important items like the pause button are more centralized than crucial game information
UI elements overlap with gameplay space making it difficult for players to complete touchscreen actions
Township: Match-3
What works?
Large amount of empty space around the gameplay area leaves the player's eye focused on relevant data
Multiple forms of feedback on item state changes: particle emission, SFX, item shake, etc.
Follows proximity best practices: clusters objectives, gameplay, and powerups together
Utilizes animations to draw attention to scene changes on win/lose states
Game Feel
Because there's so much time between player input in a Match-3 game, one of our core goals was to make that "rest" time feel engaging and interactive. (Hover to play videos)
Feedback Items
There were multiple gameplay states that needed to be clearly communicated to the player by at least two forms of feedback:
- Item selected
- Objective updates
- Unsuccessful match
- Successful match
- Objective complete
- Turns remaining
Item Selected
Feedback #1: Selected tiles wiggle until they are moved or deselected
*This is a rare example where there is only one form of feedback. We found in playtesting that brightening the selected items or playing an SFX annoyed players and the movement alone was enough to communicate the changed state
Unsuccessful Matches
Feedback #1: Tiles wiggle and return to their original positions
Feedback #2: Error SFX plays to alert the player to failed state
Feedback #3: Absence of successful match feedback
Successful Matches
Feedback #1: Tiles shrink and then "pop" with accompanying SFX
Feedback #2: Matched tiles spawn short lived particles to draw attention
Feedback #3: Matched tiles disappear from play area
Turns
Feedback #1: Count updates
*Another example of only one form of feedback as the turn counter borrows from the objective feedback. The player's attention is already on the panel, so the clustering of the items helps the player keep track of turns as well.
Objectives
Objectives are crucial to communicate how close the player is to the round's end state. This feedback is essential to players and needs a lot of feedback attached.
Feedback #1: On match, particles representing the match items fly towards the objective panel to draw attention to the updates
Feedback #2: Accompanied by SFX, objective icons "pop" similar to the matched icons when they are hit by the particles
Feedback #3: Objective counters reflect the changes and give players specific counts
Feedback #4: When a single objective item is complete, the count is replaced by a star signifying that objective has been met
Creative Solutions for Unexpected Problems
We ran into a tech problem during our project where we struggled to get the top row of match items to adhere to the UI mask. Rather than put an unknown amount of development hours into this single problem, I came up with a creative solution to turn the drawback into a feedback opportunity!
Knowing the incoming tiles interferes with the intended gameplay, so I covered them with a progress bar that aids the player in tracking how close they are to finishing their objectives.
Progress Bar
Feedback #1: Progress bar fills with a bright and vibrant color as player progresses
Feedback #2: Slider provides a large anchor point for player to see progress at a glance
Feedback #3: Particles emitting from slider increase as player completes objectives, increasing excitement and tension the closer they are to winning!
Level Sequence
Another goal was to create a full gameplay demo with some kind of level progression. We chose to create a contained amount of levels to better display the loop without overscoping the project.
Before creating the progression in each level, we needed a level hub to help players navigate. Like gameplay states, this hub would have multiple flows that needed communicated to the player:
- Active Level
- Locked levels
- Completed Levels
Active Level vs. Locked Level
Feedback #1: Full color and outline
Feedback #2: Close to the center of the screen
Feedback #3: Moving particle behind the island to brighten focus and draw attention
Feedback #1: Greyed out
Feedback #2: Offset from center to draw focus to active level
Feedback #3: No moving parts to divert attention and convey "locked" state
Completing & Unlocking a Level
Feedback #1: Stars "burst" and SFX play
Feedback #2: Camera movement to draw attention and center new active level with unlock SFX
Feedback #3: "Passing" the background particle from completed to active level
Win & Lose
Similar to objective updates, win and lose screens need to effectively communicate with the player so they understand the change occurring onscreen. Feedback in these states are also meant to evoke emotion from the player as they celebrate their success or lament their loss and try again.
Win Screen
Feedback #1: Star bursts with SFX that establishes the "win" schema that is continued by the star bursts on the level select screen
Feedback #2: Text movement/background particles to encourage excitement
Feedback #3: "Success" music stinger to engage player in celebrating their win
The "level complete" screen stays on the same background as whichever level was just beaten to give the player a sense of place within the level progression.
Lose Screen
Feedback #1: Reveals number of tiles left to succeed, giving the player that "I'm so close to winning" feeling
Feedback #2: The text moves in a downward motion to convey the loss and "sinking" state
Feedback #3: Particles swirl around the objective tiles to draw the players attention to how many matches they had left
Like the win state, the lose screen stays on the level background. An added bonus of losing is getting to see the pretty backgrounds again!
Post Mortem
Extra Features
A trademark of many Match-3 games are interesting progression enhancers/inhibitors like:
- Powerups
- Tile mechanics like ice, trapped tiles, etc.
- Friction created by lives/energy
- Monetization features
Because of our small team and limited time, we weren't able to focus on more ancillary design items. However, if we revisit the project these are some spaces that can be a fun challenge for designers!
Level Growth
Similar to extra features, we kept our level design very simple and straightforward to allow time for polish. I would love to be able to engage in more level design with complicated grid shapes, objectives, and movement patterns in the future.
Publishing on the Play Store
We're currently looking into publishing on the Play Store, so that will be the most immediate next step for this project. We'll be revisiting some polish items before that time.
bottom of page