National Geographic
National Geographic
National Geographic
My role in the project
UI/UX/Prototype
About project
A website collecting leads for the 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
Designing the "Watch National Geographic Sharks" website to attract more customers
The website was intended to encourage greater conversion and use of the Disney+ channel. "Do you like sharks? Watch our videos."
The website was intended to encourage greater conversion and use of the Disney+ channel. "Do you like sharks? Watch our videos."
Solution
Solution
![](https://framerusercontent.com/images/bKHZaPfrkmHpfjZsg7DF3tDo4s.png)
Shark animation anchored to "GetDisney" CTA button
Shark animation anchored to "GetDisney" CTA button
I used a swimming shark motif in the form of a 3D parallax animation. Based on the completed "Master NLP" training, I used the so-called anchor. The swimming shark swims and stops at the "Get Disney+" CTA button. I created UI/UX designs as well as a functional, fully working online website in the Dora no-code application.
I used a swimming shark motif in the form of a 3D parallax animation. Based on the completed "Master NLP" training, I used the so-called anchor. The swimming shark swims and stops at the "Get Disney+" CTA button. I created UI/UX designs as well as a functional, fully working online website in the Dora no-code application.
![](https://framerusercontent.com/images/FJPy4l5mQSVC1R0xKm07GtQlAo.png)
1st stage
Creating a project based on Design System and importing a video instead of the website background
Creating a project based on Design System and importing a video instead of the website 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
Import a 3D shark model and create animations
Import a 3D shark model and create animations
The Dora application made it possible to create an attractive parallax animation, a swimming shark that moves towards the button responsible for conversion.
The Dora application made it possible to create an attractive parallax animation, a swimming shark that moves towards the button responsible for conversion.
3rd stage
3rd stage
Implementation of cards with available films on the Disney+ channel
Implementation of cards with available films on the Disney+ channel
The cards are scrollable left and right and show the current offer of movies available in the Disney+ channel.
The cards are scrollable left and right and show the current offer of movies available in the Disney+ channel.
MOVIE CARDS
![](https://framerusercontent.com/images/GIwzXgb2udTPfH1tfK9GVbbjUw.png)
![](https://framerusercontent.com/images/GIwzXgb2udTPfH1tfK9GVbbjUw.png)