[ eLearning - Graphic design - Web design - Multimedia ]
A Brief History of Jamaican Music
I had previously created a timeline infographic tracking the history of dancehall music for a client, which got me thinking about how much history sits behind the genre.
For this project, I set myself the challenge of taking that idea further and exploring the development of Jamaican popular music from mento through to dancehall.
Instead of making another static piece, I wanted to see how the history could work as an eLearning experience. The result is an interactive timeline covering the major eras, with historical context, visuals, and music samples built into each section.
The timeline moves through the major stages of Jamaican popular music, from mento and ska to rocksteady, reggae, and dancehall. Each period has its own section where learners can explore the music, key developments, and cultural influences that shaped it.
Audio was an important part of the concept. Since the subject is music, I didn't want learners to only read about how the sound changed. Short audio samples let them hear the differences between each period while they explore the accompanying information.
Project Details
Role: eLearning Developer
Brief: Self-initiated project based on my previous dancehall infographic
Key Features
Progressive Timeline: Learners work through the eras in chronological order, with each completed section marked on the timeline.
Custom Completion Logic: Variables and triggers track the sections learners have visited and prevent the next era from being opened until the current one is complete.
Audio Playback: Each era includes a music sample with custom play and pause controls, allowing learners to listen while exploring the content.
Layered Content: Information for each period is contained within its own Storyline layer, keeping the main timeline uncluttered.
Click-to-Reveal Interaction: An interactive radio dial provides another way to explore supporting facts and content.
Timeline Animation: Animated transitions and completion indicators show where the learner is in the timeline and which periods they've already explored.
Tools Used
Articulate Storyline 360
Adobe Audition (Audio clipping and optimization)
Adobe Illustrator (Icons, background and era images)
Adobe Photoshop (Background and era images)
Freepik (Sourcing icons, background and era images)
Google Docs (Timeline scripting and content planning)
ChatGPT
I used ChatGPT to help research and organise the content, breaking the history down into the major eras and mapping out the key changes between them. Then I planned the timeline structure and decided what information, imagery, and audio would be included in each section.
Once the structure was mapped out, I built the experience in Storyline. This included the timeline navigation, layered content, animations, audio controls, and the variables and triggers used to manage progression through the eras.
The timeline is the main interaction, with each year acting as an entry point into the history. Selecting a year opens a content card with information about that period, along with navigation controls to move through the related content.
Music samples are built into the cards, with custom play and pause controls so learners can listen while reading. I also used variables and triggers to keep track of which sections had been visited. As learners complete each era, a check mark appears on the timeline and unlocks the next section.
This meant learners could explore the information within each period at their own pace, while the overall experience still followed a clear progression through the history.
The visual direction came from the subject itself. I used the colours and geometry of the Jamaican flag as a starting point, then combined them with a vintage radio, wood texture, and waveform graphics to give the timeline a connection to Jamaican music and broadcasting.
The waveform running through the timeline also serves a functional purpose: it reinforces the idea of sound while giving the timeline a strong visual structure. The radio stays anchored to the content area as learners move through the timeline, while the rounded information cards keep the historical content contained and easy to scan.
The design needed to support quite a bit of information without making the timeline feel crowded, so I kept the main screen focused on the years and moved the detailed content into the cards.