Elevating the Search experience of Disney+ Hotstar — Evaluative Design Project
Did you use OTT apps and have you ever faced any difficulties searching for and getting your desired contents?
If yes, then read the article fully, I’ve something for you to make your search experience smooth and flawless on Disney+ Hotstar.
Hi, I’m Naveen, a fellow student at Growthschool; pursuing UX Mastery course under the mentorship of Mr. Anudeep Ayyagari.
(I’ve written this entire case study in a Friendly-conversational manner like dialogue writing between a User and Naveen (Me). If you’re curious to experience the new dialogue reading method of a case study, continue reading the story of my project…)
✅Introduction:
This case study is about the 16 days (later it got extended to 23 days) timebound Sprint project (EVP — Evaluative Design Project) conducted by our mentor Mr. Anudeep Ayyagari held by Growthschool, where hundreds of students were separated into groups and each group were allocated with a separate product (apps) to work on.
Me and my team members were allocated with Disney+ Hotstar and I’ve worked on evaluating and improving the search flow of Disney+ Hotstar.
User: Why did you’ve selected the Search flow in Hotstar to work on?
Naveen:
The reason for selecting the Search flow to work on is, mostly people use the search feature in most of the applications to quickly get their desired results. For that, the search flow should be well optimized to deliver a better user experience. So, that’s the reason I’ve decided to work on and enhance the entire Search flow of Disney+ Hotstar.
User: Ok, but before getting into the story, I need to know some basic info about Hotstar?
Naveen: Sure, Let’s see a quick overview of Disney+ Hotstar:-
“ALL YOUR DREAMS CAN COME TRUE, IF YOU HAVE THE COURAGE TO PURSUE THEM — Walt Disney”
Sajith Sivanandan is the President and Head of Disney+ Hotstar, India; an Indian over-the-top streaming service Disney+ Hotstar is popular among customers because of its affordability. People prefer to use Hotstar to watch domestic programmes and sports content that are telecasted on Indian television. Other than that, Hotstar is also famous for telecasting some of the famous web series.
User: Ok honestly, I’m curious to read the entire case study and I will. But what if someone doesn’t have time to read fully and wants to see the final result directly?
Naveen: Don’t worry, I’ve provided my Prototype, Figma Design file, Figjam file and a short video’s links below, where I’ve explained all of my actual work and they can happily refer that,
But before that, I want to explain about the context of my final solution of the search flow in Hotstar.
User: Why?
Naveen: Because, before getting into the complete explanation of my project, I want to show my final results directly, so that you’ll get an overall idea about my final solutions quickly in the beginning itself.
User: Ok, go ahead.
Naveen: Sure,
Context of the final solution:
As mentioned before, I’ve worked on evaluating the search flow of Disney+ Hotstar.
I’ve redesigned the entire search flow of Hotstar, considering the 4 most important use cases,
- Searching for premium content.
- Searching for free content.
- Searching for content with misspelled words.
- Searching for unavailable content.
User: Why you’ve selected to particularly work on these 4 use cases?
Naveen: Because these were the most important use cases that users most probably can do; for which I want to give the solutions for. And also, there can be multiple other use cases as well, but by considering the time constraints, I’ve limited it to 4 important use cases only.
User: Ok, can you explain each use case, for which you’ve designed the solutions for?
Naveen: Yes sure,
1. Searching for premium content:
· In the native / original Hotstar, if the user searches for any premium content, they won’t get notified that the results which appeared was premium content; in the search results page.
· I’ve given solution for that, to make users aware of premium contents and make them buy and convert from free users to premium users through the following changes,
2. Searching for free content:
· In this use case, I just made a small change from the premium content use case, to make people differentiate easily between free and premium contents.
· And also, I’ve changed the entire layout and arrangements of the search results page as well by classifying all the sections of contents.
3. Searching for content with misspelled words:
·If the user searches the content with misspelled word in original Hotstar, it doesn’t show any error message and also it suggests some irrelevant contents; which may lead to drop-offs.
· So, in this case, I’ve mentioned an error message as mentioned below and also now Hotstar suggests relevant content by analyzing what users searched for.
4. Searching for unavailable content:
· In native / original Hotstar, if the users search for any unavailable content in Hotstar, it won’t show any notification or error message to indicate the users that the content is unavailable. Instead of that it suggests some irrelevant content. It may affect user satisfaction and retention.
· Now I’ve provided an error message as mentioned below, which indicates to the user that the searched content isn’t available. And also, it suggests relevant content based on below mentioned method.
User: That’s good, but these were the only solutions and UI that you’ve designed and solved the problem for?
Naveen: Definitely not, because beyond this, I’ve changed the entire UI of the other pages of the Search flow as well; to make the entire searching journey flawless and intuitive to the users as well as to impact the business.
(Read the case study fully to know about the entire process and solutions that I came up with for the problems).
To quickly know about my project work, refer to the direct links below (Prototype, Figma, Figjam, G-drive video). 👇
🔥 Figma
🔥 Figjam
TL; DR, take a look at the below google drive link of a quick video (with subtitles) about how my re-designed search flow (with 4 use cases) of Disney+ Hotstar works:
To know about the whole context including my thought process, problem solving, solutions, iterations, final prototype, etc. of the project, read the case study fully. 👇
User: Ok that’s good, now let’s start the story of your journey!
Naveen: Sure, without any further delay, let’s deep dive into the actual story,
The Sprint started with the opening call at 9 pm on Feb 3rd, 2023 and ended by 9 pm on Feb 26th, 2023. During these 23 days of the Sprint, I’ve used all the available resources to complete my work efficiently and quickly as possible.
➡️ And most importantly, I’ve basically used my DESIGN THINKING knowledge to complete this project.
👉️ I’ve Empathized (Primary research) with users
👉 Defined (Analyzing and validation of my hypotheses) their problem areas.
👉 Then I’ve Ideated (Brainstorming and Wireframing) and Prototyped (UI prototyping) the solutions for those problem areas.
👉 And I’ve Tested (Usability testing) the solution with real users, got some feedback and insights.
👉 And then finally I’ve iterated and improved my final UI solution.
User: Interesting! What is your contribution to your team members in the journey of this Sprint?
Naveen: I’ve created a simple yet useful design system which can be accessible and usable by all of my team members. The design system consists of color styles, text styles, icons component library, some of the main components that can be used across the UI of Hotstar, etc.
I always motivate and encourage all of my team members constantly to complete the work on time and maintain flow and momentum.
More than that, I was, I’m and I’ll always be available for them in case of any doubt or help they need.
Assests I’ve created:
Assets created for common use for all my peers,
Assets created for my personal use; specific for Search flow,
User: That’s good. Ok, now tell me what are the business metric(s) you’ve focused on to impact and why?
Naveen: The primary Business Metric which I focused on to impact is Conversion rate. The reason behind choosing this particular BM to impact is, I wanted to convert some % of the Free users into Premium subscribers. Followed by that, I focused on some other secondary BMs to impact as well, which were, to increase Retention rate and User engagement.
User: Wait, don’t you have any plan of action followed and also did you complete the project within the given timeline?
Naveen: Of course, yes. I’ve completed this project within the given timeline, because I always respect the time I have and I want to be punctual. Here is my project timeline and the plan of action,
🕒 Project Timeline:-
🎯 Plan of Action:-
My plan of actions for the entire project timeline were,
(Click the links below to reach the respective sections directly)
🔥Problem statement.
🔥Problem identification.
🔥Peer review.
🔥Secondary research (throughout the project).
🔥Primary research.
🔥Validation of Hypothesis.
🔥Brainstorming.
🔥Wireframing.
🔥UI & prototyping.
🔥Usability testing.
🔥Iterating on UI & prototyping.
🔥Presentation / Final comparison.
🔥Key learnings.
🔥Future scope.
🔥Conclusion.
User: Fine, now can you explain about your work done with respect to each and every stage?
Naveen: Sure, let me start with the problem statement which I’ve selected to work on.
1️⃣ Problem Statement:-
The problem statement card consists of the problem statement which I chose to work on, steps involved in the flow, Business metrics targeted, etc. Here is my Problem statement card which I’ve worked on, take a look at it,
- Problem statement — Enhancing the Search flow of Hotstar (OTT platform).
- Basic user flow / Steps involved in the original flow — Home page -> Search page -> Search page (While typing) -> Search results page.
Primary BM targeted — Increase Conversion rate.
Secondary BM targeted — Increase Retention rate and User engagement.
User: Can you tell me why you’ve limited the flow to just 4 screens?
Naveen: Because, in real time we can’t solve all the problems for all the screens present in the app. We should prioritize which part of the flow in the app we’re going to work on to solve the problem(s). That’s what I did.
User: That’s fine, what’s the next step after selecting the problem statement?
Naveen: Next I’ve started to analyze the user flow and identify the problem areas with respect to Heuristics and Intuitions as well.
2️⃣ Problem Identification:-
User: What are all the problems you’ve identified initially?
Naveen: In the initial stage, while observing the search flow of Hotstar, I’ve faced some issues in the overall user experience. Then I started to dive deeper into the noticeable problem areas and identified some problems with respect to Heuristics as well as Intuitions with the severity of the problems, which scales from 0 to 4.
Some of the problems which I’ve found in the original search flow of Hotstar were,
- Popular recommendations in the Search page were irrelevant to the user.
- No error message while typing the content name in the search box with misspelled word.
- The search results page isn’t aligned and classified well.
- Sometimes the results that appeared were irrelevant to the user and the results page weren’t classified well.
- Etc.
3️⃣ Peer Review:-
User: Hmm ok, but how do you know whether your hypothesis / identified problems were correct or not, did you validate it anyhow?
Naveen: Yes, I’ve validated my hypothesis in peer review, which is basically showcasing my hypothesis / identified problems to my peers and getting feedback and validation on the same.
During my peer review, some of the hypothesis got validated and some of them didn’t. I’ve got some feedback on heuristic-based problems and intuition-based problems as well.
I took those feedbacks into consideration and I myself decided what to change and what not, in the Problem Identification section.
User: How did you decide what things to be changed selectively?
Naveen: Well, the thing is we can’t able to change something blindly based on the feedback we got, right? We’ll consider some other things before we change something. Likewise, I’ve prioritized my changes based on the following things: Severity of the issue, Feasibility, convincing reasonings, etc.
User: Ok, you’ve got some feedback and made some changes. But are you sure about whatever problems you’ve defined were really valid to solve for?
Naveen: Not completely! For that I’ve done Primary research to validate those problems. But before jumping to primary research, I’ve done Desk / Secondary research.
4️⃣ Secondary Research (Desk research):-
User: Why did you’ve done Secondary research? Is there any reason for that?
Naveen: Because I needed some data and resources to partially validate and support my hypothesis during Primary research (user interview testing).
For that, in the Secondary research part, I’ve started collecting data related to the OTT apps as well as search flow (commonly).
And the data which I’ve collected helped me a lot to support my hypothesis and I’ve got more insights from the Secondary research data as well.
Here is my secondary research data with resources links, which I’ve collected during the project about Hotstar and the Search flow,
(Refer to the Figjam file link above on top to access the data and various resources links collected during Secondary research.)
👉And these data and resources weren’t collected in a single stretch. I’ve collected these data throughout the project wherever I feel like more information was needed to get as many insights as possible.
User: That’s fine, but what about the usage of your secondary research data and resources? Is that done or will you use / revise it somewhere after? Tell me about it.
Naveen: Ofcourse yes, I’m going to use the secondary research resources throughout my project wherever necessary. In the journey of the project, you’ll realize that.
👉 But my Secondary research journey doesn’t stop with collecting data from online itself. I’ve also done Competitor Analysis to understand how,
- The competitor apps perform.
- They implemented the search flow.
- They solved similar problems.
- To understand the user behavior of similar OTT apps.
- Etc.
- Competitor Analysis:
I chose to analyze the competitor apps Amazon Prime, Netflix and Zee5; because they fall under the same OTT category and every app has their own Search flow.
User: That’s cool, but is this Secondary research data enough to proceed with further steps without any proper validation? Are these data (whatever you’ve started gathering in the secondary research) itself is enough to validate your hypothesis completely?
Naveen: No, I’ve used these Secondary research data to support as well as partially validate my hypothesis. But for stronger validation of my hypothesis, I’ve done the following Primary research method.
5️⃣ Primary Research:-
User: Why did you’ve done your Primary research?
Naveen: Well, as you know, user experience is all about designing products that meet the needs and expectations of the people who use them. In order to do that effectively, it’s essential to have a deep understanding of those users — their goals, their pain points, their behavior, their preferences, and so on.
That’s where primary research comes in. By talking directly to users, observing them using the product, and gathering feedback on the given task(s), I was able to gain insights into their needs and behaviors. This information was then used to inform the design decisions that I made throughout the project.
User: That’s fine. Now I’m curious to know about, how you’ve done your Primary research?
Naveen: In particular, I conducted guerilla testing with 5 users, which involves approaching people in public places and giving them certain task(s) to perform by themselves in Hotstar. This allowed me to get a broad range of perspectives from a diverse group of users, which was incredibly valuable in shaping the final design.
User: How did you’ve selected those 5 users to conduct your user interviews?
Naveen: Good question. When it came to selecting my target audience for the guerilla testing, I started by conducting some background research to identify the demographics and characteristics of the users who would be most likely to use the product.
This is where my Secondary research data helped me a lot in defining my target users.
Based on that information, I developed a set of criteria that I used to identify potential users who would be representative of the target audience. This included things like age, gender, etc.
Target users,
User: Ok, now can you explain to me in detail about the process of your Primary research?
Naveen: Yeah sure,
During primary research, I’ve conducted user interviews with 5 users.
In that testing, I made them use the native search flow of original Hotstar app by giving them certain task(s) to perform by themselves.
The task which I’ve given to the users to perform was,
After giving them the task, I’ve prepared a set of points to observe during their task journey without probing them,
After observing the user’s behavior, the user flow, their pain points, etc; I decided to ask them probing questions by making them perform the task again,
After all these discussions and task completion with all the 5 users, I got plenty of insights about their behavior, emotions, pain points, confusions, etc.
The notes, feedbacks and the insights which I’ve got from the users were as follows,
User 1:
User 2:
User 3:
User 4:
User 5:
Like this, I’ve conducted user interviews and got some valuable points and insights based on observation and probing as well.
User: Ok fine, now you’ve got some insights from your primary research. But what about your hypothesis, how many of your hypothesis got validated?
Naveen: Yes, some of my hypothesis got validated as I’ve mentioned as follows,
6️⃣ Validation of Hypothesis:-
For validating my hypothesis, I’ve used primary research, secondary research and peer review data. From these data, whichever hypothesis gets validated or partially validated, that’s the thing with which I went ahead with to solve for.
From all the research data, peer review feedback and from various resources, most of the problems / hypothesis got validated / partially validated. They are as follows,
Validated hypotheses:
1. Home page:
- No issues found with the search icon — Not validated.
2. Search page:
- Popular recommendations were found to be irrelevant — Validated.
- The browse option was not engaging and intuitive — Validated.
- The recent section was found to be confusing — Partially validated.
3. Search page (While typing):
- No suggestions while typing — Validated.
- No error prevention while typing misspelled words — Validated.
- Showing direct results while typing may confuse users by showing irrelevant contents — Partially validated.
4. Search Results page:
- Users don’t know whether the results appeared are relevant to what they searched for or not — Partially validated.
- There is no proper error message/guide, if the user searches the content with wrong spelling — Validated.
- Users can’t quickly find the relevant results from all the available search results — Validated.
- Users don’t know where they are exactly while scrolling in the results page — Partially Validated.
- The entire search result page feels cluttered — Validated.
- Lack of proper arrangements, proper topics related to the results makes it feel clumsy. Affects Gestalt principle — Validated.
👉 New insights:
1. During Primary research, I’ve found that one user got the desired result which they searched for. But if they didn’t get the desired result, they said they’ll leave the entire app itself and look for any other relevant apps (competitor apps). So, this will lead to Drop-offs.
2. During Primary research, I’ve found that some users didn’t even consider the relevant results which appear in the search results page, if they get the desired result which they want on top for which they searched for.
User: Ok, I’ve understood why you’ve done Primary research. And also, you validated some of your hypothesis and got some insights. But what are you going to do with all these validations?
Naveen: Good question! Now I’ve validated some of the hypothesis and got more insights into what worked and what didn’t. Now I’m going to come up with a greater number of solutions for each of the problem areas which got validated through the research, by the following Brainstorming method.
7️⃣ Brainstorming:-
User: Can you elaborate the term “Brainstorming” which you said?
Naveen: Sure. Brainstorming means coming up with a diverse range of solutions for a particular problem within a certain or short period of time.
No matter how crazy the solution may seem, that’s not the problem. The goal is to come up with a diverse range of ideas without fear of criticism or judgment. The focus is on quantity rather than quality, and the best ideas are selected for further evaluation.
User: Nice explanation. Ok, now continue to explain about your ideas and solutions.
Naveen: Sure, but before going to the solutions, I want to explain about the How Might We questions part, from which I’ve came up with my solutions for all the problems.
User: Ok, go ahead.
1. How Might We (HMW) questions:
Convert the challenges into opportunities
User: What is the HMW question?
Naveen: Constructing how-might-we questions generates creative solutions while keeping us focused on the right problems to solve. A How might we (HMW) question can generate lots of creative ideas. The technique has become popular in design thinking and is used by design teams worldwide.
I’ve used NN/g’s checklist as follows to create good HMW questions:
👉 Checklist for good HMW questions:
- Is it based on an existing problem or insight?
- Does it track a desired outcome?
- Is it written positively?
- Is it broad enough to ensure many creative ideas?
- Does it suggest a solution?
Like this I’ve kept a certain checklist for creating good HMW questions.
👉 The HMW questions which I came up with were as follows,
Homepage:
1. HMW make the users easily access the search page from the home page? (Less priority due to not validated)
Search page:
1. HMW improve the popular section to make it more intuitive and engaging?
2. HMW improve the search page to make it more convenient and engageable for the user to search for their desired result quickly and easily?
Search page (While typing):
1. HMW make the search experience better for the users in this search page (while typing) to avoid any errors?
Search results page:
1. HMW improve the search results page so that the users get their desired results quickly and efficiently?
2. HMW improve the alignments of the search results page so that the users easily distinguish between the contents?
3. HMW make the users engage more with the overall contents available in the search results page?
Like this I’ve framed my HMW questions.
User: That’s fine, now tell me about the solutions and ideas you came up with for each HMW question?
Naveen: Sure,
2. Ideation:
For ideating my solutions, I’ve used “Crazy 8” technique. Which is, I’ve tried to come up with at least 8 different solutions in 8 minutes for each of the problems.
👉 The solutions which I came up with were as follows,
User: Wait, you’ve said that you’ll be coming up with 8 different solutions for each problem, but why have you come up with the random number solutions for every problem? Why haven’t you come up with 8 solutions for every problem?
Naveen: Ok, now I want to clarify 1 thing for you which is, I’m not a perfectionist (who follows / does everything in a perfect manner with a perfectionist mentality). And also, it’s not a mandatory thing to come up with 8 solutions exactly, only because of the term “Crazy 8”.
👉 It’s just that we should push ourself beyond the limit to come up with a diverse range of solutions. We can come up with more than / less than 8 solutions for every problem, and that’s fine.
👉 Always remember that it’s not about the quality of the solutions, it’s about the quantity of the solutions that we come up with.
User: Ok I understood that. Now you’ve completed your ideation part, then what’s next?
Naveen: After completing my ideations, I’ve converted my ideas into UI (High-Fidelity) screens. But before that, I’ve done Wireframes (Low-Fidelity) as follows,
8️⃣ Wireframing:-
User: What is “Wireframes” and why did you’ve done that before starting to work on the UI part?
Naveen: Well, to be simple and clear, “Wireframes” are visual representations or blueprints that depict the basic structure and layout of a user interface (UI) design. They are typically created using simple shapes, lines, and text, and are used to communicate the overall design and functionality of a product or application before any detailed design work is done.
There are several reasons why I’ve created wireframes before starting on the UI design.
👉 One key reason is that wireframes allow us to focus on the user experience (UX), etc. of a design, without being distracted by visual details such as colors, typography, and images.
👉By creating a clear and concise layout of the various elements on a page, we can ensure that the design is easy to navigate, intuitive, and meets the needs of the user.
👉 Etc.
After assuming which, where, why and how I’m going to implement that solution, I went forward to do the low fidelity wireframing. I’ve made some iterations in all the screens of the wireframing part itself.
Because, iterations are one of the most important factors to keep on improving our designs by getting feedback, working on ourself, etc. to deliver better results and to reduce the risk of the business.
The overall wireframing which I’ve done (including all iterations),
User: Ok now tell me, why have you done these many iterations for all the screens? Why didn’t you leave with only 1 iteration for each screen?
Naveen: Because iterations are important in UX design as they allow us to refine and improve upon our designs, resulting in a better user experience.
🔥Importance of Iterations in UX Design:
🎯 I believe that iterations are crucial in UX design as they allow for the testing and refining of design concepts and solutions.
🎯 They enable designers to gather feedback and make adjustments to improve the overall user experience.
🎯 Without iterations, a design may not fully meet the needs and expectations of users, resulting in a suboptimal experience.
🎯 Additionally, iteration helps to identify and fix usability issues, and improve the overall quality of the final product.
User: Ok nice, go ahead with your explanations for all those iterations.
Naveen: Sure,
Now let’s see all the individual screen’s wireframing with explanations to each iteration:
👉️️ Original screen’s context: Previously the search icon was present on top right corner of the home page.
Iteration-1:
· There were no changes in the home page, because my hypothesis / problem didn’t get validated in usability testing.
· Users comfortably found and accessed the search icon. So, I left with the default search icon placement in the home screen.
👉 Original screen’s context: Previously there were Recent, Browse and Popular sections present in the Search page. I’ve made 3 iterations in this page for wireframing
Iteration-1:
· I’ve changed the headings to Recent searches and Popular searches to make it more understandable.
· Also, I’ve provided cancel (x) button and Clear All button to clear the recent searches.
· And I’ve provided a See more option to extend the recent searches list because to save the space and also to avoid the below Browse and Popular options from going to the bottom of the screen. The rest of the things remain the same.
Iteration-2:
· I’ve changed the position of Browse and Popular section to side-by-side instead of one-by-one; because to make both the sections usable by grabbing the attention and to avoid from hiding at the bottom.
· By tapping on the respective section headings, the respective contents will show / change accordingly.
Iteration-3:
· In the 3rd iteration, I’ve removed the Browse and popular sections and instead of that I kept only Top Searches section, which recommends the top searched contents to the users by analyzing the data of language, interest, region, etc.
👉 Original screen’s context: Previously, while typing in the search box, the results were directly displayed. I’ve made 2 iterations in this screen for wireframing part.
Iteration-1:
· In the 1st iteration, I’ve added the Suggestions section to recommend the correct content name with correct spelling while the users type in the search box.
· Below the suggestions section, I’ve placed the direct results that appear automatically while typing; which was already there in the original app.
Iteration-2:
· In the 2nd iteration, I’ve decided to remove the direct results which appear automatically while typing, to reduce the confusion for the user while typing.
· And also, I wanted to keep this page clean and with the required minimum information provided, to make the search experience better.
👉 Original screen’s context: Previously, only the results for what we type in the search box were displayed in this page. I’ve made 2 iterations in this screen for wireframing part.
Iteration-1:
· 1st of all I wanted to redesign the entire layout and also wanted to classify every content recommendation separately in the search results page, because the previous layout and arrangements were clumsy and the contents weren’t classified well.
· Then I’ve planned to provide an error message for any misspelled or unavailable content name being searched by users, because it reduces the error of viewing wrong or irrelevant content and it’ll reduce drop-off.
· Also, I’ve provided the Sort and Filter options to filter out the desired result from all those recommendations.
Iteration-2:
· In the 2nd iteration I’ve made only 1 change, which is, I’ve thought to remove the Sort option and left with only the Filter option itself, as I couldn’t find that many efficient sorting options that can be implemented.
Some of the iterations in the wireframes were made while doing the UI part. Because while doing the UI, I came to know about some issues in the solution, so I reworked on my wireframes and got clarity from ambiguity.
So, that’s all about my wireframing part.
User: That’s good work on your wireframes. Now I’m curious to see the UI solutioning part. Shall we?
Naveen: Why not? Come on, let’s see my solutions for the problems in the UI part below,
9️⃣ UI & Prototyping:-
· After completing the low-fidelity wireframes, it’s time to convert them into high-fidelity UI screens and prototypes.
· Designing the UI screens has become my favorite part these days, because I constantly explore and practice more advanced stuff when it comes to UI.
· I myself get practiced and used to auto layouts, components, variants, nested components, etc. Actually, all of the entire UI screens were made using auto layout, components, etc. only.
User: Ok that’s a good thing to know. Now, can we take a look at the UI screens whichever you’ve made?
Naveen: Yeah sure,
To quickly see my UI work, refer the below links:
👉 Figma
👉 Figjam
Note: I’ve already mentioned in the wireframe part that I haven’t made any changes to the home screen. So, it remains the same.
Now let’s see the remaining screens of the UI part,
➡️ Search screens:
Search Page:
· As I mentioned previously in the wireframing part that, instead of the Browse and Popular sections, I’ve implemented the Top Searches section, which recommends the top searched contents as like a list of contents to the users by analyzing the data of language, interest, region, etc.
· The reason for removing the Browse and popular sections is, it’s not that intuitive and it’s almost not used by most of the users.
· And also, I’ve placed those options in the Browse section on another screen as usable (read the UI part fully to know about that).
Search Page (While typing):
· Previously while typing in the search page, direct results appeared which confused the users sometimes with irrelevant results.
· But now that won’t be the problem anymore. Because I’ve implemented the Suggestions section, which suggests the content name based on what users’ type.
· I’ve given the color difference to the content name texts, to differentiate what is typed and what is remaining.
· I’ve implemented the auto-complete feature in the search box. While typing in the search box, it automatically matches and completes the remaining relevant content name.
➡️ Premium content results screens:
Search results page (Premium content):
· 1st of all I changed the entire UI of the search results page itself. I’ve classified each and every recommendation with section headings, which makes it easy for the users to decide what type of content to consume from which category; which also follows consistency and standards.
· Some of the section headings will change according to the type of content that users search for.
· I’ve placed a Crown icon in the search result card to indicate that the searched content is premium content.
· I’ve provided a separate section for premium contents, because my ultimate goal is to convert free users to premium users.
· I’ve made the main results card big with some basic information about it to grab the users’ attention easily.
· I’ve provided a dedicated Filters button on top right of the results page.
Filters tab:
· In the filters tab, I’ve implemented various filtering options which include language, genre and content type.
· In those filtering categories, I’ve provided all the language and genre options as filters, which already exist in the Browse section from the original search page.
· Additionally, I’ve provided the content type which includes the options like free, premium, Hotstar specials, etc.
· Every filtering option has multi selection.
· They can use the Clear All button to clear all the selected filters at once.
Filtered results page:
· By clicking the Show results option in the previous Filters tab (after selecting the required filters), it shows the list of Filtered results in the next page, which matches the filters which users selected previously.
· In this page, it also shows the No. of results appeared, which indicates the number of filtered results appeared in this page, which makes users easy to know and understand. It also follows Visibility of system status.
· I’ve placed the bottom navigation bar in both the search results and filtered results page to provide flexibility to the users. By this they can navigate to other pages without going back to the home page.
➡️ Free content results screens:
Search results page (Free content):
· In this use case, the Crown icon won’t be present in the search result card to indicate that the searched content is free content.
· Remaining everything is same as previous use case.
Filters tab:
· Everything is same as previous use case.
Filtered results page:
· Everything is same as previous use case.
➡️Misspelled content results screens:
Search results page (Misspelled content):
· In this use case, if the user searches the content name with spelling mistake, it’ll show an error message near the Filters button as, “Showing results for (correct spelling) Instead of (wrong spelling)” and also provides the related result which matches the correct spelling.
· It also follows Recognition rather than recall and Help users recognize, diagnose and recover from errors heuristics as well.
· Remaining everything is same as previous use case.
Filters tab:
· Everything is same as previous use case.
Filtered results page:
· Everything is same as previous use case.
➡️Unavailable content results screens:
Search results page (Unavailable content):
· In this use case, if the user searches for any unavailable content n Hotstar, it’ll show an error message near the Filters button as, “Oops! The searched content isn’t available. But you may like,” and also provides the related result which matches the searched content name.
· It also follows Recognition rather than recall and Help users recognize, diagnose and recover from errors heuristics as well.
· Remaining everything is same as previous use case.
Filters tab:
· Everything is same as previous use case.
Filtered results page:
· Everything is same as previous use case.
➡️Results card iteration:
· This is the result card in the search results page. For this card itself, I’ve made 5 iterations to find a good card with proper arrangements and spacing.
· In all the first 4 iterations, it felt like the arrangements are not good and the spacing between the card info is also not well balanced.
· I’ve taken feedback from my peers about the arrangements and spacing of the card and iterated on it several times.
· Finally in the 5th iteration, I got a good-looking ad at the same time, well balanced result card.
· By this, I understood how iterations are very important in design. Iterations improve the quality of the results.
➡️Search screens (with recent searches):
Search Page:
· In these screens I wanted to show how the Recent searches works now with more functionalities than the original Hotstar has.
· I’ve limited the recent searches list to 3 because, if everything appears on top itself, then the Top searches section will go down and it’ll become less noticeable to the users’ eyes.
· If it exceeds the limit of 3, the remaining content names will go under the “See more” option.
· Users can click the See More option to expand the recent searches section to see all the recently searched contents. In the expanded state, the See more option will turn into “See Less” option.,
· Now the users can clear the recently searched contents individually by clicking the “x” icon. Or by clicking the “CLEAR ALL” button, they can clear every recently searched content at a time.
Prototype:
That’s all about the UI and Prototyping part.
User: That’s a great work with good explanation on each and everything you’ve made including the iterations!
Naveen: Thank you.
Users: Ok, now you’ve done the UI and prototyping. But still, do you know whether it’ll work well for the users or not?
Naveen: Not yet completely. because whatever I’ve done till now is itself a hypothesis until it gets validated with real users. So, for validating my solutions, I’ve done the following Usability Testing with real users,
🔟 Usability Testing:-
After completing the UI part, it’s time to do usability testing with real users to validate our hypotheses. But before doing the usability testing, I’ve conducted peer review for the UI and prototype with my team members to get their feedback and insights as well.
User: Why have you done peer review before directly conducting usability testing?
Naveen: I did the peer review first because it allowed me to catch potential design issues early based on feedback from my team members. Both peer review and usability testing are important steps in the design process that help ensure a successful end result.
Peer review insights:
In the peer review, I’ve explained my overall solutions for the problem statement and I’ve showcased the prototype as well. And also, I made them use my prototype by themselves for better understanding.
After the explanation, I’ve got some insights and feedback from my peers and they are,
- My peers got confused about the color difference in the suggestions list.
- They got confused about on which basis the suggestions were recommended.
- A slight confusion about the visibility of system status in the filtered results page.
- Etc.
Like this I’ve got more insights, from which I’ve considered some of the feedback as well to address in the UI iterations.
User: Good that you’ve done peer review. Now, can we go through your usability testing part?
Naveen: Sure, here’s how I’ve conducted my usability testing with real target users,
Usability Testing:
· Once I got the insights on the design from my peers, I conducted usability testing with real users to gain further insights.
· The target users were the same as what I’ve defined before in the start of the project using my secondary research data. Target users were within the age group of 18 to 38.
· After defining the target users, again I’ve done Guerilla testing (approaching target users in public places and conducting usability testing) with real users.
· But before conducting the testing, I’ve prepared a set of tasks and questions for the users which are as follows,
The task which I’ve given to the users to perform was,
After giving them the task, I’ve prepared a set of points to observe during their task journey without probing them,
After observing the user’s behavior, the user flow, their pain points, etc. I decided to ask them probing questions by making them perform the task again,
· With these set of tasks and questions, I conducted my usability testing. I’ve conducted the testing with only 3 users. So, I went with that, considering the time constraints as well.
· The points and insights which I got from the users were,
· These were the insights which I’ve got from the usability testing.
· The main thing got validated in the testing is as follows,
👉 So, by this I got to know that users were willing to convert from Free users to Premium users, if they want to watch the premium contents.
User: Ok, now you’ve done the usability testing to validate your hypotheses and got some insights on that. Now what’s next?
Naveen: Next I want to iterate and improve my UI based on the feedback and insights which I got from the peer review and usability testing.
1️⃣1️⃣ ️Iterating on UI & Prototyping:-
· After getting all those insights, I just made a separate section on Figjam and mentioned the feedback and changes that need to be made, below each screen.
· After mentioning the insights to the respective screens, I started to rework and iterate my UI screens to improve the overall user experience of the search flow, considering the insights.
👉Iterated UI:
➡️ Home screen:
Home screen:
· During usability testing, I found that all the users struggled to exactly touch and access the search icon, as the touch area / boundary provided to the search icon was too small to touch.
· So, I’ve made the search icon size big with the touch area. Now it’s comfortable to touch and access the search icon.
➡️ Search screens:
Search Page:
· I’ve changed the search box placeholder text color to white and also now it follows Consistency and standards.
· I’ve changed the corner radius of the Top searches list cards from 8 to 4, to maintain consistency throughout the search flow.
Search Page (While typing):
· I’ve inverted the color difference in the suggestions list. White colored text = typed text, Grey colored text = text remaining to type.
· I’ve changed the blinker position near to the last typed word / letter.
· Changed the Suggestions section heading color to white.
· Have added categories (movies, tv shows, sports) icon infront of all the suggestions list, to indicate based on which category the suggestions lists were being recommended.
➡️ Premium content:
Search results page (Premium content):
· In this use case, I’ve changed the search box placeholder text color to white to follow consistency.
· Have increased the touch area of the bottom navigation icons in all the screens.
· Remaining everything is same as previous UI (before usability testing).
Filters tab:
· Have increased the checkbox size and provided comfortable touch area and also made the whole line (Checkbox + filter name) touchable for easy interaction.
· Remaining things were same as previous UI (before usability testing).
Filtered results page:
· I’ve mentioned the filters names that were applied previously in the filters tab.
· Remaining things were same as previous UI (before usability testing).
➡️ Free content:
Search results page (Free content):
· All iteration in this page was the same as the previous use case.
Filters tab:
· All iteration in this page was the same as the previous use case.
Filtered results page:
· All iteration in this page was the same as the previous use case.
➡️ Misspelled content:
Search results page (Misspelled content):
· Have changed the color of the error message on top from grey to white for better readability and also it follows consistency now.
Filters tab:
· All iteration in this page was the same as the previous use case.
Filtered results page:
· All iteration in this page was the same as the previous use case.
➡️ Unavailable content:
Search results page (Unavailable content):
· All iteration in this page was the same as the previous use case.
Filters tab:
· All iteration in this page was the same as the previous use case.
Filtered results page:
· All iteration in this page was the same as the previous use case.
➡️Search screens (with recent searches):
Search Page:
· In these screens, I’ve changed the recently searched content name to correct spelling (for misspelled content name), as it gets corrected automatically in the search results page.
· I’ve changed the color of the “x” icon for better visibility.
· Remaining things were same as previous UI (before usability testing).
👉Prototype:
(In prototyping, I’ve just changed some small interactions here and there to make the prototype consistent and well balanced than before).
User: That’s a good work on your UI iteration part. You’ve changed some of the things which make the entire UI well balanced. Then what about next? Is there anything remaining in your work?
Naveen: Yes, after completing all these works, I want to present and compare the UI solutions of before and after usability testing, to give you the whole context about how my final solution evolved.
User: That’s nice, go ahead.
Naveen: Sure,
1️⃣2️⃣ Presentation / Final comparison:-
Here, as mentioned in the above image, I’ve compared all the 3 versions (original screens, UI screens before and after testing) of the screens involved in the search flow of Disney+ Hotstar.
If you need more details about each and every explanation of the UI and iterations, refer to the above UI and iteration sections.
If you want to see all of my UI related works and the final comparison between all the 3 versions of the search flow of Disney+ Hotstar like in the above image, refer to the Figma & Figjam file links below.
👉 Figma
👉 Figjam
User: That’s a nice presentation. I think you’ve learnt a lot from this project. Am I right?
Naveen: Definitely yes. Without any doubt I learnt a lot of things from this Sprint project. I’ve documented my key learnings below.
1️⃣3️⃣ Key Learnings:-
User: I’m curious to know about, what are all the things that you’ve learnt from this project work?
Naveen: I’ve learnt n number of things, from those I’m willing to share few of them below👇
From this project I learnt,
- How to approach a product with Business eyes as well as UX eyes.
- I understood how crucial a Business works behind each and every small thing which is in the app both as UX and UI.
- When compared to before, I feel like I’m much better in UI and Prototyping now.
- Now my Product maturity has improved a lot.
- My consistency and focused work have improved alot.
- I learnt how to Self-motivate ourself better, even when no one is there for us.
User: That’s a great documentation of your valuable learnings. Now you’ve done with this project, but what about your future scope?
Naveen: My future scope from this project were,
1️⃣4️⃣ Future Scope:-
- When compared to before, I’m much improved in terms of skillsets, product maturity, potential, critical thinking, etc. But we all know that, there will be always room for improvement. So, I want to improve in certain areas of my skillsets including both hard skills and soft skills. So, I’ll look into it and fix it by iterating on myself.
- I’m willing to learn more things which I don’t know now.
- I’m willing to iterate on more things which I already know and want to improve on those.
- I’m curious to learn more additional things in UX / Product Design field which I don’t know now and improve my knowledge on those specific areas
- As an all-time Enthusiastic candidate and with all my learnings, I’m eagerly waiting to showcase my potential to real companies and impact real world businesses through my skills and potential.
- I’m willing to remain as a #studentforlife.
These were my future scope for now.
User: That’s nice. With all these things, can we conclude this CASE STORY with a nice ending?
Naveen: Yeah, why not.
1️⃣5️⃣ Conclusion:-
User: What is your final conclusion to this project work?
Naveen: I want to mention 2 important things to conclude this story.
📍 1st of all a huge thanks to Mr. Anudeep Ayyagari for his constant support and motivation, not only in this project, but also throughout my product design learning journey.
📍 And then I’m very much thankful to my G-2055 team members as well, who were with me and motivates me in every situation whenever I was stuck somewhere. I’ve got great support from my group members in every stage of this project.
🎯Another thing is that, even though I’ve validated my hypotheses with real users and iterated on the UI; still the entire work remains as a hypothesis only, until it gets implemented in the real Disney+ Hotstar app.
🎯 Because, I’m not sure about how the real company will implement my solution and also, I didn’t have any real time company’s official data to gather exact information for research purposes, etc.
🎯 So, whatever I’ve done in this project is just to showcase my potential and I want to let the industry know what is that I can be able to bring to the table for them.
🎯 After this project I believe that my potential, product maturity, etc. has increased drastically.
🎯 And also, I’ll iterate and improve on my skillsets to become the best version of myself in future.
🎯 And most importantly, I’ll remain as a #studentforlife.
Thank you for reading the case study till the end. If you have any feedback for me, feel free to drop your thoughts in the comments.
Connect with me on,
LinkedIn: Naveen S💫
E-mail ID: naveens5320@gmail.com
Instagram: ux.naveen
