Moon Landing - Web Design
Educational web design using cinematic animations provides children with a more engaging and fun way of learning.
Tools
Figma, Adobe Photoshop, Illustrator
Timeline
Sep – Oct 2023
Role
Product Design & Art Director: Interface design, sketching, wireframing, prototyping, art direction, interaction design, animation
Overview
The History of Moon Landing is an educational web design centered around the historic event of the Moon Landing in 1969. Tailored for children interested in both space science and history, it was a solo project.
The Problem
Most children find it difficult to engage with long paragraphs of text when learning about historical events because they are usually long and dense.
How Might We
make the history of the Moon Landing more accessible and engaging for children?
{Solution}
01
Add interactive elements to keep content fun and engaging
{Solution}
02
{Solution}
03
Simplify the text, only keeping the most important message
Cinematic animation for better storytelling
Competitive Analysis
I researched some competitors' websites to find inspiration. What I took away were:
1. Using graphics as the primary method of communication is an effective way to capture children's attention.
2. Integrating interactive games enhances the learning experience.
National Air and Space Museum
Strengths:
• Clean layout
• Good use of images
Weaknesses:
• No interactive elements
NASA Kids' Club
Strengths:
• Appealing graphics
• Interactive games
Weaknesses:
• Too much infomation
National Geographic Kids
Strengths:
• Appealing images
• Clean Layout
• Interactive games
Weaknesses:
• N/A
Initial Design
Wireframe
Lo-fi Prototype
Wireframe
Initially, I designed the website as one page with long scroll and text-heavy paragraphs. However, I soon realized the main challenge: children find engaging with long paragraphs of text difficult when learning about historical events. So, I iterated and pivoted my design to version 2 (on the right.)
Final Design
Hi-fi Prototype
After recognizing the limitations of my initial design, I made several iterations. I aimed to create a highly engaging and fun website, so I simplified the long scroll into separate screens. Additionally, I added interactive elements and cinematic animations to enhance the user experience and storytelling.
Reflection
This was my first solo UI/UX design project. I learned that it's crucial to understand the users first – who they are, what problem we're solving, and why. With countless ways to solve the problem, finding the one best solution for our users is something we, as designers, need to prioritize.
