Moji Match is a turn-based game word game that doesn't use any letters. Connect patterns of emojis on a game board. Take turns and challenge your friends and family. Emojis take on a life of their own, keeping you entertained with explosions, groan-inducing puns and charming sound effects. The game is currently available for dowload on the Apple App Store.
This project has a large team fullfilling many different roles throughout the Hudson Valley. I worked with the developer, and the people that designed other aspects of the project to create and form ideas for the user's experience when playing the game. The branding/identity and website were done by a design firm based in Poughkeepsie, NY called Digital Empire in fall of 2015. The game was created, built, and currently maintained by Chris Garrett, the owner of zWorkbench, Inc.
I joined the project full time for seven weeks in the winter of 2015-2016. I started out making and exporting assests like buttons and background patterns for the interface depicted in the mockups, and then moved onto more involved design tasks. I designed and an consulted on various aspects of the game interface, and helped to come up with good ideas to make it as engaging as possible.
The screenshots you see in this case study may not completely reflect what the app looks like today, as after I stopped working on it other features and functionality were added.
What I Did
Popovers and Action Sheets
One of my first tasks was to design concepts for the popover and action sheets used in the game. I followed the Apple iOS Human Interface Guidelines and came up wiith ideas on how we could apply the Moji Match branding to these interactive elements. I wanted to try to utilize the pattern we had that used a similified version of the logo to unite the popovers with the rest of the interface. I also tried some other patterns, including polka dots and and gradients. while I was making these, I got feedback from the app developer on what he liked and didint like. I made changes from that feedback. Initally, I worked a lot with the light blue, but we decided it was blending inwith the board to much, which led to my grey concepts using red/purple accents.
When a user starts a game with a friend in Moji Match, they get to play the first move, then wait for their opponent to respond. In the inital stages of the beta, we found that the person who started the game got a very competitive edge because the tile they had to start on was a letter or word multiplier to allure the user to play a word onto it. We decided we needed a way to signify that the user should place their first word ont the center tile, without giving them extra points just for playing the first move. I though about what this tile should look like, and how it should look to align with the rest of the illustration style and use of color throughout the rest of the app.
The creator of the game wanted to implement a rewards system where users can win "presents" at the end of a game. The presents contain a randomly selected emoji which the user can add to their "collection," which allows them to use the emoji in their avatar image. You can get more presents if win, an equal amount if you tie, and one if you lose. This system was eventually steamlined after I designed the visuals for my ideas. In the examples I inlcuded below show it with the winner getting three presents, tie resulting in two, and loser getting one. I thought a lot about how I could express the emotions associated with these outcomes through use of color. I also tried out in some examples manipulating the colors the players' names and avatars were shown in depending on how they did in the game.
Find and Add Friends
This portion of the interface was much more onvolved process-wise. In the previous elements outlined, I had other elements to base them off of. For this portion, I was taking the ideas of what should be there, and was coming up with ideas of what it should look like. Then, I'd take feedback, make changes, and kep doing so until we had it the way we wanted. This section of the app is intended for a playr to find their friends via their social media network, and get them to play them. They can earn more presents if they start a game with someone who they haven't played against before.
User Onboarding Process
Im order to be able to play Moji Match, the user needs to understand how they can score points against their opponent. The game developer and I did a lot of brainstorming about how we could introduce the rules and methods of scoring without boring the user, and getting them actually playing their friends as quickly as possible.
We decided that the best way to go about it was to make mini games against bots. Each mini game would introduce a way to score. I designed the interstials that showed the player how far through the onboarding process they were, and gave them the option to quit if they felt they were ready.
User Profile & Stats
I also drafted concepts for how the user could monitor their activity and see how they were doing in the game. I designed possible layouts for the player profile, where they can edit their avatar and change their username. The Stats Tab is meant for the user to track their progress, and see what they should do if they wish to advance in rank.
The game needed a way to visually differentiate which word was just played by the opponent, where the user’s in progress word is, and if it is valid to earn points. I created a color system that could indicate if a word is playable.
The way the emoji tiles were initally designed (see above image) had left them difficult to read on devices with small screens, especially for our user testers with lower vision. I came up with lots of ideas on how to optimize use of space on a small screen and make the emoji and number visible to the player.