Scenario-based eLearning
Coming Soon- “Tank Smart”
An AI-Enhanced Real-World Saltwater Tank Decision Simulation
This scenario-based eLearning simulation helps beginner saltwater aquarium owners practice building and maintaining a healthy tank through realistic scenarios, interactive job aids, and feedback-driven decisions.
Final Style Guide
Audience: New and existing customers who need help setting up and maintaining a saltwater aquarium.
Responsibilities: Instructional Design (action mapping, storyboarding) and eLearning development (mockups, prototyping, full build, visual design)
Tools Used: Articulate Storyline 360, Adobe Photoshop, Figma, FreePik AI, CANVA AI, LucidChart, Pixabay, Claude, ChatGPT, Microsoft Designer
The Problem
Many first-time saltwater aquarium owners struggle to maintain a healthy tank because they lack experience with fish compatibility, feeding habits, tank cycling, and water quality management. Beginner mistakes, such as adding fish too early, pairing incompatible species, or overfeeding can quickly destabilize a tank and harm aquatic life. Traditional resources often provide large amounts of information but little opportunity to practice decision-making in realistic situations.
The Solution
To address this problem, I designed Tank Smart, an AI-enhanced, scenario-based eLearning simulation that helps learners practice building and maintaining a saltwater tank through realistic scenarios, interactive job aids, timed decisions, and feedback-driven interactions. Developed in Articulate Storyline 360, the project utilized advanced triggers, variables, custom states, and interactive lightboxes to create an immersive learning experience.
My Process
I followed the ADDIE model to design and develop the storyboard, visual mockups, interactive prototype, and final simulation. Because I previously owned a saltwater fish store, I served as both the Instructional Designer and Subject Matter Expert for the project. My experience educating customers on how to build and maintain saltwater aquariums helped me create realistic scenarios based on authentic beginner challenges and common mistakes. Throughout development, I incorporated feedback and refined the experience to deliver a visually engaging, feedback-driven simulation grounded in real-world aquarium ownership.
Design
I began by identifying the most common mistakes beginner aquarium owners make and focused the experience on practical decision-making rather than memorization. The simulation was designed to mirror real-world tank setup and maintenance challenges while keeping learners actively engaged through guided scenarios and immediate feedback. The overall experience was structured to feel more like an interactive simulation than a traditional course.
Action Mapping
I used action mapping to identify the critical on-the-job behaviors learners needed to perform successfully. Instead of focusing on information recall alone, the simulation targeted actions that directly impact tank stability and fish health.
Key learner actions included:
Selecting compatible fish
Choosing the correct food type
Cycling a tank before adding fish
Responding to maintenance and feeding challenges
Monitoring tank health based on decision
Each scenario was intentionally tied to a real-world consequence to reinforce behavior change and decision-making.
Visual Storyboard
Once the action map was complete, I created a visual storyboard to map out the learner experience, scenario flow, interactions, feedback, and overall visual direction of the simulation. This phase served as the blueprint for the design and development of the project and helped ensure the experience felt realistic, engaging, and easy to navigate.
Each scenario was built around high-priority actions that beginner saltwater aquarium owners must perform successfully, such as selecting compatible fish, cycling a tank properly, and choosing the correct food types. I designed each decision point to reflect realistic consequences that could impact tank health and fish survival.
To create a more immersive experience, I introduced Pedro, the manager of Saltwater Specialties, as a mentor character who guided learners through the simulation and provided support through interactive job aids and feedback. I also designed a visual Tank Health Meter that responded dynamically to learner decisions, helping users see how their choices affected the stability of the tank in real time.
Mood Board and Style Guide
I utilized ChatGPT, Claude, and Canva AI to help create visuals for my mood board to gather inspiration for the overall visual direction of the project, including color palettes, aquarium-inspired UI elements, typography, lighting, and environmental design. I iterated on different colors and looks until I was pleased with the final overall look of the project. The mood board helped establish the cinematic underwater aesthetic and guided the visual consistency of the simulation.
From there, I developed a detailed style guide in Figma to design colors inspired by ocean environments, coral reefs, and the visual assets used throughout the project. I also aligned the design of Pedro, the tank environments, icons, and interactive elements to create a cohesive learner experience across all slides and interactions. The typography, colors, and interface elements were selected to create a clean, modern look while reinforcing the immersive feel of managing a real saltwater aquarium.
First iteration on Style Guide
Visual Mockups & Wireframes
After developing the style guide, I created wireframes and visual mockups to establish the layout and interaction flow for each type of slide within the simulation, including onboarding screens, scenario slides, job aid lightboxes, feedback layers, and final results screens. Using Figma, I iterated through multiple design variations to refine the user interface, visual hierarchy, navigation flow, and overall learner experience.
I focused on creating a clean, immersive aquarium-inspired interface that balanced realism with usability. Interactive elements such as the Tank Health Meter, animated icons, cinematic overlays, and visual feedback states were incorporated to reinforce learner decisions and support engagement throughout the simulation. Throughout the process, I continuously referenced the storyboard and action map to ensure the visual design aligned with the intended learning objectives, scenario flow, and real-world decision-making experience.
Interactive Prototype
Next, I developed an interactive prototype to test the user experience, visual flow, and scenario pacing.
The prototype focused on:
Timed decision-making
Tank health feedback
Interactive hotspots
Drag-and-drop fish grouping
Lightbox job aids
Guided learner support
This stage allowed me to refine navigation, feedback timing, and visual interactions before full production.
Full Development
The final simulation was built in Articulate Storyline 360 using advanced development techniques, including:
Variables to track tank health and learner decisions
Conditional triggers for branching feedback
Custom states for interaction tracking
Timed interactions and looping visual cues
Interactive lightboxes for job aids
Dynamic feedback layers
Scenario-based branching
Visual tank condition changes tied to learner performance
I also incorporated AI-assisted workflows during development to rapidly prototype visuals, generate assets, and streamline parts of the design process.
Results & Takeaways
The completed simulation provides learners with a realistic, low-risk environment where learners can practice making informed decisions about saltwater aquarium care. By combining scenario-based learning with interactive performance support tools, the experience reinforces practical application rather than passive content consumption.
The final project demonstrates:
Scenario-based instructional design
Advanced Storyline development
Performance-driven learning design
Interactive feedback systems
Real-world decision simulation
This project reinforced the importance of designing learning experiences around real-world decisions and consequences rather than information delivery alone.
It also strengthened my ability to:
Build complex Storyline interactions
Design performance-based simulations
Integrate visual feedback systems
Create immersive learner experiences using advanced Storyline tools and AI-enhanced workflows
Throughout the project, I also explored how AI-assisted workflows can accelerate the design and development process by rapidly generating visual concepts, UI ideas, graphic assets, and prototype iterations that could then be refined and customized to support the instructional goals and learner experience. Most importantly, the project highlighted how interactive simulations can help learners build confidence before applying skills in real-world environments.