• Founded 1978
• Multi-channel media group (digital & print
•The Leading Canadian-Chinese multi-platform content provider
• Owned by Torstar & Sing Tao News Corporation
Sing Tao Media Group
Advertisers Site
Advertisers Site
SING TAO MEDIA GROUP
Case Study Details
00002
Platform
Web
Industry
Media
Type
Client Project
Duration
December/23 - February/24
Team
2 UX Designers, 1 Coder
Tools
Figma
Adobe Illustrator
Webflow
.
.
Total
←Use the navigation bar on the left side of this page to jump to a section.
Design Brief
Goals
Provide easily accessible and centralized platform for our partners and clients to access essential company and product information
Drive inbound traffic and business enquiries
Tone & Feel
Corporate; Prestige; Stylish
Design
Simple, Direct, Interactive
FINAL Deliverable
Responsive Website
UI DESIGN
Previous Site
Prospective STMG advertisers would click a link to a 12 Page PDF for information.
Starting Point
• The client showed us website examples which they liked the style of
• We were provided with a content flow document, of which all content was to be included
• No branding or style guidelines were provided otherwise
• We were provided with a content flow document, of which all content was to be included
• No branding or style guidelines were provided otherwise
Client Website Examples
Existing Brand Colours
HEX
001755
001755
HEX
D0131C
D0131C
Content Flow Document
Using the above, we created many iterations of a single page design which were presented to the client
-this is the client’s pick
-they prefer our new icon designs
-add yellow text
-they prefer our new icon designs
-add yellow text
Client Feedback
Selected Styling
Colours
White
HEX
231916
231916
HEX
001755
001755
HEX
E9CD86
E9CD86
Typography
Public Sans Regular
Roboto Serif Medium
UX Design
Challenge
• The client had an overwhelming amount of information they wanted visible simultaneously
• In order to reduce cognitive load, we utilised certain methods of presentation
• In order to reduce cognitive load, we utilised certain methods of presentation
Progressive Disclosure
• The client requested that we keep all details from the brief, without cutting anything out
• We implemented progressive disclosure to provide users with sufficient information and discoverability, allowing them to access additional info at their discretion
• We implemented progressive disclosure to provide users with sufficient information and discoverability, allowing them to access additional info at their discretion
Example 1
Client Brief Document
Our Design
Example 2
Client Brief Document
Our Design
Visual Hierarchy of Information
• Using scale, font size and colour we designed this section in a way that is easier to read and understand
• We also changed and expanded the text to better communicate to the user what this section is about
• We also changed and expanded the text to better communicate to the user what this section is about
Example 1
Client Brief Document
Our Design
Result
Design Impact
Refined User Experience
From a static PDF, to a Dynamic website with a persistent Call to Action, and accessible information architecture, we have improved the experience for prospective advertisers
Improved Accessibility
• Our site is responsive, so users can access the content in an appropriate format for their device
• Interactive links & Call to Action make accessing additional information much easier
• Upcoming: the site will allow users to change language, broadening STMGs potential advertiser base inbound traffic and business enquiries
• Interactive links & Call to Action make accessing additional information much easier
• Upcoming: the site will allow users to change language, broadening STMGs potential advertiser base inbound traffic and business enquiries
Expanded Reach & Improved Lead Generation
Our persistent Call to Action encourages immediate user action, facilitating inquiries and aiding STMG in attracting more advertisers
