Morgan Best Designs

Rive Lightning Simulator

This project is a fun & interactive way to explore how storms form by adjusting key environmental factors.

Tools: Rive, Adobe Illustrator

ROLE

UX Design, Graphic Design, (Partner Project)

Rachel Sisson

New Media Design 25'

Rachel Sisson

New Media Design 25'

Rachel Sisson

New Media Design 25'

TIMELINE

August - October 2024

SKILLS

Rive Node-Based Prototyping,User Research, UX/UI Design

Project Overview

This Lightning Simulator is an interactive, cartoon-styled experience that teaches users about lightning formation. By adjusting environmental factors like moisture, terrain, and temperature, users can create storm conditions and trigger lightning strikes, making learning both engaging and fun.

THE OVERARCHING GOAL

Make learning about weather and lightning formation more engaging and less intimidating. By combining UI design, animation, and interactive elements, this project transforms complex scientific concepts into an intuitive, hands-on experience. Users can explore environmental factors that influence lightning, fostering curiosity and deeper understanding through play.

Research

MOISTURE LEVELS

Higher humidity fuels cloud formation and storms, creating ideal conditions for lightning.

CHARGE SEPARATION

Colliding ice and water particles create electrical charges, leading to lightning strikes.

TERRAIN

Elevated areas and tall structures increase the likelihood of lightning strikes.

DISTANCE

The farther you are from a lightning strike, the longer it takes for thunder to reach you.

Visual Designs

DESIGN GOALS

INTERACTIVE LEARNING

Use engaging visuals and hands-on controls to make complex weather concepts intuitive and fun.

SEAMLESS UI & ANIMATION

Blend motion design with a clean, user-friendly interface for an immersive experience.

SCIENTIFIC ACCURACY

Present key lightning formation factors in a simplified yet educational way.

FINDING INSPIRATION

We aimed to create an engaging and educational experience by blending animation and UI. The background features a flat 2D style, while the storm effects appear more 3D, adding contrast and depth. The UI follows a clean, Apple-inspired aesthetic to keep interactions intuitive and user-friendly, allowing the dynamic weather elements to stand out.

THE ITERATIVE PROCESS

Our iterative process was crucial for refining functionality first, ensuring interactions worked effectively in this new software. Once that was established, we focused on polishing the visual design and animations for a cohesive experience.

Early Concepts: We started with a control panel-style UI to establish core interactions while familiarizing ourselves with Rive.

UI & Interaction Design: Initial designs were complex, but we refined them into a clean, intuitive interface inspired by Apple’s simplicity.

Final Adjustments: We fine-tuned animations, interactions, and visuals to create a seamless experience that balances education and engagement.

Final Designs

TAKEAWAYS

This project strengthened my passion for UI and animation, showing how motion enhances learning. Rive challenged me to develop new skills, and strong teamwork helped create a polished final product.

NEXT STEPS

I'd like to refine interactions by gathering user feedback to identify areas for improvement and enhance usability. Additionally, I would reevaluate the visual style to ensure it aligns with the overall educational goals of the project while creating a more immersive experience.

BY MORGAN BEST