Magazine Article
A redesign of the magazine article layout on ynet, aimed at improving readability, content hierarchy, and engagement — while maintaining full alignment with the existing platform.
The Chalenge
The goal was to improve the long-form reading experience for ynet’s magazine articles — making them feel distinct, structured, and user-friendly, while staying fully aligned with the existing design system.
Key challenges included:
1
Lack of content differentiation
readers couldn’t recognize long-form content as distinct from standard news articles
2
High mid-article drop-off
due to weak content structure and absence of navigation or reading aids
3
Visual noise
too many unused and inconsistent social buttons that disrupted visual consistency
4
System constraints
design needed to adapt to a fixed grid and existing components, with no support for layout overrides
My Role
I designed the entire UX/UI for the new magazine article layout — from concept to final handoff.
Collaborated with the product manager (based on analytics insights), the tech project lead, and developers to ensure feasibility and alignment with system constraints.
Also led the visual QA process, working closely with developers through iterative design–dev cycles to ensure precise and consistent implementation.
Also incorporated requests from the editor-in-chief, translating editorial priorities into scalable, user-centered design solutions.
Designing seamless, visually minimal long-form experiences that elevate content and improve readability
Design Highlights
Several targeted design improvements were implemented to support a structured, scalable, and content-first experience.
These updates improve readability, enable better user orientation, and reduce friction across long-form content.
Hero Section
Designed to establish a clear entry point for long-form content.
The use of full-bleed imagery, prominent typography, and a clean layout helps users orient themselves, recognize article type, and stay focused from the start.
Responsive Hero Section across desktop, tablet, and mobile — designed to signal content depth and support user orientation.
Full-Width Images & Gallery Component
Two tools to support narrative-driven layouts and visual rhythm:
• Full-width images now support vertical formats and allow editors to custom-crop visuals to better match the story's needs — creating stronger content anchors and enhancing pacing in the reading flow
• The gallery component presents multiple visuals in a clean, swipeable layout — improving scannability and offering editors a consistent way to integrate rich media
Full-width image layout on desktop and mobile — supports vertical formats and allows editors to crop visuals for better narrative alignment.
Structured gallery component on desktop and tablet — supports narrative pacing and improves media navigation within long-form content.
Collapsible Info Boxes & Quote Teaser
Two components designed to improve content flow and reduce cognitive load in long-form reading:
• Collapsible boxes deliver additional context only when needed, helping users stay focused without visual overload
• Quote teasers introduce visual anchors that reinforce key ideas, improve scanability, and create natural reading breaks
Three versions of the collapsible info box — shown in closed state on desktop, expanded on mobile (dark mode), and inline on tablet when the content is short. Designed to reveal supporting information on demand while maintaining a clean and uninterrupted reading experience.
Quote teaser component shown on desktop and tablet dark mode — highlights key statements to create visual anchors, improve scanability, and emphasize core messages within the reading flow
Chapter Navigation Component
Designed in response to drop-off patterns in long-form content, this component enables users to navigate chapters effortlessly — improving content orientation, scannability, and retention.
Chapter navigation on desktop — initially embedded below the hero, then becomes sticky while scrolling, allowing quick jumps between sections in long-form articles.
Chapter navigation on mobile and tablet — visually identical, displayed below the hero section and becomes sticky on scroll, allowing users to navigate long-form content efficiently.
Social Sharing, Audio Player & Sticky Header Enhancements
Targeted refinements were made to enhance clarity, usability, and visual hierarchy across key interface elements:
-
Social sharing icons were simplified to black-and-white variants, reducing distraction and aligning with the article’s visual tone.
-
Audio player was redesigned as a floating action button that expands into a pop-up player on mobile and tablet — improving space efficiency and user control.
-
The sticky header was streamlined with updated icons and refined proportions to create a more balanced and unobtrusive navigation layer.
Desktop sticky header social sharing icons expand on click in a horizontal toolbar, offering clear access to share options while maintaining a clean and minimal interface.
Tablet sticky header tapping the bookmark icon allows users to save the article for later, making it easy to return to content they want to revisit at any time.
Mobile web view in dark mode. The sharing icons in the sticky header are tailored for web users, differing from those in the native app to ensure context-appropriate functionality and maintain platform consistency.
Floating audio player on tablet (dark mode) and mobile. The redesigned player ensures persistent access to audio playback, allowing users to scroll through the article without interruption. It’s compact, always visible, and supports easy control on smaller screens.
Impact
-
Enabled a smoother reading experience, with better content flow, clear visual hierarchy, and reduced cognitive load.
-
Reduced user drop-off rates by introducing structured navigation and minimizing friction in long-form reading.
-
Gave editors more flexible tools to shape storytelling — including full-width visuals, collapsible sections, and organized galleries.
-
Improved accessibility and responsiveness across breakpoints through modular layout adjustments and scalable components.
-
Strengthened design consistency across the experience, with a shared component system and clearer editorial patterns.