Poket Me
Poket Me is where you can save media titles to fetch them later.
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
Learnings
Product Manager Learnings:
Alfredo Santos
Working as a product manager was a real challenge because:
- First, I had understand what the role entitles and its key activities and responsibilities.
- Be able to coordinate a diverse team with different backgrounds, location and time zones.
- Understand technical aspects of development and timing.
- Create and communicate effectively with the rest of the team in order to get the right details for deliveries.
- Being able to prioritize all the user stories and sprints, understand from the overall user perspective what IS the Key Functionality
- To balance User Experience and the Business side. Be able to know what to focus on and be able to decide.
- Have the ability to see the whole image from all sides, and into the future. What will the platform look like, what will be the business model, etc.
Designer Learnings:
Emanuel Sousa
- Prepare the documentation and design for the developers team
- Ability to work with a multicultural team
- Focus on the main things and problems, and work around that.
Designer Learnings:
Jo Sturdivant
- Adapting to an Established Team: Joining the team in week 6 of 8 was challenging, as I had to quickly adapt to existing workflows, dynamics, and goals. This mirrors real-world situations where you often integrate into teams mid-project, and flexibility is essential.
- Work-Blocking for Efficiency: With only two weeks to complete the project, I learned the importance of a structured work-blocking system. This approach allowed me to manage my time effectively and meet deadlines under pressure.
- Making Data-Driven Design Decisions: Unlike my past projects, I had to rely on research conducted by others. This was a valuable experience in using pre-existing data to guide design decisions, helping me focus on the core insights without starting from scratch.
Developer Learnings:
Michael Akinsanya
- Full grasp of firebase as a backend service.
- Importance of good communication skills.
- Ability to write scalable and good code.
- Ability to work with people from different socio-economical backgrounds.
Developer Learnings:
Vanady Beard
&
As the back-end developer, I learned how important it is to create efficient and reliable systems that support the entire application. This experience also taught me the importance of optimising the database and ensuring the backend is scalable and easy to maintain.
Developer Learnings:
Stephen Asiedu
&
As a back-end developer, I've come to understand the importance of being familiar with various database systems and modules. This knowledge enables me to build diverse applications and maintain versatility in my work. I've also learned that the responsibility for making the right choices rests on my shoulders, guided by my best judgement.
Developer Learnings:
Cal Akler
&
- Coordinate and communicate effectively across time zones, backgrounds, and levels of experience
- Importance of planning component and file structure in advance to minimize refactoring
- Firebase authentication and database integration on a more complex level
Developer Learnings:
Maurquise Williams
&
- Process of Creating an MVP: Developing a Minimum Viable Product (MVP) taught me how to focus on delivering core functionalities balancing between essential features and avoiding scope creep.
- Collaboration in a Real-World Tech Setting: This experience taught me how to collaborate efficiently in a fast-paced tech environment, keeping the team aligned and productive, even while working remotely across time zones.
- Sharpening Critical Thinking and Problem-Solving Skills: This experience honed my ability to think critically and solve problems efficiently. By tackling challenges and finding quick solutions, I sharpened my decision-making and troubleshooting skills in a dynamic, real-world setting.
Developer Learnings:
Jeremiah Williams
&
All in all this experience was very awesome I learned that in coding with others being transparent is key
Developers Learnings:
Justin Farley
&
I learned how important communication is when working with a team. Communication provides understanding, advice, ideas, and much more. While working with the product team, I’ve found that communication keeps everything flowing smoothly. Working with a team also showed me that every member brings something different to the table and we all have to work together in order to align and meet our end goal.
Full Team Learning
- Having additional user input through the building process is invaluable and helps us create a better product.
- Being able to work asynchronously was a challenge but quickly overcame by the whole team. We had to adapt to different time zones and commitments but everyone always delivered and communicated.