Semana

Semana

UX

UI Framework

Foundation

Front End Development

2015


Responsive redesign and Styleguides


What we did

  • Strategic design
  • Experience design
  • Interface design
  • Design System development

Industry

  • Publishing
  • Media

Context

Publicaciones Semana is the leading magazine publishing company in Colombia. In 2012 they had over 30 different websites for their 10 publications, using device specific versions, ad hoc design and code for each site, and taking over 5 months to deliver a new project to market. It was clear we needed a responsive, structured redesign of all sites, understanding the underlying patterns and general requirements before jumping into design to make sure we could reuse as much code as possible across the different sites. My responsibility as Lead UX / UI were creating a common responsive UI framework of components to be easily reusable, designing responsive websites for all publications according to its current brand and visual language, getting stakeholders buy-in for each publication, creating HTML / CSS / JS prototypes and styleguides for easier development of new sites, and helping to optimize sites and develop new features across all sites.

Objectives

  • Reducing the number of sites supported using responsive design techniques for all ten publications’ sites
  • Improving code quality and reducing support workload for the development team
  • Creating a common responsive UI framework that was flexible enough to adapt to the different visual languages and brands, to make easier to reuse code and develop new sites and features faster
  • Improving key user metrics for all sites, specially for the most visited as they generated more revenue through ads.

Reducing the number of sites supported

Semana, Dinero, Soho, JetSet, Fucsia, FinanzasPersonales, Arcadia, 4Patas, SemanaSostenible. Each one of these 9 publications had three different versions of their websites, one for mobile, one for tablet and the default, non-responsive, desktop version, for a grand total of 27 different websites with very little to no reused code. Such a fragmented codebase was painful to support for the development team, and made it very difficult to design, let alone implement new features across all sites. By using responsive design techniques and a developing a custom UI framework, we were able to reduce the number of sites supported by a third.

Screen Shot 2019-10-28 at 8.30.38 PM

A flexible UI framework

For a big company like Publicaciones Semana, adopting or creating a UI framework that is flexible to adapt to the different brands and visual languages of their magazines is key in having a more unified codebase, speeding development of new sites and features and reducing support workload. We decided using Zurb’s Foundation as our base UI framework, creating custom components based on our needs that could be reused easily from project to project. This allowed us to reduce the time needed to develop and launch a new site from over 5 months to under 2 months, and making easier to support and debug as well as implementing new features across all sites.

Screen Shot 2019-10-28 at 8.40.00 PM Arcadia

Screen Shot 2019-10-28 at 8.37.32 PM Dinero

Screen Shot 2019-10-28 at 8.38.18 PM Semana

Improving user metrics and ads revenue

Publicaciones Semana digital business model was based in ad revenue, allowing the user free access to all contents. Improving key user metrics like daily / monthly users was very important to be in a position to negotiate better terms with advertisers and sustain this business model. Consolidating the user base in fewer sites and implementing SEO improvements resulted in improvements for all sites, ranging from 45% for semana.com (8.2M vs 5.6M), 87% for soho.com.co (5M vs 2,7M), 76% for fucsia.co (1M vs 0.6M) and 82% for dinero.com (1.7M vs 0.9) since the launch of the new web sites(04/15 vs 04/14).