NID Graduate Project Document: Making Bindass a Multiplatform Entertainment Destination by Vartika Mishra

COPYRIGHT © 2018-2019 Student document publication meant for private circulation only. All Rights Reserved. Master of Design, Graphic Design, 2015 National Institute of Design, Ahmedabad, India. No part of this document will be reproduced or transmitted in any form by any means including photocopying, xerography, photography and videography recording without prior written permission from the publisher Vartika Mishra and National Institute of Design. All Illustration & photographs in this document are copyright © 2018-2019 of the author, or respective people/organization wherever mentioned. Written & Designed by VARTIKA MISHRA vartika_m@nid.edu vartikamishra1812@gmail.com Edited by Dr. Tridha Gajjar Processed at National Institute of Design, Paldi Ahmedabad – 380007 Gujarat, India Printed digitally in Ahmedabad, India April, 2018 The document is set in Avenir Next designed by Adrian Frutiger in collaboration with Monotype Type Director Akira Kobayashi and Fugaz one, font by latinotype.

ORIGINALITY STATEMENT I hereby declare that this submission is my own work and it contains no full or substantial copy of previously published material, or it does not even contain substantial proportions of material which have been accepted for the award of any other degree or final graduation of any other educational institution, except where due acknowledgement is made in this graduation project. Moreover I also declare that none of the concepts are borrowed or copied without due acknowledgement. I further declare that the intellectual content of this graduation project is the product of my own work, except to the extent that assistance from others in the projectâ&#x20AC;&#x2122;s design and concept on or in style, presentation and linguistic expression is acknowledged. This graduation project (or part of it) was not and will not be submitted as assessed work in any other academic course. Student Name in Full:

______________________________________________

Signature:

______________________________________________

Date:

______________________________________________

COPYRIGHT STATEMENT I hereby grant the National Institute of Design the right to archive and to make available my graduation project/thesis/dissertation in whole or in part in the Instituteâ&#x20AC;&#x2122;s Knowledge Management Centre in all forms of media, now or hereafter known, subject to the provisions of the Copyright Act. I have either used no substantial portions of copyright material in my document or I have obtained permission to use copyright material. Student Name in Full:

______________________________________________

Signature:

______________________________________________

Date:

______________________________________________

be honest. play fair.

Making Bindass a Multi-Platform Entertainment Destination

acknowledgement During the tenure of this project there were many people whose direct or indirect help has helped me go through this project. First and foremost I would like to thank National Institute of design for the wonderful learning opportunities it has provided me over the period of 2 years. I want to express my deepest gratitude to my guide Dr. Tridha Gajjar for her guidance and support during the project. Fractal Ink Design Studio (FIDS) is a wonderful place to learn and grow with so many creative minds around you. The extremely lively environment and awesome architecture helped me in so many ways. Always willing to share her skills, knowledge and expertise in the

field, Siddhi Veera my project lead at FIDS is the best mentor one can ever have. Along with being very supportive through out the project she encouraged new ideas. Since it was my first industry experience she helped me gain confidence by letting me communicate directly to the clients. She always gave credits for my inputs during the whole project. Her enthusiasm and positive attitude towards her work made me embrace the path I had chosen. I would also like to thank Amit Rajapurkar my project creative lead, for letting me work on numerous projects which gave me a better understanding of User Interface. His patience level was outstanding since he always cleared my doubts even during heavy workload. His guidance through out the project helped me understand the

digital platform in a better way. I am thankful to the design team, Mansi Ghuwalewala and Sagar Medsare for being an important part of the project and helping me wherever possible. Special thanks to Tanay Kumar, Priyanka Aggarwal, Geeta Suthar and Hemant Suthar for being such awesome bosses and an inspiration. I would like to extend my sincere gratitude to all the faculty members at NID for teaching me design. I would not forget to remember the entire batch of M.Des 2015-16 for their timely support till the completion of my project work. A heartfelt thanks to my family and friends who have made me what I am today. Page 3

Graduation Project

preface As a part of NID curriculum, all final year students are required to undertake a degree project which is a full scale design project in the industry. The diploma project, which is expected to be a 4-6 months duration, is a complete demonstration of independent client service by the student, and is expected to generate a professional design assignment with application and implementation capabilities. It exposes the student to a real life situation of working in the industry and helps one to understand the constraints and limitations of an organisation. It involves understanding the strength, Page 4

infrastructure of the organisation, analyse it and give an appropriate solution within the given extent and time constraint. It also helps to understand the role of a designer in a multi-disciplinary team; which includes communicating ones ideas and pitching the concept to those in charge. The degree project helps students to realise their strength and weakness before entering into the professional world of design. I completed my degree project for time duration of 4 months from August 2017 to December 2017 at Fractal Ink Design Studio, Mumbai.

Making Bindass a Multi-Platform Entertainment Destination

synopsis Making Bindass a Multi-Platform Entertainment Destination Bindass is a Hindi entertainment channel in India targeted at Indian youth. Since mobile platform is extensively used these days, Disney wants to make Bindass TV a multi-platform entertainment destination.

environments. This helped us in defining our personas and context scenarios. We defined our three personas and their journeys which helped us in figuring out what features they might need.

The project involved qualitative research of Bindass in which our main concerns were to define the project scope, interview users and analyse competitors. The research started with Disneyâ&#x20AC;&#x2122;s presentation on what is Bindass. Then we conducted a stakeholder workshop where we asked questions to Disney. After the workshop we did competitor analysis. Knowing all the competitors, we started with user research which involved interviewing people using a questionnaire.

After finding functional needs, user mental models and design imperatives, we derived object relationships, conceptual groupings, navigation sequencing and flow. This involved card sorting and coming up with an information architecture. The information architecture helped us to make the wireframes.

The research led to modelling which was finding patterns in user behaviors, attitudes, aptitudes, goals and

The final stage was about creating a visual language for the designed experience by making mood boards, icons and setting a style. Therefore all the screens were made and the applications were developed along with various rounds of user testing, feedbacks and changes. Page 5

research

About Bindass Stakeholder Workshop Google Analytics Technical Details Bindass Content List Competitor Analysis User Research

contents 1

introduction

National Institue of Design Graphic Design at NID Guide About Me Sponsor Client Design Proposal

analysis

Interview Analysis Personas Journeys

conceptualization Suggested Features Final Feature List

structuring

Card Sorting Information Architecture I Wireframes I Information Architecture II Wireframes II

visualization

Moodboard Brand Logo and Colours Design Directions

user interface (android) Material Design Guidelines Fonts Icons Other Screens App Development New Brand Colours Final Designs App Icon App Launch

131

155

user testing

217

Developed App User Feedback

other devices

227

learnings

238 242

Human Interface Guidelines Designs iPad Designs Tab Designs

references

introduction introduction This section outlines the background for the content of the project and the context in which it was undertaken. It also briefly explains the timeline and design process.

Graduation Project

National Institute of Design, Ahmedabad

Page 10

Making Bindass a Multi-Platform Entertainment Destination

national institute of design The National Institute of Design (NID) is an autonomous body under the Department of Industrial Policy and Promotion, Ministry of Commerce and Industry. NID is recognised by the Department of Scientific and Industrial Research under Ministry of Science and Technology, government of India, as a scientific and industrial design research organisation. NID offers professional education programmes at Bachelors and Masters level with five faculty streams and 20 diverse design domains. NID has established exchange programmes and ongoing pedagogic relationships with more than 55 overseas institutions. NID has also been playing a significant role

in promoting design. Having entered the 6th decade of design excellence, NID has been active as an autonomous institute under the aegis of the Department of Industrial Policy & Promotion,Ministry of Commerce & Industry, Government of India; in education,applied research, service and advanced training in five faculty streams,Industrial Design, Communication Design, Textile, Apparel & Lifestyle Design, IT Integrated (Experiential) Design and Interdisciplinary Design Studies. NID offers a wide spectrum of design domains while encouraging transdisciplinary design projects. NID is a unique institution with many problem-solving capabilities, depths of intellect and a time-tested creative educational culture in promoting

design competencies and setting standards of design education. The rigorous development of the designer’s skills and knowledge through a process of ‘hands on-minds on’ is what makes the difference. The overall structure of NID’s programme is a combination of theory, skills, design projects and field experiences supported by cutting edge design studios, skill & innovation labs and the Knowledge Management Centre. Sponsored design projects are brought into the classroom to provide professional experience. Interdisciplinary design studies in Science and Liberal Arts widen the students’ horizons and increase general awareness of contemporary issues. Page 11

Graduation Project

Graphic Design, M.Des 2015-16

Page 12

Making Bindass a Multi-Platform Entertainment Destination

graphic design at NID There has been a dramatic change in the way a graphic designer works. The rapid changes in the way communication is happening in recent context of technological advancement has made thorough understanding of graphic design much more important than ever before. The Graphic Design programme at NID prepares students to take on all new context challenges and technological advancements in the field of Visual Communication and specially in Graphic Design domain. Paradoxically, traditional skills have become more necessary than before. Quality and creative solutions contextual to the userâ&#x20AC;&#x2122;s needs are still a basic human input. The fundamental importance of

creating a visual vocabulary through drawing, the development of aesthetic judgment, values of form, proportion, image and word have become an integral part of learning graphic design at NID. Students in graphic design are encouraged to work on a variety of projects, majoring in the selected subdomain of graphic design. The areas covered include typography & type design, publication design, image making, illustration, photography, packaging, print design, corporate identity, branding, information & communication systems in digital domain as well as analogues medium. Students, on successful completion of the programme acquire the competencies

to find placements with leading graphic design firms working in the area of branding, publication, communication design and design for Digital medium. Some of them also start their own design enterprise. A graphic design student, in addition to a thorough grounding in design abilities and theoretical aspects, undertakes the study of the cultural and historical context in which designers need to function, as well as of the social and ethical factors that influence design decisions. The ultimate aim is to stimulate the development of independent critical judgment, sound research skills, the ability to think creatively and practice design as a professional. Page 13

Graduation Project

Dr. Tridha Gajjar Associate Senior Faculty Programme Lead, Graphic Design Faculty in Communication Design

project guide “design is an expression of creativity. experiment it, explore it, organise it and share it with the world with moral responsibility.”

Dr. Tridha Gajjar is an Associate Senior Faculty, Programme Lead and Graphic Design Faculty in Communication Design. Tridha has always been inclined towards and passionate about academics and design teaching. She did her MFA in Applied Arts, with specialisation in Visualization in 1995 and a PhD in Applied Arts on the topic: Origin and Development of Printing in Context of Advertising in 2001 from Banaras Hindu University (BHU), Varanasi. A recipient of both junior (JRF) and senior (SRF) research fellowships from the University Grants Commission (UGC). Tridha joined NID in 2004 as a Faculty

Page 14

Trainee and later, in 2006, as Associate Faculty in the Graphic Design discipline. She is invited to be part of the juries at the Faculty of Visual Arts, BHU, as Foreign examiner at Department of Integrated Design, University of Moratuwa, Sri Lanka, as expert member for selection of faculty member at IIT Hyderabad and member for task force committee for finalizing syllabus for B. Tech and M. Tech at Indian Institute of Packaging, Mumbai. She has been invited as guest speaker to National Conference on Consumer Packaging 2014, and as guest speaker in World Packaging Congress 2015. Received ‘Distinguished Alumnus Award’ at the International BHU Alumni Meet 2015. She is actively involved in teaching at B.Des

as well as M.Des levels across various disciplines. Tridha teaches Fundamentals of Colour; Composition; and Theory of Visual Perception at foundation level. In discipline level she teaches courses based on Visual Thinking; symbols, metaphors and meaning making; Visual Perception; Packaging Design; Print Production, and guides students through their B.Des and M.Des projects. Over the years, she has developed keen interest in the area of Packaging Design. Tridha affirms—Design is an expression of creativity. Experiment it, explore it, organise it and share it with the world with moral responsibility.

Making Bindass a Multi-Platform Entertainment Destination

about me

