CyberFlix 🎞

OVERVIEW 📌

CyberFlix TV is an app for FireStick, providing users with a vast selection of on-demand content, including movies and TV shows. Known for its user-friendly interface and extensive library and has quickly gained popularity as a go-to platform for streaming entertainment.

 

Outcomes 📊

• Engagement rate increased from 43%  to 66%
• Retention rate improved from 40% to 65%.
• Average session duration increased from 16 minutes to 25 minutes.

 

• Download the App (APK – Android Only)

 

READ FULL PROCESS ⬇️

The Problem 🔍

• Cluttered Interface: The home page was overcrowded with information, causing users to feel overwhelmed. Important features were buried beneath less relevant content, making it hard for users to focus on single movies or series.
• Poor Detail View Experience: When users selected a movie to view details, the navigation created friction, as they needed to click “go back” to see another movie. This made it difficult for users to easily browse through options and led to a less enjoyable viewing experience.

 

The Opportunity 🎯

• How might we simplify the home page design to highlight key features and make navigation more intuitive, enabling users to quickly find and focus on the movies or series they want to watch?
• How might we implement a seamless browsing experience within the detail view, allowing users to explore other movies without unnecessary clicks to enhance user satisfaction and engagement?
• How might we conduct user testing to gather feedback on layout and navigation preferences, ensuring that the app meets the needs and expectations of our audience?
• How might we optimize the categorization and recommendation systems to help users discover new content more easily, reducing the feeling of being overwhelmed by choices?

 

My Role 🙋‍♂️

I was the sole designer responsible for the end-to-end flow of the project, collaborating closely with my team, including the Product Manager and Engineering.

 

The Team 🧑‍🤝‍🧑

• Project Leader: Manuel Aljibes Rosas
• Product Manager: Reinaldo Coronel
• Product Designer: Wagner Henriquez  (myself)

 

Responsibilities 🧐

• Definition: brainstorm around the product at the highest level with stakeholders.
• Research: understand industry standards and identify opportunities for the product within its particular niche.
• Benchmarking: evaluating different competitors by using metrics to gauge its relative performance against a meaningful standard.
• Analysis: moving from “what” users want/think/need to “why” they want/think/need it, creating user stories and user personas.
• Design: sketching, wireframes and prototypes about the actual interaction experience (the look and feel).

 

Tools 📐

• Whimsical
• Miro
• Figma
• Illustrator

 

The Process 🕹️

Process might not be the same in each project and will be determined by many factors such as the project goals, business needs, budget, time and many others. Here I’ll describe my process for solving this specific problem.

• Discover: During this first step, the goal was to understand the problem that needed to be solved and gain insights about the users and their needs. This involved conducting user research, analyzing data, and gathering stakeholder feedback.
• Ideation: Once we had a clear understanding of the problem and the users, the next step was to generate ideas and potential solutions. This included brainstorming sessions, sketching, and creating mood boards to explore different design directions.
• Design: After we generated a range of potential ideas, the next step was to start designing and creating prototypes.
• Testing: The final step was to test the design with real users and gather feedback that could be used to refine and improve the design.

 

 

DISCOVER

Understand the core of the product 👨‍🎓

 

Before generating any ideas, I started by analyzing the existing app and its usability to understand the core of the product. Analyzing the competitors also helped me identify the pain points users were facing

 

Key findings 📑

• Discoverability Issues: Users experienced difficulties discovering features within the app, which hindered their overall experience.
• Frustration in Searching: Users felt frustrated when trying to search for a specific movie within the catalog, as the process was not straightforward.
• Lack of Visibility: Within each category, users lacked visibility into the total number of movies available.
• Emotional Disconnection: Users did not feel emotionally connected to the app, which affected their engagement and loyalty.
• Excessive Taps for Simple Actions: Completing simple actions required more than three taps, creating unnecessary friction in the user experience.

 

general flowchart ✨

User Journey: Home Page Experience

1. App Launch: The user opens the CyberFlix app and is directed straight to the homepage, allowing immediate access to content.
2. Content Browsing: Users can effortlessly browse through the vast selection of movies and TV shows presented on the homepage.
3. Selecting a Movie/Serie: When browsing, users will be able to click any movie at any time with only 2 taps.
4. Feature Discoverability: Users can explore various features and categories to find specific content without any complicated processes.

This approach to the user journey was a decision made by my Product Manager to prioritize accessibility and simplicity for all users, ensuring they can enjoy their favorite shows and movies right away without the need for a sign-up process.

 

ideation

GATHER IDEAS 📓

I proposed a design that enables fast access to key sections such as movies, series, categories, personal lists, search functionality, trending titles, recommendations, favorites, and user profiles, all presented on a single, user-friendly screen without requiring extra effort from the user.

Design Principles:

