mosaic.png
Plixl: Mosaic Medley
Nostalgic hidden object game featuring mosaics full of delightful things
Responsibilities
UI/UX Design
Game Design
Art Direction
Cofounder
Background
After spending 4 years in the gaming industry, my engineering partner and I decided to strike it out on our own and bootstrap an independent gaming studio.
Logo.png
Publishing one game mechanic twice

Mosaic Medley is a unique free-to-play hidden object game that I created as Cofounder of Plixl, an independent games studio. Published by 6waves, players can choose to play on iPad, Facebook web or both. Shortly after launch, childrens game publisher, TabTale, licensed the game mechanic for preschoolers. The preschool game was titled Seek & Find and was available on iPhone and iPad.

AppIcon.png
512x512bb.jpg
 
Curious, meticulous and delightfully nostalgic; seek and find THOUSANDS of exquisite items in a medley of mosaics! 

Apple App Store description

Project Challenge:

Launch a marketable game on a shoestring budget with a team of 2 

Founding an indie game studio
I had my first exposure to video game design when I sold a Tetris concept to Mattel in my role as a Toy Inventor at IDEO. Tetris 360 was a handheld toy, but I was intrigued by the magic of the rapid iteration that's possible in software vs. toys.

After IDEO, I joined Namco and then a tiny startup called TinyCo. Fast forward 4 years, I was excited about starting my own tiny company. My engineering partner and I founded Plixl, an independent gaming studio.
Screen Shot 2021-08-12 at 11.01.05 PM.png

Defining the game mechanic

Finding our direction
Hidden object games were an evergreen game category on PC and had just started to appear on mobile. Mobile gamers were hungry for hidden object content. From an engineering standpoint, hidden object games were very simple to develop. However, hidden object games typically required detailed illustrations that were costly. Instead, we discovered we could use inexpensive stock photography. The next question was, can we make a bunch of random objects just as engaging?
atlas2_2x.png
Putting the pieces together
We found that meticulously arranging the objects into themed 'mosaics' was pleasing. It's like Where's Waldo but for adults too. The mosaics contain 50-300 objects organized into silhouettes. The player's goal is to pan and zoom through the mosaic to hunt for a list of objects.
Starfish2.gif
In the Beach Bounty level, a starfish transforms into a mosaic of beach objects. 
SweetsUpdated2075Final.png
ipadframe.png
The Sweet Escape level is by far the tastiest. Can you find the chocolate covered banana?
Keeping players engaged longterm
Game progression is based on a simple mastery mechanic. While playing a level, the player earns experience points that are accumulated towards mastery of that level. As the player achieves more mastery points, they unlock more levels in the game. In addition, once the levels are unlocked, the player needs coins to purchase them. How do they do that? Play more levels. This is one of the ways that the game creates an extrinsic motivation for repeat play, thereby extending the life of the content.
image-asset.png
Mosaic Medley features a simple game loop.
Mapping the game flow
Once we determined the features for launch, I developed this sitemap. My partner was able to use this to begin to develop the game and I moved on to wireframing.
Screen+Shot+2014-07-03+at+5.52.34+PM.png
Mosaic Medley's sitemap includes the complete features of the game.

Designing the User Interface

Designing the main menu

The first UI challenge I tackled was creating the main menu. This is the screen where the player selects the level they would like to play.

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

Researching competitors

I researched how the popular hidden object and puzzle games handled their level selection experience and categorized them into three different buckets:

Carousel
image-asset-1.jpg
Static Grid
image-asset.jpg
Isometric Map
image.jpg
Wireframing

I liked the feel of the isometric map, however building this type of map system was not reasonable to develop under our engineering constraints. The static grid did not make the individual levels feel special since they were so small - nor did I experience a sense of progression. I liked the carousel option, and to make each level feel more valuable, I designed the carousel with one row instead of 2.

Screen+Shot+2014-07-07+at+9.19.03+PM.png
Designing the look and feel

