Overview

The Children’s Spy Agency is an immersive world where kids take control. Agents have access to spy tools, trainings, and they can create their local spy unit to solve the mysteries that adults could not, like where does Mr. Whiskers gets his treats from.

The CSA was created by Bright Little Labs, a media company with the mission to teach kids digital skills. Agents can enter this world through the app, story books, the web platform or the physical experience in KidZania, London.

To accompany the release of their new CSA story book and the rebranding of the spy agency, the company wanted to release a new CSA app.

Goals

Produce a new app which provided both one-time and replayable content.

Connect all digital and physical products and show the kid’s experience reflected on the progression of their spy profile.

Make the experience realistic but fun, for the kid to feel that they are part of a real organisation.

THE CHALLENGE

The former web and app experiences were extremely successful and kids loved being part of the spy agency (where no adults are allowed). However, the content was limited and not replayable, making the kid’s experience very short.

In addition, the digital experience was complemented by a physical event and the story books with their main characters. However, there was no reference to these things on the app. Products didn’t connect well to each other, meaning that kids that started their journey digitally wouldn’t become aware of the other elements of the world, therefore loosing a great opportunity to expand their spy experience.

Former agency app

My Role

I joined the company to lead and oversee the kid’s experience throuhghout the different products and make sure they all connected smoothly.

For the development of the mobile app I was excited to be leading the kid’s experience alongside a great team. I worked closely with the CEO, product manger, developers, visual designers, game designers and above all, wonderful kids.

Among my tasks were:
user research, wireframes, lo-fi and hi-fi prototyping, user testing, QA testing, sound design and visual design of some features.

Process

We worked with Lean-Agile methodologies. We had weekly sprints snd daily stand ups, which allowed us to efficiently track our progress and resolve issues that were blocking us. After two months of development we released and MVP which helped us validate learnings for future iterations.

Discovery

The design process relied heavily on data driven decisions. From early stages I carried user interviews to understand our user’s game preferences and their thoughts on the existing app.

I also run A/B tests on the existing app and website, to validate ideas that could solve some key issues that we discovered from looking at our analytics.

Extensive user research had been done in the previous years to me joining, so for this piece of work I used the existing personas personas and added extra insights I gathered from the user interviews.

User interview session

Flows to A/B test

User persona example

Define

To kick off the project, I run a series of workshop with the entire company including the CEO, to align requirements, values and goals.

Through a series of exercise like the 5 why’s and brainstorm of ideas for specific feature, I was able to get from the team members insights they had from having developed the previous app.

This was an effective way for me to quickly learn from past experiences from which to build the new platform.

The outcome of these series of workshops resulted in a high-level user flow, showing the key stages and features into app.

Basic flow of kid's experience

Becoming the main hub

At this stage it was also clear that the app was going to be the main point of information where all products would come together.

The agent would be able to see a record of the activities they took part of inside and outside of the CSA App, as well as discover other products, like the book or the Spy Pack.

The later is particularly challenging as we are not allowed to advertise directly to kids. So we had to find ways to make reference to these other products but removing the direct link to a shop.

Ideation and validation

I produced some sketches and paper prototypes of key screens and test them with kids to start to get a quick idea if the decisions taken were in the right direction.

As helpful as this was, it was also noticeable that kids struggled a bit to understand how the app would eventually work and for that reason I decided to move to a click through prototype for the next round of user testing.

Through different rounds of user testing, we also tested different versions of sections of the app, like the onboarding and dashboard.

Click-through prototype of early wireframes

Game Design

I worked closely with the game designer, Federica Orlati, to make sure that the scoring system and the games fit into the overall experience. She led the design of the scoring system, the first two games and laid the basic outlines for the timed missions.

We were able to carry very insightful user testing sessions in KidZania. Setting up the test outside the CSA physical experience allowed us to speak with kids of different ages.

Testing was incorporated in the process from a very early stage, Federica produced some beautiful lo-fi prototypes of her initial game ideas which made the user testing very easy to carry out. As the games were being developed, we came back to KidZania to test the the UI and interactive mechanics.

Click through game prototypes

After the MVP, we got some more game designers to develop game ideas for us.

Part of my role included fleshing out the game ideas and producing some quick prototypes to test the concept of the game.

Playing out these prototypes also allowed us internally to better judge how engaging the game could be as well as the resources required to build it.

Production

Wireframes, journeys and maps

As key flows and features were validated through user testing and approved by the CEO, I would put together high level wireframes of that section which would then pass on to the visual designer.

The wireframes would also include details regarding general mood for each screen, animations, and key points where progress would affect the backend.

Section of wireframes

While working on all of these different features it was very important as head of UX to have a clear understanding of how the kids were moving between our different products. To help me with this, I created a product map which hidhlighted the CTAs from the existing products.

I decided to also add those which were planned to be part of the experience in the near future, to make sure that when the time came, they would easily fit into the overall experience.

At the same time, it was very important for everyone in the team and company wide working on other products to have a clear understanding of the different journeys the kid might go through between the different products.

For this reason, I created visual user journeys which made it easy to have a snapshot of different parts of the experience and have a visual context to those who might not be familiar with the UI or a particular product.

Visual Designs

The visual design was directed by the head of design Lucy Burns who worked along designer Chia Y. Hsu. They produced the style guide for the new looks of the agency and created great designs that gave the app the authentic spy feeling.

Implementation

The app was built in unity. I worked closely with the game developers to provide the support they needed to develop the app smoothly.

As features were built into the app, I produced constant QA tests to find the most bugs possible before release.

App backend control

Being a small start up, it required a method to have control over some app content to save us using developer's time.

The development team created an amazing database spreadsheet which connected to the live app. From there, we were able to edit the copy, tweak game mechanics, and add some types of new content.

For some of the features that perhaps weren’t too straight forward, I helped create the specific sheet in a way that anyone could pick up the task and carry it out smoothly.

For example, we created a standard interactive flow for releasing timed missions. The flow was implemented into the app and then each element of every screen was synced with the spreadsheet. New missions could be easily added and managed through the spreadsheet.

Release

The app was release in two key stages. An MVP was released first with some minimal features which showed hints of success towards our KPIs as well gave us better insight into the app performance and engagement.

The second release was planned to happened along the release of the book. This version included more replayable games, a first timed mission, spy tools and a personalisation element found in a terminal-looking interface.

The app has been very positively received by kids. It has been really fun reading kids reviews and suggestions.

Further work

The third key weak point from the old version of the app was that it didn’t connect the ‘offline’ products with the main hub where the user’s progress is stored.

We wanted to find an approach which wouldn’t require too much development time. This was addressed by adding a feature into the app which allows users to introduce a code which they would have obtained from the other products.

By introducing this code, they kid would get feedback specific to the task they had just completed plus a ‘reward’ in the form of XP, unlockable content or achievements.

For this feature, I was in charge of producing the flows and wireframes, the visual design, managing the development and QA testing.

Conclusion

Producing the main hub for the Children’s Spy Agency have been one my favourite pieces of work of my career so far. There have definitely been challenges throughout the project as the composition of the team changed throughout and our work system was impacted by the global pandemic, but what made the project successful has definitely been the level of care and involvement of the entire team. The clear company vision and culture allowed for every team member to see how they were contributing and understand were they fit in the process.

Working with kids has been my second favourite thing about this project. The Children’s Spy Agency world is an educational space but it is also a spaces that fuels the imagination, where silliness, inventiveness and absurdity are not only allowed but also encourage, things of which I know kids are not short of.

Jump to...

Designing the CSA app

Case study

COMPANY

ROLE

PLATFORM

Team Size