Code Box

Code Box

Create a digital product and promotional website.

The Brief

To create and design a digital product focusing on a specific area, together with a promotional website to promote the product. The digital product could be anything as long as it was accessible online. The accompanying website would be used to showcase and promote the digital product. As this project was completed in two parts I have written two case studies, one for my Digital Product and one for my Promotional Website. Date Completed: November 2019

Digital Product


I started this project by completing research of the different types of digital products available and creating several idea mind maps before deciding to create a digital product around teaching code to students aged 11-13 years. I chose this idea as I felt that there could be a potential market for my product as coding isn’t generally taught in High Schools until Sixth Form, meaning younger students are missing out on being taught code and learning new skills and I wanted to take away the ‘fear’ factor that coding is difficult.

Digital Product Ideas 1 Digital Product Ideas 2

Before taking my idea further I created users personas to give me an understanding of my target users, who they were and what they would be looking for from this type of learning product. I then completed research on existing online coding products for kids to give me an idea of what content I could include within my digital product along with layout ideas, keeping in mind what my target users needs and wants were.

User Persona Child User Persona Adult User Persona Teacher

I researched the basics of HTML to gain a good understanding of what key components would be needed in order to create my first digital product guide. Once I had completed this research I began to write the content for each code specific area. I split the content into two sections, ‘Lesson’ and ‘Test your Understanding’. The ‘Lesson’ section, it would give users an idea of what each tag does in HTML and how it works. The ‘Test your Understanding’ section would include two exercises, one which could be completed by the user and one which could be completed on an Interactive whiteboard (in classroom by teacher) or by the user themselves. By including two different types of exercises, it ensures my product is appealing to a range of users and devices, meaning they could complete it no matter where they are, eg at home, school or an after school club.

Content - Lesson Content - Test Your Understanding

Once I had the content written I started to design my digital product. I was able to use my user personas to help with this as I understood their needs and wants. I started by designing the layout of each page within my digital product. I sketched out several layout ideas before choosing the final design. My initial ideas were simple and worked well to show the content. However, these layouts needed more work, so for the final layout, I took elements from the initial designs that I liked and merged & refined them for my final design.


Once I had the layout design and content I needed a brand to make it easily recognisable from other coding products/businesses. From my research of colours I decided to brand my digital product blue and orange. I chose these two colours as blue is used to encourage productivity and learning and orange is used to encourage creativity. I also felt these two colours worked well together and would appeal to my target user.

Code Box Colours

Once the colour scheme had been finalised, I moved on to name ideas for my digital product creating a mind map of different possible names. From this list I chose ‘Code Box’. Due to my target users being 11-13 year olds, along with some parents and ICT teachers, I wanted the brand name to be simple, clear and easy to remember and I felt this name matched my criteria well.

Wordmark Design Name Generation Name Design

Using the colours I had chosen along with my sketches of how my logo could look I decided on using a box which includes the bracket symbols used in HTML to reflect the brand name and what my digital product represents.

Logo Design Logo Sketches Logo Sketches


The main challenge I faced was getting the layout right. As I had written the content I needed to ensure the layout would show this in an easy no follow format and I had tried several different layouts before deciding on the one I used for my digital product. This was a slow journey but was worth the additional effort as I am very pleased with how the final layout looks and feedback given by teachers, parents and children confirmed that I had chosen the right layout.

The Outcome

I successfully designed a digital product which can be used now by my targeted user group of 11-13 year olds. I believe my product is unique and easy to use and could be a real asset to both students and teachers alike.

Code Box Digital Product


Designing this digital product showed me how important research is at the beginning of a project as this helped me considerably when putting all the elements together. Feedback along the way was invaluable from both my peers, lecturer and potential users, helping to validate the direction I was going in and helping me to design a digital product I am proud of. This is a digital product I could take forward in the future to create an online business.

    View more work