Case Study: Call-to-Action Tutorial System in Cosmic Shore

At Froglet Games, I created a bespoke Call-to-Action tutorial system. It uses regular rewards, contextual presentation, and minimal text to guide players through hidden tutorials of nearly every mechanic the game has to offer. 

Project Requirements and Context

I tasked myself with building tutorials for our game, Cosmic Shore. After discussions with our CEO and gameplay designers, I concluded that the tutorials had to be easily localized, not easily noticed, and be experiences that most players had to finish without them feeling forced to do them. 

I developed the following criteria for the tutorial system:

  • Have minimal text for easier translation
  • Be easy to complete
  • Not apply pressure to players to complete them 
  • Have scalable processes and products 
  • Have adjustable learning paths in case the UI changes
  • Apply only relevant tutorials to specific learners 

Instead of text, scenario, in-universe, or codex-based tutorials, I created my unique Call-to-Action tutorial system.

Read more about the key metrics of success ->

Quantitative: 

  • Number of tutorials completed within 1 hour of gameplay
  • Do players continue doing more tutorials after the first 2 required ones are done

Qualitative:

  • How much in-game time and how many logins are logged before a learning plan is complete
  • When we have the knowledge base completed with written versions of these tutorials, how many full views do we have compared to the number of completed learning paths covering the same topic?

Implementation

I worked with our gameplay developer and backend engineer to plan, prepare, and draft the system in Unity. Upon testing the usability of the tutorial, I confirmed it worked as intended. It could be applied to any user interface icon or action in response to player input and scaled rewards appropriately to fit within the in-game economy.

I then built the tentative wireframe for the Call-to-Action system based on the learning experiences I wanted most players to have. This wireframe has undergone enormous iteration. It started as 3 rows, once grew to 12, and currently sits at 8 learning paths. 

To build players' familiarity with the Call-to-Action triggers, I frequently used any mix of green, gradients, pulsing animations, and creased corners.

Challenges, Findings, and Outcomes

Looking back, I am very happy I chose this approach to tutorials in Cosmic Shore. The core learning plans work as intended and have room to grow after introducing more complex features post-launch. 

I am proud that they are accessible, scalable, and recognizable. It is a lot of work to wire up the learning plan in the application instead of just having a textual pop-up tutorial trigger once per player. But, from a user experience, language (or lack thereof), and effort perspective, I feel that the Call-to-Action system is a very compelling tutorial system.

Read more about my usability testing of the Call-to-Action system ->

  • People really enjoy receiving rewards for doing things. Even if it is very small, so long as it is tangible and immediately usable in-game, they can accept relatively large inconveniences in their chase of those rewards.
  • If the UI undergoes significant change, the system has to be updated and maintained. If a link in the chain is broken, it can ruin the triggers for the remaining learning paths, which is a major problem. I can partially work through this with my system that counts game log-ins and advances certain tutorials automatically based on how many times people logged in or did a certain action, essentially skipping certain tutorials. 
  • Establishing strong, unique, and clear iconography and all its possible variants is critical for the system to work. I believe certain animation styles that look unique to other menu animations and styles help players understand where to click next.

While not fully implemented, I know enough about planning, building, and updating the Call-to-Action to draw educated conclusions about the system. Building a matrix in Unity that updates and flags broken links when UI updates are made will be the next most important step beside building the system in the first place.

Our user interface has been undergoing a complete overhaul for a number of months, so I am waiting until that is complete to implement new learning paths.