To create a cohesive user experience across regions I developed and maintained a living style guide that defined typography, colors, icons, spacing and standardized components for the web site — which in the past were outdated or incomplete. The guide helped ensure that all future product development would have a consistent look and feel.
A major challenge I faced when revamping the web site was meeting both commercial and editorial needs. While it was important to have viewable ads, it was just as important not to draw attention away from the content. To do so I opted for less intrusive ads like sticky sidebar ads to maximize viewability but limit disruption when reading content. Whenever larger ads were required, I recommended putting them further down the page to avoid early bounces.
To promote site exploration and help readers find relevant content on the homepage and vertical landing pages I focused on establishing a visual hierarchy, creating points of interest and enabling editors to create featured sections.
While revamping the site’s content pages I found inspiration from the magazine’s use of full bleed layouts and typography. This led to designing more flexible layout options for editors, maximizing space and enabling the use of larger images, resulting in much more visual and dynamic content.
Considering over 60% of Tatler Asia users visit the site on their mobile device, we redesigned the web site with a mobile-first approach. This meant designing responsive components and using mobile UI patterns that were intuitive and familiar.
