initial research

Charm King is an older title and has had a fairly dedicated player base for many years, even through a lack of substantial feature updates. These players were shown to also play other match-3 games that had storylines, such as Gardenscapes and Homescapes. Here are some of the player and product pain points the design team and I discussed before moving onto making initial wireframes:

initial UX Wireframes

One of the first things we wanted to tackle was figuring out how to represent Tasks to a player. Two different options seemed viable:

1. Showing all tasks immediately

2. Nesting tasks in a popup

For option 1, the advantage was that the player would immediately be able to see what they needed to do and how much that item costed in order to progress the story. The downside was that the system wasn’t very scalable and started to feel convoluted if there were more than 4 items per story beat. Option 2 was a lot more scalable, but obscured immediate goals from the player under a tap. Here’s what those 2 options looked like in wireframe form:

Ultimately, we ended up choosing option 1 and restricted the design to 4 elements maximum per story beat. This also better suited our very casual audience who have a limited tolerance for overly-complex systems.

Next we wanted to figure out the layout for story beats a player had just unlocked. Generally we wanted to have each story beat keep the same character position and sizing as they were shown on the Task selection screen. This meant that character dialogue needed to feel the same amount of space that the Task UI in the previous wireframes did. Shown below was the solution the team landed on:

Ultimately we ended up cutting the “Play next chapter” screen and opted instead of auto-loading the next chapter with an introduction beat and the next set of Task UI. The next chapter screen was only meant to allow players to replay the current chapter or go back to the chapter selection UI, which we had cut due to added feature complexity.

Once we had solidified the early wireframes for when a player was inside a Tale, we needed UX for how a player would select a Tale and a chapter to view. Some of the features we wanted to include here were:

• Ability to choose which Tale to apply in-game currency to progress

• Rewatching already-completed chapters at any time

• Show which chapter had enough in-game currency saved to progress within

Some of the wireframe versions for this screen are shown below:

Ultimately, we scrapped the concept of replayability and chapter selection once a player had an active Tale because they were adding too much complexity. We concluded that the sheer number of taps it would take a player to get from point A (entering Tales) to point B (using currency to progress the story) was far too many and would grow tiresome, especially for a feature that was meant to be a primary driver for spending hard currency to pass levels.

After removing the idea of chapter replayability, the Tales lobby screen wireframe needed to be greatly simplified. Basically we only needed to show the Tales lobby when a player hadn’t started a Tale or had just finished a Tale. Concept-wise, the team landed on making the Tales selection screen feel like a bookshelf, which is shown in wireframe form below:

This layout also lent itself well to adding a new bottom navigation bar, which was a feature we were developing simultaneously with Tales. I’ll go more into the navigation bar UX and UI development outside of this feature’s section, but now onto how these wireframes translated into UI.

tales UI Mockups

Shown below is a more final wireframe for the Tales UI, minus the bottom navigation bar UI. I ended up adding a way for the player to go back to the Tales selection bookshelf during the UI phase and shortened the current Tale progression bar to fir that in. It wasn’t meant to be a primary function on this screen, so it being small and placed in the upper left corner was fine for its purpose. The primary focus on this screen was meant to be on the characters and the Tasks left for this chapter. Players with an active Tale would land directly on this screen when selecting Tales in the navigation bar:

Shown below is how the whole Task sequence played out animation-wise in Unity:

Shown here is how the Tales selection bookshelf ended up looking in UI. The bookshelf had to be painted and structured in a way so that we could easily add extra shelves as more Tales were added. The bookshelf also needed to have a more neutral color than most other items in Charm King so that the Tales books would be able to more readily stand out.

I wanted to keep the Book theme consistent across the Tale selection UI, so I made the Tale selection confirmation popup into an open book that appears from the left side of the screen when the player taps on a Tale:

For dialogue boxes, I wanted to have narrator beats use a similar book page theme that I had for the Tale selection confirmation popup since the narrator was technically “reading” the Tale to the player. Character dialogue used a more transparent, simpler box, as shown below:

feature results

Charm King Tales ended up being quite loved among our audience, with many reviews showing how much players enjoyed seeing the storylines progress.

KPI boosts

• Player retention

• ARPDAU

• Number of level attempts per session

initial research

For a long time, Charm King had not added any new features and was relying solely on a dedicated player base who enjoyed playing 20 new levels every 2 weeks. As we were adding features, like Tales, and more limited-time events, it became clear that the old UI layout was quickly becoming far too cluttered and was not scalable. Some of the pain points we gathered from players and from our team were as follows:

navigations screens UX

Charm King’s old UI setup didn’t allow for much event flexibility, completely hid social connections once the player connected to Facebook, and only allowed Gold to be sold in the Shop due to the location of the plus button on the player’s Gold counter. My UX rework was intended to help solve all those problems by adding greater navigational flexibility. Shown below is a comparison between the map UI layout when I first started and what I proposed as the new UI layout:

After figuring out what the main lobby UX layout was going to look like, I needed to figure out how to move screens that were previously only accessible via small buttons and popups into full-screen layouts. Tales was already covered in a previous section and the Map tab is shown above. The Social and Shop UX mockups are shown below:

navigations screens Ui

Charm King already had a very established UI set, so I wanted to adhere to those guidelines when translating these screens from UX to UI. The intent was also to reuse as many existing elements as possible to reduce the amount of development time for this feature. Here’s how the UI looked rendered with a video of how I animated and implemented the bottom navigation bar in Unity:

SUNSHINE STREAK ANIMATIONS

Sunshine Streak was an event meant to encourage players to pass levels on their first try in order to keep special bonuses. Wins and losses were shown by a laughing or crying sun on the level start popup. Here are some animation mocks I made in Unity for that event:

loading screen ANIMATION

As part of our UI rework, Charm King needed a new loading screen. This mock was made in Unity: