Template Designer for The Times and
The Sunday Times Newspapers

Enabling flexibility of layout design for the iPad and tablet editions

My role and responsibilities

Role: Lead UX and UI Designer
Responsibilities: UX and UI design, training, and promotion
Applications and tools: Sketch, Axure, Illustrator, PhotoShop, JIRA
Product team: 10 Developers, 3 QA's, UX Researcher, Product Owner, Delivery Lead

Overview

The Times and The Sunday Times are national newspapers owned by News UK / News Corp. These award-winning publications provide world-class news, sport, analysis and opinion to readers both in the UK and around the world. 

The iPad and tablet editions of the papers was the hero product with over 300,000 paid subscribers and is the number one paid news app, on the app store, in the UK.

The challenge was to give production designers more flexibility over the layouts on the app, make the production process more efficient by speeding up the time it took to design layouts, and to be able to publish and reuse the layouts directly within the production CMS.  

The outcome was the creation of Template Designer - a web based, no code, layout design tool that integrated with the production CMS.

Credit: Video made by Michael Copeland

Problem

The six layout templates created for the iPad and tablet editions were designed to achieve a variation of layout styles to reflect the different sections and subject matter. I have observed that the layout templates are not meeting the goal of being flexible enough to represent all content within the app, that is causing production designers to create bespoke, flat designs, are time consuming, add file size, and are not responsive or interactive.  

I conducted discovery research with the production designers to understand the pain points and goals they had when designing a digital edition for the app.

Key findings from discovery research

Layout design

• Current app: restricted to a small number of templates
• Needed: a wide variety of templates to reflect the section brand and subject matter

Responsive design

• Current app: bespoke designs are created as flat images and are not responsive
• Needed: responsive layouts that flex to the size of the view-port

Interactivity

• Current app: none (if flat images)
• Needed: scrollable text, hotspots, motion, and parallax

Development time

• Current app: six weeks needed for Tech to create a new layout template
• Needed: quick and easy development of layouts without Tech support

Design and build

Access to the internal user base allowed an organic process, adaptive to user needs and changing design requirements

From the discovery research an MVP was built with basic functionality including the ability to create grid structures, import images, choose from a selection of pre-designed font components, and to save and reuse templates in the CMS.

To test the program a single, low value page was built with Template Designer, but made to look the same as before, and published in the app. In parallel superusers were given access to design and build new layout templates and give feedback. Over time more pages were produced and published in Template Designer.

As more templates were created more features were asked for by the designers. I constantly gathered user feedback, communicating with users on a daily basis. When a feature was prioritised, I would hold an ideation session with the product team. In these sessions we would discuss potential solutions and their technical viability. I would then design the feature, that would be built as a prototype and released to super users to test.

I would sit with a user at their desk and observe them working with the feature for the first time, documenting any issues. This information was then fed back into the next iteration. When super users were satisfied, the feature would be released, and I would conduct open demos for users, stakeholders, and other interested parties to attend.

Feature development process

Outcome

The App Store rating for The Times and The Sunday Times daily edition app jumped from an average of two to four stars

95% of pages on the app are now built in Template Designer. Technically the app is now more stable and has a smaller file size.

The app is more visually appealing, giving the different sections their own brand identity and the flexibility to do one-off designs through to templates that are used on a daily basis.

Interactivity has boosted revenue through advertising and clickable links to featured products.

Production editors and their team now use Template Designer making it quicker and easier for them to update content, improving the production process.

Production designers now feel empowered, can work independently, and plan their work in advance to create editions that look fresh, exciting, and new, every day.