Leonardo da vinci /
creative education design awards

The Genius of Leonardo da Vinci's an immersive experience that provides education, arts, and music with an elegant, mysterious feeling and credible content. The journey is intended to keep the audience focused on Leonardo's most extraordinary works by using interaction design and sound effects to let the audience unconsciously sink into the timeline experience and gain Leonardo da Vinci's understanding and impact on modern development.


Six Weeks
Adobe XD, After Effects, Illustrator

UX/UI Design
Visual Design + Branding
Research, User Testing
Low/High Prototype
Audio Design
Website / Tablet


Muse Creative Awards


Website design for Education

Muse Creative Awards


Art & Design

Indigo Design Awards


Interactive Design

Indigo Design Awards


UX, Interface & Navigation

Indigo Design Awards


Website Design


The purpose is to introduce the greatest innovator during Renaissance for everyone.
Leonardo da Vinci, as we know, was the epitome of the Renaissance man. His innovative inventions weren’t to be realized for centuries, but his creation is ahead of his time.
The most well-known painting - Mona Lisa, is also a mysterious painting, so I use this painting as a foundation to create this project.


(Example from Wikipedia - A reliable public source)

Over 1/3 of users say there is Too much Reading when the audience grabs some general information online. 

At countless articles on reliable sources, users typically give up reading after reading 7 minutes. It turns out that Users lost their focus on reading and move to the images, which is visual memory. The visual short-term memory can store in our brain even if users see less than ONE second.  


A Better Leonardo Perception

Build an interaction with Leonardo da Vinci's timeline website that combines the Visual images with Audio background music, using Moving Frame (Interaction Design) to keep the audience's attention.

Users quickly have a vision of Leonardo da Vinci's most significant innovation.

For kids, teenager, family who can learn a general knowledge from Leonardo da Vinci


Process ->

Quantitive and Qualitative Research

Use survey to collective quantitative research I learn what users want and need

one-on-one interviews qualitative research I know why they want and need.


Creating personas that help to Understand  users' Pain Points and Goals. Meet Margaret Atkin - Project Manager


Empathy Map

Focus on what users' want and what users want to know, feel and say and do with Leonardo da Vinci's platform. Is there any value when users see the information? How to let them remember general information without any distractions.

Empathy Map

Key Solution Moments

The key moments to move on to the next steps. Here are 3 key moments I decide to make a change.

How Might We...

create a site with a mysterious, delightful user experience and offer reliable information and a timeline style that helps audience concentrate and grab Leonardo da Vinci's general knowledge and also able to share it on social media with their friends?


Build elements from Mona Lisa

Using Mona Lisa as the foundation of my project. Grab all the color palettes from the painting, and extend the color to each element in Navigation, Heading, Title, Content, Shape, Icons, and Buttons.

Mona Lisa's painting.

Typeface discovered in 1592

Known as the most noticeable representative of the French Renaissance style of the 16th century and one of the critical fonts of typography worldwide, the Garamond typeface is easily recognized for its elegant forms and excellent readability. EB Garamond represents a revival of Garamond style and relies heavily on the letterforms discovered in 1592 in the Renaissance, in an Egenolff–Berner specimen, hence its name.

Visual Design: Font and Colors

Leonardo walks towards you (Background Music)

Listen to at least 100 music and pick this one as my final music.
The background music contains a slow but mysterious feeling to make the audience feel like Leonardo is walking towards you. Please enjoy the vibes.

Sketches to Low-fidelity Wireframes

Early iterations from sketches to low-fidelity wireframes. From the initial outlines of the user experience in Visual focus, I ideated various approaches to tackle each point of the user flow. I explored these ideas through wireframes which I built upon for the final delivered products.

High-fidelity Wireframes

Set the goal to the users. To ensure that Leonardo da Vinci product was staying reliable and true to resolving core user problems and not relying on arbitrary decision making, I outlined a few main goals as I approached the hi-fidelity iterations.
Visual thinkers for the products: Paintings, Time, Greatest innovation, and also the details information.

(Left )Round 1 ; (Right) Round 2

Main Findings 1 & 2

1. Even the audience prefers to see the large paintings, but when the paintings cover around 50% of the screen, they say it is too big, and it does not look stunning or bring any feeling to them.
2. One of the testing users is a graphic designer who suggested to leave space for each number in font, which can bring a gorgeous feeling to the audience.

Key Iterations

1. Even the audience prefers to see the large paintings, but when the paintings cover around 50% of the screen, they say it is too big, and it does not look stunning or bring any feeling to them.
2. One of the testing users is a graphic designer who suggested to leave space for each number in font, which can bring a gorgeous feeling to the audience.

Key Iterations: Menu, Landing page, Timeline page

Interaction Design

I design the interactions starting with the Visual Thinkers based on the research, the audience, the target audience, and the potential audience. The audience are readers only, readers who are looking for the story behind the painting, or readers who want to learn general Leonardo da Vinci's information. Create rough sketches, use the key path scenarios and see if the audience groupings work with the scenarios, and then use those frameworks to transfer to digital prototypes.

01. Moving Frame:
Page to page

02. Lantern-slide :
Image changes

03. Gradually Menu:
Invent by year

04. Basic one click:
Changed any pages


Final Design - Immersive Experience

Instead of using paragraphs and images as content, I create a Moving Frame. When the audience finishes exploring per page, the audiences follow the moving frame and understand Leonardo da Vinci's innovation, and the moving frame will not lose their interest.

I hope that this immersive experience will inspire others to create innovative solutions that improve the way we learn.

Users can use on Tablet and Desktop.


A website provides an immersive user experience in learning and educating with trustable information by using reliable information, background music, and visual images to help the audience gain the general innovations from Leonardo da Vinci for users from 15 to 55 years old.


I am honored to receive a Creative Website Design Award for Leonardo da Vinci project aimed at enhancing the learning experience for people through interactive websites. This project was a labor of love, and I am thrilled that it has been recognized in this way. I believe that the power of technology and design can be leveraged to make education more engaging, accessible, and effective. I am grateful for the opportunity to contribute to this field and I hope that this award will inspire others to continue pushing the boundaries of what is possible in the realm of digital learning and to create even more innovative solutions that benefit for kids, teenage, and adults.


I am always obsessed with talented people, and Leonardo da Vinci is always a genius legend from the 1500s. When I create the user interface, I want to present an elegant feeling with reliable information to the audience. I design at least 80 frames and tried different color palettes from his paintings and drawings.
In this project, I practice and learn to focus on the graphic design for the user interface and how the interaction grabs the audience's attention.
Moreover, I Get into Interaction Design during g the research, think, and create during the interaction design process. 👍🏻

Keywords for this project: 
Education, Interaction Design, Website Design, User Experience, User Interface, User Researches, Visual Design, Immersive Experience

DocuPal AI
Enterprise, SaaS, AI-ML

IoT, Dashboard, Visulazation

Dog Art, AI-ML

Redesign, Mobile App