SPH Media Lifestyle

A revamped UX/UI template for all SPH’s magazine websites.

Role:

UX Designer

Activities:

Stakeholder interviews, landscape review, wireframing

Tools:

UXPin

What was done

SPH Media wanted a newly designed template for all their magazine websites, with an improved user experience that balances between content and advertisements.
Conducted an audit of nine magazine websites and selected three distinct sites—HardwareZone, HerWorld, and Harper’s Bazaar—to create the template design, ensuring it would be adaptable across all nine websites.
Worked closely with stakeholders from each magazine, gathering insights into their target audiences and business goals. This informed the selection of competitor websites for review.
Analysed both local and global competitors in the entertainment industry to identify current web design trends, ensuring the new template met market standards.
Wireframed and prototyped 23 pages for HerWorld, Harper’s Bazaar, and HardwareZone—covering both desktop and mobile versions—with an added comparison feature. (Note: Forum design was excluded from the project scope.)
Collaborated with SPH’s advertising team to integrate ad spaces seamlessly into the wireframes, optimising revenue potential without disrupting the user experience.
Led the UX/UI presentations and worked alongside the creative designer to refine the mockups after wireframe approval.

Here are some of the key functionalities wireframed:

Introduced a’ show more’ scrolling that gives users a preview of the article so that they can decide if they want to click in and continue reading, or keep scrolling till they found an article of interest. This functionality was incorporated in all article detail pages across the magazine websites.

A product summary was also proposed for hardwarezone users to easily understand the pros and cons, without having to read through the entire article.

Based on user insights, hardwarezone users regularly used the comparison functionality to compare products. Simplified the comparison functionality interface and interaction for a smoother experience. The comparison functionality was exclusive for hardwarezone.

More wireframes: