top of page

StreamScape

StreamScape is a mobile application that allows users to stream their favorite movies and shows anytime, anywhere

Overview

StreamScape was a key project within the UI/UX Design Bootcamp at Stony Brook University. For this project, I was responsible for overseeing all aspects. This included researching competitor applications and user interviews, along with creating user flows, wireframes and high-fidelity mockups. Throughout the duration of the project, I continually made design decisions based on the feedback received from StreamScape's potential users and my instructor.

Goal

StreamScape is a streaming application that follows a freemium model, offering a basic version free of charge, with a paid option available that unlocks additional features. I was provided with basic wireframes of StreamScape's design and tasked with refining the design to encourage both new and existing users to upgrade to a premium membership.

Role
  • Lead UX designer
Tools
  • Figma
Team
  • 1 UX designer
Timeline
  • Overall: 2 weeks
  • Research: 1 week
  • Design & Testing: 1 week

Wireframes

At the start of the project, I was provided with StreamScape's initial wireframes. It was my responsibility to critically analyze these designs and to formulate a strategy to update them in order to achieve the goal of generating more premium accounts.

Wireframe.png
Sign Up Page.png
Homepage.png

Research

After I received the wireframes and formulated a general idea of how I will update the current designs, the project entered the research phase. I began by analyzing competitor applications that also utilize the freemium model. Conducting this research provided me with valuable insights into how these competitors incentivize their users to upgrade their accounts to paid memberships. Having access to this research throughout the duration of the project was instrumental in guiding and informing many of the design decisions that were made.

Notes With Stroke.png

User Journey Maps

Using Figma, I created user journey maps to visualize the steps a user would take to obtain a premium account. During this process, I identified that there were numerous opportunities to encourage account upgrades, including strategically placed pop-ups as well as buttons on the sign up page and homepage. Integrating these elements into the design would effectively guide users toward creating new premium accounts or upgrading their existing ones.

Low-Fidelity Wireframes

After thoroughly reviewing the given wireframes, conducting my own research and creating user journey maps, I developed ideas for potential updates to the existing designs. With the use of Figma, I translated these ideas into low-fidelity wireframes, which were reviewed by my course instructor. Following approval, the wireframes were used in five rounds of user testing. The valuable feedback that was received from these tests was then used to refine the designs, ultimately resulting in the creation of high-fidelity mockups.

High-Fidelity Mockups

Using Figma, the low-fidelity wireframes were transformed into high-fidelity mockups. During testing of the low-fidelity wireframes, it became clear that some buttons lacked visual elements indicating that they were clickable, and it was unclear that clicking outside of a pop-up would close it. This feedback was an instrumental in informing the design of the high-fidelity mockups, which were developed shortly after the testing phase. Once created, the high-fidelity mockups were incorporated into a second round of testing.

Starting Page.png
Premium Information.png
Account Creation.png
Credit Card Information.png
Billing Address.png
Login Page.png
Free Existing User.png
Free Movie.png
Free TV Show.png
Free My Lists.png
Premium Tab.png
Free Search.png

Usability Testing

Following the creation of the initial high-fidelity mockups in Figma, usability testing was conducted over the span of two days with a total of five participants. The participants, aged seventeen to fifty-four, were all experienced with streaming services. Upon completion of all the tests, the high-fidelity mockups underwent updates based on the feedback received.

Issue: Missing filter option

Findings: A significant issue that was identified during usability testing was the absence of a filter option. On StreamScape's home page, content-consisting of movies and television shows-is organized into rows, some of which contain a mixture of both. Users were unable to filter content by type or genre, severely limiting their ability to browse by preference. Four out of the five participants actively sought a way to filter content. These users expressed significant frustration upon realizing the lack of this functionality.

Solution: Following the completion of the usability tests, a redesign was carried out based on the feedback received. As part of this redesign, filtering options were incorporated into the relevant pages to enhance content navigation. Two buttons were introduced to help users filter content by type (movies and television shows), while an additional option was added to filter by genre.

Before and After.png

Clickable Prototype

Learnings

Throughout my work on the StreamScape project and in collaboration with my course instructor, I significantly strengthened my UX design skills through hands-on experience. During the competitor analysis phase, I refined my note-taking techniques, improving how I organize my notes and making them easier to reference. While developing low-fidelity wireframes and high-fidelity mockups, I further enhanced my proficiency in Figma. Additionally, my design process became more efficient, enabling me to complete mockups more quickly than in previous projects.

Interacting with usability test participants and presenting my work to my instructor also strengthened my communication skills. Overall, the StreamScape project has been instrumental in helping me achieve my goal of becoming a more skilled and versatile UX designer.

Next Steps

Given the ever-evolving nature of technology and user needs, no project is ever truly "finished." When a website or application is launched, user feedback becomes an invaluable resource that can drive future updates and improvements. StreamScape is no exception. For instance, the method by which content is recommended to users can always be refined.

During the first round of testing, one participant suggested incorporating questionnaires to better understand users' preferences, which could provide personalized recommendations in a unique way. Although this feature was not included due to the limited time given, I believe it offers an engaging and effective way to enhance the StreamScape experience. To further improve the design and overall user experience, I am committed to implementing this feature in the near future. 

Please feel free to contact me if you would like to collaborate

Phone

631-645-9940

Email

bottom of page