The typical hidden object game had sophisticated styling and I started experimenting with an antique look. Each level was depicted as an oil painting that was mounted on a wall. I also decided to move the energy module to the center of the HUD since it was the most important element for starting a level.

image-asset-2.jpg
29.jpg
Keeping the art style consistent

In parallel to developing the UI, I directed a contractor to paint the backgrounds of the game levels. As these took shape, the art styles between the UI and the backgrounds were not consistent. The whimsical backgrounds were the right match for the quirky theming of the game.

The Fish Frenzy level's background is the most vibrant.
Iterating on the UI

In my next mockup, I reduced the complexity of the UI elements and added a name module to the HUD to add symmetry. I was happy with the layout adjustments but the simplifications of the art style were not enough. It was time to break away from the antique style altogether. 

image-asset-1.jpg
Iterating on the UI, again

After researching games outside of the hidden object category, I chose a new color scheme and a corduroy look for the background. I felt the new look added a whimsical feel, just like the core game mechanic.

image-asset-2.jpg
22.jpg

"I really like challenging myself with the names of the flowers in the flower mosaic... I want to play over and over again until I get them all right!" 

Jenny, Usability Research Participant

The Fabulous Flowers level challenges players to identify flowers by name.
Conducting usability studies

Once I had a playable level, I performed usability studies to uncover insights. This was very important - I had originally used a star icon to indicate mastery progression. However, users confused our mastery star with games like Angry Birds or Candy Crush who use stars as a performance rating instead. Therefore, users wrongly assumed they had performed poorly since they'd only have 1 star on their first play. To solve this problem, I chose a medallion icon and added a percentage value.

Mastery Stars
Screen+Shot+2014-07-07+at+11.46.12+PM-1.png
Mastery Medallions
Screen+Shot+2014-07-07+at+11.46.12+PM-1.2png.png
Elements of the game menu

To complete the main menu mockup, I tweaked a few of the components and added the remaining UI elements.

image-asset.jpg

Polishing the game

Applying motion to the UI
Once we had the UI implemented, I was able to start working on the motions, sounds and music. Since the game was built in Actionscript, I created all the animations in flash.
Navigating from game launch to starting the Beach Bounty level.
Animating character art
I purchased the character vector art on a stock asset site, modified them in illustrator and applied keyframe animations in flash. 
ezgif-7-d26fa4abb9a0.gif
ezgif-7-a3ff7a048a90.gif
Tom
Carter
ezgif-7-d471dc5d2ae5.gif
Penny
Character teaser to explore the cast of characters.
Engaging storyline and goals

Implementing a goal and dialog system is an excellent way to extend the life of the content and create reasons for the players to come back. Beyond achieving the business goals, adding this system was a great way to incorporate a human touch to the game - just as if the user is playing with a bunch of their friends.

photo+4+(2).png
KitchenSink-Final-1650.png
The Kitchen Sink level is the most epic level. It has everything! Can you find the statue of liberty?
ipadframe.png

Launching the game

Promoting the game
Once the game was at a complete state, we launched with a variety of marketing assets including the video below.
The gameplay teaser highlights the hunt and seek mechanic.
Iterating with quantitative data

I chose Mixpanel as our analytics provider - their funnel feature was 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 menu. 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.

image-asset.jpg
image-asset-1.jpg
Porting to Facebook

One of the reasons why we built the game in flash was so we could easily port to Facebook. As a bonus, players were able to switch between their iPad and their computer without losing any progress.

Laptop.png
kids.png
ipadframe.png
Seek and find features fewer objects to make it suitable for the little ones. Can you find the little piggy?
Kidifying Mosaic Medley

Mosaic Medley was published with social games' publisher, 6waves. Soon after we launched, we worked with TabTable who asked us to develop a version for preschoolers.

 

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 including the US.

screen480x480-6-1.jpg
screen480x480-9.jpg
screen480x480-10.jpg
screen480x480-8.jpg
screen480x480-7.jpg