Leonardo da vinci /
creative education design awards

Awards

Inspired

Goals

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.

Research

Process ->

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

‍

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.

‍

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

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?

‍

Ideate

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.

‍

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.

‍

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.

‍

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.

‍

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.

‍

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.

‍

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.

‍

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.

dESIGN

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.

Takeaway