e-skills Cyber City

Creative and technical development for 12-14 year old e-learning project


As the Sector Skills Council for Business and Information Technology, e-skills works on behalf of employers to develop the software, internet, computer gaming, IT services and business change expertise necessary to thrive in today’s global digital economy.

The government has assessed the cost of cyber crime to the UK economy as £27bn a year, and e-skills UK’s latest research, Technology Insights 2012 identifies skills in security and data protection as a top priority for employers. With technology vital to the running of every major organisation, there is a pressing need to improve cyber security skills at all levels.

The Cyber City project is a new interactive resource that enable students to progress through seven challenges, collecting belts as they go, to foil the evil machinations of Nemesis and his Henchman and prevent them breaching the security of Cyber City School. Supported by infographics, games, comic books and audio guides, the challenges introduce core principles of cyber security including awareness and planning; cyber crime and computer forensics; security practices and principles; safety, privacy and ethics; and online interaction.


I worked closely with Skylark Creative (opens new window) from the very beginning of the project to brainstorm a suitable vehicle to take students through 7 “Cyber Challenges”.


We wove a story around a classic “good vs evil” narrative, fleshing-out scenario and character designs for a futuristic “Cyber City”, its residents, the student’s character and main Good and Evil protagonists.


We broke down the learning objectives into games and interactive ideas, pushing back where needed to fully grasp what the client needed. This culminated with a client Discovery Day where we put our ideas through their paces and worked out how to deliver the learning content, with games, infographics, stories, and lessons.


The site build was primarily using HTML, CSS and JavaScript, based on single-page scrolling sections, with new, lower-level content unlocked by the student undertaking research, passing challenges and answering questions.

The homepage provided the main interactive showcase to the site with a faux-3D cityscape which scrolled in parallax to your mouse movement, had flying space traffic, and revealed the different challenges.

The remainder of the interactive content was fairly basic Q&A-type games and flat infographics produced in-house by Skylark (opens new window). Foresite (opens new window) were reposnsible for the final CMS build.

The project was shortlisted for the 2013 Bett Awards, in the Secondary Digital Content category.


I hope you found this post interesting or inspiring.

If you want to engage further, follow me on Twitter or drop a comment or reaction below.

Either way, thanks for reading!