I am a post graduate student of Graphic Design at the National Institute of Design, Ahmedabad. I strive to bring structure, clarity and simplicity into this world full of complex information. Although my interests lies in calligraphy, illustrations and I have done several branding projects as a graphic designer, I found UI/UX design naturally appealing. I dabbled in it, and undertook self-learning during the last semester in NID before I decided I wanted structure and mentorship to improve my work and my ways of thinking and seeing. I found Fractal Ink Design Studio and intuitively knew that it was right for me for my graduation project.

Vartika Mishra Graphic Design, M.Des 2015-16

Page 15

Graduation Project

Fractal Ink Design Studio, Mumbai

Page 16

Making Bindass a Multi-Platform Entertainment Destination

sponsor “people don’t work here, people love to work here and that is what makes the difference.”

Fractal Ink Design Studio (FIDS) is a digital design agency with a dream of making a dent in the universe. They are defined by their emphasis on understanding their client’s business and the user’s objectives. More than vendors, they are strategic partners to their clients and help them meet their business goals. Going beyond platforms, geographies and technologies, they strive to create meaningful experiences for users. Their work spans diverse streams from BFSI to entertainment, and from interfaces to devices. They are key partners to leading global consulting firms and work alongside them to help businesses adapt to the connected age. They seek to spread delight through all they do and for all they touch, and to have a good time through it all. Fractal Ink has a special talent. As a studio, it’s efforts are concentrated towards “what if” rather than “what is”. This has made FIDS stay ahead of the curve from their

competition. The design thinking abilities are deeply embedded into human centric processes, which allows FIDS to predict effectively and prepare itself to ride the waves of change. India is a mobile First Nation. For most, in this part of the world, mobile is the first encounter with modern tech. This has made user experience prominent in the eyes of businesses, as their want has grown to reach out to the deeply embedded geographies and cultures with their tools and innovations. Fractal ink has been evangelising UX processes, as the foundation of any digital journey since its inception. This constant endeavour has today made them strong in their approach towards design of digital products. Today FIDS has an empowered team, which is ready to take on challenges of the new world where interface will merely be an invisible layer of interaction. Intelligent and intuitive

objects around us will be brought to life and user experience, yet again, will attain a whole new meaning. This is the new movement (termed as “Internet of things”) where interfaces will manifest itself in various shapes, sizes and forms. Fractal Ink is yet again ready with its team, tools and knowledge to rule this domain and help businesses realise the future. One of the most inspirational place ever possible on earth, Fractal Ink is a dream fulfilled into a reality. Along with great ambience and a very nice work culture, FIDS has good client interactions and exposure for a beginner. The top level management is hands on, fun loving and smart. I learnt things from scratch and the level of understanding and challenges were amazing. Fractal Ink has a great team of people with high energy and always willing to share work. People don’t work here, people love to work here and that is what makes the difference. Page 17

Graduation Project

Page 18

Making Bindass a Multi-Platform Entertainment Destination

client

The Walt Disney Company started its India operations in July 2004 with its head office located in Mumbai and has significantly expanded its footprint in the country since then. Today the company is one of the leading film studios and film distributors in India; one of the largest TV networks with eight popular channels targeting kids, youth and families; a leading player in the digital, interactive and games segment and the largest licensor in the consumer products space. Building around core brands like Disney, Marvel, UTV, bindass, hungama, indiagames and Star Wars the

organization is dedicated to developing and distributing the best in branded entertainment for Indian consumers across all age groups through films, television, digital and consumer products. The Disney Team was smart, kind and open to ideas. They clearly communicated their expectations of the project. They were very responsive and we had several meetings with them in which they made sure the whole disney team was present to give feedbacks and suggestions. Every meeting ended with better understanding which made this project successful. Page 19

Graduation Project

proposal Introduction Disney (India) has an entertainment channel Bindass TV which is targeted at Indian youth. It aims at speaking for the youth of India, and dispel popular misconceptions about their attitude towards responsibilities. They need a supporting application to the existing Bindass ecosystem which will showcase their realistic shows, original soundtracks, synergy between the character and the user, suggestions and responses between the user and the character, live conversations with the cast Page 20

on the show and finally the ecosystem around the shows which comprises of relatable stories, evoking emotions. Being totally aware that the success of the content will define the success of the application, they want their app to elevate their brand as it will involve social interactivity, consist of all the exclusive content and therefore be a single structured platform for everything, be it shows, music, promos, sneak peaks or teasers for free. Objective Making Bindass a multi-platform

entertainment destination. Scope of work The Scope of work includes User Research, Stakeholder Interviews, Competitive Analysis, Trend Analysis, Persona Development, Persona Journey, Storyboarding, Conceptualisation (Features), Information Architecture, Wireframes (Android Mobile), User Testing, Mood Board, Wireframes (iOS Mobile, Android Tab and iOS Tab), Design Direction, App Assets Design, Interface (Android Mobile, iOS Mobile, Android Tab and iOS Tab) and UI Style Guide.

Making Bindass a Multi-Platform Entertainment Destination

stage I 6 weeks Plan Research Modelling

stage II

4 weeks Context Scenarios Requirements Elements Framework

stage III 4 weeks Moodboards Visual Designs Interactions

stage IV

4 weeks Development Design Modifications

20TH DEC 2017

20TH AUG 2017

timeline

Page 21

Graduation Project

the team

Siddhi Veera

Page 22

Amit Rajapurkar

Mansi Ghuwalewala

research research

This section involved qualitative research focusing on primary and secondary research through brand research, stakeholder interviews, competitor analysis and user interviews.

about bindass Bindass, the leading homegrown youth entertainment brand in India that mirrors the lives and aspirations of Young India, is a hindi entertainment channel. Understanding the pulse of Indiaâ&#x20AC;&#x2122;s largest demographic, bindass is their friend and reflects the dynamic lives and realities of the world they live in. Reaching over 60% of Indian youth, bindass offers a unique blend of storytelling which celebrates the abundant freedom and choices of young adults with a promise of free-spirited zesty time. The channel is home to some of the best known youth oriented shows as Yeh Hai Aashiqui, bindass NAACH, Kota Toppers along with old favorites in their new avataars such as Emotional Atyachaar.

Making Bindass a Multi-Platform Entertainment Destination

Bindass: Fearless, fun, free spirited, self assured, energetic, positive, confident New age story telling for the millenials: friendships, dreams, romance, aspirations, freedom, social, explore, fashion Going wherever young people are: facebook, youtube Garnering the love of millions: 70 million viewers watch bindass TV monthly, 13 Million youth watch Bindass TV monthly

Vibrant communities engaging conversations: Digital exclusives, Web series, GIFs, V-Blogs, Sneak-Peak, Microcontent, Live-Interactivity, FB Live, 41 million monthly reach, 3 lakhs monthly conversations Every relevant social media: Instagram (135k fans 18k monthly engagemnet) twitter (284k fans 4k monthly engagement) snapchat(144k fans)

Reflected in the popularity of the web series: Girl in the city (23.8mn views, 3lakh engagement), the trip (20.5mn views, 3.4 lakh engagement) Bindass difference: High valued and quality content Streaming services for smartphone users The proposition:1st time on mobile operator network, Orignal youth oriented content, No.1 youth channel in india Page 27

Graduation Project

stakeholder workshop Brand personality: Young, Fresh, friendly, Dynamic and Aspirational. Tone of voice: Common Speak, Tongue and Cheek, Real, Hinglish. Definition of success: To be the best storytelling brand for Indian millennial, Talk to the viewers, Open communication, Success of the content will define the success of the app, People, Partnerships, Alliances, Elevate the brand, Pride of associations What describes Bindaas: Informal, Big, Surprising, Outspoken, Page 28

Modern, Inexpensive, Both masculine and feminine, Flexible, Young, Charming USP: Realistic Shows, Original soundtrack, Synergy between the character and the user, The life beyond the show, Suggestions and responses between the user and the character, Ecosystem around the show, Live conversation with the cast on the show, One to one with the characters of the show, Relatable stories, Evoking an emotion Competitors: TVF, Alt Balaji, Hotstar, Voot, Liv, MTV India, Google Play Movies (optional), Add Global - MTV EMA

Making Bindass a Multi-Platform Entertainment Destination

vision for â&#x20AC;&#x153;best of bindaasâ&#x20AC;? a multi-platform youth entertainment destination

Industry benchmarks globally: Not really as other players like AIB, Scoop Whoop are way behind in terms of views for content as compared to Bindass Business objective from the user and organization point of view: Create a destination of Youth content with eventual goals of monetisation Why are people coming to bindaas (features & exclusives): Exclusive content, aspiration, premiers,

One platform for everything, Catalogue content, structured, categorization, Recommendation and personalization, Preference based content - meta tagging , Some Music Content, Social mapping: who is watching, Catalogued content, Notification to the user Interstitials, promos, sneak-peaks, teasers, Social interactivity, Support app to the existing, Bindaas ecosystem system Announcements, Downloads / offline phase 2, No content is paid - Ad free module when subscribed

Pain points: The real concern areas are gathering viewer info/trends so as to re-target them with future content plans, Same content for now on both Youtube & The new app, Discoverabilty of content on various platforms, No personalization, No notifications for new content Campaign: Download the Bindaas App Digital based to drive downloads TV will also feature as a comm. medium Page 29

Graduation Project

google analytics Most searched keywords yeh hai aashiqui, bindass, bindass.com, yeh hai aashiqui season 4, yeh hai aashiqui Where are the drop-offs happening? Mostly its second level pages like yeh hai aashiqui and girl in the city details page. What features are users using the most? Video consumption as there is nothing much on site What devices are people using? Google Android : 58% Microsoft Windows : 18% Apple iOS : 13% Views 80% Mobile phone, 15% Computer, Page 30

3.3% Tablet, 1.3% TV What time is the traffic at its peak and what time is it least? Traffic is almost even, few occasions its peaks at 12-1 am How many subscribed users are there currently? On facebook: 8 milion, on YT: 1 million, on twitter: 3 lacs, website: 1 lac uniques What is the percentage of users subscribing before consuming content? On YT unsubscribe views is 86% What category of the content is being consumed most?

Making Bindass a Multi-Platform Entertainment Destination

Time spent per visit

Page Views

less than 1 minute

36,493

15.70%

16,102

39.50%

13,763

26.50%

1-5 minutes

72,018

31.10%

14,385

35.30%

12,788

24.60%

10-30 minutes

34,240

14.80%

4,600

11.30%

3,763

7.30%

5-10 minutes

25,322

10.90%

3,364

8.30%

3,069

5.90%

30-60 minutes

16,673

7.20%

1,430

3.50%

1,155

2.20%

Time spent by users browsing (exploring) on the app without consuming any content

Visits

Unique Visits

Yeh Hai Aashiqui is the most viewed over lifetime. Girl in the city 2 doing best for us at the moment Does duration (length of video, etc.) of the content impact user decision? Yes, it varies as per the platform, viewing on Facebook and YouTube each have a different pattern. So far we have a healthy rate of viewing on our shows on Youtube as compared to FB. Yes, it varies as per the platform, viewing on Facebook and YouTube each have a different pattern. On

YT irrespective of the content duration the avg watch time is mostly 7-8 minutes. Are users clicking on the cross-selling content? Like, similar, recommended? On YT yes mostly comes from suggested videos, search and ads What is the shortest journey user is taking to consume content? On Website: clicking on the thumbnail on home page and watching the episode directly. Page 31

Graduation Project

technical details Nativity on platforms App will be native for both ios & android Base design sizes to be worked on for Android & iOS? (We would suggest designing 1080x1920 (xxhdpi) as this is easily adaptable on iOS & Android, and will help fasten the pace of the project.) 1080*1920 is fine, We would be needing PSD’s also Assets (icons – eg: play, pause, menu, etc.) required in what format? SVG,PNG ( 512*512 ) The assets will be shared in SVG format, so it will be scalable Page 32

across all sizes. 3rd party player integration – how is this going to impact on design? It will be a plain player with play, pause, full screen, seek bar , basic player control color can be changed but not the placement. Simple player skinning is acceptable Fonts – Are we using native fonts (iOS – SF UI, Android – Roboto)? We can, most fonts are supported that do not have DRM. ( Some fonts may produce extra padding on device )

Making Bindass a Multi-Platform Entertainment Destination

