Poket Me

Problem Background  

There is too much content, types of media, and platforms and it’s hard to keep track of everything. We hear recommendations or find interesting content online to watch later. Once we decide to sit down and enjoy our free time watching content, we can’t always remember the suggestions. 

‍

Research Insights & User Pain Points

We conducted over 3 interviews and 7 questionnaires where we discovered key insights and validation to the users problem such as: 

• Users have limited time to look for content leisurely
• They find it hard to keep track of content to watch
• Not being aware of new content that exists that can be of their liking makes them “sad”
• They consider it a waste of time scrolling through streaming services in order to find something to watch. 

‍

Feedback

Our research from users in Europe aged 18-40 gave us insights into the problem. 

• We learned that this is a problem ONLY for power users, that is people that have 2 or more streaming platform services
• We also learned that power users on average  watch content close to 10 hours a week. 
• We learned that this is one of their favorite activities or hobbies and is considered a “ritual”. 

‍

Solution Explanation

Based on User Research, and also considering our experience with this problem, we concluded that a simple lightweight and fast solution was the right answer.

We decided to create Poket Me, a platform with a simple sign up - sign in, where once logged in you could instantly search for movies and series and save them on your watch list. And this could be accessible on mobile and desktop seamlessly. We didn’t think an app was necessary at this stage. We focused on simplicity, few buttons and a very clear user journey to Save and then to Fetch. 

Our journey was based on the following key user stories: 

• The user can open our platform and login / sign up quickly and that’s why we added google sign in. 
• Our user can search for a movie or series very fast so our search bar is always at the “hero” section. 
• Once the results are shown the user can select any content and click on it so a card (modal) will open up to show larger details about the content
• The user will be able to “save” the content on their “To watch list” or “Watched list”
• If a user wants to fetch it’s saved content, then can login and go to the To Watch list and be able to view all saved content.
• Also, the user can search for parts of movies, not the complete name, and fetch the relevant results. 

We decided to work with the largest movie and series database TMDB in order to enhance the user experience with larger results. 

‍

Lofi & Hifi Mockups: 

• ‍Hi Fi: Co.Lab FLOW.pdf‍
• Lo Fi: https://drive.google.com/drive/folders/1GTO7OczYWarevHgFu8S5aXhJnrrq2Axe?usp=sharing

‍

Iterative Design Learnings

We created a test of our prototype using the tool Maze. This test was conducted with a total of 7 users. The users were able to perform and complete the intended tasks on the right way, flowing the correct path without any problem.

We received new feedback, and the main feedback and change suggested that was implemented is related to the button to remove from watchlist. We realized that there was no clear indicator that a user could remove something that was already saved.  If you have the button already selected, and you need to deselect to remove the movie, the feedback was simply to add the word remove, instead of add from that button. 

This helped us to create a better experience for our user and tackle an important part of the user journey that we were not aware of. We realized the value of having direct user input on our prototype. 

‍

Implementation Details 

Technical implementation

• The platform is hosted at Netlify
  

Tech Stack

• HTML, CSS, JavaScript
• React for frontend
• Firebase for backend database and user authentication
• The Movie Database API for movie and series data

A more detailed description of our stack and reasoning can be found here.

‍

Technical challenges

The first hurdle was using the API itself. TMDB is a great resource, but we didn’t realize until after we’d begun development that the multi-search endpoint (movies, TV, and people all in a single query) does not give back the same results as a more specific search for just one of those items.

This meant we had to decide between two things: allow the user to provide additional inputs and filter their results before the request is made, or filter once the promise is fulfilled and handle an excess of data, in addition to a potential second API call when the See Details button is clicked. While both options had pros and cons, we ultimately decided it was better to streamline the user’s experience and handle any filtering under the hood, even if it meant sacrificing performance.  

While the app was built with scalability in mind, the amount of reused code could become a problem in the future. When adding new features, we would also want to focus on optimizing the app so as not to compromise performance. This would involve refactoring existing components and functions and making the whole app more modular.

‍

Future Steps

We believe that Poket Me is useful and many users will benefit, so we will  continue to enhance the UI and add functionality based on user feedback and then prioritize. There are two functionalities that we would like to implement along the way: 

• Export and share lists via Social Media buttons
• Create custom lists