The Prodigal Son

2024

The Prodigal Son Final Presentation

TOOLS

Figma | HTML & CSS | JS | GSAP | Photoshop | Illustrator

SKILLS

Scrollytelling | Illustration | User Research | Coding | User Testing | UX/UI

BRIEF

An experimental passion project based on the Bible.
How can I use scrollytelling to help young visual learners understand the Bible better?

SOLUTION

Through the use of scrollytelling techniques combined with visual illustrations and text.

Around 40% of college students are visual learners.

USER INSIGHTS

I had a challenge of figuring out what stories users would want visualised, therefore, I conducted interviews and surveys to investigate this.

‐ "The parables are not always fully understood and having illustrations would be helpful"
‐ "The parables are the hardest to decipher""
‐ "The parables are difficult to imagine, so having visual aids would help"
‐ "Reading the parables can be confusing"
‐ "A lot of the parables are metaphorical and need physical diagrams"

User insight quotes about the parables

EXPERIMENT: STORYBOARD

Through creating the website and story, I carefully considered how the illustrations are arranged so that the parables are not misinterpreted or misleading. After some considerable research, it was clear that my original storyboard lacked a variety in compositions. Therefore, refinements were made to incorporate a range of compositions to keep the story engaging and interesting.

storyboard of the prodigal son

EXPERIMENT: VISUAL DIRECTION

Through experimentation and user testing, I simplified the typefaces used and chose typefaces that was used in traditional Bible books to immerse our users as if they are reading the Bible.
The Bible was set in ancient times and in the desert; therefore, the colour palette was chosen to reflect earthy tones that worked harmoniously together.

typography experiments for the prodigal son scenes initial illustrations of the prodigal son scenes

DEVELOPMENT

After the experiments, the next step was refining the project based on the insights and observations. Through some research, I found that coding through GSAP was the most effective way of scrollytelling animations. This project focused primarily on learning skills in scrollytelling and illustrations, but if it were to continue in the future, features would be added such as voiceover audio, summaries of scripture, and progress bars.

showing the definition feature of the prodigal son

Scrollytelling is an interesting and effective technique that can be investigated more to help visual learners read through long pieces of text. It can also be an effective media that can be explored for reading and understanding the Bible . This is showcased through the final project that shows the interaction of scrollytelling and storytelling to convey the parable of the Prodigal Son.

mockup of the prodigal son mockup of the prodigal son