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

Redesign the website experience maintaining features that are successful and easy to re-implement within the timeline.

Limited features but enough interactivity and small easter eggs to be engaging. Include content from the Agent Asha book.

Encourage visitors to continue on the CSA App.

THE CHALLENGE

The CSA was created by Bright Little Labs, a media company with the mission to teach kids digital skills. The website would complement the app experience and would allow kids without access to a mobile phone to access the agency.

Webflow was chosen as the development platform, this meant that we were a bit limited when it came to bespoke content and interactions that weren’t provided by the software.

This was my first project where I would be managing as well as designing, so it was a challenge that I was looking forward to.

Former agency website

My Role

During a busy time in the company with big deadlines approaching, I was put in charge of managing, producing and delivering de project of the Children’s Spy Agency website.

My main tasks involved project planning, setting the timelines and deadlines, holding stakeholder meetings, researching and user testing, lo-fi prototyping, hi-fi wireframes, managing development company and QA testing.

I also worked closely with the lead Visual Designer Lucy Burns, to co-create the design following the existing style guides.

Discovery

Due to the thight timeline, this stage was key to gather as much existing data and knowledge as possible.

I held meetings with stakeholders to understand their needs and set the project goals. Extensive quantitative and qualitative research was done on the current version of the website prior to me joining the company, the documentation of the restults was extremely valuable to get an understanding of what the key issues were and what features were working well.

Some of the research done for the CSA app also helped informed some of the features and flows for the webstie.

Define

After gathering the data, I presented back the results to the stakeholders along with high level flows and a set of options which included different combination of features. These were set following the needs and goals previously discussed.

These options were also mapped against a high level timeline which helped the stakeholder decided which option to move forward with.

At this stage we defined how the website was going to sit in the world of the Spy Agency and what its purpose was going to be:

“CSA.WORLD will be the public facing side of the agency (similar to cia.gov), where kids (agents or non agents) can find useful general information as well as some unclassified intel. From there, they will also be invited to become an agent by downloading and signing up through the CSA app.”

Initial ideation

After agreeing the set of features for the site, I proceeded to make some sketches of how they could be distributed.

The budget and time didn’t allow for user testing with kids, so to try and gather at least some feedback, I used the sketches to do some quick paper prototypes and test them with the team.

Production

Wireframing

The results from this testing and the knowledge of the team members that worked on the previous version of the site was very useful to make some decisions of features and flows. These were there turned into high level wireframes which were presented to the development team to understand feasibility.

Having this conversation helped tweak and narrow down some features in order to make the project stick to the deadline.

Wires before dev talks

Wires after dev talks

Visual Design

To produce the designs for the new online experience I worked very closely with the lead visual designer, Lucy Burns. It was important to use the style guides already created for the design of the app in order to have consistency in the branding of the agency across the platforms.

For the MVP I worked on my own producing the designs and preparing the assets for implementation. For V1, Lucy and I worked together to design the new features that were going to be built in.

Animation

We wanted to add some simple animations into the website to bring it to life a little bit. Time resources from the animators in the company were very limited and so I decied to produce some of the animations myself. This came also very handy as I had wanted to initiate myself in the world of animation for some time.

For the more simple animations, I enjoyed producing using LottieFiles as they integrated very easily with Webflow.

SECURITY ACTIVATED

Animation using Lottie files

Implementation

Development agency iTelasoft did a great job at understanding our project requirements and delivering the project very well.

We used Monday.com to keep track of the tasks and bug reports. I was in charge of building the project board and adding the cards with the instructions and required links.

The project was slightly delayed due to some Webflow’s limitations and issues unknown to us before starting to work with the software, however as I was working closer together in testing and researching these issues we managed to finish the project right on time before the launch of the Agent Asha Book.

Release

After the release, and having spent a bit of time testing its reception, we were ready to redirect all the traffic from our old site to the new one.

From this point onwards I was in charge on maintaining, editing and implementing any new features onto the website.

Conclusion

This project was of a good size for me to be able to dip my toes into the field of project managing. Although a bit scary at first, once I was able to set the basic requirements, goals, assess the resources and map the timeline I became much more confident that I was going to be able to deliver the project. It was a very good exercise to practice managing stakeholder expectations and improving my communication with developers.

Jump to...

Designing the CSA Website

Case study

COMPANY

ROLE

PLATFORM

Team Size