How to build a website with Bookswarm

Kjell Eldor reflects on the anatomy of a successful project.

We recently worked with the editorial team at Walker Books to create a micro-site for their new publication Get Coding! In this case study I’ll share with you how we bring website projects to life at Bookswarm.

The product

The fully-illustrated book teaches cget codinghildren aged 7+ how to code and build their own website, app and game using HTML, CSS and JavaScript. The book consists of 6 fun missions, which take the reader through the basic concepts of coding whilst ‘gamifying’ the process.

The book was produced in collaboration with Young Rewired State, who run “a global community of digital makers aged 18 and under”.

The brief

The brief was to create a micro-site which added value to the book by helping readers with the missions within. We worked with Walker Books to create a site architecture that allows users to easily find the section of the book they’re in, and drill down to specific code snippets they need.

After our initial project kick-off meeting we wrote up a Creative Brief, which defined every aspect of the project from audiences and objectives; to tone and visual design.

We then worked together to create a set of wireframes (or line drawings) to define the most logical and user-friendly site structure, using an online tool called UXPin:

homepage

Once Walker Books were happy with our vision, we used the wireframes and Creative Brief to create a set of visual designs:

Get Coding home 01

The visual design incorporated illustrations from within the book and the book’s branding to deliver a clear and coherent look and feel.

Creative lead Hazel Miles said:

It was nice to work with such colourful and fun illustrations, it gave me plenty of eye catching elements to use in the design. The book had a clearly defined style that needed to be applied to the website which was fun and engaging – both for me when designing it and for the end user.

After a short process of tweaking and refining these we had a set of designs which we could use to build the fully functional website.

We use WordPress for all our websites, meaning the client can independently content manage their site once the development process is complete.

The result

One of the key features of the end product was to be able to share HTML code with users which they could copy, edit and work with. Our technical lead Alex Watson found a neat solution for this:

I suggested CodePen as a tool for displaying the code snippets as it makes it easy for visitors to see how the code works right there on the website.

Screen Shot 2016-05-11 at 11.41.20

Code Pen is a third party site which allows users to save code and display it on a website. This not only means we can display the code, but it means that users can click through, create a Code Pen account and save their work as they work through the missions within the book.

This a lovely touch to the website, that added real value to the book too.

Walker Books had their content organised and saved in Word documents, ready to upload to the site. They did this whilst we completed Desktop and Mobile testing to make sure the site was perfect across multiple devices.

My job, as Bookswarm’s project lead, was to make sure I supported the client throughout the whole process; right from our initial requirements gathering meeting to the final handover training session.

Walker Books Editor, and project lead Daisy Jellicoe said:

I really enjoyed working with Bookswarm. Kjell was great at explaining how the website would be designed and built, and was very helpful throughout the entire process. We’re really pleased with the end result. Thanks, Bookswarm!

Lead Developer Alex Watson reflected on the project:

I really loved developing this website as it reminded me how much I enjoyed learning to code when I did it myself many years ago.

The website launched on the publication day of the book and has already been enjoyed by many of the books’ readers.

As with all of our websites Walker Books have access to Bookswarms’ bespoke support feature, meaning their site is supported by us into the future.

Screen Shot 2016-05-11 at 12.01.28

Bookswarm Director Simon Appleby concluded:

We’ve built many micro-sites for the publishing trade, and each one represents a new and fresh challenge. We were very pleased to work with Walker Books on this latest project. And who knows, maybe later on in our careers members of our team will work with young coders who were inspired to code by this very book!

Visit the finished Get Coding website