bindass content list Emotional Atyachar 5 Seasons, 100+ Episodes Loyalty will be put to the test with every episode weaving together elements of unpredictable scenarios. Yeh Hai Aashiqui 4 Seasons, 80+ Episodes Featuring unique love stories, Yeh Hai Aashiqui is a show centered on the theme of â&#x20AC;&#x2DC;love against all oddsâ&#x20AC;&#x2122;. Kota Topper 1 Season, 14 Episodes A sitcom set against the backdrop of the high-pressure world of competitive engineering exams, the series follows the misadventures of six fren-emies. Life Lafde aur Bandiya 1 Season, 13 Episodes A sitcom where three college friends from

Delhi are tired of being made fun of and want to become popular while going through some hilarious and memorable events. Tu con main Con 1 Season, 24 Episodes It is a fun filled series of an unusual pair of lovable cons who do the wrong thing, but for all the right reasons. Beg Borrow Steal 10 Seasons, 100+ Episodes Beg, Borrow or Steal but the task needs to be done! Love by chance 1 Season, 36 Episodes Here comes bindass Love By Chance A quirky romantic comedy which will showcase true stories of people who have found love through serendipity. Page 33

Graduation Project

Zindagi Wins 1 Season, 12 Episodes Dr.Aaliyaâ&#x20AC;&#x2122;s Dil ka Magic ya Dr.Malvikaâ&#x20AC;&#x2122;s Medicine ka logic, Zindagi Wins, always. Pyaar Ka The End 1 Season, 15 Episodes The Show highlights how situations where emotions and anxieties of the youth lead them astray and they end up committing acts that they later repent. Halla Bol 2 Seasons, 31 Episodes Halla Bol is a show that represents the inner power of every girl, encouraging her to be fearless and fight back. Page 34

Sun yaar Try Maar 1 Season, 13 Episodes A series for those who are in love & need an extra push to take a chance in their love stories. Bindass Nach 1 Season, 12 Episodes Journey of 3 members of a dance troup, their trials and trubulation. Girl In the City 2 Seasons, 26 Episodes Girl in the City is the story of 21-year-old Meera Sehgal, who moves to Mumbai from Dehradun, for an internship in a fashion house to live her dream of

working in the fashion industry. The Trip 1 Season, 12 Episodes Bonding with old friends and making new ones, breaking of hearts and mending of a few, many old sparks and some new romances, a new experience at every turn and memories for life; this trip has been quite a journey. Date Trap 20+ Episodes On Date Trap, you get the once-in-alifetime chance to send your friend on the worst date ever.

Making Bindass a Multi-Platform Entertainment Destination

competitor analysis To help solve usability problems To understand where the product or service stands in the market To inform the design process To know the strengths and weaknesses of the competition To have reliable evidence when making product changes To focus efforts in a target market Through researching the competition, we gained insights from the data we collected and made informed UX design decisions. The competitor analysis also allowed us to find out the gaps in the market. Page 35

Graduation Project

Page 36

Making Bindass a Multi-Platform Entertainment Destination

benchmarking parameters Messaging Focus A study of how different organisations have highlighted certain content more than others Navigation Experience Content Flow UI Discoverability

Page 37

Graduation Project

Navigation Content Flow User Interface Experience Discoverability

Excellent

Page 38

Good

Average

Bad

Making Bindass a Multi-Platform Entertainment Destination

key takeaways After going through all the competitor apps we determined the strengths and weaknesses of the competitors within video streaming entertainment sector, strategies that might provide Bindass with a distinct advantage, the barriers that could be developed in order to prevent competition from entering itâ&#x20AC;&#x2122;s market, and any weaknesses that can be exploited within the product development cycle.

Page 39

Graduation Project

Alt Balaji Key Takeaways Upfront, clear and simple categorisation of content, Large and clear poster creates a visual appeal, Every episode creates a playlist with the subsequent ones

Page 40

Making Bindass a Multi-Platform Entertainment Destination

TVF Play Key Takeaways Onboarding promotes their bestseller shows with apt statistics, Voice search + popular search available

Page 41

Graduation Project

Hotstar Key Takeaways Upfront, clear and simple categorisation of content, Continue watching & related content available, Minimalistic interface

Page 42

Making Bindass a Multi-Platform Entertainment Destination

MTV India Key Takeaways Chat & Social select are good add-ons, Blogs & Buzz (news) related to the show add brand recall

Page 43

Graduation Project

Voot Key Takeaways Colours used in a way to invoke brand recall, Social sharing, Profile creation and rating system creates engagement

Page 44

Making Bindass a Multi-Platform Entertainment Destination

Sony Liv Key Takeaways Live section is a good add-on

Page 45

Graduation Project

user research Information we were interested in learning from users includes: The context of how the App fits into their lives or workflow: when, why, and how the App will be used Domain knowledge from a user perspective: What do users need to know to use the App? Current tasks and activities: both those the current App is required to accomplish and those it doesnâ&#x20AC;&#x2122;t support Goals and motivations: for using their App Mental model: how users think about their jobs and activities, as well as what expectations users have about the App Problems and frustrations: with current way of watching the Bindass content Page 46

Making Bindass a Multi-Platform Entertainment Destination

questionnaire Ice Breaker Questions Tell us little bit about yourself. What do you do? Where are you from? (City, town) Where do you work? How long you have been working? Professional & personal goals? What is a typical day like? How do you start your day? How do you generally commute? What do you do during this period of time? Tell us about your family No. of members

Age Profession No. of children / dependents Do you keep in touch with your friends regularly and how? Do you have common interests? Like what? What social platforms are you active on? (Whatsapp, facebook, etc) In your leisure time/weekends, what do you do? What activities do you take up for recreation? Page 47

Graduation Project

Device Awareness How many devices do you use? What kind? (Desktop, Mobiles, Tablets, etc.) How long have you used them? Which cell phone are you using right now? What are the factors that influence your buying decision?(cost, brand, size, ram Page 48

speed, screen size, clarity, camera, utility, etc.) Select the top 3 activities you do on your mobile phone apart from calling SMS, Internet surfing, Entertainment (Music, Movies, Games), Online Shopping Chatting, Others (Mail, Calendar, Alarms) Photographs

Making Bindass a Multi-Platform Entertainment Destination

Internet awareness Who is your network provider and which internet plan do you use? (Check if its 2G, 3G, 4G) How does internet fit into your day to day life? What do you use it for? Understand participantâ&#x20AC;&#x2122;s ecosystem When do you use internet? Roughly, how much time in a day? What time of the day do you normally consume internet the most? On what devices do you use it? Mobile/Tablet, Desktop/Laptop Smart TV, Others?

Do you have a dongle or router? How much internet do you use, in terms of pack size per month (GB) Figure out WiFi and Mobile Internet usage pattern How is the internet connectivity in your area? (mobile and wi-fi) Do you buy any data packs? For how much, why? Are they value for money? What kind of content do you consume on these data packs? Understand if participant is aware of data usage- Cost & Value conciousness Page 49

Graduation Project

General App related awareness How many apps have you downloaded on your phone? How many of them are paid? Which of them do you use Regularly Infrequently Don’t use at all To understand if cost plays a role in his download pattern. And the frequency of usage. Which category can you group these apps into: Category 1: Must Have Nice to Have Casual Category 2: Utility Entertainment Social Understand a user’s priority and preferences. How do you discover new apps? To understand their source. Could be explorers or simply word of mouth discovery. Do you have multiple apps in the same category? If yes, for what category? Page 50

(Chat, music, etc.) Do you test similar category apps? To check if the user double checks the app’s authenticity.

Have they proved value for money? Who recommends you these apps? To understand user’s comfort level in buying virtual products

What factors do you consider while downloading an app? From where do you download them? (Key influencers – People, size, Advertising, Rating/Reviews, any others) To understand if the user is looking for his particular need while downloading a specific app

Do you indulge in in-app purchases? Would you like it if the in-app purchases were combined with monthly phone bills? To understand user’s stickiness to an app.

When you download a new app, what appeals to you the most? (Design, interactiveness, utility, features, content, etc?) To understand user’s need priority. Would you prefer any other language besides English when it comes to using an app? To understand user’s preferred language of using an app Do you recommend apps to friends and family? Why? Importance of influence Do you purchase apps online?

Any thoughts on advertisements that appear in these apps? Do you click on these advertisements? Have they ever motivated you to buy something? If yes, when and what? User’s perception on advertisements. Check for influences from inner circle and their willingness to act on it. How much advertising per hour is acceptable in an application? none at all 1 minute 2 minutes 3 minutes 4 minutes 5 or more minutes When do you uninstall an app? (Why and How often) Drop off patterns.

Making Bindass a Multi-Platform Entertainment Destination

Entertainment App related questions Which entertainment apps are you aware of? Which of these have you downloaded? And why? How did you get to know about these apps? Awareness and to understand How many apps user actually uses regularly Which of these are you using? Why are you using these apps? (Positive / negative features) How often do you use? (Daily, Weekly) Which of these do you use more often? Why? Roughly, for how much time do you use these app, in a day? To understand the appâ&#x20AC;&#x2122;s retention value.

What excites you while using these apps? Content, Design, Utility, Convenience, Experience (intuitive navigation) To understand what the user focuses on when using an app When something goes wrong in an app, how do you address it? Troubleshooting pattern Do you indulge in free content from Torrents and other such websites? Dependency on and accessibility of freely available content. Have you uninstalled any entertainment app? If yes, why? Drop off pattern

Page 51

Graduation Project

Video content app related questions What kind of content do you like to watch? Understand users interest in different types of shows When do you normally watch shows? What time? To understand video consumption pattern of user Do you generally watch shows alone or with company? On a typical day, how many hours do you spend on watching shows? User’s daily need for shows Which platforms do you use to watch shows? Understand the use of different platforms by the user and watching pattern.

Page 52

for video content? Understand participant’s preferred language of watching shows What is your first source of discovering new show? Friends, Ads, Social Media Discovery pattern What activities do you do related to video content on social platforms? (Share reviews, Follow pages, join groups, etc.) Do you recommend video content to friends and family? Social activeness of a user, when it comes to shows.

On a typical day, how likely are you to use a video streaming website/app? Users dependency on a video streaming source

Do you download or stream video content online? From where? What is the frequency (of the above answer)? To understand user consumption of video online and offline. May depend on various factors: Internet connectivity Space constraints

What language preferences do you have

How much would you be willing to pay

for a video streaming service per month? (in Rs.) A rough idea on the amount the user is willing to spend Do you have multiple apps for video content? If yes which ones. How often do you use each ? Is it a paid app or free trial version? How did you come to know about these apps? Which of these apps you use the most? Why? What do you do with the less frequently used app? To understand user’s preference among multiple apps and why? What are the features that really excite you in these apps? How do you explore new features on an app? User expectations. Would you like to suggest any improvements in these apps. What the user sees as a scope for betterment.

Making Bindass a Multi-Platform Entertainment Destination

Bindass Are you aware of Bindass TV? If yes, how? What are your thoughts on the look and feel of Bindass TV website? Good Average Below Average Where do you stream Bindass shows? and why? Have you faced any specific issues while watching Bindass shows? How did you address it? Page 53

analysis analysis

User-centered design focuses on satisfying the end needs of users. Data, both quantitative and qualitative, informs decision-making for design direction. Understanding what the data is telling impacts information architecture, personas, user flows, interface design, and a variety of other aspects of the user experience.

Graduation Project

interviews

The success of Bindass app is directly related to the content it provides. So, even though the Bindass app users are the youth of India, but in the first phase our target audience included those people who already watch Bindass shows in youtube or any other platform. We interviewed 10 people who watch Bindass shows either on television or youtube. After interviewing people of various ages in between 17-35 we made three personas which represented our target audience.

Page 56

Making Bindass a Multi-Platform Entertainment Destination

personas and their journeys The persona is a powerful, multipurpose design tool that helps overcome several problems that currently plague the development of digital products. Personas helps to: Determine what a product should do and how it should behave. Build consensus and commitment to the design. Measure the designâ&#x20AC;&#x2122;s effectiveness. Contribute to other product-related efforts such as marketing and sales plans. Personas also can resolve three design

