Monument Valley Puzzle Extension

Pavi Designs
NYC Design
Published in
5 min readMar 19, 2018

This article explains how I tackled the challenge of incorporating an effective onboarding experience in a consumer-to-consumer platform.

Problem at hand

Products that integrate consumer-to-consumer interaction enjoy a much higher user engagement, which is key in today’s competitive landscape.

Courtesy of UserOnboard

Aside from developing the consumer-to-consumer platform, a crucial task is to create an effective onboarding process to welcome new users and teach them the ropes.

The missing piece to the monument

In finding a product that could benefit from a consumer-to-consumer platform, I chose Monument Valley by ustwo games.

Monument Valley is an explorative puzzle-based game with exceptional visuals and music. This game was also famously recognized for incorporating impossibility into architecture.

Reading through the game reviews, many complained of the game’s length and wished there were more puzzles.

Here I thought was an opportunity for a consumer-to-consumer platform. Why not empower gamers with the tools to create puzzles and share it with the community?

It would be similar to the introduction of Workshop in late 2011 by Steam, an online video-game retail platform. Steam’s Workshop provided a platform for the community to upload and share user-created mods.

This eventually led me to the idea of a puzzle extension for Monument Valley, the missing piece to a great game.

Guiding would-be puzzle makers

A website I frequently read called UserOnBoard proved to be immensely useful in exploring the various onboarding techniques.

A common onboarding trend is a slideshow when the app is opened for the first time, followed by an immediate request to sign-up, before the user is given an opportunity to explore the app’s functionality.

Invision’s onboarding slideshow presented before sign up

As I investigated further, I came across Evernote’s exploration feature, which stood out to me. A checklist was incorporated to guide the user and make them feel more familiar using the app. I decided to include a checklist into the onboarding experience.

Evernote’s onboarding checklist from UserOnboard

User flow and Feedback

Prototyping the perfect onboarding experience right from the get-go is hard. I initially incorporated a slideshow to describe the app’s functionality, followed by a sign-up request.

Initial user flow

After running a couple of user tests with the paper prototypes, I realized, that users were barely reading through the slideshow and weren’t ready to sign up without first exploring the app. I had to go back and refer to the UserOnboard teardowns and see how the steps can be improved.

Initial paper prototypes

Users have limited patience, and anything that gets in their way produces a negative experience, and our goal is to minimize those negative experiences.

With that in mind, I decided to hold off on requesting users to sign-up and let them use the app first. The entire point of the onboarding was to not force the user to sign up immediately but to experience the whole app before deciding to sign up.

Why?

If you walked into a grocery store, would you buy the produce before seeing it? It’s a common habit for consumers to carefully inspect the produce before purchasing it. A similar concept was followed for my user onboarding process.

I decided not to use a slideshow for the onboarding, which may seem out of the ordinary based on how most apps include this feature. Users want to get to the important part and that is using the app. The slideshow blocks the user from getting there.

I used a progressive step-by-step approach that doesn’t force the user into the next step but acts as a guide. There’s a sense of discoverability. In addition, I used a point system and gamified the experience.

I used the character Ida from Monument Valley to guide the user through the features.

Image of Ida from Monument Valley

Prototype

The prototype was built off the feedback received from the paper prototypes and user testing. I chose to create all icons and visuals from scratch to make it original, however I didn’t stray far from Monument Valley’s authenticity.

I used gesture interactions similar to how games onboard users to make the experience fun.

Hi-fi wireframes

Click here for the interactive prototype.

Reflection

Users don’t pay much attention to user onboarding, however they are unknowingly sensitive to it. A lot of assumptions are made about how a user interacts with an app. However, user testing must be done to see the real intimate reactions. Onboarding is important to engage users and create an unforgettable first experience.

Creating this onboarding experience taught me to be more sensitive to the small interactions and hints in applications. Ultimately helping me empathize and understand from a user’s point of view.

As Jane Portman says:

Any user onboarding is all about psychology: the early feeling of success and accomplishment will make the user come back.

Please feel free to get in touch if you have any questions or would like to chat about design!

Resources

1. UserOnboard

2. Monument Valley

3. User onboarding essentials

--

--

Pavi Designs
NYC Design

Toronto-based designer specializing in user experience and visual design. https://pavi.design/