National Geographic
National Geographic
National Geographic
Role in the project
UI/UX/Development
About the project
Website collecting leads for Disney+ channel
Client
Disney+
![](https://framerusercontent.com/images/VIv5HpuumZRh4bYsOr1h4FDnM.png)
![](https://framerusercontent.com/images/4MSxkFJ1ctHP7L7UKDwRxlkcZ8.png)
![](https://framerusercontent.com/images/VIv5HpuumZRh4bYsOr1h4FDnM.png)
![](https://framerusercontent.com/images/4MSxkFJ1ctHP7L7UKDwRxlkcZ8.png)
![](https://framerusercontent.com/images/VIv5HpuumZRh4bYsOr1h4FDnM.png)
![](https://framerusercontent.com/images/4MSxkFJ1ctHP7L7UKDwRxlkcZ8.png)
Challenge
Challenge
Refreshing the page "Watch National Geographic Sharks" in order to attract more customers
Refreshing the page "Watch National Geographic Sharks" in order to attract more customers
The page was meant to encourage higher conversion and use of the Disney+ channel. "Do you like sharks? Check out our movies".
The page was meant to encourage higher conversion and use of the Disney+ channel. "Do you like sharks? Check out our movies".
Solution
Solution
![](https://framerusercontent.com/images/bKHZaPfrkmHpfjZsg7DF3tDo4s.png)
Shark animation anchored to the CTA button "GetDisney"
Shark animation anchored to the CTA button "GetDisney"
I applied the floating shark motif in the form of a 3D parallax animation. Based on the completed "Master NLP" training, I used the so-called anchor technique. The floating shark swims and stops in the position of the CTA button "Get Disney+. I have created UI/UX designs as well as a fully functional online website in the Dora no-code application.
I applied the floating shark motif in the form of a 3D parallax animation. Based on the completed "Master NLP" training, I used the so-called anchor technique. The floating shark swims and stops in the position of the CTA button "Get Disney+. I have created UI/UX designs as well as a fully functional online website in the Dora no-code application.
![](https://framerusercontent.com/images/FJPy4l5mQSVC1R0xKm07GtQlAo.png)
1 stage
1 stage
Creating a project based on the Design System and importing a video in place of the page background
Creating a project based on the Design System and importing a video in place of the page background
DESIGN SYSTEM
![](https://framerusercontent.com/images/9lJMXQIdfhk9VxeEQAnGohxm3Q.webp)
![](https://framerusercontent.com/images/mzHzJCbokMKlHedV5IYQe4hxQ.png)
![](https://framerusercontent.com/images/mzHzJCbokMKlHedV5IYQe4hxQ.png)
2nd stage
2nd stage
Importing a 3D shark model and creating animation
Importing a 3D shark model and creating animation
The Dora application allowed to create an attractive parallax-type animation, a floating shark heading towards the button responsible for conversion.
The Dora application allowed to create an attractive parallax-type animation, a floating shark heading towards the button responsible for conversion.
3rd stage
3rd stage
Implementation of cards with available movies on the Disney+ channel
Implementation of cards with available movies on the Disney+ channel
Cards are scrollable left and right, showing the current selection of movies available on the Disney+ channel.
Cards are scrollable left and right, showing the current selection of movies available on the Disney+ channel.
DISNEY+ MOVIE CARDS
![](https://framerusercontent.com/images/GIwzXgb2udTPfH1tfK9GVbbjUw.png)
![](https://framerusercontent.com/images/GIwzXgb2udTPfH1tfK9GVbbjUw.png)