Articulation 1: from idea to storyboard

November 14, 2016 at 4:21 pm | Posted in hands-on, projects | Leave a comment

This is the first in a short series of articles that describe the journey from client request to finished product for an interactive online educational resource created using Articulate Storyline. This was my first real project using Storyline, and my aim is to document and reflect on that process in the hope that other novice designers will find it useful.

In November last year I was contacted by Dr Denise Baden from our Business School and asked if ILIaD could develop some online training for hairdressers. The aim was to inform them about environmental issues and encourage them to adopt sustainable business practices that used less energy and water and created less waste. This would be part of a wider ESRC-funded project, so gathering data about their use of the training was a requirement.

My first step was to scope the project so I could develop a proposal and give a first estimate of the likely cost. I looked at the PowerPoint slides they used for their half-day face-to-face training sessions and structured the content as a mind map using MindMeister:

Section of Sustainable Hairdressing mind map

My initial proposal was to have a photo of a real salon with activity areas, such as a client having their hair washed, that would highlight when the learner pointed at them. Clicking would show a close-up of the activity and some questions/options. Selecting these would increase or decrease the learner’s ‘Eco Score’ and show feedback about their choices.

Denise liked this idea, but wanted to a) stress the importance of the sustainable advice hairdressers provided to their clients and b) ensure that all of the feedback related to the impact of their choices on the key topics: energy, water and pollution. There were also five ‘big ideas’ to communicate – for example ‘One Planet Living’.

I refined my proposal in the following email, which I’ve included in full as it encapsulates some key design ideas:

You’re quite right – I thought that the impacts would be linked to from multiple points – so for example with the low-flow aerator tap the info could have a ‘Why should I care?’ button that would lead to a page about water scarcity – and that page could also be reached from (e.g.) the washing machine info etc. Alternatively we might need a set of icons for savings (money/water/energy-carbon/pollution/waste) so that it is easy to apply several to one item (e.g. low-flow aerator saves money, energy and water)

It may be that these big themes could be introduced at the start – a photo of the outside of the salon with image buttons that lead to brief info about the five impact themes. These probably should be videos – for the target audience I suspect that TL;DR is an important factor (if you’ve not come across that acronym before, please google it! ) – and the user has to view these (and maybe even take a fun quiz) before they can enter the salon.

In my view the overall key design objective is to create a resource that will educate, inform and entertain so as to persuade these hairdressers that going green is the best, sensible and professional thing to do that will deliver benefits for them, their salon, their customers and the planet. We should use positive words like ‘savings’ and avoid bombarding them with stats/figures/graphs where possible – I suspect that most of them find ‘maths’ both scary and incomprehensible. At the end of the course what three things do we want/expect them to remember? My ideal would be:

1. know that salon activities have an impact on the environment

2. know that their choices can reduce that impact, save money and benefit customers

3. think that they can and should make the right choices

But I wouldn’t expect them to remember anything about gigatonnes of carbon, temperature rise curves and so on – except to know that the climate is changing, the human and environmental impacts are very serious and that their actions really do count – especially if they also persuade their customers to do the right thing as well.

This set some important project parameters; the objective was to educate and motivate the learners, to provide a positive message about savings, and to minimise the amount of text.

I then created a rough mock-up in PowerPoint that showed how the interactivity might work; this helped my thinking as well as enabling me to more easily discuss it with Denise. Together with the mind-map, it formed my storyboard for the project – as shown in this video:

The final part of this phase was the project documentation, which provided a high-level description of what ILIaD would create, the milestones and their dates, and my best guess at the time required and the total cost. Given this was my first Storyline project, would that guess be sufficiently accurate? Only time would tell…

Denise approved the storyline, project documentation and budget and so I moved into the production phase.


Leave a Comment »

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at
Entries and comments feeds.

%d bloggers like this: