Hair Level:<br>mobile first

Hair Level:
mobile first

You are sixteen, maybe seventeen, and all you want to do is learn and become the best hair dresser in the world. You’re a real hands-on work horse, without much patience for theory and reading books. You are on the move. And online, constantly. Getting inspired, chatting with friends, learning. What should your teaching method look like? With this student profile in mind, Flow developed the design for the vocational teaching method Hair Level.

Here’s an impression of the teaching method (video by Baretta Media).

Focus on mobile

The project was assigned by Bespeak, an Amersfoort-based creative content agency. The Hair Level learning method for hairdressers consists of a full-responsive e-learning platform, and a series of learning books. The e-learning is mobile first. For vocational learning, mobile devices are becoming a factor in teaching methods. Going mobile has a few hard-to-beat advantages:
Content type: vocational learning makes much use of video and imagery, because a lot of it is learning by watching. Viewing video and images is easy on a smartphone.
Technical requirements: not many schools or hair salons have up-to-date pc’s or tablets. But every student/apprentice has an up-to-date smartphone.
Mobile hardware features: smartphone with cameras can be used to capture your styling results and share them immediately on the platform, with teachers and other students.
Learning with a smartphone can be done everywhere, at any time: on the bus, in the school canteen, on the couch.
Cool-factor: pc’s vs. smartphones — hmmmm… what do you think?

‘For vocational learning, mobile devices are becoming a factor in teaching methods.’

Designing from small to large

We started designing the Hair Level user experience for mobile devices, and from there, worked our way up to tablet and desktop. There is an advantage to designing from small to large: you never run out of space. The downside is that you don’t want to end up with empty-looking screens in the desktop version. Every device requires its own ‘design resolution’—with the same content. On a mobile device finger-sized hit areas define the minimum distance between elements. But the same interface might look relatively ‘big’ on a desktop screen. So we developed a responsive design that works well on any device. For example, an overview page on mobile will look like a stacked list of bar-shaped items, whereas the same page on desktop will look like a matrix of square tiles. All offering identical content.

‘Every device requires its own ‘design resolution’—with the same content.’

Design = content

For this type of student, you need an intuitive interface, with the sleekness and quick learning curve of an app. On touch screens the user is quite literally hands on with the material. Young users tend to be more open to trial & error behavior, scrolling, swiping and exploring. Hit areas don’t necessarily need to look like buttons anymore. Some advanced features need to be discovered. We developed a fairly minimalistic interface design, with the focus on content. Rather than creating an eye-catching interface design, we put a lot of effort in getting the art direction for visuals and video right. We also created a color palette derived from natural hair colors. For every screen type, templates and elements were meticulously documented, including word counts for micro copy and image formats. Typography styles were tweaked for every browser type.

More information:

Client: Bespeak, Visavi