UX UI Design - Case Study
UX UI Design - Case Study
.
About
This case study is a result of my work on a UX Design project. The goal is to improve the user experience by designing an app that simplifies choosing a movie or series.
My Role
I developed the entire UX process working independently, using the Design Thinking method, with the phases of discovery, interpretation, ideation, experimentation, and evolution.
Deliverables
User flow
Journey map
Wireframes
High-Quality Digital Prototype
Date
May-June 2023
.
DISCOVERIES
Introduction
In today's age of streaming, the number of options for movies and series to watch can be overwhelming. With so many titles available on various platforms, it can be difficult for users to find new and interesting content that matches their specific interests and preferences. Users often spend considerable time browsing through a seemingly endless stream of titles, not knowing what to watch next. This can be frustrating and time-consuming, especially when all they want to do is relax and enjoy a good movie or series.
To address this challenge, an app that recommends movies and series based on the user's preferences can be a game changer. Such an app can help users find titles that match their interests quickly and easily, coupled with a draw function, speeding up the process without having to spend hours browsing through a sea of options. By using algorithms that analyze the user's viewing habits, content in their favorites list, and other user-available taste data, a personalized recommendation system can suggest titles that are likely to be of interest to each user. Furthermore, having a draw function allows users to take a chance and let the app choose what to watch for them, adding an element of surprise and spontaneity to the viewing experience.
Designing such an app requires a deep understanding of user experience design principles. The app should be intuitive, easy to use, and provide a fluid experience. To achieve this, we will follow a design thinking approach that puts the user at the center of the design process. We will create personas, user flows, wireframes, and prototypes to ensure that the final product meets the needs and expectations of our target audience. In doing so, we will create an application that offers users a pleasant and personalized experience, helping them discover and enjoy new titles without the frustration of endless, time-consuming navigation.
.
Diving in and discovering the problems
1 Researching the product
As the first step of the research, I went to understand in depth what the streamings are, what their value proposition is, and how the site works. I grouped the collected data organized into WHY (what is the purpose of video streamings), WHAT (what is the product like?), and HOW (how do the streamings themselves work?).
Diving in and discovering the problems
1.1 What is video streaming?
Streaming is the name given to the technology of transmitting data, such as video and audio, over the Internet without the need to download the content onto a device, whether tablet, cell phone, or television.
1.2 What is your value proposition?
One of the main benefits of streaming is convenience: through an account (which can be free or paid, depending on the platform), you have access to a collection of movies, series, and other content, which would be more difficult to access legally on an individual basis, given the costs of each media.
1.3 How does the site work?
Streaming works by remotely storing content on servers. And in it, the user has a huge catalog of movies, series, and documentaries to be able to choose their specific content. And sometimes the user has more than 1 streaming video, which can cause indecision at the time of choice.
User Research
2 Research: Problems + useful functions
2.1 Huge catalog + user indecision = wasted time
Users often spend a lot of time browsing through different streaming services and catalogs to find something to watch. They find it difficult to narrow down their choices and often end up choosing something they have already seen. With so many options available, users often struggle to find titles that match their interests and preferences, resulting in wasted time and frustration.
2.2 Lack of customization
Based on our user survey, we found that one of the biggest pain points for users when it comes to streaming video is the lack of personalization options available. Many users feel that the recommendations provided by streaming services are irrelevant and do not reflect their personal preferences.
Users have expressed a desire to have more control over the recommendations they receive, including the ability to customize recommendations based on their interests, viewing history, and ratings. They also want more options to filter and sort their search results to make it easier to find what they are looking for, by adding filtering topics such as YEAR, GENRE, AGE CLASSIFICATION and REMOVE THE FILMS WATCHED.
3 Search: Useful Functions
In addition to the filtering options, the draw function is an innovative and different feature of the movie and series recommendation app in this case study. This function allows users to take a chance and let the app choose what to watch for them, adding an element of surprise and spontaneity to the viewing experience (surprise me button).
Or when they get to the draw option, they also have the option to choose up to 10 options of movies or series, and let the app draw; and finally, they have the surprise me option only with some filters.
In this way, having a draw app for movies or series can be a great option for indecisive users, and can also help users discover new titles that they may not have chosen otherwise. The sweepstakes function is an example of how the app goes beyond traditional movie and series recommendation apps, offering users unique and fun ways to interact with the app and discover new content.
User Journey
When creating experience maps, this point addresses empathy with a focus on better understanding the user journey and identifying trouble spots that need to be addressed to create a more enjoyable and seamless user experience for video streams.
- The experience and empathy maps help to highlight the problem areas in the user journey, which in this case was divided into what the user thinks (Thinks) when the desire for entertainment arises.
- In the second topic would be the delay in choosing a movie or series, which can be highlighted in the does (Does) part. This delay can be due to doubts, lack of initiative to watch something new, indecision for being a group entertainment, or looking for movies with a specific track.
- The last point would be how the user feels (Feels) throughout this process until the final choice of the movie or series.
Turning research findings into design principles
This step is important to convert the research into something actionable that meets the focus of this case study: how to improve the user experience by designing an app that simplifies the process of choosing a movie or series? And the Design Principles created were:
1. Design an app that simplifies the process of choosing a movie or series for users.
2. Reduce the time users spend browsing different streaming services to find something to watch.
3. Customize recommendations for each user based on their preferences added new filtering functions + sweepstakes functions.
4. Provide an intuitive, fun and easy-to-use user experience.
A process centered on user well-being and entertainment
During my research on video streaming users, I identified four main groups of users who can benefit from my movie and series recommendation app:
1. Nerds/cinephiles/film and series enthusiasts who are always looking for new and exciting content to watch. These users are often overwhelmed by the number of options available and find it difficult to discover new titles that match their interests.
2. Casual viewers who want to relax and unwind by watching a movie or series after a long day at work. These users prefer quick and easy recommendations that match their moods and preferences.
3. Friends' Night Out: A group of friends who get together to watch a specific movie on a Friday night, and these users usually draw lots on small pieces of paper with names of their favorite movies and physically draw which one is chosen for the night.
4. Family night: Families who want to find movies and series suitable for all members, including children. These users need filtering options to ensure that the recommended content is appropriate for their children.
PERSONAS
As mentioned earlier, I divided the types of users into four main groups that will benefit from my app: cinephile, casual viewer, friends' night out, and family night out. In this way, I created 4 personas correlated to these user types:
image is taken from the image bank: Unplash
image is taken from the image bank: Unplash
image is taken from the image bank: Unplash
image is taken from the image bank: Unplash
Actions, emotions, and pain points
It's time to start converging and specifying what decision-making I would use to solve the problem. The first step was to create a journey map specifying some points of the 4 personas presented earlier.
In the map, I brought a journey demonstrating common points of emotions and pains along the process to get to watch a movie or a series.
A user journey map is a visual interpretation of an individual's relationship with a product or organization over time of what steps the user is performing.
A user journey map tells the story of a person trying to accomplish a specific task or goal using a product, which in this case is video streams.
USER FLOW
User Flow is a visualization of the path and directions that guide users from point A to point B within a product or system. It serves as a detailed representation of the tasks users need to complete and the steps they will take to reach the desired goal.
By mapping the user journey, a micro-level view of the product is provided, highlighting the specific actions and interactions required.
User Flow is a visual representation of the route users will take within the product, emphasizing the steps and directions needed to accomplish tasks. It helps to understand the time and effort required while enabling the improvement of the user experience to achieve goals more efficiently.
IDEATION: CREATING THE FIRST SKETCHES
Before I left for the sketches, when I was developing the user flow, I visually imagined the design and content of the home page. I first thought about what the HOME structure of my app would look like, which buttons would be indispensable, the process flow, the colors, and the typography.
Some other features of the project:
- The draw function
- Filters with more functions (age, type, year)
- An application that decreases the user's indecision, facilitating the choice for their entertainment
- To have an overview of movies and series in a single application.
Low-fidelity wireframe
To get interface ideas for my project, I used the Crazy Eights tool, as it combines exploring ideas over time with a quick visualization of that process.
Besides being a quick and simple brainstorming exercise that challenges UX UI Designers to sketch ideas faster in a short period of time.
scribbling and creating
In this part of ideation are the low-fidelity wireframes where the visual representations of my UX design project were found.
Being able to create on paper, putting a lot of the ideas in mind for my app, gave me a clear understanding of what features and designs the app needs to support and what points need to be improved or discarded.
And during the creative process, I was able to apply a lot of the main ideas I had planned and a whole new field of solutions came up with each part of the app design.
Mid-fidelity wireframe
Mid-fidelity wireframe helped me visualize my project in the UI (User Interface) part, mainly with the aesthetic features, being able to support the essential functionalities of my application design, and with the focus of validating the information architecture, the interactivity with the interface elements and the Nielsen's Heuristics used.
MOODBOARD & STYLE GUIDE
For the visual attributes part of this case study app, I researched some visual references to create a mood board, to indicate what the color palette of my design would be.
I searched for apps on platforms that provided app design ideas as inspiration (Behance) and searched for images on Pinterest that had a visual mass similar to what I had in my mind initially for my app's interface.
The result was a selection of images that convey modernity, but at the same time confidence, calm and fun with light and dark shades of background that mix solid and linear colors in simple and pleasing ways.
UX / UI
From the problem definition, user journeys, and ideas in mind, I developed an interface for my application that could deliver the desired solution and generate a high-fidelity prototype for a better evaluation of the result.
High-fidelity wireframe
The main point to be addressed here is after the user completes the login information:
The permission that the user will give to the application is to access the video streams present in the cell phone, so this permission is for when the user selects the movie in the application, and when he clicks this play button, he will be taken to the movie on the streaming chosen.
However, the person can mark that they do not want the access, and they still will not stop using the app, but they will not have this quickness of being taken to the movie or series after pressing this button.
Home
1. Home: for the user to choose between having the movies visually in a general way in "All" or can click from the buttons of the streamings. In this prototype, 5 streamings were placed in the initial menu, but it is only a representation, should the application ever be created, the possibility is to have access to all or almost all streamings.
2. Here is highlighted "comedy movies", but it serves for all titles: these are the titles of the movie genre sessions. In the settings, the user may have the option to keep movies or switch to a series.
3. In this "arrow/right" button, the user can view the movies by swiping to the side.
4. The side view layer, where you can see the "romantic movies" being changed, (can be seen in the prototype below).
5. In "view all" you can view each session in expanded mode.
6. Menu bar with home, search, raffle, and profile.
7. 3 layers showing the romantic movies by clicking 3 times on the "arrow/right".
+ Application Information
1. By clicking on the poster of the movie or series you can see information such as:
- the name of the movie, whether it is on the watched or un-watched list, and the available streaming;
- the play button that takes you to the movie/series streaming area and a favorite option.
- But below you have information about the rating, duration of the movie, year, IMDB rating, and the main actors of that movie.
2. The "search" function can be used to search in the traditional way in the search space or use filters by age (rating), year of the movie, and genre.
And below you find collections of movies and series with animation, romantic comedies, sitcoms, heroes, award winners, movies from the 90s, movies from the 80s, the best series, and documentaries.
3. The draw function is one of the main tools for the application, to speed up the user's choice/entertainment process, being able to choose up to 10 movies (or series) to be able to draw.
Below is the function "surprise me", so the user skips the step of selecting movies and lets the application choose a movie or series (if you do not want to add a filter.
4. The "surprise me" function can add filters for the genre, year, age, series, or movie.
5. Profile: The user can make changes to his profile preferences like editing the contents that appear in the home (either movies or series), add favorite genre, and finally, not suggesting the movies that were added to the watch list with "on" or "off" option.
High-Fidelity Prototype
In the final prototype below you can:
- test the interactions from the "Get Started"
- by creating an account or logging in
- allowing for the app's permissions
- then the menu bar composed of: home, search, draw and finally the user profile.
-
Clicking on the link above will open the prototype in figma, and it can be viewed from:
Flow 1: the prototype starts from get started, login, permissions, and then goes to Home;
Flow 2: the prototype starts at Home.
LEARNINGS AND LESSONS
What steps will come now?
The first stage would be to test the prototype with users to run new iterations and improvements.
After that, in addition to working on improvements to the app, adding new ideas or removing something that users didn't find interesting. I would look for new possibilities to improve the experience to speed up the process of choosing the movie or series that could perhaps go beyond a draw (in case something new ideas come up).
I am open to criticism and creative ideas for my UX Design case study project.
What I'm proud of
It was very interesting to explore an aspect of the experience of those who use video streams. Because I identify with these pains of the personas presented in my case study, to be able to choose something on streaming in a way that we are not left undecided in the process of choosing by the number of options. So bringing these ideas was something I had in mind.
To be able to speed up the user's entertainment choice, I came up with the idea of "Why isn't there a movie or series draw app?" and "This sounds like a great UX Design project idea".
With this, I am very grateful for the development of my case study work, because I was able to accomplish step by step what I had initially planned, having design thinking as a base, and thus, finally, finishing with my prototype in figma.
Gratitude :)
See other UX UI projects on my Behance