What's this about?

CityRiddler used playful riddle-solving for city exploration and needed to expand it into employee onboarding. I redesigned the product from the ground up to support these two vastly different use cases:

  • I defined game mechanics and an in-game economy to drive exploration and retention
  • I provided an implementation ready design, covering everything from onboarding to ads
  • I built a flexible design system that scaled without my involvement

Challenges

I want you to stay

Most customers used the app for a single city trip. Even though the experience was fun and memorable, they quickly forgot about it. One key goal was to drive returning customers.

2 B2B or not 2 B2B

Both private customers and businesses stated their interest in the app, but it was unclear which business model would have the higher prospect on the long term.

City speedrunning

In the context of the app, customers would only interact with a limited amount of riddles within a particular city, which would reduce the experience to a point to point interaction.

Strategy

Reinvision

A clean slate creates opportunity, but only if you do your research first. I captured all learnings and requirements to ensure a holistic concept.

🕵️ explore further

Hear me out!

A concept is not worth much without feedback of potential customers. That's why we made sure to create a prototype and validate it with the target audience.

👩‍🚀 explore further

Fly!

One of my priorities is to give clients the knowledge to solve future design challenges autonomously. This was also something CityRiddler explicitly asked for.

🧑‍🔬 explore further

Reinvision

What is what?

Every part of an app should serve an overarching purpose. To define it, we identified all the user needs and pains from feedback on the first version. That helped us trim the feature set and uncover new solutions.

Make it system(atic)

Next, I created a game design to implement those solutions. I introduced side riddles that appear randomly to encourage exploration and enjoyment of the city. I also expanded riddles with timers and an all or nothing mechanic, raising the stakes and supporting both collaboration and competition.

Make it flow

Once the app was defined on both a systemic and analytical level, I defined the main user flows. A large part of the personalisation moved from onboarding into the tour selection. I also integrated collecting memories throughout the flow, enabling social media sharing.

Hear me out!

Get me a skeleton

Each step of the user flow was translated into wireframes. The goal was to understand information density on every screen and connect them into a prototype to see whether the app felt right. Flow issues were identified and improved.

Creating a paintbrush

During this phase, I ran a visual exploration, redefining the existing CI to strike the balance between playful and classy, which reflects the range of the tours. I also darkened the primary orange to harmonise with the sapphire tone and meet accessibility guidelines

Does it fly?

Getting accurate feedback from the target audience was essential. I conducted user tests with selected candidates in my office and also did guerilla testing with people on the streets of Vienna. Everyone was rewarded with a free city tour.

I want to zoom right off the bat

Why can't I swipe back here??

Oh, i thought i can click on the hint to reveal it...

Fly!

Technicolor

The three most intricate wireframes were first to be turned into screen designs. This phase defines the visual rules of the design system and also exposes wireframe issues, such as poor visual balance. The wireframes were adjusted accordingly.

Make it failproof

The remaining wireframes were translated into screens using the new design system. Along the way, new requirements emerged and informed the next system iteration. The result was a highly constrained yet flexible framework that allowed CityRiddler to create new content on their own.

Stopmotion

As a final request, CityRiddler wanted screen transitions. Application transitions were modelled through a set of screen states. In the example above, the app moves from the map overview into a detail view, while simultaneously scrolling to its location.

The result

No more speedrunning

The new bonus riddle mechanic is based on random coincidence, encouraging players to stroll around and collect extra points. More advanced bonus riddles also require a higher score to unlock, giving players another reason to perform well in the main riddles.

Best of both worlds

Why decide for either if you can do both. CityRiddler was designed in a way that it can cater to both private customers as well as businesses. The app offers different entry points and can be used indoors for exploration of coorporate facilites.

Endogenous value

The introduction of coins created an economy where players can buy vanity items, but also use them to discount future tours. This in turn increases player retention and strengthens the social component.

Nothing is forever?

CityRiddler stores your past tours, so you can relive them anytime. Taking photos for memories is seamlessly built into the riddles. After each adventure, users can also share it as an Instagram story with their friends... and maybe spark the next one.

Hey, I'm Lukas, cofounder of CityRiddler! We faced the challenge of formalizing a rather complex existing UI concept and turning it into a coherent UI/UX concept while simultaneously introducing gamification elements. Michal was able to dive into the subject matter excellently and responded to our requests wonderfully!

Lukas Baronyai
Jealous? 😐

No need to be! I got all the resources to make your project just as awesome and beyond! How about we have a short talk and exchange about your requirements?

Let's talk!

NEEEXT!!!