Dice Media’s Landing Page; a UI/UX Case Study
I joined 10k Designers UI/UX Cohort by Abhinav Chikara in November 2022. And for our second assignment, I had to make a Landing for a creator/ Youtube channel. My goal with this assignment was to learn about Design principles and to learn more about visual design. So I decided to create landing page for Dice media, as it is one of my favourite Youtube channel.
🔎 Brief
The X
Designing website for Dice media which is a YouTube Channel — premium digital video division of Pocket Aces. they make web series and shows. I have been following their series since 2015 and a huge fan of all their shows so I decided to create landing page for them.
The Y
- Their shows have multiple seasons and are available on different ott platforms like Netflix, Amazon mini tv, Hotstar and some free on Youtube which creates confusion for new audience as well as someone who is regular viewer of their content so I wanted to make information easily accisble for the users.
- To Create a platform to sell their Merchandise as of now they don’t have a specific platform for that.
- To increase YouTube Numbers.
Pocket aces which is the parent company has it’s own website but that is for creators, Brands and for businsess. My goal with this landing page was to solve users problem and eventually bring more attraction on their videos and increase sales of their merchandise
📹 The Prototype Video
If you are someone who doesn’t like to read here is the prototype video of the landing page that I ended up designing for this project.
🧠My Process
I applied my learnings from 10kDesigners to come up with a process to design a landing page to achieve the above-mentioned goals. I have summed my design process into the following :
🔍Research
I started my research by exploring other platforms to understand some common patterns which will help users to navigate on the website easily at the same time since the user group of dice media are younger audience I wanted to keep some fun interraction and style guide to cater younger audience.
I also checked Pocket aces website, Dice media’s Instagram page etc to understand the brand language and design pattern
Doing this I realised since Pocket aces is the main company their current website focuses on Brand collaboration & Influncer collab and it is not for it’s youtube audience.
Then I researched about some merchandising websites as that is also one section I wanted to add in my website
Doing this helped me decide my goal from this website
🎯Goals
- Promote upcoming shows/ series
- Provide information related to Dice’s shows and on which platform the show is going to be available
- Increase youtube subscribers
- Increase Merch sale
👩💼User Persona
After doing the research I started creating some persona’s about who would be the user’s that would be visiting this website.
I segmented the audience into three types of personalities: Existing Dice media followers, New visitors unfamiliar about Dice media, and user who enjoys buying different merchandise.
After understanding the target audience and their needs and Frustrations, I used the MoSCoW method to prioritize the content of the landing page for both new and old audience of dice media
- Must-haves: Identifying the essential information that both new and old listeners need to know about dice media like different shows and seires that they have & Different merch that they have.
- Should-haves: Categoriesation of differnt series, upcoming shows and Information about tie up with different ott platforms. user testimonials and Influncers section.
- Could- haves: Option to browse shows based on moods, social media proof, Brands who they have worked for.
- Won’t-haves: I decided to not focus on keeping section for brand collabs as my focus was on solving users problem, for catering to brands it is already done on pocket aces website.
Information architecture
After gathering all the information from my research I started to roughly lay-out all the information that needed to be shown on the page. The idea was to lay out all the information clearly according to priority so that the target audience can understand.
🖍 Wire frames
During wire-framing, I attempt to give some visual structure to the information, so I tried a lot of different layouts for even similar screens to come up with the most suitable solutions.
💎Visual Design
After some basic idea I started working on the visual design and copy for the landing page. It is at this stage where I needed to decide on the color scheme and typography for the website
I took some help from Chatgpt to help me write some catchy headline and and explored different font pairs that can give character to my landing page
🎨 Style Guide
As Dice media is a known brand and already has an established logo I didn’t wanted to change it’s brand color also since the website will have a lot of Images of webshows I decided to go with minimal colors so that it doesn’t look too heavy and cluttered.
Exploration
I did some Itterations section vise before finalizing on my final website design with every itterations I could see the design getting better and also reaching close to the problem that I wanted to solve
Now let’s start with virtual tour of section-wise walkthrough of the landing page and my thought process behind the way I designed them.
🦸♂️Hero Section
Hero section is the most important section of landing page as it is the first thing user sees and based on that they form assumptions about the brand hence it is very important to design it in a way where the information is clearly delievered and it also needs to gain trust of the users.
Feedback
- No Visual hirearchy and balance
- Headline copy was too big and font was not giving any character to the website
- The background design had too many images making it look cluttered
- Nav bar was not getting proper attention and was visually less visible
Improvements
- Navigation Bar, so that the user can easily navigate through the website seeking information about the shows that will ultimately help him to make a decision.
- With crisp & easy to understand copywriting, the user should understand what Dice media does.
- Provide a clear call-to-action to encourage the visitor to watch shows and buy merch.
- Designing it visually in such a way that they should get to know about the brand.
💻 web shows
This is the second most Important section of my landing page as it is designed to promote dice media’s web shows and solve problems of existing as well as new users I divided this in 4 sections to give users better clarity and help them make a decision of which show to watch
Feedback
- Carousel format is not a good way to browse multiple shows
- cards had too much information making it look bad visually
- Was not solving the problem of identifying which show is available on which ott
Improvements:
- Top 5 of the week- With this section I tried solving two problems a lot of times a person skips watching shows because of decision fatigue so to make decision easier I have mentioned top ranking shows based on ratings
second problem being providing clear information about which show is available on which ott platform, beside every show I added the logo of that OTT channel.
2. Segerating free to watch shows and featured shows- Having an option to browse free shows on YouTube provides a sense of trust to new audiences before subscribing. Users can view the number of views, video titles, and upload dates for each video, gaining valuable information about the channel. The section also includes a clear call-to-action (CTA) that encourages users to explore the channel and watch videos.
In the featured shows section, I enhanced the user experience by associating each card’s background color with its respective brand. This creates a sense of familiarity and strengthens the connection between the audience and the brands they love. Additionally, I introduced a new layout that allows users to browse shows based on the OTT platform they prefer, making it easier for them to find content aligned with their streaming service preferences.
3. Watch shows based on your mood- I’ve noticed a common issue while binge-watching various series and shows: some days, you’re in the mood for comedy, while on other days, you prefer more dramatic content. To address this, I’ve introduced a new section that caters to all genres. I’ve also added a touch of gamification, keeping in mind that Dice Media’s primary audience falls within the 18–30 age group who appreciate such engaging designs. Now, users can easily explore and enjoy their favorite genres with a touch of fun and variety.
👚Merchandise
This was the second problem that I wanted to solve as there is no specific platform as of now for dice media fans to buy merch I created a section to explore all the products that they have highligting the best sellers.
Feedback
- Visually this looked like an ecommerce website.
- Carousel format won’t work for browsing multiple products
Improvements
- Visually clean layout, giving it a look of landing page
- Product information in a better layout
📝Love from audience
To build trust with new audiences, I’ve added comments from Dice Media’s YouTube channel as social proof. These comments showcase the positive response of their content and help establish credibility among potential viewers.
Furthermore, I’ve highlighted Dice Media’s impressive YouTube statistics. This emphasizes their popularity and encourages new audiences to join the large and engaged subscriber community.
🎙️ Creators Section
It shows all the creators that have featured in their videos. Since these creators have a very loyal fanbase, giving information about the creator like name, shows they have been part of and social media links.
- Showcases some top creators who are part of Dice media team
- Includes information about the creators such as name, their shows social media links.
- A moving ticker effect to show all the creators who are part of the team.
📃Footer
Here I added a short brief about the company, Dice media logo, quick links for user to navigate and a subscribe button so they don’t miss on any updates.
🚀 Final Design
Below is the final version of the website that I designed.
Please refer to this link for the Final Prototype
🔑 Key Takeaways
This was the first time ever that I was designing a landing page, I didn’t realize that it takes a lot of work to design a logical and practical landing page that works successfully in the real world. Some of my major takeaways are :
- You have to constantly take feedback from your mentors or seniors who can help you understand more insights & different perspective, I learnt that async feedback works well as most of the mentors would be busy.
- Trying different Iteration is the only way that will improve your visual skills as a designer.
- Sometimes even though you really like the design of an element and is looking visually good but you have to remove that element because for users it is not creating a good experience and not adding any value.
- While iterating, don’t iterate on the same design rather duplicate the design and then iterate. By doing this, it is easier to compare.
- Write notes of everything that you liked during your research or any idea that you came across it becomes much easier to write case study later.
✨ Gratitude
I am forever grateful to Abhinav Chhikara and Jayneil Dalal for their guidance, support, and belief in my abilities. They have played a pivotal role in moulding my journey, impacting both my personal and professional growth.
I also want to express my heartfelt thanks to Vishant kumar and Aishvarya Gupta for encouraging me to enhance my visuals and to my amazing friends at 10k Designers for their constant support.
👩💻 Behance
Please refer https://www.behance.net/suchitanayyar for Landing page visuals.
I am actively looking for exciting Product design opportunites feel free to connect on
Twitter - https://twitter.com/suchitanayyar28
linkedin- https://www.linkedin.com/in/suchita-nayyar-ba9661229