Project Overview
Bloomwha is a high-fidelity UI/UX concept inspired by real frustrations with existing webtoon platforms. This project explores how clearer navigation, structured layouts, and intentional design can improve the overall reading experience.
The Problem
Many webtoon platforms especially unofficial ones are cluttered, visually overwhelming, and difficult to navigate. Users are often faced with excessive content, unclear hierarchy, and inconsistent layouts that disrupt the reading experience.
The existing platform is visually cluttered and difficult to navigate.
Important content lacks hierarchy, and users are overwhelmed by excessive information and inconsistent layouts.
Site: Mangago.me
Ideation & Wireframes
To address the usability issues identified, I created low-fidelity wireframes to explore clearer layouts, improved navigation, and better content hierarchy.
This stage allowed me to focus on structure and user flow without being distracted by visual design.
The Goal
- Simplify navigation and reduce confusion
- Improve content discovery and browsing
- Minimize visual clutter (especially CTAs)
- Create a consistent visual system
- Design for both light and dark mode
Key Insights from Existing Platforms
From analyzing platforms like Mangago, several usability issues were identified:
- Content Overload: Too many elements shown at once, making it hard to focus
- Weak Visual Hierarchy: Lack of structure reduces scannability
- Poor Content Moderation: No filtering or control over explicit content
- Cluttered Interfaces: Text-heavy layouts and inconsistent spacing
- Low-value Comment Sections: Difficult to find meaningful insights
These issues highlighted the need for a cleaner, more structured, and user-centered interface.
Design Process
The process focused on translating usability issues into structured design solutions, emphasizing clarity, hierarchy, and consistency
- Research & Platform Analysis
- User Flow Definition
- Low-Fidelity Wireframing
- High-Fidelity UI Design
- Prototyping in Figma
The Solution
Bloomwha introduces a cleaner and more intuitive interface by restructuring layout, simplifying navigation, and strengthening visual hierarchy. The design reduces cognitive load and allows users to focus on content more efficiently.
Key improvements:
- Card-based layouts for better content organization
- Clear navigation and reduced clutter
- Structured metadata and improved readability
- Optional content filtering for safer browsing
- Consistent design system across screens
Design Highlights
Homepage
Designed to reduce clutter and improve content discovery through clearer hierarchy and curated sections.
Search / Explore
Organized content into categories to improve discoverability and browsing efficiency.
Product Page
Prioritized ratings, chapter access, and structured metadata for faster decision-making.
Messages / Community
Introduces a social layer to the platform, allowing users to interact, share thoughts, and engage in conversations within a clean and organized messaging interface.
Favorites / Library
Designed to help users quickly revisit saved titles through a more organized and visually structured library experience.
Profile & Account
Redesigned into a user-centered dashboard focusing on identity, activity, and settings.
Challenges & Outcome
- Content Overload → Solved with structured layouts and visual hierarchy
- Cluttered CTAs → Simplified and strategically placed actions
- Consistency Across Screens → Built a reusable design system
- Dark Mode Design → Used a softened palette to improve readability
Prototype
Bloomwha Prototype
Final Outcome
- Designed a complete mobile UI system
- Created multiple core screens (home, search, product, messaging, profile)
- Developed both light and dark mode
- Improved usability through clarity and structure
Reflection
This project strengthened my ability to translate real user frustrations into practical design solutions. It reinforced the importance of structure, usability, and visual hierarchy in creating meaningful user experiences.
Skills Applied
User Research & Analysis
- Competitive analysis
- User pain point identification
Information Architecture
- Content structuring
- Navigation design
Interaction & UI Design
- Wireframing (low → high fidelity)
- Prototyping in Figma
- Layout and hierarchy design
Usability & Testing Thinking
- Heuristic evaluation
- Readability and accessibility improvements
