About
Odyssey is a free, ad-supported streaming service that offers endless hours of entertainment. The platform allows users to optimize their time by providing tailored recommendations and content based on user preferences. Odyssey also uses a responsive design so users can enjoy a seamless experience across devices.
Project Duration
12 weeks
Tools
Figma, Miro
Role
UI/UX designer and researcher
User research
Competitor analysis
Personas
Information architecture
Wire-framing
Low-fidelity prototypes
Usability testing
User interface design
High-fidelity prototypes
Responsibilities
The Challenge
When streaming movie and TV content, users face challenges related to irrelevant recommendations, feeling frustrated spending too much time searching for something to watch and cognitive overload from an overabundance of content and services. The goal with Odyssey was to design a streaming service that addressed these user problems.
The Process
For this project, I chose to apply the phases of the design thinking process as a method of solving the problem. The Design Thinking Process is a human-centered approach, where empathy is used to uncover deep needs, find out what people want and use this understanding to build accurate solutions. This approach takes a designer through a phase of understanding, exploring, and then materializing solutions for testing.
Design thinking phases
The empathize phase of the design thinking process is about taking the time to understand people, the way they do things and why, their needs, how they think about the world, and what is meaningful to them.
Questions: Who is the user? What matters to this person? How does this feature fit into their lives? What motivates or discourages users? Where do they experience frustration?
Tactics: User interviews, surveys, personas
Empathize
The define phase is the synthesis of information gathered to determine a meaningful, actionable problem statement.
Questions: What are the problems this project attempts to solve? What do we want to achieve? How will we know if we're successful?
Tactics: User testing existing experience (pain points), key performance indicators
Define
The ideate phase is for generating as many as ideas as possible. This phase provides both the fuel and the source material for building prototypes and getting possible solutions in the hands of users.
Questions: What are the ideas? What are possible solutions?
Tactics: Brainstorming, competitive and comparative analysis, sketching
Ideate
The prototype phase is about creating a tangible representation of an idea or possible solution.
Questions: How can the ideas be represented? What needs to be created in order to test with users?
Tactics: Digital wireframes, low-fidelity prototypes
Prototype
The test phase includes a solicitation of feedback from users on the prototypes created. The feedback from this phase gives us the insights needed to revisit any of the steps to further refine and iterate on a prototype before moving onto high-fidelity mockups.
Questions: What are users telling us that we can further iterate on? What went well? Where did users have difficulty?
Tactics: Usability testing
Test
Implementation is about taking an idea or solution, and transforming it into something real and usable by users.
Questions: How do we materialize the solution?
Tactics: High-fidelity mockups, high-fidelity prototypes
Implement
Understanding the Users
For the empathize phase of the design process, I conducted user interviews and shared a survey with participants. For this research, I mainly wanted to focus on people already subscribed to at least one streaming service so I could gain a deeper insight on user pain points. I also ran a competitive analysis to better understand the strengths and weaknesses of popular streaming services on the market.
Survey Insights
What streaming services are you subscribed to?
What streaming features do you like?
What frustrations do you have?
Interview Insights
Users desire a smooth on-boarding process when signing up for a service
Users prefer using streaming services that come with personalization features
Users often feel frustrated by the amount of time they spend just browsing content and switching between platforms
Users are annoyed by irrelevant recommendations
Users want a way to download content
Users desire a seamless experience across devices (responsive design)
Many users said they are concerned they spend too much money on streaming services and they would be open to switching to a free, ad-supported service to help reduce their expenses
User Persona
Based on the data collected, I created a user persona to represent our users.
Define
In the define stage of the design process, I put together all the information and data collected in the empathize phase. This is where I broke down and analyzed my research insights and observations into chunks in order to define the core problems. This research revealed that while there is currently a boom in movie and TV streaming services, this huge variety of services can be overwhelming for consumers who can easily get lost in too much content. Users are also feeling the financial pinch of being subscribed to too many services and they are seeking alternatives that will help them reduce this part of their budget.
Goals defined:
The goal for Odyssey was to design a free streaming service that provided similar features and functionality as popular subscription services but with fewer irrelevant recommendations and less cognitive overload for users. In other words, our objective was to design a platform with personalized user features, a good range of content, and efficient content selection.
Ideate
In this phase, I had already empathized with the users’ needs, analyzed research observations and insights and I was ready to start generating ideas. The ideation stage required a lot of thinking and brainstorming to identify possible design solutions. Throughout this stage, I also created pen and paper sketches of a few iterations.
How Might We’s:
How might we provide a more efficient and enjoyable way to explore and discover content?
How might we alleviate scrolling time for users?
How might we help users find more relevant content?
Ideas generated after the ideation process:
Design a feature that breaks content down into genres and categories
Design a feature that allows users to create personal playlists
Design a feature that allows users to download content
Design a feature that allows users to select certain criteria and find relevant content in a more intentional way
Information Architecture
To build the site architecture, I used the insights from the competitive analysis and user research to define how the movie and show titles as well as the other main features should be distributed. From that analysis the site was mapped out to create an organized and efficient structure.
Prototype
After completing the first three stages of the design process, I kicked off the prototype stage with paper wireframes. Drafting iterations of each screen on paper allowed me to rapidly try out various ideas and quickly validate design decisions. Next, I created digital wireframes that included the basic skeleton for each page, including its layout, organization, and elements. Then I made low-fidelity prototypes of the app and website for usability testing. Throughout each step of this phase, I implemented a mobile-first design philosophy because following this practice allowed for the most seamless user experience across devices. Click the links to view the low-fidelity app and website.
Usability Test
Next, it was imperative to test the low-fidelity prototypes with users to check if the solutions worked. Completing this step was also essential for exposing any potential constraints, problems, or design flaws. To test the prototypes, I had six participants record themselves interacting with the prototypes. This allowed me to observe their reactions and it gave me a good sense of where the user was looking while navigating through the screens. Afterwards, I created a spreadsheet documenting the different observations made by each participant. This created a quick reference sheet to quickly identify the frequency of certain behaviours and it helped guide the next round of design iterations. Here are some of the main themes and insights discovered during this usability test:
Participant tasks had a 100% completion rate and users expressed that they found the most value in the playlist, download, and genre sorting features
Two users suggested that the navigation bar on the app had one too many buttons
Three users said that the website’s navigation bar took up too much valuable space
A few participants mentioned that they would like a dark mode feature because they typically watch movies/shows at night
Three participants said they would like a more personalized streaming experience
Design System
In order to begin the process of creating a high-fidelity prototype, I developed a design system for the app and website to follow. This included the site’s typography, colour scheme, and iconography.
Mockups
Next, I refined the wireframe designs to enhance the user’s visual experience and to incorporate insights from the usability test. The mockups feature light and dark mode versions of Odyssey’s app and website.
High-fidelity Prototypes
In the final stage of the design process, I crafted high-fidelity prototypes of Odyssey’s app and website. The primary focus here was to make the interfaces and interactions as simple and straightforward as possible. During user research, participants expressed that streaming services can oftentimes be overwhelming so it was my goal to not add to that overwhelming feeling. As a result, the high-fidelity designs include a concise and easy log in/sign up, a minimalistic homepage with necessary features like search and genre categorization, quick access to movie details, and easy to use playlist and download features.
Reflection
Overall, designing for Odyssey was a fun and rewarding challenge. I learned that while working on large-scale problems, such as this one, focusing on identifying users’ needs and pain points is essential to solving the task at hand. The combination of user insights, market research, and usability studies provided the necessary feedback needed for fine-tuning iterations and establishing the brand’s identity. In addition, by following through every step of the design process, I was able to come up with solutions that aligned with the users’ needs in an achievable and beneficial way. Although I was not able to fully flesh out all the possible features and designs I wanted to due to time constraints, it’s not to say I won’t try to incorporate them in future iterations.
Next Steps:
Test the high-fidelity prototypes with users and iterate design based on user feedback
Develop Android, PC, and TV versions to make the platform available on more devices
Explore implementing voice control functions for enhanced productivity and accessibility
Design a watch party feature so users can enjoy an immersive experience with friends and family