WiRa Movie
Case study no . 3
Project Overview
I created WiRa movie, fictional streaming platform, from scratch for my UX class project. Through research, I discovered that our target audience predominantly uses websites and mobile applications, so I focused on designing for those devices.
My goal was to create a user-friendly application that leaves a good experience.
Product: Website, Mobile Application
Case study timing: 3 Months
Team: Group of 4
Tools: Figma, Photoshop, Pixart, Zoom
THE DESIGN BRIEF
Objective
Creating a platform to provide Iranian movies to Iranians living outside of Iran, providing subtitles and a user-friendly interface for easy access.
Design Goals
-
Meeting the needs of users
-
Clear and easy way to access
-
Expedite user flow
Empathetic Approach
In this section
-
Survey & Interview
-
Competitive Analysis
-
User Persona
Survey & Intreview
To identify my target audience, I conducted a survey that consisted of key questions. This helped me identify the right individuals for interviews, where I delved into their past experiences with similar platforms. The aim was to uncover both positive and negative aspects of a movie streaming platform. Through this process, I discovered that my audience highly values:
01.
A diverse range of movie categories
02.
Personalized recommendations based on their platform usage
03.
The ability to download movies for future viewing
04.
The consideration of movies' ratings.
These insights will guide the design and development of my movie streaming platform to meet the needs and preferences of my audience.
Competitive Analysis
In the next phase, I conducted a comprehensive competitive analysis to familiarize myself with the current landscape of movie streaming platforms. This involved assessing the strengths and weaknesses of existing platforms, as well as examining the unique features they offer.
Following that, I engaged in a brainstorming session and tried to identify the most significant ideas from my list, giving them priority in accordance with the current stage of the design process.
01.
Personalized movie recommendations based on user prefrences
02.
Advanced search filters for genres, actors, directors, and more
03.
Offline viewing option for downloading movies
04.
Social integration to share movie recommendation and reviews with friends
05.
Ability to create and share custom moie playlist
06.
User ratings and reviews for movies
07.
Multi language support and subtitles for international films
08.
Watch parties for synchronized movie viewing with friends
09.
Curated collections and themed movie recommendations
10.
Parental controls and content filtering for family frinedly viewing
User Persona
I created the following persona to understand typical users' needs and desires, which in turn helps me build a more usable product.
Ideate
In this section
-
Scenario & Task Flow
-
Site Map
-
Low-fidelity Wireframes
Scenario & Flow Diagram
Shirin wants to sign in to the platform, after that, she is looking to watch movies, so she goes to the movies page, but she thinks it's better to filter movies and decide to choose a movie based on the results.
Site Map
After three time iterations, in the end, the sitemap looks like the image below, designed for the intended user flow.
Low-fi Wireframes
I started my design with simple sketches on paper. Then, to get a better understanding of my sketch and ask for feedback from my mentor, I decided to make wireframes of it.
Final Design
Prototypes
In the end, I started designing the prototype, during the design, I took usability tests from users twice and used the test results and the feedback I received in the design. Now you may see 3 different design modes in some parts and 2 different modes in other parts.
Desktop Homepage V1
Desktop Homepage V2
In 2 different versions of the home page, I have made a few changes:
1. I understood what users want to know about a movie in a hero image.
Hero Image V1
Hero Image V2
2. Creating the movie cards was a bit of a challenge. I carefully used the information I gathered from interviews and surveys to design the final version, making sure that the audience gets exactly what they need at first glance without overwhelming them with unnecessary details.
Card V1
Card V2
3. When creating the global navigation In the first version, I noticed that the options were quite limited, and the search icon was too small, failing to fulfill its crucial role on the website. In the second version, I discovered that the nostalgia option was giving users the wrong impression, which was not what I intended. Therefore, for the third version, I made a conscious effort to address all the drawbacks from the previous iterations. I meticulously eliminated any negative aspects and refined the global navigation to ensure a seamless user experience.
Global Navigation V1
Global Navigation V2
Global Navigation V3
Mobile Application Prototype
The design of the mobile prototype on the main page was done 3 times, and after each usability test, changes were made according to the basic needs and feedback. These changes include:
1. Finding the right options for the sticky menu at the bottom of the page
2. The options that users may need in the first step
3. The visual design of the platform.
Home page V1
Home page V2
Home page V3
To provide users with additional movie information, I created two designs and conducted usability testing. Version 2 emerged as the superior choice. In the first version, users had to navigate to a separate page for more details, which caused concerns about getting lost in the mobile app. The second version was specifically designed to address this issue. Based on user feedback, it proved to be more user-friendly and enjoyable.
Movie information V1
Movie information V2
For the search page, I explored two different design options. The first version didn't quite meet the aesthetic requirements. However, in the second version, I made a conscious effort to improve the design. To gather inspiration and learn from best practices, I researched how other platforms approached similar designs. This enabled me to enhance the overall look and feel of the search page, resulting in a more visually appealing and user-friendly experience.
Search page V1
Search page V2