Case Study | Disney+ | UI Redesign
The third project was different. We had to focus on the visual redesign of an app. I’ll be honest, I was really looking forward having creative freedom. Initially, I wanted to redesign GoTiger, a delivery app for Asian Food based in Berlin. Somehow, though, I ended up with a completely different app: Disney+.
What is Disney+?
Disney+ is the streaming home of Disney, Pixar, Marvel, Star Wars, National Geographic, Star and more. I guess that each of you are familiar with one of these brands and Disney in general - it’s part of our childhood 👋🏼
I have to admit that I almost never watch anything on Disney+, even though they have a great library of series and movies. I’m more team Netflix - and you? 🤔
Visual Reproduction
I have chosen 4 screens:
- Homescreen
- Series Overview: Atlanta
- Profile
- Profile Selection
I reproduced the screens in Figma.
My approach was as follows. I googled if Disney+ had an existing corporate identity which was publicly available for everyone. No such luck 🫠
Then I looked up the font that was being used.
- Font: Avenir (Disney+ uses a slightly modified font).
I then continued creating a layout grid.
I actually only reproduced as in the construction kit, which also worked relatively smoothly. What didn’t work 1:1 was the reproduction of the text, so that it is 100% the same. I would say that I was able to reproduce it by 98%. If you don’t overlay it, you shouldn’t be able to see any differences.
Competitive Analysis - Colors
So now for the exciting part, which I could hardly wait for. Almost there to have my creative freedom 😂
I first got an overview of how the competition designs their apps (colors, screens, etc.):
It is very interesting that all platforms use similar color schemes:
- White
- Gray
- Black
- Accent Colors (based on the brand e.g. Netflix - red, Amazon - blue)
Only Apple, who take a minimalistic approach, have blue in use here?! 🧐
Here you can see my defined style tile:
My color scheme for the visual redesign of Disney+ came very intuitively. I took the colors of the rainbow from the logo. To be exact, I took the color in the middle of the rainbow. I then defined another accent color based on the blue tone, but more along the pastel side. The rest of the blacks & whites were defined so that they are not #FFFFFF or #000000.
Since I designed for iOS, I used Apple’s standard and reduced them in the number of font types: San Francisco Pro Display.
The navigation bar has also been reduced by removing the download button and integrating it into the profile. Whether this is better or worse now is subjective and would have to be evaluated through research.
Heuristic Analysis
Even though the task here is primarily on the visual redesign of an app, I still wanted to be able to explain my design changes. So I made use of heuristic analysis. The method allows us to make approximately objective statements about the usability of a system with little time and effort.
Here is my evaluation:
I have to admit that I could hardly identify any problems. Nevertheless, I don’t find the user experience on Disney+ as good as the competition does. It’s not as smooth somehow. Something is different on Disney+, maybe the choice of animations and the general interface design?!
Visual Redesign
Let’s head over to the visual redesign of Disney+!
I took inspiration from the CDs and movie boxes, as well as movie tickets. I decided to design the interface in such a way that the user has the feeling that he is holding movie tickets in his hand. On the homescreen the user should get the feeling so that he can select CDs or movies boxes (it’s like a jukebox). Once the user has chosen a movie or series, the user basically has a movie in their hand.
Feel free to take a look at the prototype. I think I was able to convey my idea in this design.
Wrap Up!
Oh well 😂.. I have a creative background and I can’t deny that I enjoyed this project. Nevertheless, I still have problems when it comes to decide on a concept and implement them consistently. This project lasted 3 days and on the last day I only had 1 screen readyd towards the end of the project, which I was happy with. Luckily we had a deadline so I just kept going to finish it. But sometimes I have so many ideas floating around in my head.
Still, I ask myself: How can I get away from it to be more effective and efficient in my visual process. What would you guys do?
If you guys have read to the end. I would be super happy if you leave a thumbs up or even give feedback on my design! 🫰🏼
