Role: E‑Learning Digital Designer
Tools: Articulate Storyline 360 · Adobe Illustrator · Adobe XD
With a focus on instructional design principles, I developed a suite of interactive graphic templates for a short e‑learning module for EcoBlueLine, an IT consultancy specialising in digital transformation. Built in Storyline 360 and supported by Adobe tools, this package enhances engagement through multimedia storytelling and intuitive user journeys.Tools: Articulate Storyline 360 · Adobe Illustrator · Adobe XD
Key features include:
1) An interactive timeline screen with clickable zones that reveal layer‑based content.
2) A filmstrip-style navigation with progress indicators and hover states to guide pacing.
3) A five‑step infographic with selectable elements and hover feedback to simplify processes.
4) A striking quote slide to visually break up text‑heavy content and reinforce key messages.
1) LIGHT VERSION
An interactive timeline screen with clickable zones that reveal layer‑based content.
• It can work as flip cards interaction, with text appearing when clicking.
• Each area is selectable and reveals text.
Subscreens are revealed by clicking on the numbered icon which have clickable areas. Once we interact with the illustrated icons they will be showing different colours for normal, selected and visited states.
Subscreen pop up windows can alternatively be revealed by clicking on the illustrative icons.
1) DARK VERSION
An interactive timeline screen with clickable zones that reveal layer‑based content.
Subscreens are revealed on screen when we click on the hotspots.
2) A filmstrip-style navigation with progress indicators and hover states to guide pacing.
3) A five‑step infographic with selectable elements and hover feedback to simplify processes.
Each step can have text appearing when clicking; the text can't be long or it won't fit in the shapes.
Alternative version of subscreens with pop ups.
4) A striking quote slide to visually break up text‑heavy content and reinforce key messages.
