Calum Childs Blog

Just stating the facts.

New Homework Help For Kids web design

18th April 2020 Web Design No Comments

After months of work, the new Homework Help For Kids website and app design has finally been launched. This is the first time both the website and the app (Android version) have had the same design.

This was the hardest website design that I’ve done so far. Homework Help For Kids is the website that gets the most visitors (largely from Google searches) out of all of the websites that I run. Unlike other designs I have done, it wasn’t just redoing a few HTML pages. So I knew that I had to get it right.

Problems (with the old design)

I wouldn’t be redesigning the website (and app) if there weren’t problems (some major, others minor) that needed to be sorted:

  • The typeface (Ubuntu) didn’t fit with the “homework help” theme. A few people have also said to me that it isn’t the easiest typeface to read, especially with large paragraphs of text that make up the website.
  • The website was using a WordPress theme called Pique. It was my favourite theme back when I set up the site in 2016 (although I did have a smaller site before that) so I decided to use it. Apart from several lines of custom CSS I added to it (and the adding of the date before the title) I didn’t really change it that much. I had tried alternative themes but none seemed to be the perfect fit.
  • All pages had a header that took up most of the initial preview of the page. (More of a problem on desktops, but most visitors use the website on desktops and laptops.)
  • The logo for the website and app was bright red on a green background – you could barely see it!
  • The app was using a design that I had done back in 2017/18 as an experiment, trying to mimic the Pique design. There were several accessibility problems, one of which was to do with the colour scheme (green as a primary colour and red as a secondary colour doesn’t exactly do very well with colour-blind people.)
  • On the website, where there was a person’s portrait as the featured image, their head was nearly always cut off. Not ideal.
The Anne Frank page using the old design – with a chopped-off head.

Design

Typefaces and colours

Because I wanted to get this design right, I had done something I had never done before: I created mock-ups in Adobe Illustrator before writing a single line of code.

The first thing I did was pick a typeface. I decided to use Amaranth for both heading and body text. Later on, after someone said that the font was hard to read at small sizes, I decided to use Niramit after further feedback.

Next, I chose the primary and secondary colours for the site. I analysed rival websites, including BBC Bitesize and Primary Homework Help, to see what their primary and secondary colours were.

A screenshot of my analysis of rival websites’ colours

