06/30/2018 - 07/28/2018
AndroidOS, Android TV
What’s Good? Is an app that provides recommendations by your friends and influencers. It removes the pain of scrolling endlessly throughout your entertainment catalogs such as Netflix or Hulu. My role was to research, design and test all UIs related to the project. I collaborated with another designer from concept to launch.
Interview several people about how they go about their day. Listen for any problems or areas of opportunity that you can create a solution for.
User Interviews: Round 1
Before we conducted our interviews, we created several questions to help guide our conversations. We wanted to discover how people listened to music in every which way. Were people feeling a certain way before and after their music listening session? Were they discovering new music on their own or finding it another way? Did they share music with other people? Why?
In a span of 4 weeks, my partner and I interviewed dozens of individuals. Because both of us were interested in the music industry, we started off by interviewing people who heavily listened to music throughout their day. Although a music solution was our intention, we uncovered a behavior that would influence the rest of our project.
We ultimately designed an app that would help people who struggle to find something to watch by providing recommendations from their friends and influencers. My role in this project was to conduct research that would impact the trajectory of our design. I also created wireframes in both AndroidOS and AndroidTV in Material Design.
Out of all the questions, we were intrigued by how people shared their music. With all the apps out there, over half of our interviewees still recommend music through word of mouth. Not only that, 100% of our interviewees said they would listen to a song if someone recommends it.
We found the behavior of recommendations compelling, but we asked the question, “Why hasn’t anyone else figured out a solution?”
• Spotify, the biggest music streaming platform in the industry, removed its direct messaging feature due to low engagement.
• Cymbal, a share-first music platform hinted that their business plan was not enough to offset the tricky licensing issues they faced in the industry--that is, even though they put their users first, finding the balance between business and users was never achieved.
• Soundwave, also a music-sharing platform, gets acquired by Spotify.
User Interviews: Round 2
At this point, we weren’t getting any information that would help us solve the problem of sharing music; however, we knew we were onto something with recommendations. We decided to conduct another round of interviews with the following questions:
Tell me about a time you asked for a recommendation.
Tell me about a time you gave a recommendation. What was the outcome? Did your friend use it? Did it solve her problem?
Tell me about a time you received a recommendation. Did you ask for it? What was it for? Who was giving it to you?
Overall, people wanted recommendations when they need it, and not when they don’t. This may sound trivial, but we do it all the time.
Insight 1: Music weighs less in time investment
We started out on the topic of music and uncovered an interesting behavior in recommendations; however, the weight of recommendations and its time investment vary. For example, if a friend sends you a link to a song, determining its likability can take seconds. Compare that to movies where time investment is significantly higher. One might quit a movie partially in or watch it altogether. At that point, hours could be lost.
Insight 2: It's more common to pay for multiple video subscriptions than music subscriptions
According to our first round of interviews and statistics by Nielsen Music, Americans listen to music mostly via streaming subscriptions. The difference between music and video lies in the quantity of said subscriptions. It’s not common for an individual to pay for multiple music subscriptions, but it is to pay for multiple video streaming services.
Defining the Problem
Pop Question! Have you ever scrolled through Netflix ultimately to fail at finding the next thing to watch? Us too.
So, how can we leverage the power of recommendations to help users make decisions about what to watch?
What's Good is a platform for sharing recommendations across all streaming platforms, for all titles and series, in every genre. These recommendations help users decide what to watch, discover new content, and share their experience of content with a community at the time they want it.
After collecting our thoughts, I created a quick user flow using draw.io to visually understand how an individual would navigate our app.
Choosing the layout: Material Design
If we were going to create a complex app that uses multiple APIs, social networking, and a large database, we had to explore using an existing system like Material Design. In this step, I practiced reading documentation, working within constraints, and cohesively putting a layout together.
With our user flow in hand, we drew up some wireframes on the whiteboard--one screen for each step.
Wireframes - Mobile
The home screen displays a list of movies recently recommended by people the user follows
The Floating Action Button (FAB), on the bottom right is unique to Material Design. It allows quick access to the "Add Recommendation" flow
After several user tests on the first iteration, we removed the FAB as we realized the "Add Recommendation" action was not the primary goal of our users.
The primary goal was to help users find what to watch next. "Add Recommendation" was secondary.
After our 2nd round of user tests, we added real faces which later revealed that context was necessary in determining if a user would watch a certain movie depending on who they knew recommended it.
Add Recommendations, Iteration 1
It was important for us to design the app with a positive attitude in mind. We weren't interested in creating another review platform where users could speak negatively about the movie. This was recommendations only, which is inherently a positive suggestion.
We started with the use of tags, which users could attach to each movie.
User Testing revealed the tags in the 3rd and 4th screen were confusing: Why did users need to tag the genre--wasn't that already specified in the movie itself?
Some users also wanted to express in their own words why they recommended a title.
Add Recommendations, Iteration 2
In this iteration, we removed the tags and ultimately just let the user write a short 150 word summary about why they recommend this movie. Testing revealed this flow to be much more intuitive.
Search, Iteration 1
Search is an important alternative in discovering new movies when you want to get more specific. In this iteration, we implemented tags underneath what Material Design calls a "surface". Clicking the "filter" icons will reveal the "backdrop" below the surface.
These tags allows more granular searching with tags like: Type, Genre, Platform (e.g. Netflix, Hulu, etc), Rating, and Duration.
When a certain tag is selected, they are listed above at the top.
In this iteration, we removed the "selected tags" at the top as it proved to be superfluous. Instead, a selected "chip" would be highlighted where it stands.
Additionally, we revealed a bit more of the surface to allow users to see more of the populated results.
Lastly, we rearranged the order of the filter categories to what our users felt were most important to least important.
We went through three iterations and two user tests before arriving at our final design. We applied color on the last iteration.
Final Mobile Iterations
In our final prototype, we went with a simple dark UI for two reasons: 1) Movie posters already provide a plethora of colors which we wanted to complement rather than intrude, and 2) We discovered that many of our users watch movies with the lights dimmed or turned off. That being said, the dark UI provides less distraction and is easier on the users' eyes.
Detailed Movie View
Search and Filter
My Account Sidesheet
Wireframes - AndroidTV
While we prioritized Android Mobile, I wanted to take a stab at designing for AndroidTV given that our app fits perfectly into that platform for these reasons:
1) Most people watch movies via their respective streaming service on their couch.
2) We could provide a seamless experience all within the TV's UI by allowing users to browse their What's Good feed and allowing external linking to the respective streaming service.
Low Fidelity Wireframes
I framed the androidTV layout very similarly to the mobile version. The challenge here was working within the confines of a D-Pad, totally different than a mobile experience.
Home Feed, selection on feed category
Home Feed, selection on movies
The sidesheet minimizes to a smaller vertical bar to allow more space for browsing titles.
Search w/ Tags
In addition to searching a specific movie, tags could be added to refine further
Detailed Movie View: Info Tab
Detailed Movie View: Community Tab
The layout is mostly similar to the YouTube TV app as it follows AndroidTV's Material Design Guidelines
User Testing AndroidTV Prototype
One of the challenges I ran into was providing a prototype that felt similar to actually browsing via television. Since I didn't have the capacity to create a true working prototype, I used screenshots and placed them in a slideshow. When testing the user, I asked them a question relating to the task with the next screen being the correct answer. If the user did not get the question correct, I flagged that task and asked the user to further elaborate on their action.
Note: Images were exported to 3840 x 2160 since I was conducting user testing on a 4k TV. It was really cool to see my UI on the big screen.
Medium Fidelity Prototype
Home Screen, Iteration 2
I removed the icons and opted for text only. On the big screen, the text was too small to read underneath the icons.
I also made sure to highlight the movie selection as the original prototype did not show this making it very difficult to navigate.
Search Flow, Iteration 2
Instead of adding chips to the search bar when selected, I kept the tags where they were and allowed deselecting
For visibility, results are displayed below and updated as the search query changes.
After viewing the results, the search query can be edited above.
Higher Fidelity Prototype
One of biggest hurdles using a d-pad is inputting letters using the QWERTY keyboard. Worse yet, apps like Hulu use 1 alphabetical row for input. I added a "recent searches" under the Search bar to help alleviate some of that.
My partner and I conducted interviews with the intent of finding a solution in the music space. Instead, we identified a behavior that might not work for music, but for movies or even products.
We've shown our prototype and idea to strangers, product designers, friends, family, managers and more. 100% of the people who subscribe to streaming video services have expressed their interest and approval for their need to find movies quicker.