Sketches, wireframes, and ideas for web.
During the past three weeks, I’ve been researching what makes Netflix, Netflix in terms of UI, and how to work language learning into it. From looking at several third-party sources and studying the UI I learned a lot but also stumbled upon several problems.
I had the idea to first imply the three buttons at the side and making the subtitles into a block minimizing the movie screen. While I was at it I took the time to play around with the setting as well, making a square with rectangle cutouts for me to easily rearrange them into something that would eventually work.
I thought it was a clever idea at first with the three icons but realized quite quickly that it’s very awkward and would take up a lot of space, ruining the UI and make a whole new one, which wasn’t my original idea since I wanted to keep the Netflix elements as original as possible. I took in mind what Daniel had told me in class before the Easter break to study the UI of what I’m working with, to make it look better. I looked into what makes the Netflix UI, what the characteristics were, and how to imply my idea into it and make it look like it’s still Netflix.
It took a long time and effort to finally grasp what I had to do to make it work and the minute I realized what to do, after running countless ideas back and forth, I began sketching out my ideas and how to work with them. The realization I had was that I can minimize the UI to only two buttons that are the most important ones; The favourite and the repeat button. The rest of the functions I originally had planned to add could be worked in, in many different ways, so I added a settings wheel in the top right corner since it’s empty and would make certain features more accessible for the user. Like edit subtitles, phone mode could be turned off and on there, as well as the game mode I had in mind to add. I decided to move the language changer to the subtitle and audio feature they have, just to add an extra line of languages there for the second row of subtitles, to make it easy and understandable as an avid Netflix user were to change the languages.
The reason why the Favourite and repeat buttons are the two more important features is because of the most important steps in terms of language learning. One of them being the repetition, out of many features that I have in plan, all of them being relevant to succeed in learning a new language. The favourite button to save and later repeat and/or look more into to learn new phrases or words.
In terms of languages that have different characters, I did research and it seems like there always is a variant with Latin characters, like Romaji for Japanese and Pinyin for Chinese. I wanted to include the language with different characters in the smaller text above in case people are still learning the characters and for them to understand. For example, I know a few words and phrases in Japanese, and their Latin alphabet makes sense to me as a person that grew up with the Latin alphabet making it easier for me to learn that way and seeing the Japanese Kanji characters below the Latin words I know in Japanese. Because it’s the same word, just in a different format.
When I was happy with my ideas and how to solve the problem with the UI I decided to do a wireframe/flowchart to explain my ideas in images, making it easier for me to understand myself and guide myself in the next step which would be making the digital illustrations of it.
These images will speak for themselves as I’ve taken notes on them explaining each and every function I had in mind.
On this page, I worked a little bit more being inspired by Duolingo’s UI and well as googles popup ad quiz that appears now and then to implement a quiz, which is like a game mode much like what Duolingo have in their app but with the subtitles of the show, not letting you continue until you’ve answered it correctly. You have to clear each and every one of the popup quiz in the episode to continue watching it, like a reward.
To activate the extension it would be like how you would connect any other account, you would go into settings and look for the “extension” tab, that I came up with to add a Duolingo account. You would also have to toggle it on to properly activate it, being connected to only your Netflix profile and no one else’s you’d possibly share it with.
Sketches, Wireframes, and ideas for phone/TV-mode
One of the more challenging parts of my project was to design a whole new phone UI that would also work as a remote. I was lost at first trying to come up with a good design, running ideas through my head using the program web-based program Balsamiq to create prototypes with the web UI I had in mind.
This was a very very early idea before I even began removing buttons to make it as optimal as possible, removing clutter.
I began to write down what would make more sense for a phone to have, trying to narrow down buttons from what I already had on the screen to make it as good as possible for the user.
I began doing sketches in a position that would be the easiest if the phone were to lay down. But the challenge was to make it work when it was in an upright position.
I also did two mockups using my own phone’s dimensions and putting the piece of paper with the sketches into the phone case to try it out and see if it made sense. Would the buttons be the right size, does it take up too much or too little space, etc.
I got extremely inspired by the apple remote and how the UI looked with a clean design. I tried to implement that with my design to see how it looked. I felt that I was going in the right direction with this, but after feedback and reconsideration, it was scrapped.
Sketches with the said idea, being inspired by the Apple iPhone remote.
More sketching explaining ideas. After reconsideration, I decided to scrap the laying down design as well because it feels very unlikely that anyone would hold their phone that way while using it as a remote.
For the Tv, which wouldn’t be too far away from the web design, just without the UI. I was asked and decided to make a TV mockup out of paper to experiment what size the subtitles would be with two lines of subtitles as well as the favorite and repeat icon, to make sure the size would be doable and not take too much space when you would be watching on a tv. I decided to make a 50″ mockup since I did some research about what the most common tv size was, and 50″ was one of them. The strips were 26,3″ in width and 2″ in length. I didn’t attach the strips with anything sticky that would potentially damage the paper tv, but with blu tack. I re-arranged the cutout subtitles a lot as well with the cutout shapes I did for the favourite/save button as well as the repeat button.
Me and my roommate decided to add some graphic on the tv, and the two symbols were added as well.
I had a lot of fun experimenting with the mockup tv I made out of paper and cardboard to get an idea of how large the subtitles would have to be without disrupting the view of the show or the movie. It helped me a lot with making size-based decisions for the subtitles.
Research resources:
These are the research I looked into while doing my sketching, helping me to process my ideas and come up with more solutions.
https://www.rypeapp.com/blog/8-essential-keys-to-learning-another-language
https://www.interaction-design.org/literature/topics/aesthetics
https://www.interaction-design.org/literature/article/5-stages-in-the-design-thinking-process
https://www.pcmag.com/how-to/how-to-choose-the-right-tv-screen-size
https://www.youtube.com/watch?v=nx1tOOc_3fU&t