None of these websites were using green as their primary colour, so I chose to stick with that (although with a darker shade to the old main colour, #00cc6a.) Taking inspiration from The Guardian’s colour scheme, I created 5 shades of each colour (green, orange, purple, red, blue): Dark, Main, Bright, Pastel and Faded.

With the colours and typeface sorted, I moved on to styling the elements that would make up the pages (the size and colour of the headings, for example.) Once I had figured out what the elements would look like, it was time to create the first page mock-up.

Mock-ups, mock-ups everywhere

With all of the elements designed, I experimented with the potential layouts for the top of the page. The earliest layout ideas were similar, if not identical to the old design.

For a few days, I stopped designing the new website and did other things. Then one day, a layout idea popped into my head. A mix of a large font size similar to that of a National Trust information page (below) and a background with a featured image.

A National Trust information page

To solve the chopped head problem, I created two templates: the default page template (which would be used for both blog posts and pages) and a special “famous people” template, designed to show a full, non-cropped version of the famous person’s portrait.

Once I had finished creating the mock-ups, I started asking for feedback. I got nearly all of my feedback from Reddit.

I then moved onto the footer design. It would be similar to the old design, only it would have three columns instead of two. And the spinning globe marking the users’ location on the map and recording it would be removed. I used to have this on the Mr Red Blob website as well. (This wasn’t used for analytics – I had Google Analytics on the website at the time.)

The majority of the footer design process went pretty smoothly, although I was conflicted when it came to one thing: what gradient should I use for the background of the footer? I was quite nervous as I had never worked with gradients before, as I thought that they were too complex. But I knew this footer called for a good gradient as a background rather than a flat colour.

After some more feedback, and a few adjustments to the other aspects of the footer, I decided the light-dark green gradient (first image) was the best gradient.

With the footer design done, I was finally ready to make some full-page mock-ups.

Full-page mock-ups

These didn’t take long to do either. I literally just extended the height of the art-boards to add the footer design at the bottom. And so, with those done, I began developing the website.

Quiz design

I came back to the design stage later when I was designing the quiz pages that made up the app (and some of the website.)

The old quiz design for the website and the app

The only major thing I thought need changing would be the multiple-choice questions. If you look at the below screenshot, you will see why:

The old multiple-choice question design

So I decided to replace the list and annoying text box with four buttons (see below) where, if one is clicked, then you get an instant response of whether your answer was right or wrong.

The new multiple-choice quiz design

The other problem that there was (it was minor, but annoying) is that the audio file was played using the in-browser audio player. Whilst this isn’t a real problem in desktop, it is quite an issue on mobile devices, where the play button can be quite small. So, a large enough button needed to be added somewhere that, when played, played the audio, without much precision needed.

Below is the final design:

The final text with audio file design

Website development

With the final website mock-ups complete, I moved onto development. With previous websites I did, this was the stage that took the most time, partly because I was experimenting to see what worked and what didn’t, trying to get the design exactly right. But not in this case.

This was mainly because I used a WordPress theme framework called Underscores, which Pique was built on top of. It provided the bare minimum in terms of styling, along with multiple templates. This saved me quite a bit of time. Also, it was because of the fact that I had solved (most) of the design problems in the mock-up stage.

After a few days of copying styles from Illustrator (again, making life easier for me) I had completed default page and post templates and created an extra template for Famous People pages, so you can actually see their faces.

The default page template (ignore the East German flag – it was the first image I could find)

So, I came up with the idea that there should be a solid-colour background for the top of both of these pages.

Then it was time to do the homepage of the site and the Search pages. I had done mock-ups for both of them, but they were either impractical or they didn’t seem to fit with the rest of the design that I had created.

The Search results page when there are actually results.
The Search results page when there aren’t any results.
The dreaded 404 page

And so, I moved on implementing the design into the app (after re-designing the quiz, of course.)

App implementation

Implementing it into the app was slightly harder. Because the website uses a WordPress theme (and the framework was a WordPress theme) it was harder converting all of those styles into a plain HTML file. After some copying-and-pasting (and adding a few icons in the navigation bar) this was the first draft:

A screenshot of the early beta of the app’s homepage

I knew that it seemed a bit dull as everything (except the one link) was green. But I was relieved that everything looked the way it meant to! (And I forgot to add the “Back” button, as the app doesn’t have any built-in controls otherwise.) Below is a screenshot of the Welcome page with the improvements:

A screenshot of the near-complete app homepage

It was then time to convert the rest of the pages to the new design. First up, pages with content:

Firstly, there was the design that would be used on most of the pages: identical to the website but without the date above the title and a Back button below the title. I found out that I only had to change the code of the header for the design to change.

The new design on The Norman Conquest page

The Famous People pages were a bit more fiddly, because of the birth and death dates at the top. It took me a while (as I had to change code as well as doing copying-and-pasting) but I did it in the end.

The Famous People design page within the app on the Anne Frank page

Final touches

The logo

The bright red logo (a dotted H) was nearly always shown on a bright green background. Whilst designing this, I used the dark green as the main colour and thought that the logo would look better behind the dark colour.

App screenshots

The app (which is on the Amazon app store, although there is also a Windows version I haven’t been able to update for 3 years) had 6 screenshots promoting it. The design of the app was changed so… new screenshots had to be made! Below are the old screenshots:

… and here are the new ones:

To make the above screenshots, I used Google Chrome to get the screenshots with the phone frame and Adobe Illustrator CC 2018 (I use it for everything graphic design-related) to put it all together.

Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: