Logo: Educational App Product

This is part of a greater all-in-one Educational App project, which may go on to include the Product Design of the App itself. Valuable lessons have been learned during this enjoyable project.

These haven't been completely approved and signed-off yet, but I envision at least two versions of the logo in terms of colour. Perhaps a more colourful version for display in the App when used by 5–8 years olds, and a less colourful version for the 9–16 year olds. The styling of the entire App would also fit with this colour-scheme.

Approved 2nd Round Design

2nd Round Design Variants

Below: Logotype variants

Previous 1st Round Concepts

Case Study

The App and Logo's target audience is school kids from 4–16. The customers are school authoritites and teachers.

Initial Key Concepts

Initially, the instinct of the client and I was to go with friendly, soft rounded forms and fonts. But we didn't want to get into playshool-ish Fisher Price territory.

Typography

Once again, a rounded font was adopted for the initial concepts, but nothing too juvenile for the teenage audience.

First round concept Feedback

I sketched extensively on paper for this, but only showed the finished full-colour art from Adobe Illustrator. The initial concepts—some of which I was very happy with—were well received by the client. But disappointingly, the very first item amongst the design comps was chosen. It was basically just one of the fonts which I'd chosen and used to type the name of the App into Adobe Illustrator, and then rounded a little more. Simple as that. Virtually no design. The client was happy with that and asked me to send that Logotype over. I was disappointed. The client sensed this, and was worried that he'd insulted me! I tried to assure him that this wasn't so.

To be fair to the client, he'd initially suggested that I "knock something together" in 20 minutes. I said that this wasn't enough time to do proper design, so he paid me a fair fee to do the work. Ironically, what he chose probably wouldn't have taken more than 20 minutes work if that was all that I did + a bit of 'thinking time.'

Above: After all of the sketching and designing, this was the approved version

The Logomark Problem... which became an opportunity

The client then mentioned the Logomark that was to accompany the logotype. He hadn't been drawn to any of the ones so far presented, and then told me of a new idea that he'd had for it. Not only was this an unexpeceted request, but but it was one which I felt wouldn't fit with the now approved rounded font of the Logotype. He said that the 6 letters of the name could fit onto the 6 sides of a cube. The cube could be animated within the app, especially when screens were loading. I slept on this and wondered how I could resolve the conflict of a rounded font, with a sharp-edged cube, and which wouldn't look like a baby's wooden alphabet block.

I had some ideas, and then tried them out 'for real'

Instead of defaulting to working on the iMac in Adobe Illustrator, I began to sketch. As you can see, there were problems in getting the letters to fit and 'join up'. In the top-left example below you can see an area which is neither cube-surface, not 'void'. This could be cheated in a 2D graphic, but if rendered in 3D, it would cause problems. It was reminiscent of an Escher drawing in which elements are ambiguous.

Above: A problematic area (top-left). The shape is neither a flat surface, nor a 'void'.

To deal with this, I tried it out for 'real' by drawing the letters C O K A M and A in a font of my own creation, on squares of paper, but with rounded corners, and did this:

Above: You can see how by assembling the cube for real, I could figure out how the characters would fit together logically and what sides the characters would go on and in what orientation.
Below: See how I had to adapt the 'K' so it would join up with the 'A'. This created an unexpectedly nice letterform! (Form follows Function)

Below: In addition to the photos I also made a video of the cube and shared it with the client as proof of concept.

Video: Proof of Concept

The result of all of this was not only a proof of concept, a also new original typeface, with some letterforms that I probably never would have come up with otherwise.

Client Feedback

After going through this unplanned 2nd process and round of concepts, the client was very happy, as you can see below:

Conclusion & Lessons Learned

By end of the first round of (approved) concepts, I realised that my design process had been wrong from the start. Although the client was very happy with what he got, I was disappointed that the more creative options hadn't been chosen instead. I also felt that the client wasn't really getting value for money.

And there's rarely such a thing as a quick design job that will achieve great results.

It reminded me that an iterative approach using rough concepts, but also preceded and accompanied by real conversations with the client was the correct way to do design work. If one is serious about finding the best creative solution the client needs to be onboard and the client and designer need to be as serious as one another about articulating their goals and ideas. Presenting pencil sketches before high-fidelity comps would have allowed concepts to fail early and cheaply—or be accepted as the way forward, by-passing further unnecessary design options. Once again, it also helps to get the client onboard with and psychologically invested in the design direction.

It seems to me that at some point, with the creation of great design software, such as Adobe Illustrator, designers far too willingly fell into the trap of providing, and then being expected to provide highly polished comps too early in the design-problem-solving process.

More modern methods of rapid low-fidelity iteration of concepts and failing fast, early and cheaply are becoming accepted in Digital design for Apps, Software, Websites, and games. I believe that the same approach needs to be embraced by designers in all media.

Art Director & Designer: John I. White
Media: Pencils, Paper, Adobe Illustrator
Client: iWorks

Selected Clients

client logoclient logo