“…For such a happy cute game it sure is dark.”
Mystic Messenger is a Korean simulator game on your phone. The player interacts with several AI characters through Real time chat rooms, phone calls and emails. The more you talk with you friends, the more you get to know them (and possibly romance them).
Original players of Mystic Messenger were interviewed to create this experience. Two thirds of the interviewees were female and one third was male. (Mystic Messenger is heavily geared towards young women)
Game UI Design
From the user interviews of the various players and UX research of Mystic Messenger as well as other otome games, I’ve created several drafts and prototypes for a more seamless and fluid navigation. I’ve also improved the look and feel to match the magical experience of the game.
“…It’s really easy to get confused on where to go. Like super easy, because there are so many options and the colors don’t match up with the character colors.“
–Anthony Castillo, Veteran player
After interviewing a select few players of this game, many mentioned that the styling and use of the UI did not match the experience. The color palatte was extremely dark and macabre and many screens were crowded to the brim with too many objects. With this research, I revamped the app to create a more friendly UI that reflects the whimsicality of the app itself.
The current UI looks very technical and digital (I’m assuming the creators desired to make the UI look as close to a real life phone as possible and thus went the super digital route). However Mystic Messenger is supposedly lavish and regal. If this is supposed to be a secretive and luxurious chat app, it would help pull the user into this fantasy world by reflecting lavishness rather than digital code into the style elements.
The project of Mystic Messenger Redial began with some quick sketch wireframes. I aimed to give the elements more space in between and removed unwarranted elements from the already crowded screen. I also added more space for character profiles. Most players really want to see beautiful character illustrations so I really wanted to put those front and center.
Later, those wireframe sketches were put into quick prototypes. I worked on the actual chat systems first. Each chat is color coded by time of day. (Ex: Morning is light and yellow, night time is vibrant and purple). This helps the player distinguish times in the game so they make proper choices later in the game and don’t get confused with dialogue. Character chat bubbles are also color coded depending on their own character color. Helping the player quickly view chats and scroll through to see the character they most want to talk to.