Challenge
To design a brand new responsive website that connects a news media company with a new target demographic.
Project type
Client Project, UI/Web Design
Timeline
December 2023 - February 2024
Role
UX/UI Designer (1 of 2), Animator, Webflow Developer
Tools
Figma, Webflow, After Effects, Lottie Files
Platform
Responsive Website
Our Process

Company Overview

Sing Tao Media Group is the largest Chinese media group in Canada. Their various platforms include print, radio, e-commerce and social media, connecting with over 1.7 million viewers and growing.

As part of their rebranding campaign, we were asked to design a landing page that aims to present essential company information for potential advertisers and drive business enquiries. Previously, the company used a “Media Kit” pdf, which was not easy to find on their website.

Designing and Developing the Site

Because the client wanted animations and interactive elements on the website in a short amount of time, I decided to use Webflow, which supports Lottie Files animation. Lottie Files (.json-based animations) will allow faster load times, which is critical for landing pages to avoid high bounce rates.

Challenge #1: No Existing Brand/Style Guide

Sing Tao didn't have an official brand guide, which meant we had to put in some work in evaluating their current platforms and find some commonalities. We also researched competitors to see what type of fonts and colours were typically used. In the end, we selected a serif typeface for the headings to convey a sense of tradition and sophistication to represent Sing Tao's long-standing presence in the industry. The colours we used for the site were selected from colours in their logos.

Challenge #2: Animations and Responsiveness don't mix well

The client wanted to have animations that were interactive with scroll. That sounded simple enough, or so we thought. Optimizing for mobile proved to be a challenge, as there were so many literal moving parts in the animations. Our solution was simply hiding some decorative elements on smaller viewports, which also helped reduce visual clutter, win-win.

Challenge #3: Fit everything on a single page, but keep it short and simple

Our initial explorations had everything laid out in plain sight. We made use of progressive disclose to clean this up, making it less overwhelming for visitors. As a result, the page looks minimalist and user-friendly. We also made sure that the type hierarchy and layout made the content easily scannable.
Outcome
After a series of iterations and bug fixes, we finally launched the website in March 2024.

1. Higher Conversion

By creating an interactive landing page to replace the obscure “Media Kit” pdf, we have made it easier for advertisers to see Sing Tao’s value as a media agency, and effortlessly inquire about the business via the contact form. We anticipate that this will allow the company to have a wider reach and drive up conversion.

2. Competitive Edge

Through our research, we discovered that not many competitors have an interactive site for advertisers. We’re confident the brand new, bold and animated website will help the client gain a competitive edge in the market.