Mission Statement

CityRiddler has the goal to let their users explore and learn about cities. What sets their app apart from its competition is their playful way of doing so, while being customised to each users needs.

When I got to know the team behind, they were a small startup, backed by their first funding round, with the first version of their app already released.

Now they were excited in relaunching their app in an all new look, with all those learnings from the first version applied. Needles to say, I was very excited to join them as a freelancer!

Challenges

I want you to stay

Customers would usually try the app for a single city trip. Despite the experience being enjoyable and memorable, people would forget about the app soon thereafter. One 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

Starting with an all new design brings a lot of potential, but it takes one step back to see it in the first place. Thats why I made sure to capture all the requirements and learnings to build a holistic product, from the ground up.

🕵️ 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 key priorities is to provide my customers with the knowledge to tackle many of their future design challenges autonomously. This was explicitly desired by CityRiddler, since development would be costly as is.

🧑‍🔬 explore further

Reinvision

What is what?

Each and every piece of an app should serve an overarching purpose. To define that purpose, we identified all the user needs and pains based on the feedback from the first release. These in turn would enable us to trim down the potential featureset and inspire new solutions.

Make it system(atic)

Next, I created a game design which would implement those solutions. I introduced side riddles which would pop up randomly to incentivise users to explore and enjoy the city. The riddles were also extended with timers and an all or nothing mechanic. These would increase the stakes, pushing both collaboration and competition - a desired property. The remaining parts of the solution would be implemented on a mission design level.

Make it flow

With the app being defined both on a systemic and analytical level, it was time to define the main user flows through the application. During this phase, a big part of the personalisation was moved from the onboarding to the tour in question. Furthermore, collecting memories was integrated into the whole flow, allowing for social media sharing.

Hear me out!

Get me a skeleton

Each step of the user flow was translated into a set of wireframes. The goal was to understand the information density on each screen, but also to link together those screens into a prototype to get a feel whether the app “feels right”. Issues within the flow were identified and adapted.

Creating a paintbrush

During this phase, I was conducting a visual exploration, looking at the existing CI, but also searching for a better fitting fontset. The goal was to find something that struck the right balance between playful and classy, since that was also the range of the offered tours.

I also decided to darken the primary orange a bit so that it would harmonise with the saphire tone. The color palette was tuned to conform with accessibility guidelines.

Does it fly?

It was important to get accurate feedback from the target audience of the app. I was conducting user tests with preselected candidates in the office. Since Vienna is a great city for sightseeing, I also went out into the streets to do some guerilla testing with random people I ran into. We made sure to reward them all with a free tour through Vienna

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 most complex three wireframes were chosen and translated into screen designs. This phase is crucial, since it will inform the visual rules of the design system. It also highlights issues within wireframes - whenever there is a lack of visual balance for example. The wireframes were adjusted accordingly.

Make it failproof

The remaining wireframes were translated into screens, using the new design system. In doing so, new requirements would show up which would in turn inform the next iteration of the design system. The result was a heavily constrained, but flexible framework which CityRiddler would be able to use to create new content on their own.

Stopmotion

A final request was to define the screen transitions. Besides default state transitions of components, more complex transitions on a screen level were modelled using a set of screen states. In the above example, the app changes from a map overview into the detail view of a particular riddle, while scrolling to the location at the same time.

The result

No more speedrunning

The new mechanic of bonus riddles is purely based on random coincidence, and therefore incentivises players to stroll around so they can gather bonus points. Additionally, more advanced bonus riddles require a higher score to unlock, which incentivises players 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 new system of coins created an economy where players can buy vanity items, but also use the coins to discount future tours. All of this incentivises players to return to CityRiddler and compare themselves with other teams.

Nothing is forever?

CityRiddler stores all your past tours, so you can relive them at any point in time. Taking photos for memories is seamlessly integrated into riddles. Additionally, each of your adventures can be shared as an instagram story afterwards, so you can share the joy with all of your friends... and maybe even your next adventure. On CityRiddler.

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!

Ready to
level up?

Maturity Check

9 points required to pass

How can design boost your revenue? (7 pts)

0 pts

It can attract better talent into my company

It can help promise features that don't yet exist

It can change my users personal preferences

It can be the USP of my services

It can boost retention and customer loyalty

It can exploit addictive patterns of humans

It can reduce the development effort

It can improve my conversion during onboarding

It can make me avoid compliance violations

It can save the lifes of my customers

It can reduce operational costs

It can facilitate buy-in of political stakeholders

It can maximise the turnaround of key journeys

It can stop pesky customer support requests

What makes great designs stand out? (4 pts)

0 pts

Can an Ai create great designs? (4 pts)

0 pts