OSN-Website Redesign and Cms Design System

Smart TV and Web App

OSN is an industry leading Media Industry provider platform in the MENA region

Context & Challenge

OSN, a premium entertainment network in the MENA region, required a modern website to better showcase its content and offerings.

The challenge: Redesign the public-facing website and establish a robust design system that integrates seamlessly with their internal CMS while aligning with brand and accessibility standards.

Project Overview

Company: OSN

Platforms: Web

Role: Product Designer – UX/UI Design, CMS Design System

Objective: Redesign the OSN website to improve user experience, create a unified design
language, and develop a CMS-driven design system for scalable content management.

My Role

As the lead UX/UI designer, I was responsible for:

– Gathering stakeholder requirements and user research

– Designing the sitemap, wireframes, and responsive layouts

– Creating a scalable design system

– Collaborating with developers for smooth CMS integration

Research and Sitemap Strategy

To better understand the user needs and optimize the experience, we:

– Conducted stakeholder interviews and user journey reviews

– Studied content engagement through web analytics

– Reorganized the sitemap to reflect clearer navigation and prioritization of top-performing content areas

Design System and CMS Integration

We created a modular design system aligned with the OSN brand and built specifically to integrate with the CMS backend.

The design system included:

– Color palettes and typography aligned with accessibility standards
– Button systems, card layouts, navigation modules, and banners

– Responsive layout grids and spacing conventions

Each component was tested and optimized for reusability by the development and content teams.

UI Components & Responsive Design

The website was designed to be fully responsive and accessible. Key areas included:

– Homepage: Featured content, promotional banners, personalized content recommendations

– Shows & Movies Pages: Structured by categories with smart filters

– CMS Templates: Designed to be flexible for content editors to customize per campaign or season

Outcome & Lessons Learned

– The new design system significantly reduced content launch times and improved visual consistency

– Increased site usability and performance across mobile and desktop

– Collaborating with CMS developers early streamlined design-to-code workflows

Lesson learned: A CMS-compatible design system bridges the gap between visual design and scalable content management. Consistency, flexibility, and documentation were key to its success.