issues that arise during product development: The elastic user Self-referential design Edge cases Considered individually, Personas helps to understand user models. But User Journey is used to know how those models behave and feel when they have a certain goal in a specific context. User Journey is a way of visually

comprehending, from beginning to end, the process that a Persona embarks on from the moment a need arises to the second that need is satisfied, using the app. User Journey is also useful for laying out the preliminary foundation of information organization and defining features without taking into account a rigid or hierarchical structure. To make the journeys of Nayana, Nakul and Aadya, we visualized a day in their lives. Page 57

Graduation Project

For our personas we defined their name, age, gender, place, income, goals, technology awareness, social engagement, aspiration etc

Page 58

Making Bindass a Multi-Platform Entertainment Destination

nayana The Cult Buddy 17 years old. | Pune Life-stage: Junior college student Digital comfort: high Data consumption: Wifi only Phone: Oppo Income: Pocket money

“ I don’t want to miss out on anything which my friends do or see.”

key considerations Value drivers Free content consumption, Be a part of conversation with friends, follows recommendations. Current needs Convenient data availability at least cost, Shows she can relate to. Frustrations Busy all through the day, so catches up late in night. No free wifi on the move. Pocket money is never enough. Delights Spending fun time with friends, new interesting high school drama, Easily shareable content.

Apps she uses Instagram, whatsapp, facebook, Saavn, Gaana, Pinterest, Instagram, Hotstar, Youtube, Woot, Liv, Snapchat, Ecommerce apps, Photo- editing apps Hindi, Marathi, English, DIY Videos, Short clips, FB Videos, Music, High school drama shows Page 59

Graduation Project

Journey of Nayana After finishing her college work, Nayana takes a break to do facebook. Page 60

Making Bindass a Multi-Platform Entertainment Destination

Page 61

Graduation Project

Page 62

Making Bindass a Multi-Platform Entertainment Destination

While mapping out the journey of Naina using the App we came across what she thinks and feels while coming to different touch points in her journey. Pain points that might stop the flow or cause her to cease interaction was quickly identified. She created her avatar and found friends who are using Bindass App. She was happy to find that she can choose what she likes and was getting suggestions on what else she could watch. Being a Meera Sehgal fan she could not believe that she could chat with her through an App. Therefore it made her day. Page 63

Graduation Project

nakul Fame Chaser 22 years old. | Chandigarh Life-stage: Part time job, Studying PG Digital comfort: high Data consumption: Wifi only + data Phone: I phone 7+, Samsung S4 Income: Dad’s money

“I want quick and easy fame. People should talk about me.”

Page 64

key considerations Value drivers Something to show off about. Being the Coolest person in the room. Current needs A chance to be seen on the big screen. New trending content. Frustrations Didn’t get selected for Roadies. No girlfriend. Delights Being talked about. Compliments. Talking to a celebrity.

Apps she uses Facebook, Snapchat, Instagram, Youtube, Tinder, Happn, MTV, Gaana, Savn, Games, Hotstar for cricket, Koovs Hindi, Punjabi, Hinglish, Roadies, Splitsvilla, Reality Shows, Emotional Atyachaar, Punjabi music, Downloaded series, Torrent, GOT with subtitles, Hindi Movies

Making Bindass a Multi-Platform Entertainment Destination

Journey of Nakul After a dayâ&#x20AC;&#x2122;s work, Nakul relaxes and watches his favorite TV show in youtube. Page 65

Graduation Project

Page 66

Making Bindass a Multi-Platform Entertainment Destination

Page 67

Graduation Project

While mapping out the journey of Nakul using the App we came across what he thinks and feels while coming to different touch points in his journey. He was happy to rate his favorite show â&#x20AC;&#x2DC;Zabardastâ&#x20AC;&#x2122; and wanted to share the episode in Facebook to show his friends that he has already watched the episode and he likes it. He also found a character in the show who looked like one of his friends. He also shared the screenshot with his friend through the app. He also came across a contest where he could win a chance for an audition. Page 68

Making Bindass a Multi-Platform Entertainment Destination

aadyaa Go-Getter 26 years old. | Mumbai (from Lucknow) Life-stage: Works at Cap Gemini Digital comfort: Moderate Data consumption: Wifi and cellular data Phone: OnePlus 3T Income: Salary (40-50k/month)

â&#x20AC;&#x153;I want to travel and rise in my career.â&#x20AC;?

key considerations Value drivers Connectivity on the move. Quality content that she likes. Details about what she is watching. Current needs Something to help her unwind and expand her horizons. New content. Frustrations Parental pressure for marriage. Not enough time to unwind. Lack of connectivity to content on the move. Delights A good show she can follow. A character she can relate to. A solo trip. Updates.

Apps she uses Facebook, Whatsapp, Pinterest, Instagram, Snapchat, E-commerce apps, Behance, Save, Gaana, Youtube, Shazam, Soundcloud, Hotstar, Amazon prime, Google apps. Hindi, English, Big Boss, TVF, AIB, Kumkum Bhagya, NH 7, Sarabhai v/s Sarabhai 2, Movies, KWK, Younger skewing GEC shows, Yeh Hai Ashiqui, Dance, Shows Roadies Page 69

Graduation Project

Journey of Aadya While going home from office, Aadya watches an episode of ‘Ye hai Aashiqui’ Page 70

Making Bindass a Multi-Platform Entertainment Destination

Page 71

Graduation Project

Page 72

Making Bindass a Multi-Platform Entertainment Destination

While mapping out the journey of Aadyaa using the App we came across what she thinks and feels while coming to different touch points in her journey. Spending a lot of time in travelling Aadyaa likes to watch something during that time. She found watch later feature very important. She also kept notifications on for new episodes for ye hai ashiqui. Identifying and acknowledging touch points, feelings and pain points reveals what the Persona needs/wants/requires at each stage. It also reveals what that Persona needs at each stage. This attention to detail ensures that the target audience will love the app. Page 73

Graduation Project

Page 74

Making Bindass a Multi-Platform Entertainment Destination

conceptualization conceptualization All actions and interactions needed in order for the user to achieve his or her goal were translated into features that the app should have. By following the User Journey, it was possible to detect needs at each stage and the tools required to move on to whatâ&#x20AC;&#x2122;s next.

An infinite number of complimentary features were suggested. Each time a new

feature was suggested to complement the main goal, it was essential that the feature be truly useful, taking into account Persona and context of use. Each feature that was added also represented more time for development and more complexity, which is why it was important to decide carefully, in each case, if it deserves to be included.

Page 75

Graduation Project

Whatâ&#x20AC;&#x2122;s around me While browsing the app can push a tab which shows what people are watching around you Page 76

Making Bindass a Multi-Platform Entertainment Destination

Innovative preference capturing for new user Bindass can make your browsing more personalised with this fun ways of preference capturing Page 77

Graduation Project

% Mapping for return user User can determine how relevant any content is to him based on his preferences and past behaviour Avatars based on popular show characters The users can show thier love for the characters by keeping them as their profile avatars on the app Page 78

Making Bindass a Multi-Platform Entertainment Destination

See whoâ&#x20AC;&#x2122;s on bindaas? User can see who all from her social network is on the channel and see what they like or see Page 79

Graduation Project

Notifications/ reminders User can set a reminder for any of the shows they follow Bindass exclusive rating system User can show their likes & dislikes for any content they watch with the bindaas exclusive rating system Page 80

Making Bindass a Multi-Platform Entertainment Destination

Whats live on tv? Users can follow their favourite tv shows on the go with the live feature Binge on bindass Friends can binge watch their favourite shows with the show marathon feature. They can chat on the go while watching the shows Page 81

Graduation Project

Sneak peaks Sneak peaks after a show, gives a glimpse of the story and attracts the user to the new show Tag & share User can tag and share a show with his friends on bindaas with these predefined tags Connect with the characters Users can chat with a charter or be directed to their social page to have a conversation Page 82

Making Bindass a Multi-Platform Entertainment Destination

other suggested features Offline Mode Downloaded section Advanced search (phonetic, voice search, popular search ) Watch later/Wishlist/Favourites Continue Watching Create a auto-playlist of episodes Meta tagging of content Banner Announcements Polls & voting through the app

Share episode link and invite friends Links to reach their social media pages Ad space News Buzz interviews around the shows/characters for more related content Cast, synopsis and Bio for each show Page 83

Graduation Project

After having a discussion with Disney about the suggested features, we shortlisted few features which will be there when the app will be launched, we also selected few features which will be updated in the app after some time. Few features were rejected which either made the app complicated or were not possible to apply.

Page 84

Making Bindass a Multi-Platform Entertainment Destination

final feature list Must Haves Full screen mode: Video must automatically go into full screen mode on landscape orientation. Seek bar to come up overlaid on video on tap/pause. Select video resolution manually aside from auto selection. Rewind 10 sec button on seek bar. Possibly one to forward 30 sec as well. Offline viewing mode & downloaded video to get deleted after 48 hours of download Watch later / wish-list / favourites. Continue watching Auto-playlist : next video playing in

15 seconds, this will typically be the sequential playlist Recommended videos: this needs to show up as thumbnails below the running video Meta tagging of content: For discovery and recommendations Casting on TV â&#x20AC;&#x201C; Google, Chromecast/ Airplay Running Banner at the Top of the landing page Cast, synopsis and bio for each show (Netflix Style) Dropdown below the video Include show trailer

and invite friends to download the app. They can add their own message which will be posted on their wall. Need to take one time permission from user during download. Also, if the friend already has the app, the link should directly open the video . Compulsory Social Login: FB & Google Notifications/Reminders: User can set a notification alarm for any of the shows they follow Bindass exclusive Rating System : User can show their likes & dislikes for any content they watch with the bindaas exclusive rating system â&#x20AC;&#x201C; e.g., Zabardast, Killer, etc.

FB/whatsapp/twitter share: ability User can choose to share the episode link Page 85

Graduation Project

Good to Have (Phase 2): To be included in wireframing Youtube style swipe down: of video (minimize to the right bottom) to highlight recommended videos. User Comments: linked to their facebook profiles Apple TV Support Polls & Voting through the app This feature will work better when there are more shows in Bindass

Page 86

% Match: User is shown how relevant a particular piece of content is for her based on their usual consumption

behavior Tag & Share: Video Clip or Snapshot of a running show Live Chat with Bindass Stars: Users can chat with a character on the app itself or be directed to their social page to have a conversation â&#x20AC;&#x201C; Facebook Live Downloadables/ Sharables: Gifs, Pics, Micro-Content, Memes â&#x20AC;&#x201C; can be shared by the user on social media pages

Making Bindass a Multi-Platform Entertainment Destination

Rejected Features: There will be no privacy and many people won’t like that their friends can see what they are watching.

See who is on bindaas : User can see their friends on the app also see what they are viewing Avatars based on popular show characters : the users can use avatars of Bindass on their profile pages

Since the app is mainly for the web exclusives Bindass is releasing, Live TV won’t be a necessary feature.

This will make the application unnecessarily complicated

What’s live on tv? : Users can follow their Favourite TV shows on the go with the live / linear feed feature. Social Binge on bindass : Friends can binge watch their favourite shows by creating a chat group within the app

Complicated Feature which might not be used much.

Page 87

Graduation Project

Page 88

Making Bindass a Multi-Platform Entertainment Destination

structuring structuring This section involved structuring and organising features through card sorting and therefore forming the information architecture of the application and finally the wireframes.

Page 89

Graduation Project

card sorting Card sorting is a method used to help design or evaluate the information architecture of a site. In a card sorting session, participants organize topics into categories that make sense to them and they also help label these groups. Benefits of Card Sorting Card sorting helps understand users expectations and understanding of the topic. Knowing how users group information can help: Build the structure for the app Page 90

Decide what to put on the landing page Label categories and navigation We conducted open card sorting where participants were asked to organize features into categories that make sense to them and then name each group they created in a way that they feel accurately describes the content. We also asked them to create hierarchy among the features and put those features on the top which they think are the most useful according to their needs.

Making Bindass a Multi-Platform Entertainment Destination

Some users being aware of other entertainment apps were sorting the cards according to how they use other apps. Page 91

Graduation Project

