Leading an Environment Friendly Life

This scenario-based eLearning concept project is developed for anyone who wants to lead an environment-friendly life and reduce their carbon footprint.

  • Audience: People who want to learn why and how to be environmentally conscious
  • Responsibilities: Instructional Design, eLearning Development, Visual Design, and mock-ups
  • Tools Used: Articulate Storyline 360, Adobe Illustrator, Adobe XD, Mindmeister

Explore the Full Project Here


I believe that many people want to lead a sustainable lifestyle, but they often don’t know the “why” and “how” of it. Through this project, I intended to create urgency and show the gravity of the problem. People connect with situations better when they are immersed in real-life scenarios. I decided to go forward with a scenario-based eLearning experience that would allow the learners to make real-world decisions across the course of their typical day and see the consequences of their decisions on the environment.

The idea of this project is not just to preach best practices, but to create an immersive learning experience, which mimics their day-to-day lives. This scenario-based eLearning will include interesting facts, examples, and activities that will not only highlight the importance of the topic but also guide learners in applying their knowledge to their day-to-day lives.


The starting point of my project was an action map, which I created with guidance from a Subject Matter Expert (SME), a CSR consultant in the environment and sustainability sector. This action map led to the development of the text-based storyboard. From there I created visual mock-ups of the project in Adobe XD and developed a visual storyboard with programming notes. I used action mapping, scenario-based learning, and Articulate Storyline 360 to bring this learning experience to life.

Action Map

The action map served as the blueprint for the scenario-based learning experience. I consulted with the SME to make a list of unsustainable practices that people exercise on a daily basis, knowingly or unknowingly.

These pieces were laid out on the map and then refined to express them as specific and observable actions, and we proceeded to break them down further into what successful examples of these actions might look like. By getting all this information down, we were able to establish a basic blueprint to aid in setting up scenarios.

Text-based Storyboard

After identifying the most important actions to focus on, I worked with the subject matter expert to craft a realistic story around the actions.

I decided to focus the story on a woman living in a city, who undergoes a life-changing experience that compels her to start leading an eco-friendly life. She would face choices about what to do, and what not to do.

To make the story more engaging, I introduced a mentor character named Raj. I wrote hints and feedback from Raj that can be accessed at the learner’s discretion, simulating the experience of having an actual mentor to consult with when needed.

I captured all of this in a text-based storyboard; it included the full script, questions, consequences for each choice, and optional help screens.

Visual Mockups

I created visual mock-ups in Adobe XD because it’s easier to quickly change elements in XD than in Articulate Storyline. This allowed me to create several iterations of the visual design of the project starting with a wire-frame version to get a sense of the layout. From there I added a background and the characters, Maya and Raj to the scene. I decided to include photorealistic images to make the scenes more impactful and realistic.

Maya and the first selected background didn’t have enough contrast so I selected a new background and began to iterate color schemes and adjust the alignment in the following versions.

Visual Storyboard

The visual storyboard includes basic information about the layout of the project such as fonts, colors, and button states, but also goes into every slide in complete detail with slide titles, media files, all the text, what buttons are included, notes for a programmer, and images of each slide. The storyboard breaks down each slide, where layers are used, triggers, and variables (seen in later slides).

To assist in the transition from design to development, I created a visual storyboard to specify the events and interactions in the course. This entailed addressing the slides individually and noting details such as text that appears, or the effects of clicking on buttons.

Interactive Prototype

At this point, I began to create the prototype. The prototype consisted of the same slides that were in the visual mockups and the visual storyboard: title, intro, and two complete scenarios. This is where the project began to come to life. By programming the states, triggers, and variables, I was able to get a feel for how the learning experience would truly feel when completed.

At this stage, it was time for another feedback cycle. I submitted the interactive prototype for review, asking for specific types of feedback. Very helpful responses came back like adding some text, adjustments to audio levels, etc. I implemented the appropriate changes and moved on with the next phase of the project. By expressing everything in thorough detail, I was able to more readily identify missing elements and save a lot of time and trouble in the development phase.

Full Development

After making changes per feedback for the interactive prototype, I finished the rest of the build as defined in the storyboards. To stay organized in Storyline, I split up the course as 7 scenes: The introduction, the outcome, and one scene for each of the five scenarios.

Results and Takeaways

Through this project, I deepened my understanding and use of Articulate Storyline 360, Adobe XD, and visual design.

One of the challenges I faced was writing the text-based storyboard as I wanted to weave in the action items in a way that they would make the eLearning engaging and realistic. Apart from that it took me several visual iterations to be pleased with the visual design of the eLearning experience, and I realized the importance of Contrast, Alignment, Colour and Font selection in creating an immersive learning experience.




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What are Rue NFTs

UX typography tips

eQOURSE: What and How?

Making the Abstract Concrete

A Coffee a Day, for 5 days — Day 3 with Alex Théroux

Buy yourself an Outstanding High qualityMattress https://t.co/NIA34ecsJg

Technology in Design: The human impact!

A More Accessible Web

Lead illustration showing a webpage behind a brick wall that is coming apart.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store