I joined DenDen, a startup in Barcelona, as a UX/UI Designer. Besides travelling there to meet the team, I mostly worked remotely (which I absolutely loved, and yes, I’m as productive as on site). I took care of the UX preliminary research, UX Design and UI Design for their gaming app ‘Forbidden City’ as well as their game window display online.

In our society, where shopping online has become second nature, independent shops struggle. The main issue resides in the fact that they are not visible enough.

It has been found that users tend to predominently search for shops and services by using a map, any map. DenDen wants to take the burden of online management from shop owners by adding their shop onto all maps available (Google map, Apple map, Facebook map, Yelp…). Additionaly, DenDen service also provides analytics and feedbacks to best tackle the issue.

The Forbidden City game was born from that idea. This augmented reality game rewards locals for discovering their surroundings by adding shops onto the map.

“10 years from now, in a world ruled by a single megacorporation, underground factions battle against the monopoly by creating shop networks through new technology. By scanning the remnants of real world shops and adding them into Forbidden City, players will expand and defend their underground economy while reinforcing the shops in their real world neighbourhoods. Players can create and join teams for special missions and more power.”

The game was just a concept until now. Thanks to role playing we focused on pitching the game as if in real life. Each scenario brought its load of features and cool ideas to make the game fly among communities. Soon enough we had enough material to knit together and have a better idea of the scope.

Nir Eyal brought it up in his book ‘Hooked’ in which he explains the importance of building habit forming products, consequently ensuring a returning audience that does not even need to be prompted simply because they have developed the habit.

The game mechanics were designed with the hook cycle in mind by mapping them against key human emotions. A piece of documentation so important I put it on the wall.

In an agile environment, we put together the main user journeys and highlighted key stages of the hook cycle and game mechanics. This enabled us to have a complete picture of the flows and ensure we didn’t forget any crucial element. We then scaled them for the different levels of the game.

Who will play this game? Why? What kind of players are they? What is their current situation? A whole bunch of questions came rushing in. The better you know your target, the more relevant and efficient your design will be, so we made a list of potential players and developed them into cards based on analytics.

By analysing the gaming landscape, with the support of our personas and after settling the tone of voice, we brought together a couple of design routes that resonated with our audience and the futuristic scenario. We opted for a mix between a serious/edgy/dark feel and a friendly/humorous/light touch.

Finding the right balance between the two universes was challenging at first but we rapidly found a middle ground. We could achieve one through the colour palette and the use of hard shapes while the other could be present via our shop keepers and the way they behave.

Having that in place we moved onto the branding and designed the logo, picked the font and set the colour tones.

Speedlearn, halfway between our themes, was used for highlights. It has a mix of sharp and rounded edges, a nice weight without being overbearing and, most of all, something futuristic and alien-like to it. For simplicity we used SF UI Text, the system font for IOS, on the rest of the copy as our main focus was to make the game live on the App Store.

Meanwhile, by researching customer journeys alongside game mechanics and hook cycles, we had a strong base to start the wireframes. From rough sketchings to detailed screens, we created a prototype to visualise the main and secondary interactions. That helped us correct misconceptions and wrong assumptions before starting on the design.

While I was busy refining the product, the team in Barcelona developed a first version of the app which was approved by Apple in record time. Having the app on the Apple Store enabled us to start gathering an audience and have them play with the beta version of the game. This was a major step forward and a key element to gather feedbacks, make our app stronger and build an audience from the ground up as we were refining the game.

Rapid prototyping was part of the process. We included sessions of it as we went along and bent it to suit our needs. The amount of ideas we pulled from it was tremendous. This is how we created our ’shop keepers’, the little creatures defending players’ shops. Those tiny minions were conceived in 3 days through sketching iterations up to final design. For a first version it was intense, fast and highly inspirational. Creativity condensed. By designing with others we skipped the linear design route and amended at a much higher speed.

The app design was highly iterative and every day an element of it improved somewhere. In a very agile, intuitive and flexible manner we adapted our methods without losing sight of the main quarter’s goal.

I realise how incredibly easy it is to get carried away with features that are not essential. Working in a very iterative manner and result-focused environment has been a constant reminder to privilege short, easy to carry amends rather than high end, complex solutions. Agility, right.

The true strength of a start up resides in a combination of agile process, rapid prototyping, collaborative approach and a good dose of intuitiveness which make it a fast pace environment, ideal to thrive.