INTERACTIVE LEARNING WEBSITE

LightLab

A product photography learning system that makes lighting visual, simple and hands on. Learners explore Key Light, Fill Light, Back Light, Bounce Cards, shadow behavior and placement through short lessons, visual examples and instant feedback.

UX/UI Design Instructional Design E Learning 3 Point Lighting Visual Feedback

PROJECT Photography E Learning

MY ROLE UX/UI and Instructional Design

LEARNERS Design students, artists and makers

LEARNING TIME 15 to 30 minute interactive lesson

01 / PROBLEM

Beginners can see that a product photo looks wrong, but they do not always know why.

This project came from my own experience with design and photography. I would photograph objects and feel like something was off, but I could not always explain the issue. Over time, I realized lighting was usually the reason. Harsh shadows, flat lighting, weak depth and poor separation can make even good work look unfinished.

THE LEARNING TURNING POINT

The lesson needed to show lighting, not just explain it.

Switch between the original teaching approach and the direction that made LightLab more visual and hands on.

INITIAL APPROACH

Explain lighting through information and examples.

The first direction treated lighting like a topic to read about: introduce the tools, explain what they do and then move to the next concept.

LEARNING MODE

READ

Useful information, but not enough interaction to make cause and effect feel obvious.

02 / BIG IDEA

Teach lighting like a studio experience, not a textbook chapter.

See it

Lighting concepts are shown through visual examples instead of long technical explanations.

Try it

Learners interact with lights, shadows and placement decisions inside the lesson.

Fix it

The final challenge asks learners to apply lighting knowledge to improve a product photo.

03 / RESEARCH DIRECTION

The system focuses on the exact moment where creative learners get stuck.

The target learners already care about how their work looks. They may understand basic composition and visual quality, but lighting decisions are harder because the cause and effect is not always obvious.

LIGHTING TOOLS 4

Key Light, Fill Light, Back Light and Bounce Card are introduced as visible decisions.

LEARNING OBJECTIVES 5

Identify, explain, recognize, adjust and apply lighting decisions.

LEARNING TIME 15–30

Minutes for a focused interactive studio lesson.

LEARNING SIGNAL 01

Cause and effect

Learners need to connect each lighting choice with a visible change in the photograph.

04 / LEARNING FINDINGS

Four things shaped how I designed LightLab.

Learners need to see what changes, not only read what a light does.

Shadow behavior becomes clearer through direct visual comparison.

Placement should feel like an action with an immediate result.

Feedback needs to happen close to the learner's decision.

05 / LEARNING MAP

I grouped the learning problems until the structure became clear.

Click a cluster to isolate the notes and see how each theme shaped the learning experience.

LightLab learning board / synthesis

click a cluster

VISIBILITY

Show the result beside the concept.

Make lighting changes easy to compare.

Keep the explanation close to the visual.

Avoid abstract technical language first.

SHADOWS

Harsh shadow needs a visual comparison.

Soft shadow should feel visibly different.

Depth can disappear with too much fill.

Shadow direction helps explain light direction.

PLACEMENT

Direction changes the form.

Distance changes softness.

Back light changes separation.

Bounce changes dark areas without another lamp.

FEEDBACK

Show what changed immediately.

Explain why the fix worked.

Keep feedback short and visual.

Let learners try another option.

FOCUS

Teach lighting first.

Keep modules short.

One decision at a time.

Build confidence before complexity.

06 / PROCESS

The experience moved from explanation to interaction.

01 / UNDERSTAND

Start with the learning problem.

I focused on why beginners can notice a bad product photo but struggle to explain which lighting decision caused it.

07 / LEARNING STRUCTURE

A short path from guessing to understanding.

Instead of adding more screenshots, I kept the structure visible as three simple learning frames.

LightLab Learning Structure / exploration board

click a frame

01 / SEE

Meet the light.

Introduce the lighting tool through a clear visual result.

02 / TRY

Change the setup.

Let learners compare shadow, depth and separation through interaction.

03 / FIX

Apply the decision.

Use a final challenge to choose the best lighting fix for a product photo.

08 / FINAL DESIGN

A calm, visual learning space for tabletop photography.

The final interface uses large type, soft white space, deep blue studio tones and yellow light accents to make the learning experience feel clear and creative.

01 Visual lighting explanations

02 Short focused learning stages

03 Immediate visual feedback

04 Hands on application

09 / LIVE WEBSITE

Explore LightLab as a real interactive learning experience.

The final website lets learners move through the lesson, interact with lighting ideas and apply what they learn instead of only reading about photography.

LightLab Studio · Live Website HTML / CSS / JAVASCRIPT

Light it better. Shoot it better.

Open the live LightLab experience and move through the studio lesson.

Open LightLab Studio ↗

10 / REFLECTION

An e learning system is not just a website with information.

This project helped me understand that it needs structure, interaction and feedback. For a creative skill like photography, learners need to see what changes, test choices and understand why something works. LightLab Studio turned lighting from a confusing technical topic into a guided visual experience.

NEXT PROJECT

Cashback Wallet

→