Wireframing for Video Streaming Service
Design Scenario:
I’m designing for Crunchyroll, a popular anime streaming service, on mobile. My goal is to enhance usability and improve the user experience by refining key features on the anime details page.
Project Goal:
Enhance the anime details page for a cleaner, more intuitive experience. My aim is to reduce clutter while making essential features easy to access.
Ideas for Enhancement:
- Add Label to Sorting Icon:
- The sorting icon currently lacks a label, unlike the download button, which has one. Adding a label to the sorting icon will make it more user-friendly.
- Remove Season Dropdown for Single-Season Series:
- If a series has only one season, there’s no need for a dropdown button. It simplifies the interface and makes it more direct.
- Remove the Three-Option Button for "Mark as Watched":
- The "Mark as Watched" option is available in the top-right corner. Having it next to the season dropdown creates unnecessary clutter. Removing it from next to the season chooser streamlines the layout.
Wireframe Fidelity:
I’ve chosen high-fidelity wireframes for this design, as it provides a more detailed and polished look, ideal for testing user interactions and layout before development.
Rationale Behind the Wireframes:
- Clarity and Simplicity:
- The goal of these changes is to eliminate redundant features and make the interface more straightforward. This improves the user experience by providing clear, accessible options without overwhelming them with choices.
- User-Centric Design:
- These edits focus on reducing clutter, focusing only on essential features, and enhancing the clarity of buttons and icons.
Competitive Analysis:
Crunchyroll is one of the best anime streaming services, with a wide variety of shows, a large user base, and frequent updates. However, here are a few competitors and their strengths and weaknesses:
- Netflix (Anime Section)
- Strengths: High-quality original anime content, vast library of other genres.
- Weaknesses: Smaller anime collection compared to Crunchyroll, lacks some niche titles.
- Funimation
- Strengths: Great selection of dubbed anime, solid user interface.
- Weaknesses: Service merging with Crunchyroll, some content limited to specific regions.
- Hulu (Anime Section)
- Strengths: Good selection of anime titles mixed with other genres.
- Weaknesses: User interface is not as focused on anime, less variety compared to Crunchyroll.
Tools used
From brief
Topics
Share
Reviews
4 reviews
Your wireframing inspired by Crunchyroll, is off to a promising start, the comparison designs effectively highlights your thought process, The “New” design’s clean i also like how you’ve organized the content with a thumbnail and text, which aligns well with streaming app conventions.
Great work @Omar capturing the anime streaming vibe keep refining
Ok, looking at this and I need to be straight with you – these changes are cosmetic, not a redesign. Don't get me wrong, the ideas themselves are fine, but...
What I see in your approach:
- Indeed, a label for "Sort By" makes sense – consistency with "Download All" is basic stuff
- Removing the dropdown for single seasons is a no-brainer, I agree 100%
- You're thinking about clutter, which is great 👍
But I have a few "buts":
Problem #1: Not enough research You write about that three-dot menu next to episodes duplicating "mark as watched" – but are you sure? Did you actually check what's in there? Because usually these menus have more options (share episode, report problem, etc.). If there's only "mark as watched" – ok, remove it. But if there's more – that's a different story.
Problem #2: Missing user context Competitive analysis is fine, but where are the actual users? Where are the pain points from real sources? A redesign should answer real problems, not just your feelings as a designer. Did anyone complain about this dropdown? Are people not seeing the sorting option?
Problem #3: This isn't a redesign Sorry, but these are UI tweaks, not a redesign. A redesign would be something like:
- Rethinking the entire information hierarchy
- A new way to navigate through episodes
- Redesigning the flow from entering the anime page to starting playback
What I would do differently:
- Start with problems, not solutions – find 2-3 specific user problems (real quotes, data, whatever)
- A/B testing mindset – these changes are small enough that you should think of them as experiments to test
- Measurements – how will you measure if this works? Time to first play? Engagement?
Overall:
You have an eye for detail and can sense where something is "off" – that's great. But you need to build a stronger business and user justification. These changes are fine as "quality of life improvements," but sell them as such, not as a redesign.
This is a good starting point. Now go deeper. Talk to users), see what actually bothers them.
You have potential. 💪😊
Great job !!
Thank you for sharing your thoughts, Omar!
Your feature-driven wireframes are well done, and I enjoyed reading more about your decision-making process.
That being said, I'd love to see more visual representation in your work- either ideas for improvements to more screens or a novel concept for Crunchyroll's app. Your interface update ideas are great, but how can you push them even more?
Additionally, it would be awesome if your competitor analysis connected with your wireframes- what did you learn from Crunchyroll's competitors that impacted your design decisions? It's great to hear about where Crunchyroll is competing against, but if it doesn't impact your suggestions for improvements, it feels a little bit separate from the project as a whole.
Keep at it! Looking forward to seeing more great work from you.
You might also like
Blip - Esport app design (Light & Dark UI)
Reimagining Asana's Color System
Customer Journey Map for a Co-Working Space
Responsive Main Screen
Latios - Free Portfolio Template for UX/UI Designers
Workspace Booking Flow - UI/UX Design
Interaction Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