While some of them were clear about what they want to see in the first page and what features they will rarely use. Page 92

Making Bindass a Multi-Platform Entertainment Destination

After card sorting we started grouping features and naming the groups. Page 93

Graduation Project

This brainstorming session also decided which features were the most important for most of the users. Page 94

Making Bindass a Multi-Platform Entertainment Destination

information architecture I Information architecture is a way of organizing the content and features of the entire app in such a way that they can be found quickly and easily by the user. After few rounds of card sorting we created hierarchy among the features (using the similarities in the card sorting done by few users) and categorized them. Page 95

Graduation Project

Bindass TV App

For you

Shows

Page 96

Notifications

Downloads

Settings

Explore

Making Bindass a Multi-Platform Entertainment Destination

wireframes I A wireframe is a very simplified representation of an individual screen that allows an initial idea of the organization of elements, identifying and separating those which are informative with those that are interactive. We started with making wireframes for android mobile after the information architecture. Page 97

Graduation Project

Browse before search This is an approach inspired from Pinterest which we tried to apply in the explore section of Bindass app. Browsing or scrolling through infinite long lists (containing variety of content) to find something is good for first time users (since they donâ&#x20AC;&#x2122;t know what they are looking for) and also for some users who are too lazy to type something in the search box. This was a new approach for a video streaming app and we were little confused whether this will work within the target group. But Bindass is not only the shows but also other content and activities which the users like as well, thats why making a list of mixed content might keep the users engaged even after they have seen their favorite shows. Page 98

Making Bindass a Multi-Platform Entertainment Destination

The app starts with preference capturing screen which will make the app more personalised. The users also have an option of skipping this step if they are new to Bindass. The app also has compulsory login feature.

What would you like to watch?

Whom do you like from these? App Logo

Girl in the CIty image

Ye hai Ashique image

character image

Welcome to Bindass! The Trip image

Emotional Atyachaar image

character image

Experience everything around your

favourite TV shows for free

Bindass Nach image

character image

None of these

Continue

Page 99

Sponsored

Video Name

View all

Watchlist

Ofﬂine

Behind The Scenes

Clip Name

All Shows

The home page represents a more structured explore tab, where content is arranged according to users needs. Since music and buzz (sneak peaks, news, gifs etc) were the least important content, they were kept in the bottom.

Making Bindass a Multi-Platform Entertainment Destination

12:30

Bindass

When navigating through tabs, the bindass logo will be there in the top. Otherwise it gets replaced by the content heading in other cases.

Bindass Show name - S1 E 1

Show name - S1 E 1

Remove from Watch later Share

Show name

Show Poster

Show name - S2 E12

Show name

Show Poster

Watchlist

There can be 2 types of watchlist content. It can be an episode or a show. These two will be diffrentiated by a play symbol. The show won’t have a play symbol while the episode will have it.

Show Poster

Show name - Promo

Show name

Show Poster

Home

Download

Show Poster

Ofﬂine

All Shows

Home

Watchlist

Ofﬂine

All Shows

The watchlist tab is kept in the landing page since the return user will find it convinient. Page 115

Graduation Project

12:30

Bindass

Bindass Show name - S1 E1

Show name - S1 E1

Remove Queued from Ofﬂine

Queued

Home

Page 116

Watchlist

Show name - Ep3 E1

Downloading…

Show name - S2 E12

357Mb

Expires in 24hrs

Show name - S2 E12

357Mb

Expires in 24hrs

Ofﬂine

All Shows

Home

Watchlist

Ofﬂine

All Shows

The offline tab is also kept upfront as the user will visit it more often because the bindass user downoads videos when connected to wifi and watches it when there is no wifi.

Making Bindass a Multi-Platform Entertainment Destination

12:30

Bindass

Sort by Name Sort by Popularity

Show Name

Girl in the City is story of young girl who is 21 year…

Show Name

Girl in the City is story of young girl who is 21 year…

Home

Watchlist

Show Name

Ofﬂine

All Shows

Show Name

Girl in the City is story of young girl who is 21 year…

Show Name

Girl in the City is story of young girl who is 21 year…

Home

Watchlist

Show Name

Ofﬂine

All Shows

The all shows tab is for finding all shows in one place either sorted by name or sorted by popularity. Page 117

Graduation Project 12:30

12:30

Recommended

12:30

Recommended

Show name

Popular

Show name - S1 E 1

show poster

Show name

Watch Later

show poster

Share Show name

Show name show poster

Show name

show poster

Show name

show poster

Show name

show poster

Show name

show poster Show name

show poster

Show name

show poster

Show name

show poster

Show name

show poster Watchlist

show poster Show name

show poster

Home

Show name

Download

show poster

Show name

show poster Ofﬂine

All Shows

Home

Watchlist

show poster Ofﬂine

All Shows

12:30

Home

Watchlist

Ofﬂine

All Shows

12:30

Continue watching

12:30

Continue watching

Show name S1 E 1

Popular

Show name - S1 E 1

Remove from Continue watching

Show name - S1 E 1 show poster

Share Show name

Download Show name - S2 E 1

Show name S2 E 1

Add to Watch Later

Download

show poster

Show name S3 E 1

Show name S4 E 1

Show name show poster

Show name show poster Show name show poster

Show name show poster Home

Page 118

Watchlist

Ofﬂine

All Shows

Home

Watchlist

Ofﬂine

All Shows

Home

Watchlist

Ofﬂine

All Shows

These are the view all pages of all the sections of home page.

Making Bindass a Multi-Platform Entertainment Destination

The buzz screen will contain sneak peaks, news, behind the scenes etc. It will contain tags of the same. 12:30

12:30

Music

12:30

Music

Buzz

Video name

Show name - S1 E 1

Video name

Show name

Breaking News

Video name

Watchlist

Buzz Behind The Scenes

Clip name

Show name

Breaking News

Clip name

Breaking News

Clip name

Breaking News

Clip name

Video name

Sneak Peek

Clip name

Sneak Peek

Clip name

Video name

Behind The Scenes

Clip name

Behind The Scenes

Clip name

Video name

Sneak Peek

Clip name

Sneak Peek

Clip name

Watch Later

Behind The Scenes

Home

12:30

Ofﬂine

Home

Watchlist

Ofﬂine

Watch Later Share

Download

All Shows

Show name - S1 E 1

All Shows

Home

Watchlist

Download

Ofﬂine

All Shows

Home

Watchlist

Ofﬂine

All Shows

Page 119

Graduation Project

The idea was to share any screenshot of the episode with friends in social media, but it was not possible to develop. Therefore this feature allows user to share gifs (available in the app) in any social media. This will automaticlly include the

shows hashtag and show link through bindass app. To watch the scene a person will have to download the app. The gifs will be made by the disney team for every episode.

12:30

Reaction

Gif

Do you want to share any of these moments

with your friend

Gif

Posting to Facebook

Sharing with Friend

GIF

Girl in the city Gif

Gif

Girl in the City is story of young girl who is 21 year…

Season 2 (10)

Watch moreGif

Exclusives

GIF

Girl in the city Gif

Exclusives

Gif

LATEST EPISODES

GIF

Write something…

Girl in the city

Girl in the City is story of young girl who is 21 year… Season 2 (10)

Season 2 (10)

Watch more

Exclusives

LATEST EPISODES

Girl in the city

Girl infrom the City is story of young girl who is 21 year… #GirlInTheCity Season 2 (10)

Watch moreGif

Season 2 (10) Girl in the city BindassTV App

Exclusives

LATEST EPISODES

Facebook

Moving Forward

RECOMMENDED FOR YOU

Watch Later

GIF

from #GirlInTheCity

Page 120

Season 2 (10)

Watch more Gif

Gif

from #GirlInTheCity

Home

Gif

Girl in the City is story of young girl who is 21 year… Season 2 (10)

LATEST EPISODES

Lights Camera

12:30

Reaction

Do you want to share any of these moments

with your friend

Season 2 (10)

12:30

Ofﬂine

Searc

Lights Camera

view all

RECOMMENDED FOR YOU

All Shows

Home

Moving Forward

Watch Later

Ofﬂine

Searc

Lights Camera

view all

RECOMMENDED FOR YOU

All Shows

Home

Moving Forward

Cancel

Watch Later

Ofﬂine

Searc

Lights Camera

view all

RECOMMENDED FOR YOU

All Shows

Home

Moving Forward

Watch Later

Searc view all

Ofﬂine

All Shows

Making Bindass a Multi-Platform Entertainment Destination

12:30

GIF

Girl in the city

Girl in the City is story of young girl who is 21 year… Season 1 (10)

Season 2 (10)

Watch more

Exclusives

GIF

Girl in the city

Girl in the City is story of young girl who is 21 year… Season 1 (10)

Season 2 (10)

Exclusives

Watch more

LATEST EPISODES

EXTRAS

view all Breaking News

Lights Camera

Searc

Clip Name

RECOMMENDED FOR YOU

view all

TRENDING GIFS

Show Name

Show Name Gif Name

Home

Moving Forward

Show Name

Watchlist

Ofﬂine

All Shows

Home

Watchlist

Sneak Peek

Behind The Scenes

Clip Name

Gif Name

Gif Na

Ofﬂine

All Shows

The detail page will have two sections, watch more and exclusives. The watch more section will contain the next episodes of the playing episode and there will also be recommended for you shows. The exclusives section will contain gifs and extras related to the played show. The gifs can also be shared through this gif section. Page 121

Graduation Project

12:30

The seasons tab will be present just below theGirl show in details. the city Girl in the City is story of young girl who is 21 year… Season 1 (10)

GIF

Girl in the city

Girl in the City is story of young girl who is 21 year… Season 1 (10)

Season 2 (10)

Watch more

Exclusives

GIF

Season 2 (10)

Girl in the city

Girl in the City is story of young girl who is 21 year… Season 1 (10)

Season 2 (10)

Episode name 1

Episode name 2

Episode name 2 Share

Episode name 3

Download Episode name 3

Episode name 4

Episode name 5

Episode name 6

Episode name 7

Episode name 8

Episode name 9

Episode name 10

Watch Later

LATEST EPISODES

Lights Camera

Moving Forward

RECOMMENDED FOR YOU

Show Name

PageHome 122

view all

Show Name

Watchlist

Searc

Ofﬂine

Show Name

All Shows

Watch more

Exclusives

LATEST EPISODES

Watch more

Exclusives

LATEST EPISODES

Making Bindass a Multi-Platform Entertainment Destination

12:30

GIF

Girl in the city

Girl in the City is story of young girl who is 21 year… Season 2 (10)

Season 2 (10)

Watch more

Exclusives

see less

LATEST EPISODES

Lights Camera

Moving Forward

RECOMMENDED FOR YOU

Home

Watchlist

Girl in the city

Girl in the City is story of young girl who is 21 year old.

Mithila Palkar is going to play lead character as Meera who

belongs to Dehradhun and moved to Mumbai to fullﬁll her

dreams. She wants to pursue Fashion designing course from

Mumbai.

Add to watch later Share Rate Download Share Gif

Searc

Season 2 (10)

Watch more

Exclusives

LATEST EPISODES

view all Ofﬂine

All Shows

Lights Camera

Moving Forward

RECOMMENDED FOR YOU

Searc view all

Synopsis ‘see more’ and ‘see less’ option. Page 123

Graduation Project

12:30

Did you like this episode? Your rating will help us improve your

viewing experince

Zabardast Girl in the city

Girl in the City is story of young girl who is 21 year… Season 2 (10)

Watch more

Mast

GIF

Season 2 (10)

Chalega

Extras

Can be better

LATEST EPISODES

Lights Camera

Moving Forward

RECOMMENDED FOR YOU

Girl in the city

Girl in the City is story of young girl who is 21 year… Season 2 (10)

Season 2 (10)

Watch more

Exclusives

LATEST EPISODES

Searc

Lights Camera

view all

RECOMMENDED FOR YOU

Home

Page 124

GIF

zabardast

Watchlist

Moving Forward

Searc view all

Ofﬂine

All Shows

Bindass exclusive rating system. The users can rate the episodes with commonly used words.

Making Bindass a Multi-Platform Entertainment Destination

12:30

Start 48-Hour

Oﬄine Viewing Period Girl in the city When you download the video,

Girl in the Citybe is story of young is 21 it will available for girl thewho next 48 year… hours more

while your device is oﬄine.

Season (10) Season 2 (10) To 2continue watching beyond 48 hours,

please reconnect your

to the internet. Extras Watch more device LATEST EPISODES

Lights Camera

Moving Forward

RECOMMENDED FOR YOU

Searc view all

Pop-up which will come when the user downloads a video for the first time. Page 125

Graduation Project

12:30

â&#x20AC;&#x2DC;Bindass Bolâ&#x20AC;&#x2122; this is a poll which will be asked in the end of the episode to increase user engagement. Here people can see the percentage of people who said yes or no.

00:20

00:10

12:30

Bindass Bol

Bindass Bol Did you like Meera smoking?

Yes

YES

NO 90% people said NO

00:20

Page 126

00:20

Making Bindass a Multi-Platform Entertainment Destination

12:30

00:20

00:10

GIF

Girl in the city

Seasons 2 | Ep2 | 20 mins

Girl in the City is story of young girl who is 21 year…

GIF

Girl in the city

Seasons 2

Girl in the City is story of young girl who is 21 year…

Season 2 (10)

Watch more

Exclusives

Watch more

Exclusives

LATEST EPISODES

Lights Camera

LATEST EPISODES

Moving Forward

RECOMMENDED FOR YOU

Home

Watchlist

Ofﬂine

Searc

Lights Camera

view all

RECOMMENDED FOR YOU

All Shows

Home

Moving Forward

Watch Later

Searc view all

Ofﬂine

All Shows

Screen minimized while using other features of the App. Page 127

Graduation Project

Drawer menu which will contain all the secondry features. Notifications will tell the user if any new episode of his/her favorite show has come out or if his/her favorite star is available for live chat. 12:30

Bindass Logo

12:30

Notiﬁcations

12:30

App Settings

Nayana Bhide The Trip S3 E1 is now live. Notiﬁcations

The Girls just reached Bankok!

Content Name Featured Secondary Details

History

WHAT’S NEW App Settings

Latest

Meera Sehgal is available to chat.

Girl in

the city

The Trip S2 E 12 is

now live.

Girl In The City

3 - Promo

Logout

CONTINUE WATCHING

When

Meera

Smokes

View all

view all

Home Watch Ofﬂine NameAll Shows Episode/Clip NameLaterEpisode/Clip Episode/Clip Name

Page 128

Girl in the City S2 sneak

peek is now live. The Trip S2 E 11 is now

live. The Trip S2 E 11 is now

live.

App Notiﬁcations

Download Quality

Streaming Quality

Data Saver Mode

Making Bindass a Multi-Platform Entertainment Destination

12:30

Streaming Quality Use highesh quality when on Wi-Fi

Auto High 1 hour of video uses about 0.46 GB

of data Medium 1 hour of videos uses about 0.26 GB

of data Low 1 hour of video uses about 0.18 GB

of data

12:30

Download Quality

High 1 hour of video uses about 0.46 GB

of data and storage Medium 1 hour of videos uses about 0.26 GB

of data and storage

Low 1 hour of video uses about 0.18 GB

of data and storage Always Ask Select quality for every download

User can save data by selecting streaming or download quality. The amount of data used will be mentioned with the options. Page 129

Graduation Project

Page 130

Making Bindass a Multi-Platform Entertainment Destination

visualization visualization

Page 131

Graduation Project

mood board

Mood boards are literally boards which people fill with different kinds of things from photos to various textures so that they could visualize ideas and concepts. Unlike wireframes and prototypes, mood boards donâ&#x20AC;&#x2122;t show the detailed picture of a future project. They are meant to transfer the right mood and bring the emotions expected from a product. Mood boards are a good way to experiment with a color palette, fonts, and style as well as plan visual hierarchy of a project. Since we already had a colour palette our mood board was based on those colors. There are several

Page 132

types of mood boards but fractalâ&#x20AC;&#x2122;s process include Reference collection type of mood board where the source of inspiration and method of idea visualization is through quality references. There are plenty resources where one can find inspiring concepts and real projects with a free access. Collection of design works united by a common style or any other feature can easily illustrate an idea for a new project. Moreover, such mood boards help clients effectively comprehend a concept because they can see similar references and imagine what their product will look like.

Making Bindass a Multi-Platform Entertainment Destination

UI trends 2018 Overlapping effects: The overlapping of fonts, graphics and colors cannot only make UI designs more eye-catching and distinctive, but also create a sense of space. Color Gradients: In last few years, rising numbers of designers adopted color gradients in their design works when they were trying to design logos, buttons and backgrounds for mobile app interfaces. Even when choosing a single color, colour gradients can show a rich sense of hierarchy and draw a beautiful picture while combing it with different graphics. Opacity: The same components can have different effects after adjusting their transparency. So, while designing phone app interfaces, setting the opacity of different components is a nice way to work out an excellent design work. Simple curves and geometries: In comparison with a complicated and

changeable UI design style, more and more designers have adopted a simpler and more natural design style in mobile app UI design. For example, in comparison with a phone app interfaces covered with various colors, graphics, buttons, pictures, animations and more complicated elements, a phone interface with simple curves, geometries and buttons could be more effective for people to focus on the major functions and features of a mobile app. Strong color or font contrast for better readability: Strong color or font contrast also help designers work out an excellent UI design to attract user attention. For example, adding fonts in different styles, types, sizes or orders can also deliver a sense of hierarchy and space. And color in different types and styles also create sharp contrasts and make entire designs more colorful and eye-catching. Page 133

Graduation Project

Types of image effects

Dark background, gradient to show hierarchy

Overlaping effects, this can be used with show images.

Using colourful icons with plain UI

Episode selection, Detail Page

Page 134

Gradient in the background.

Making Bindass a Multi-Platform Entertainment Destination

Images with a layer of gradient and strong font contrast

The cards play as a sheet of material that displays an entry point to more detailed data cluster. Cards with bindass gradient

Icon Style

Images inside a shape

Shows inside a card with breaking the grids and the image going out of the card.

Multi coloured Icons

Page 135

Graduation Project

brand logo and colours Since Bindass already has a logo and website, Disney had given us a colour palette which we had to use. It consisted of three gradients. They wanted to use all the three gradients in the app.

Page 136

Making Bindass a Multi-Platform Entertainment Destination

Page 137

Graduation Project

design directions After showing the mood board to Disney, they selected few design styles, gradient used in background, image styles, icons type and Font styles. Since we had to give them three design options, Amit, Sagar and I gave one design direction each. For setting the design style we made the landing page of the app which included icon style, Fonts and images.

Page 138

Making Bindass a Multi-Platform Entertainment Destination

Direction 1

Direction 2

Direction 3

Page 139

Graduation Project

design direction 1 This design direction was given by Amit Rajapurkar. His design consisted of cards which made different sections of the landing page. He used a white background for a cleaner look.

Page 140

Making Bindass a Multi-Platform Entertainment Destination

Screen dimensions: 1080x1920 Font: Muli

Page 141

Graduation Project

design direction 2 This design direction was given by Sagar Medsare. His design consisted of different gradients for different sections. He used a dark background for creating high contrast between the images and background.

Page 142

Making Bindass a Multi-Platform Entertainment Destination

Screen dimensions: 1080x1920 Font: Rubik

Page 143

Graduation Project

design direction 3 This design direction was given by me. My aim was to keep the design as clean and clear as possible. I used gradient overlapping images to differentiate between sections. The icons are inspired from the bindass logo.

Page 144

Making Bindass a Multi-Platform Entertainment Destination

Screen dimensions: 1080x1920 Font: Poppins

Page 145

Graduation Project

Watch Later

All Shows

Offline

Home

icons Add to watch later

Page 146

The icons are inspired from the Bindass logo. I tried to use the round corners of bindass letters and the dots above ‘b’ and ‘d’. For a cleaner look I chose line icons and filled ones were made where icon size was very less. The icons in the main tabs when selected get filled with gradient.

Making Bindass a Multi-Platform Entertainment Destination

POPPINS Light, Regular, Medium, Semibold, Bold

font Poppins is a geometric sans-serif typeface published by Indian Type Foundry in 2014. It was released as open-source and is available for free on Google Fonts. Indian Type Foundry describes Poppins as â&#x20AC;&#x153;an internationalist take on the geometric sans genre.â&#x20AC;? It supports both Latin and Devanagari languages and is available in nine weights with matching italics.

This font has very clean geometric shaping as well as a bold weight that feels like more of a black weight. The bold weight makes for a great heading font and will make almost anything stand out. I chose Poppins because I wanted a clean and modern font with a lot of weights. It is also supports devanagri.

Page 147

Graduation Project

Page 148

Bold 48 pt Tracking: -25

Semibold 36 pt Tracking: -25 Leading: 44pt

Bold 36 pt Tracking: -25

Light 33 pt Tracking: -25 Leading: 39pt

Semibold 30 pt Tracking: -25

Semibold 30 pt Tracking: -25 Leading: 44pt

Bold 48 pt Tracking: -25

Light 30 pt Tracking: -25

Making Bindass a Multi-Platform Entertainment Destination

Drop shadow Blend mode: multiply Opacity: 31% Distance: 5% Size: 16%

Gradient 3 Opacity: 73%

image style The shows/episodes/clips image aspect ratio is 16:9. The image shape is inspired from the â&#x20AC;&#x2DC;bâ&#x20AC;&#x2122; of bindass logo.

Page 149

Graduation Project

After giving three design directions, disney selected the first designâ&#x20AC;&#x2122;s template, font size from the second design and search bar with icons from the third design.

Page 150

Making Bindass a Multi-Platform Entertainment Destination

Main template to be used

Search bar and top icon to be like option 3 Use this font size/ type for titles

Do not use white everywhere for the backgrounds of different sections. Use Bindass colour gradients.

Do not use curved corners Add text below all icons to identify the functionality

Page 151

Graduation Project

After the feedback, I made the changes accordingly. They chose the first design because it had a unique interface which is currently not there in any other video streaming application. The action bar is also very unique and the selected action is highlighting bindass logo. The second design had high contrast in font size which shows bindass as young and energetic. They selected line icons inspired from bindass logo but at the same time they wanted filled icons for the action bar because they felt the line icons will take away the bindass feel of the action bar.

Page 152

Making Bindass a Multi-Platform Entertainment Destination

Page 153

Graduation Project

Page 154

Making Bindass a Multi-Platform Entertainment Destination

user user interface interface :: android android

Page 155

Graduation Project

material design guidelines Material Design includes design best practices, common conventions, and visuals to help build expressive apps that feel at home on any device. As users become familiar with this visual language, they’ll come to expect it. By following this design, one can create apps that offer instant appeal while enhancing usability and improving user engagement and retention. Design principles Surfaces and shadows used as metaphors, UI elements should be individually layered surfaces, stacked on top of or next to each other. Shadows should be used to communicate which surfaces are in front of others, helping focus attention and establish hierarchy. Page 156

Colors should be used boldly to emphasize branding and important UI elements. Be sure to pick a primary and accent color to provide a consistent experience throughout the app. Metrics and keylines should be used to align and size content according to an 8dp baseline grid, for readability and visual consistency. More precise text positioning can use a 4dp grid. Meaningful motion, including animations and transitions, should be used to help guide and focus users while also providing bridging from one screen to the next. Responsive interactions such as basic touch feedback should take the form of surface ripples. Aside from surface ripples, interactive surfaces should also lift

on touch to meet the user’s finger during input, and any changes should radiate from the point of contact System user interface components The system status bar on should be colored to complement the app’s primary color or the current screen’s content. App bar and toolbars should be used to inform and help express branding using color, typography, and product logo (avoid using the launcher icon). Tabs should follow Material Design interactions and styling. They must be horizontally swipeable with no vertical separators between tabs. The navigation drawer should contain only primary navigational elements, and follow the new visual guidelines. It should

Making Bindass a Multi-Platform Entertainment Destination

appear in front of both the app bar and screen contents and underlay the system status bar. Consider using bottom navigation if your app has 3 to 5 top level destinations that require direct access. The shifting bottom navigation pattern is recommended as it provides more visual impact and allows for longer text strings in labels. Be sure to have the bottom navigation bar accessible from most screens, but exclude deep-level detail screens, and allow it to hide as the user scrolls. User interface elements and patterns Theming should be updated to the latest material theme to avoid the app looking dated. Updating system theming is one of

the quickest ways to provide visual polish. Buttons are the most used interactive elements in an app, so updating them to the latest visual design patterns is one of the highest impact changes you can make. Tiles and lists should be used when users are directly comparing items to each other. Use listviews for text-heavy content that user will skim quickly. Use tiles when the content is primarily visual. Cards should be used when there is a mix of content types, where the user is exploring content and not directly comparing images or text strings. While cards make items pop and gives them visual focus, be aware that overusing cards creates unnecessary visual noise.

In-app search should be implemented using inline search in the app bar. If searching for content is the main function of the app, then consider using a persistent search widget app bar. Dividers should only be used when separating major sections of content or providing important distinctions between areas of text. Be wary of having dividers for every item in a simple listview, this creates much visual noise while providing negligible improvements in readability. When designing empty states be sure to communicate to the user the reason for the empty state and include a call to action to address the empty state.

Page 157

Graduation Project

Muli font Muli is a free, open-source sans-serif typeface designed by the prolific Vernon Adams, creator of numerous other opensource fonts available on Google Fonts. Muli is a minimalist Sans Serif. Muli is designed mainly for use as a display font but is useable as a text font too. Muli has been designed to be used freely across the internet by web browsers on desktop computers, laptops and mobile devices.

Page 158

Extralight, Extralight Italic, Light, Light Italic, Regular, Italic, Semibold, Semibold Italic, Bold, Bold Italic, Extrabold, Extrabold Italic, Black, Black Italic

Making Bindass a Multi-Platform Entertainment Destination

Bold, 36pt, Tracking: 600 Black, 80pt Semibold, 36pt

Black, 60pt

Bold, 36pt Black, 72pt

Bold, 42pt, Leading: 48pt Regular, 30pt, Leading: 40pt

Bold, 36pt, Leading: 40pt Bold, 36pt, Tracking: -25 Extrabold, 60pt, Leading: 60pt

Bold, 24pt, Tracking: 50

Page 159

Graduation Project

Page 160

History

Notification

App Setting

Logout

Can be better

Chalega

Zabardast (Selected State)

Mast

About

48 hours

Download

Watch Later

Preference Capturing

Play

Gifs

Delete

Offline

Filter

Rate

Google plus

Facebook

All Shows

Add to watchlist

Back

Add to watchlist

On/Off

Share Gifs

Carousal

Making Bindass a Multi-Platform Entertainment Destination

icons

While making the icons I tried to keep them as simple as possible, and avoid unnecessary complexity since icons must identify simple concepts from the environment in which they will be used. I also kept consistency in icon style by focusing on common elements in the icons. The first thing I considered is definitely the color palette. Using no more than three to four colors from the given colour theme kept the design clean. Many elements were repeated as

repetition helps users to identify icons and associate them with an action. Using white or blank space around icons makes them clear and gives them attention. A crowded space does not allow elements to breathe or express their true selves. Finally the icons must communicate. Their task is to transfer visual information to the user in the simplest way possible. Therefore the icons are still under testing.

Page 161

Graduation Project

Other screens

After finalising all the visual elements I started making all the other screens of the app. The material design guidelines were very helpful as their usage made the app designing process much easier.

Page 162

Making Bindass a Multi-Platform Entertainment Destination

The splash screen is made with Bindass logo along with the main colour gradient. It also shows the icons of the main features of Bindass such as downloads, watch later and all shows.

Black, 42pt, Tracking: -25

Regular, 48pt, Leading: 60pt

Bold, 36pt, Tracking: -25, Leading: 48pt Black, 48pt, Tracking: -25, Leading: 48pt

Page 163

Graduation Project

Preference capturing Screen: Since this screen can have multiple selection, the selected characters/shows will have less opacity so that ones which are not selected can be seen properly.

Bold, 60pt, Tracking: -25, Leading: 72pt

Black, 40pt, Tracking: -25, Leading: 48pt

Page 164

Making Bindass a Multi-Platform Entertainment Destination

Landing page Page 165

Graduation Project

Landing page: When all sections are swiped till the end. Page 166

Making Bindass a Multi-Platform Entertainment Destination

Semibold, 42pt, Leading: 120pt

Bold, 42pt, Leading: 48pt Regular, 30pt, Leading: 40pt #bdbdbd

Watch Later and Offline screens

Page 167

Graduation Project

Black, 72pt, Leading: 48pt Semibold, 36pt, Leading: 48pt

All Shows screen: The logic behind putting the gradient is, the most dominant colour of the image is chosen to decide the gradient. The shows are in a list view and covers the whole screen so that the poster is clearly visible. Page 168

Making Bindass a Multi-Platform Entertainment Destination

Black, 60pt, Leading: 48pt Semibold, 36pt, Leading: 48pt Semibold, 36pt, Leading: 48pt Bold, 36pt, Leading: 60pt, Tracking: -25

Black, 60pt, Leading: 60pt, Tracking: -25 Black, 48pt, Leading: 60pt, Tracking: -25 Show detail Page, Show detail page with season 1 tab open. Page 169

Graduation Project

Show detail Page with synopsis Page 170

Making Bindass a Multi-Platform Entertainment Destination

Bold, 60pt, Leading: 60pt, Tracking: -25 Semibold, 36pt, Leading: 48pt

Rating System: Since the rating system was a little experimental, the icons were made such that the user can easily understand what rate he/she wants to select. Page 171

Graduation Project

Minimized Video and download pop-up

Page 172

Making Bindass a Multi-Platform Entertainment Destination

Reaction sharing screens

Page 173

Graduation Project

Streaming Quality settings

Page 174

Making Bindass a Multi-Platform Entertainment Destination

Bindass Bol: Polls pop up Page 175

Graduation Project

Buzz Screen: Sneak peaks, News Page 176

Making Bindass a Multi-Platform Entertainment Destination

Music Screen: Circle images to differentiate between shows and music, as music videos wont have tags and user might get confused in the history screen.. Page 177

Graduation Project

History Screen Page 178

Making Bindass a Multi-Platform Entertainment Destination

Recommended, Popular and continue watching Page 179

Graduation Project

Recommended, Popular and continue watching Page 180

Making Bindass a Multi-Platform Entertainment Destination

Hamburger Menu, Notifications and More Page 181

Graduation Project

App Settings, Streaming Quality and Download Quality Page 182

Making Bindass a Multi-Platform Entertainment Destination

Search Page 183

Graduation Project

Help, Terms & Condition, About and Privacy Policy

Page 184

Making Bindass a Multi-Platform Entertainment Destination

The app development had started from the wireframing stage and we were constantly getting feedback from the development team of Disney. When the first app apk was shared there were many problems. We shared our feeback to the Disney development team.

Page 185

Graduation Project

This was developed

AD Disclosure pop-up style different

Page 186

Should be like this

Making Bindass a Multi-Platform Entertainment Destination

Images were not properly cropped for preference capturing ( Characters as well as shows ). This required Disney to create images in 1:1 ratio specifically for preference capturing.

Page 187

Graduation Project

There was hardly any difference between selected and unselected images. The opacity of selected image was 50%, which had to be changed to 30%.

Page 188

Making Bindass a Multi-Platform Entertainment Destination

Developed drawer menu

Should be like this

There should be a purple drop shadow behind the profile image and the whole menu should gradually become little transparent below.

Page 189

Graduation Project

This was developed

Should be like this

The settings icon was not according to the design, â&#x20AC;&#x153;select playback qualityâ&#x20AC;? was missing in the settings pop-up and the selection method was different. Page 190

Making Bindass a Multi-Platform Entertainment Destination

This was developed

Should be like this

The typed text should be highlighted

Page 191

Graduation Project

This was developed

Should be like this

Download pop-up

Page 192

Making Bindass a Multi-Platform Entertainment Destination

The text on the green gradient was black whereas according to the design it should have been white. The gradients were not given as designed. There were many spacing issues in the whole app.

Page 193

Graduation Project

Gradient over image was missing (It was not there in all shows page too )

Page 194

Making Bindass a Multi-Platform Entertainment Destination

The show name also had some part of the synopsis.

Page 195

Graduation Project

After our feedback on the developed app, Disney came to this conclusion that the gradients cannot be implemented as per the design. Since this was affecting the appâ&#x20AC;&#x2122;s visuals, they asked us to remove the gradients completely.

Page 196

Making Bindass a Multi-Platform Entertainment Destination No gradient in the background. Just solid colors to be used. Please reduce white space between two sections in design itself. Section headers’ text size should be less than Bindass brand logo size on the top. All play buttons to be converted to purple colour instead of orange. One tone darker than the background. None of the corners for any window/tile/ section to be curved. Just make them in straight rectangular pattern.

Background colour to be white. Continue playing bar color to be same a play button.

Background colour to be same as banner. Title to be changed to ‘Exclusives’

Background colour to be same as banner. No gradient.

There is another section ‘Popular’ in between these two. Use APK shared for reference. Background colour for the same to be white.

Turn this section into same as ‘Recommended;. Background to continue to be white. No banner options required.

Page 197

Graduation Project

This colour to be same as banner(purple). No Gradient

No curves at the corners.

Play Buttons to be converted to purle colour. One tone darker than the background.

Page 198

Making Bindass a Multi-Platform Entertainment Destination

design changes Home screen

Page 199

Graduation Project

Detail Page Page 200

Making Bindass a Multi-Platform Entertainment Destination

new brand colours In the middle of the project after the app was almost developed Disney changed Bindassâ&#x20AC;&#x2122; brand colours. At first they were trying to bring gradient into the brand but since it was not going with the brand and also the developed product was not looking the way it was imagined they changed the colours to 3 flat colours. Only the landing page, detail page and certain minor changes had to be done. Rest everything was the same. Page 201

Graduation Project

final final design design

Page 202

Making Bindass a Multi-Platform Entertainment Destination

Page 203

Graduation Project

Home screen Page 204

Making Bindass a Multi-Platform Entertainment Destination

Detail Page Page 205

Graduation Project

app icon

App icons or product icons are the visual expression of a brandâ&#x20AC;&#x2122;s products, services, and tools. Simple, bold, and friendly, they communicate the core idea and intent of a product. While each product icon is visually distinct, all product icons for a given brand should be unified through concept and execution. I Used these guidelines as a starting point to ensure that the app icon colors and key elements reflect bindassâ&#x20AC;&#x2122; identity. Design approach Product icon design is inspired by the tactile and physical quality of material. Each icon is cut, folded, and lit as paper would be, but represented by simple graphic elements. The quality of the material is sturdy, with clean folds and crisp edges. The matte-like finish interacts with light through subtle highlights and consistent shadows. Product icon grid The product icon grid has been developed to facilitate consistency and establish a clear set of rules for the positioning of graphic elements. This

Page 206

standardization results in a flexible but coherent system.

unify product icons and systemize their placement on the grid.

Keyline shapes Keyline shapes are the foundation of the grid. By using these core shapes as guidelines, you can maintain a consistent visual proportion across related product icons.

Product icon anatomy Product icon anatomy describes the graphic elements that make up a product icon. The consistency of these elements across icons for a given brand is critical in maintaining a shared visual language. Familiarity with these elements makes it easier to understand characteristics of each logo and subtle differences between them. It will also help educate your eye to recognize the underlying structure of logo designs. 1. Finish 2. Material background 3. Material foreground 4. Color 5. Shadow

DP unit grid Android expects product icons to be provided at 48dp, with edges at 1dp. When you create the icon, maintain the 48-unit measure, but scale it to 400% at 192 x 192 dp (the edge becomes 4dp). Any scaling done to the original will scale the image up or down proportionally. By maintaining the unit ratio, you preserve sharp edges and correct alignment when the scale is reduced Geometry Preset standards have been determined for specific keylines: circle, square, rectangle, orthogonals, and diagonals. This small palette of universal and simple elements has been developed to

Shadows For a product icon, the top light from above casts a soft shadow surrounding an element lightly on the top and left. The shadow is slightly heavier below and to the right. This shadow is always contained within the iconâ&#x20AC;&#x2122;s silhouette.

Making Bindass a Multi-Platform Entertainment Destination

Grid

1:1 Unit grid

Keylines

Square; 152x152dp

Circle; 176dp diameter

4:1 Unit grid

Page 207

Graduation Project

Selected Design

Page 208

Making Bindass a Multi-Platform Entertainment Destination

app promotion The app was launched in December 2017. The promotional banner was displayed on every social media page and bindass website.

Page 209

Graduation Project

Bindass app in play store, the app icon in an android phone Page 210

Making Bindass a Multi-Platform Entertainment Destination

Bindass app launch campaign: Bindass website banner Page 211

Graduation Project

Bindass app launch campaign: Bindass twitter page Page 212

Making Bindass a Multi-Platform Entertainment Destination

Bindass app launch campaign: Bindass facebook page Page 213

Graduation Project

Bindass app launch campaign: Bindass facebook page Page 214

Making Bindass a Multi-Platform Entertainment Destination

Page 215

Graduation Project

Page 216

Making Bindass a Multi-Platform Entertainment Destination

user user testing testing

Page 217

Graduation Project

development errors Since an app goes through a lot of stages before becoming a good error free app. There are many issues with the developed design. Some features are not working whereas some visual style are not coded well.

Page 218

Making Bindass a Multi-Platform Entertainment Destination

These are the screenshots of the launched app. There were many problems of spacing between two sections. Many image filters were missing. Some icons were replaced with random icons. Lower case headings were not there in some sections. Play button is not properly visible.

Heading should be lower case

Page 219

Graduation Project

Play icons were changed in some sections.

Images were not properly placed in the rectangle.

Page 220

Making Bindass a Multi-Platform Entertainment Destination

Some texts were not visible because of wrong image filters and also wrong text placement.

Page 221

Graduation Project

Page 222

Making Bindass a Multi-Platform Entertainment Destination

user feedback Testing is one of the crucial phases of the entire app design and development process: it helps to reveal bugs before the app is brought out to actual users. Practice shows that in the majority of cases, users abandon the app if it has functionality problems, no matter how promising, attractive and engaging it seems. Vice versa, even the simplest apps can be effective for commerce, business, advertising, education and other objectives if they work correctly and efficiently, according to target audienceâ&#x20AC;&#x2122;s expectations and solving their problems. In the user testing phase I asked few users to use the app on a daily basis and give feedback about the performance or any problems which they face.

Page 223

Graduation Project

While playing an episode there is no way to know which episode number is being played and in latest episodes section the episode numbers are not mentioned. Therefore it becomes confusing most of the times. After selecting the quality settings from the player screen, it goes away quickly. This creates confusion whether the selected quality was selected or not. The banner images are cropped and showâ&#x20AC;&#x2122;s names are not mentioned.

Page 224

The exclusives section has incomplete clip names. It just mentions behind the scenes for every show without mentioning the name of the show. Continue watching should be in the top. To see continue watching one has to scroll two times. The history screen doesnt store music content or sneak peaks.

Making Bindass a Multi-Platform Entertainment Destination

The download feature doesnâ&#x20AC;&#x2122;t work. The search icon is not recognizable. There is some development issue with episode numbers and all shows tab Search shows options which are not even present in the app Continue watching has an unecessary seperator which is not required visually

Page 225

Graduation Project

Page 226

Making Bindass a Multi-Platform Entertainment Destination

other other devices devices

Page 227

Graduation Project

human interface guidelines Three primary themes differentiate iOS from other platforms:

light and airy, while ensuring that content is paramount.

Clarity: Throughout the system, text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design. Negative space, color, fonts, graphics, and interface elements subtly highlight important content and convey interactivity.

Depth: Distinct visual layers and realistic motion convey hierarchy, impart vitality, and facilitate understanding. Touch and discoverability heighten delight and enable access to functionality and additional content without losing context. Transitions provide a sense of depth as you navigate through content.

Deference: Fluid motion and a crisp, beautiful interface help people understand and interact with content while never competing with it. Content typically fills the entire screen, while translucency and blurring often hint at more. Minimal use of bezels, gradients, and drop shadows keep the interface Page 228

Design Principles To maximize impact and reach, the following principles are to be followed: Aesthetic Integrity Aesthetic integrity represents how well an appâ&#x20AC;&#x2122;s appearance and behavior integrate with its function. For example, an app that helps people perform a serious task can keep them focused by using subtle,

unobtrusive graphics, standard controls, and predictable behaviors. On the other hand, an immersive app, such as a game, can deliver a captivating appearance that promises fun and excitement, while encouraging discovery. Consistency A consistent app implements familiar standards and paradigms by using system-provided interface elements, well-known icons, standard text styles, and uniform terminology. The app incorporates features and behaviors in ways people expect. Direct Manipulation The direct manipulation of onscreen content engages people and facilitates understanding. Users experience direct manipulation when they rotate the

Making Bindass a Multi-Platform Entertainment Destination

device or use gestures to affect onscreen content. Through direct manipulation, they can see the immediate, visible results of their actions. Feedback Feedback acknowledges actions and shows results to keep people informed. The built-in iOS apps provide perceptible feedback in response to every user action. Interactive elements are highlighted briefly when tapped, progress indicators communicate the status of long-running operations, and animation and sound help clarify the results of actions. Metaphors People learn more quickly when an app’s virtual objects and actions are metaphors for familiar experiences—whether rooted in the real or digital world. Metaphors work well in iOS because people physically interact with the screen. They

move views out of the way to expose content beneath. They drag and swipe content. They toggle switches, move sliders, and scroll through picker values. They even flick through pages of books and magazines. User Control Throughout iOS, people—not apps—are in control. An app can suggest a course of action or warn about dangerous consequences, but it’s usually a mistake for the app to take over the decisionmaking. The best apps find the correct balance between enabling users and avoiding unwanted outcomes. An app can make people feel like they’re in control by keeping interactive elements familiar and predictable, confirming destructive actions, and making it easy to cancel operations, even when they’re already underway.

Page 229

Graduation Project

key differences: android & iOS App Icons An app icon is probably the first thing the user will see and where the brand will be more visible. iOS guidelines define a few rules for its icons: they usually follow a flat style and skeuomorphism – the act of representing or imitating real-world elements – stopped being recommended since iOS7. You should also take into account that all iOS icons have the same shape – a square with rounded corners – and they can’t have transparent background. In the end this square shape is the canvas you’ll be working to create an icon. Android, in the same way, proposes the material guidelines for icons, that between other recommendations, suggest a range of colors and the use of paper shadows. These are, of course, just recommendations, and most apps don’t follow these guidelines strictly. The main difference from iOS is that Android Page 230

icons are allowed to have transparent background, so you can basically work with any shape that fits the icon area. The App Bars Referring to the basic elements of a mobile interface sometimes can be confusing. Android and iOS name similar items differently and give the same name to different items. It’s always good to know how each bar is called on each platform, it makes a conversation between designers and developers much clearer. These bars should have consistent styles across the app and follow the platform sizes for a native look and feel. The Grid Even though it’s not common to use a column grid like in the web, sizes, paddings and spaces should be consistent across each platform. Material Design defines a specific grid: 8dp grid

Making Bindass a Multi-Platform Entertainment Destination

for general purposes and a 4dp spacing for icons and types alignment. Meanwhile iOS is not specific about grid, but apps usually use multiples of 4pt and 5pt for sizes and spacings. The Navigation Besides styles, navigation is where huge differences will come up. Some components can be exclusive or more common in one platform and this may change the main navigation structure of an app. iOS uses the tab bar as a main navigation component, while Android can use tabs or a drawer menu. The use of a bottom navigation bar on Android is not very common, but it is part of the Material guidelines, and some apps like Foursquare and Instagram use it. It’s up to us to decide – and test – if our users are ready to use this component. The main actions of a screen, like adding a new item, will usually use a floating button on Android. On iOS they are

usually positioned on the right side of the navigation bar. Another big difference is that Android has the navigation bar, a set of three physical or virtual buttons (back, home and overview), depending on the device. iOS has only the physical home button. This means that Android users can go back anytime, not depending on a back button inside the app. The built in back button will always send the user back in history, even outside the app. On the other hand, iOS users will always need the back button on the interface, otherwise they can get stuck in a screen. Typography Both Android Material and iOS have default fonts that are encouraged to be used. Android uses Roboto as the default typeface and Noto for languages that are not covered by Roboto. Both can be downloaded from Google Fonts. iOS uses San Francisco as the default

font. There are two variants of the font, according to the guidelines, SF UI Text is used for text 19 points or smaller, and SF UI Display for text 20 points or larger. San Francisco font can be download from Apple’s website by members of the Apple Developer Program. Assets and Screen Densities Once the design is done and is ready to be implemented, we’ll need to export the assets, and we’ll also find a few differences between Android and iOS. Android devices are manufactured by many different companies, because of that, we’ll find a lot of different screen sizes and densities. Basically Android will require 1x, 1.5x, 2x, 3x and 4x as you can see in the table below. Meanwhile, on iOS it’s much simpler to work with screen densities: for modern devices, 2x and 3x resolutions will do the job.

Page 231

Graduation Project

iphone

Page 232

Making Bindass a Multi-Platform Entertainment Destination

Page 233

Graduation Project

ipad

Page 234

Making Bindass a Multi-Platform Entertainment Destination

Page 235

Graduation Project

Page 236

Making Bindass a Multi-Platform Entertainment Destination

Page 237

Graduation Project

learnings It was an incredible journey working with Fractal Ink Design Studio, as it was my first experience working in a design studio. From academic point of view it was the biggest learning experience for me. The most engaging factor of working on this project was working with Disney along with working within a team. From taking responsibilities to handling clients, the whole experience was full of ups and downs but was worth it. Working on a live project involved meeting deadlines and there were few days when I had to stay late to finish my work. This project was a great learning experience in the field of user experience and user interface design. I had toyed with UI/UX design in my 3rd project at NID, however I delved much deeper into it only during this project. Many aspects of this field are not understood at the first glance, it is only when you see a designer iterate with around 20 Page 238

options just to decide on the position of a ‘yes’ and ‘no’ button, that you realise it is no cake walk. Having senior designers around me helped me understand the finer details in the design process which I as a college student would have had a tendency to overlook. I have also realised that ‘user study’ is extremely humbling and a good designer should be ready to trash even his/her personal favourites if they do not seem to work for the target audience. There were very few projects I had done in past in which I was not the target audience. I can still spot a lot of things that could have been better in this project. I will hopefully work on them in the near future. But nevertheless it has been a wonderful learning experience for me and I have enjoyed every moment of this journey. My role at fractal included working on UI/ UX, storyboarding for user journeys and illustrations for many other projects.

Making Bindass a Multi-Platform Entertainment Destination

My workspace at FIDS

My lettering printed on FIDS yearly diary

Page 239

Graduation Project

Fractal Ink Design Studio, Mumbai

Page 240

Making Bindass a Multi-Platform Entertainment Destination

FIDS offsite and Diwali 2017

Page 241

Graduation Project

references Websites https://medium.theuxblog.com https://www.smashingmagazine.com https://material.io https://developer.apple.com/design/ https://www.usability.gov https://uxplanet.org http://pinterest.com https://uxmastery.com https://www.behance.net https://dribbble.com https://www.youtube.com https://www.ted.com Books Designing mobile apps: Javier cuello & Jose Vittone About Face: The Essentials of Interaction Design: Alan Cooper, Robert Reimann, David Cronin, Christopher Noessel. Designing Mobile Interfaces: Steven Hoober & Eric Berkman

Page 242

Making Bindass a Multi-Platform Entertainment Destination

This document has been written and designed by Vartika Mishra It has been printed at Siddhi Printech, Ahmedabad. The document has been set in Avenir Next The AvenirÂŽ Next font family was designed by Adrian Frutiger in collaboration with Monotype Type Director Akira Kobayashi. Fugaz one Font by latinotype Fruitiger Designed by Adrian Frutiger.

Page 243

work hard. stay humble.