This interactive module was developed as part of the E-Learning Heroes weekly challenge #36 Interactive Step Graphics in e-Learning. The brief for this challenge was to “build a step graphic to tell a story or communicate a process” and find creative ways to present the step graphic navigation.
(This demo is currently unavailable)
I was inspired to choose The SCARF Model by David Rock as the instructional content for this design after being introduced to this model during a workshop on “Navigating During Times of Change”. The SCARF model describes the interpersonal primary rewards or threats that are important to the brain and can be used for collaborating with and influencing people.
I initially chose quite a simple design which addressed the “step graphic” element of the challenge and focussed on the 5 domains of human experience which make up The SCARF Model, but I ended up expanding this to include introductory and ending screens which I felt were needed to explain the content more fully.
My inspiration for this design initially came from this Haiku Deck presentation. I selected my background images based on the “social interaction” element of the content and balanced these with large text to emphasise the 5 domains – Status, Certainty, Autonomy, Relatedness and Fairness, adding the hover elements of the 5 domains which I thought was particularly effective.
The inclusion of the character icons was not something I had planned for the design and this happened completely by accident when I was testing images appearing on layers versus slides functionality for “creative ways to present the step graphic navigation”. It was one of those situations where I thought “that could work” – but I wasn’t sure, and I kept moving the character icons off the slide, then back on. Once I added the speech bubbles it all started to come together.
In sourcing content for the module I came across the YouTube video on “The Social Brain” and just had to include this in the introduction. Articulate Storyline makes this very easy to do and I think adding other elements to a design helps keeps learners engaged, particularly if they’re short and informative like this video is.
When designing this module I focussed on balancing a range of interesting and varied design elements and animations while maintaining common elements to link each of the screens together, incorporating enough but not too much interactivity for the learner and making navigation as intuitive as possible.