HDToday
Crafting a simplified subscription-free service for everyone.
CLIENT
HDToday - personal project
TOOLS
Figma
Adobe Illustrator
PROJECT DURATION
Overall: 2 months
Discovery & Research: 1-2 weeks
Design & Testing: 4-6 weeks
ROLE
UX Design
UX Research
Visual Designer
SUMMARY
HDToday is a non-subscription entertainment website with over 400,000 movies and shows. It offers free access to a wide range of titles to users worldwide.
PROBLEM
A non-subscription website is great for a wide range of users who are trying to save money on mundane services, but it lacks fluidity and provides an uncomfortable viewing experience due to constant pop-up ads and the need for multiple clicks to achieve a task.
SOLUTION
The project aims to update the website's aesthetic, enhance UX standards, simplify processes, and bring responsiveness to the site. Other changes include updates to the color palette, fonts, images, and overall consistency for a seamless viewing experience.
Personas
I wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviors. So, I created three personas for each of my user segments. They were based on user interviews and surveys, and these were key to understanding my target audience and how I came up with my solution to redesign the user experience to meet their needs.
Usability Testing
I created a fully-functional, high-fidelity prototype of the new flows using Figma. I did 3 usability tests in the first round and 3 after iterating on the issues that were identified:
Issue 01
Cant filter out shows/movies quickly
At first, I stuck with the genre filter up at the navigation bar, keeping the current website tabs for quick finding, but all three users I tested on were searching for the options next to the search bar or next to H2 headings. When they couldn't find it, they were confused about why it was a separate tab on the navigation bar.
Solution 01
Simplifying navigation options
I realized the navigation bar had too many options, making users spend too much time deciding where to look. I iterated on the navigation to include four main options and created a button for genre filtering and other necessities that were previously in the navigation bar to reduce the options for quicker task completion.
Issue 02
No IOS app option
With the current site, while users were going through they noticed there's an option for android app, and not IOS, when the site is pull up on IOS it was constant pop-up ads, with constantly bringing up new tabs to prevent you from watching. It took users about 3 pop up tabs to click onto one title or search up a title, but even when it goes through, they had to hop through 3-4 tabs before able to click play.
Solution 02
Making it accessible to everyone
With most users being English speakers residing in the United States, having just an Android option doesn't cover the rest of the market. Approximately 55.9% of mobile users are on iOS, compared to 43.77% on Android. By removing the bias of having only an Android option and creating a global UI for mobile, we can attract more users and increase traffic toward the service, helping to draw users away from subscription-based services.
Next step
Further improvement I would make on this project would be:
Brand color palette
Reviews page for movies/shows for quick reading of summary and decision making to watch something new
Improve accessibility Ex: support other language page translation or other dub/subtitles
Learnings
This was my first UX case study, and looking back, there was a lot that could've been improved, especially in terms of consistency and the heavy use of gradients. However, I figured out how Figma works as a design software. With my Graphic Design background, I applied my own simplistic design style to create a better and cleaner design. I also learned that it's not just about following principles; users provide the most important insights because the design is for them, not just for aesthetics. Additionally, I learned to solve problems using data-driven design to create the most optimal experience.