Brainly TV App Design
Project Outline
Duration - 2 weeks
UX Methods used - Research, Ideation, rapid prototyping
Tools used - Figma, Paper, Pen, Adobe Illustrator
The Assignment - Follow Brainly brand guidelines and use the brand to develop a Video browsing application. Must include features - A home/browse screen with multiple video categories browsable, A search feature, Search results, Single video information, including: Title, Description, Director, Year, Length, An action to play the video.
The Research
What is BRAINLY?
Brainly is the world's largest peer-to-peer learning community for students, parents, and teachers. Brand perception: simple, educational, intelligent, evokes trust, stability
Brainly Design Language
Quick Competition Analysis- TV app
Analyzing existing design helped me identify good and bad patterns. Features like- Focus state, font size, amount of space allotted to a movie/series, the kind of information displayed on each screen default state, and navigational style. For eg. its easier with Netflix for user to access the navigational bar n the left as compared to Amazon and Hulu, where the user has to press ‘up arrow’ multiple times to get to the top navigation bar.
Ideation
Things to consider
A quick brain-storming on the key points to consider when designing for TV
Quick sketches
Initial sketches exploring efficient navigation, layout for both TV and Mobile. Also redesigning the input keyboard for the search page.
Wireframes
For the wireframes, I went back to illustrator t extract icons from the brainly site. (The wireframes shown are the initial designs, the overall design underwent many iterations)
Final Design
For TV
For Mobile
Check out my interactive prototype for the Brainly App.
Takeaway
I loved working on this assignment, especially because I had never thought about TV interfaces before in depth. Designing for bigger screens is a totally different ball game. Consider the viewing distance, optimal font size, understand the input method (remote in this case), and make searches/ finding content/ interacting with the application easier and more intuitive.
Another aspect of this assignment was to understand the brand (Brainly), their visual language, and translate the brand guideline on a bigger scale. I was also introduced to design systems and how necessary they are in organizing design elements and necessary for collaboration and scaling of products.