Mosaic Medley is a delightful free-to-play hidden object game that I created as Cofounder of Plixl - my own independent games studio. The team consisted of myself, my cofounder who handled the engineering and a contractor who created the digital paintings used in the level backgrounds.
For the core gameplay, Mosaic Medley utilizes a unique search screen mechanic - mosaics are constructed of 50-300 common-themed searchable objects in a fun silhouette. For example, in the Beach Bounty mosaic level to the right, a starfish transforms into 90+ beach-themed objects. It's up to the player to pan and zoom through the objects to find the randomly selected items to complete the round. Level objects are high-quality photographic images sourced from stock photography websites.
Gameplay progression is directed by a simple mastery system - based on the player's performance during each round, a variable amount of experience points are accumulated towards mastery of that level. As players achieve more mastery, they unlock further levels in the game. This creates an extrinsic motivation for repeat play, thereby extending the life of the content.
User Interface Development Process
The UI development process was very fluid. I started with wireframing in Google Docs and quickly moved to Photoshop for higher fidelity mockups. Final assets were created in Photoshop and later imported into Flash.
The first challenge I tackled was creating a system for displaying the different search screens to the user. My constraints:
- The game will launch with 12-15 levels
- The game needs to support content updates and should be easily expandable
- A core monetization method will be selling premium levels so each level should feel valuable
- Details like mastery, play mode and energy cost should be easy to access
- There should be an obvious linear progression but players can choose any level to play
- It needs to have a reasonable scope for 1 engineer to build
I researched how popular hidden object and puzzle games handled their level selection. I was able to categorize them into three different buckets:
I loved the feel of the isometric map, however building this type of map system was not reasonable to build from an engineering standpoint. I gravitated towards the scrollable grid option - the static grid did not make the individual levels feel special since they were so small. I also did not experience a sense of progression with the static grid.
Since I was planning to launch was as few as 12 levels, I decided to modify the grid to just one row instead of two. I felt this would make the experience simpler and also allow me to highlight each individual level making them feel more valuable. I wanted the scrolling to be intuitive without the need for on-screen arrows so I positioned a portion of the side levels off-screen.
At this point I was ready to start thinking about the art style. Building off the sophisticated styling of the hidden object games from my initial research, and based on my desire to make each level feel special, I started experimenting with a victorian-museum style. Each level became a painting that was literally hung on a wall. To create the mockup below, I used a combination of stock UI assets and my own art. Adding the push button below the paintings made it feel magical. During this step I decided the energy module needed to be centered to be in-line with the active level since it was the most important element. This created a problem however, I only had 4 elements that needed to go in the top UI leaving an odd empty space. I attempted to fill this space with gold design elements as you can see below.
At this point I took a step back and thought about the layout and styling. I was happy with the feel of the scrollable level images - each level looked special adding perceived value to the content. I wasn't happy with the space in between the star module and energy module. I realized this would be a great place to add the user's name, solving the space issue and also giving the player a sense of ownership. Lastly, I thought about the art style - compared to the level content I had been designing, the art style was too fancy. The art style between the UI and the core mechanic had become too disconnected.
In my next mockup, I reduced the complexity of the UI elements and added in the username module. I flattened the background and chose simple picture frames for the levels.
I was now happy with the layout of the top UI elements, but the adjustments I made to the art style were not sufficient to reduce the sophistication of the art style. It was time to break away from the golden style completely.
After researching games with more simplistic art styles, I chose a new color scheme and a corduroy look for the background. I felt the new look added a slightly whimsical yet down-to-earth feel, just like the core game mechanic.
With this new change, I decided to remove the central launch button and add a play button to each level module. While not as 'magical,' adding the play button was much more intuitive. This also created room to display more information on the level modules like mastery and energy requirements. Before I finalized the main menu design, I dove into the game flow.
Originally, I wanted the player to simply have to tap the play button to launch the active play screen. However, I realized this would pose a problem - players would accidentally tap the play button while scrolling through the levels creating a poor experience. I decided it was necessary to add an intermediate context screen to the game flow. I also wanted to give the user the ability to change the play mode, but hid this behind an extra step since it's not normally used.
From here I was able to create the hierarchy diagram and build out the remaining elements of the game.
Feedback from Play Testing
With a solid build, I ran usability tests with users who had never seen the game before. I had originally used a 'star' icon to denote mastery progression. However, users confused the mastery star functionality with the star functionality of games like Angry Birds or Candy Crush - these games used stars to denote performance and not progression. This meant users wrongly assumed they had performed poorly since they'd only earn 1 star on their first play. To solve this problem, I created a unique medallion icon to replace the star and reduce the connection with the other games. I also improved the messaging around the function by removing the mastery module at the end-of-level rewards sequence and using the word "Progress" instead of a meter. See the side-by-side comparison below:
I prioritized the implementation of a goal and dialog system since I felt it vital to have a clear series of challenges to engage the player throughout their lifecycle. This system would also function as the tutorial. Beyond achieving my initial goals, adding this system was a great way to add a human touch to the game - just as if the user is playing with a bunch of friends.
I chose Mixpanel as our analytics provider - their funnel feature has been one of the most valuable tools to discover opportunities for improvement. Once launched, I discovered an issue with the new user funnel - a large portion of users were playing the first level over and over again instead of following the tutorial and getting directed to the newer levels.
Originally, there were two buttons on the goal dialogs - one next to the task description directing them to the corresponding action and one at the bottom of the goal context screen that simply closed the context. To improve this flow, I removed the button at the bottom of the context and replaced it with the “Go” button. My hypothesis was validated by the new data:
The kidified version, Seek & Find, leverages our original game IP and is targeted towards kids ages 3-6. Shortly after it was launched, it reached #1 top free kids and education app in the iTunes charts in dozens of countries!