• Clean and Intuitive: The layout prioritizes simplicity to enhance usability.
• Emotionally Engaging: The choice of colors and fonts creates a strong emotional connection with users.
• User Friendly Home Screen: The home screen features a clear call to action, allowing users to start watching a movie immediately.
• Effortless Navigation: Navigation should be straightforward, especially within the details view, allowing users to easily browse through options without unnecessary back-and-forth clicks.

We had a list of screens to cover all scenarios so I started to sketching different designs to detail out the flows to discuss and share with team members to get feedback

 

 

Design

LOOK AND FEEL 🏛️

This was a style guide for the first version of the app and contained colors, typography, icons, and components. Following all recommended accessibility practices according to W3C guidelines.

COLORS

grid 📏

TYPOgraphiC 🔠

ICONS 👾

 

challenge faced during the process 😵

During the development of the app, we encountered several challenges that needed to be addressed to enhance the user experience. These challenges included:

• Rethinking the navigation flow: One major issue was the navigation between movies. When users selected a movie, they had to go back to choose another, which caused confusion and frustration. We needed to create a more intuitive and linear journey for users.
• Implementing a friendly browsing experience: To improve user satisfaction, we redesigned the user flows to allow continuous navigation. This meant users could explore recommended movies without needing to backtrack, making their experience more enjoyable.
• Testing and validation: To prevent potential issues during development, we conducted user testing on the new solution. Observing users as they interacted with the updated design allowed us to validate our approach and ensure it effectively met their needs.

Through collaboration with the development team and ongoing user feedback, we successfully addressed these challenges, resulting in a more streamlined and user-friendly experience.

 

usER testing 🗃️

We conducted usability testing with multiple high-fidelity prototypes to ensure that the app was user-friendly and effectively addressed the needs of our target audience. Our process began by recruiting participants who matched our demographic criteria, allowing them to engage with the onboarding process while verbalizing their thoughts to provide real-time feedback on their experience. This method helped us uncover pain points and areas of confusion. Based on the findings, we made several improvements, such as refining the onboarding flow, simplifying navigation to improve the overall user experience. The final prototype is showcased in the video.

 

After some more testing, leadership decided to remove any onboarding as the first screen, so after downloading the app, users would land on the home screen.

MVP UI preview 📱

Users have access to the entire catalog of movies with a simple navigation system that covered all possible user interactions within the application, including saving favorite movies (saved in local memory if an account was not created), searching for movies, exploring categories, and adjusting settings in the user profile.

 

 

UPDATES BEFORE RELEASE

iterations, feedback and updates needed 🔁

After analyzing data and considering how to increase customer retention, we decided to eliminate distractions and opt for a simpler, more streamlined design focused directly on the app’s movies. By removing irrelevant visuals, content, and other extraneous elements, the app was able to become easier to use and understand. The new design also created a more consistent look and feel across the entire app, making it more inviting and attractive to users. In addition, we decided to focus on the movie-viewing experience, offering users an easy way to search for the movies they want to watch. By refining the app’s design and making it more user-friendly

 

 

DOWNLOAD THE APP AND TRY IT

ARE YOU FROM THE PRODUCT TEAM? 🗿

This app is available only for Android, please use your phone and download by clicking here 👈

Since you’re downloading from my site you will have a warning popup, make sure you click “Install anyway”, it’s safe.

 

project outcomes

WHAT was my contribution on this PROJECT? 🤠

I significantly contributed to the CyberFlix app’s success by enhancing navigation and improving the detail view, leading to notable increases in user engagement and retention.

During the project, I focused on streamlining the user experience by addressing discoverability issues and simplifying the user interface. This involved analyzing user behavior to identify pain points and then redesigning the layout to facilitate easier navigation through the extensive library of movies and TV shows.

Impact:

• Engagement rate increased from 43% to 66%.
• Retention rate improved from 40% to 65%.
• Average session duration rose from 16 minutes to 25 minutes.
• Simplified navigation allowed users to switch between movies and save favorites with ease.

 

project learnings

what i have learned from this project? 🤓

• Embrace Simplicity: As designers, we often find ourselves drawn to flashy, trendy, and unconventional designs. However, it’s crucial to keep the “why” at the forefront of our minds. Our primary goal is to deeply understand the user and their challenges, then create a design that effectively addresses those needs.
• The Importance of Process: Having a structured process is essential, especially for large projects. It serves as a roadmap, guiding us through what can often be a complex and uncertain journey. This clarity is particularly beneficial when starting a new initiative, helping to maintain focus and direction.
• Collaboration is Key: Developing software or applications intended for thousands of users requires a strong team effort. Understanding user challenges and crafting effective solutions is inherently collaborative work. When team members pool their expertise and insights, the result is a robust, well-rounded, and production-ready product that truly meets user needs.

 

It’s quite common sign a NDA, or non-disclosure agreements, so I’m limited to show some part of the process or none in most cases. This apply to all my portfolio.