Many Spanish speakers in the USA use PrendeTV to stay in touch with their roots. It provides a connection for users to share with their families a piece of their home. Viewers can watch novelas, soccer matches and many movies. It provides a free, ad-supported channel for viewers to stream many movies.
PrendeTV does not provide a search bar or any intuitive way to search. Users have to search through an alphabetized collection to find a movie.
The main goals for this web app redesign is to add a new feature for searching through movies and an easier experience for users to access PrendeTV.
Below is a before view of the screens now. There are many options for genres, which are overwhelming the users. Some aspects of the web app are useful, however, this outweighs the good when users are not enjoying the experience while searching for recommended movies, games or series.
I interviewed four new users for PrendeTV. I asked them about their habits. I continued the conversation by asking them more about their experiences when streaming. Especially to tell me about the last time they searched through a streaming service. They described where and how they watch movies. Some users search through the app recommendations while others actually use the search bar to find specific genres and specific actors.
I then tasked each to search for a movie titled “No Sin Mi Hija”. As they progressed with the task, they each became irritated with the service and wanted to give up.
"Wow, this is really bad. I want to give up. Do I have to keep going?" - Kevin, Oakland, CA
"Oh, I have to click through all of these to find the one that starts with "N", at least it's in alphabetical order." Vanessa, Vallejo, CA
I knew my gut instinct that the missing search bar was key. The lack of it is frustrating users and some want to quit and go back to their favorite streaming services.
I wanted to make sure I didn't miss anything about PrendeTV so I built out a site map of the current design. This helped me to learn more about what information is provided and what needs to or could be changed. I used this as a jumping off point for structure of the redesign.
To see where other streaming services strive I researched them, read their reviews in the app store, and read through literature to see what people liked about these services the most. I also found a lot of inspiration when it came to UX because these streaming services had done the work. I could see there was no need to re-invent the wheel when it came to a search bar, however, I wanted to give PrendeTV a way to stand out. Through this analysis I could see that PrendeTV is missing a few basic designs.
Based on interview results, I learned that 27-50 year olds tend to use this type of application for streaming. Some users use PrendeTV to better their Spanish or for entertainment purposes only. Keeping this in mind, gave life to the personas to better understand the users. What I learned through the personas is that they enjoy watching PrendeTV because it is a part of their identity. Something that takes them back to their childhood or connects them with their language and their family.
I created two personas: Jose, a retiree who spends his retirement days watching shows and soccer games and Hazel who uses TV as a way to connect to her family that is far away. I learned that users often share the names of the TV shows they watch and form a camaraderie over the latest episode.
When a user hears of a new show they go home to search it, once found they can also participate in watching these shows and continue these relationships further proving that these shows become a part of their heritage, culture and identity.
The customer journey map helped me undertand what emotions my user will have while using the app, as well as any expectations. I also learned about pain points such as not having the movies they want or missing soccer games because they are not on a schedule.
To better understand the problem to be fixed, I made a task flow of the current search flow. I learned how long each step is taking and aimed to reduce that with my version of the search feature. My aim is to reduce the amount of clicks and pages the user has to sort through. Considering most of the users don't have a lot of experience with different streaming services in Spanish, I wanted to shorten it and help them find things quicker.
Through this user flow, I learned what cases a user would face when using the search feature. This is important because each of these cases may become additional screens later on. I realize a lot of times their choice is not available so I needed to have a page for each case. Especially, I wanted each case to be descriptive enough so the user could fix the error on their part, or know why the movie or show is not showing.
To better show the user what their current screen is, I highlighted the title of each page. This toggle can also help them find different screens, if their interests change. This reduces confusion and eases changing between the screens.
The search feature is bringing the task flow to life. The search result screens are shown to the user depending on their search case and gives them feedback in case the mistake is a misspelling.
From these low fidelity designs, I tested some users on their responses to the new search bar options. Their comments helped me shape what the end prototype would look like.
I used Figma to create these prototypes of the main feature which is a search bar. The user would hit the labelled "search" icon. This takes them to a screen that will allow them to search whatever movie they want to watch. These now show the screens on each page that a user encounters.
The search function is the key feature added. The first screen is the search page, this what the screen looks like for users searching for a movie. The second is to search by genres allowing users to find a way to and the case of the user not having a correct spelling. I want to let the user know what mistakes they made and how they can fix them. This is why I leave them a message to let them try again.
These high fidelity screens bring to life the re-imagined main screens. The icons on the bottom are accessible and the genre selection makes it easier to intuitively search by sliding through the alphabetized genres. I learned to use motions that are reachable for the user and keep the design exciting for users to come back.
With the three images in view and a small peek to the next movie it allows intuitive design, meaning the user will be able to slide their finger and see the additional movies in that row. The genres make it easier to browse movies. Because this project consists of English-speaking stakeholders the genres are in English, however, ideally all the wording would be in Spanish.
The channel plays like a television guide. The added volume button, closed captions and a full screen icon gives this app a more modern design. Currently, PrendeTV does not have a button to mute the live TV and this made caused sensory overload. Also taking advantage of the established toggle design, the user can select what genre to search for channels in. This also keeps them from viewing every channel in the guide and can help them find what they're in the mood for.
This shows recent games as well as big past games. These features are easier to search now and testing showed that users improved their ability to search for games with this updated design.
I used the prototype to test 3 different users on the re-design. I received excellent feedback. The response to the search function was very positive. It made users feel confident in their search. One user felt that having options fill in while searching was great because "sometimes I can't remember the name exactly."
Searching by genres also received a lot of praise because it lets users find something depending on their mood.
There were some exciting new takes on how I could further improve PrendeTV's redesign. One of the main requests is to include the movie name in the search results, not only the image. This would let users decide quickly without having to guess whether it's the movie they are looking for or not.
You may play with the prototype below. BTW, it's more fun in full screen.
My creative limits were pushed with this project because this is my first time redesigning a product with a large user base and adding a feature.
It pushed me to think about how this feature would flow with the logic and interactions already in place. I learned how to keep the integrity of the design and fit with users’ mental models
Another important takeaway is the connection between distanced family members. People want the ability to share with each other what tv show they are watching by sharing links. This is one area that can be brainstormed more and perhaps added to later designs.
.png)