A big redesign of one of the most influential regional news brands — now optimised for the video generation.

News is news, right?

As simple as can be, story of the day, fast and accurate, doesn’t matter how you present it. Right? Wrong.

When your client is one of the most distinguished news portals in the region, you must go further, better. You must ask more, because people ask for more. You must wonder -
How do people consume news? Where do they consume it? And when? And, last but never, ever least - why?

Welcome to a bit of old news - we’ve been living in a digital age for a while now. Today, news is bite-sized. Being informed quickly is a must. As is the existence of context. As is video, adjusted to audience’s needs. Changes come fast, suddenly, and the media landscape shifts constantly.

  • Year:
  • 2018
  • Type:
  • News Portal
  • Services:
  • User experience
  • Design
  • Strategy
  • Product & project management

The previous site and apps we created for, and with our client, were winners, very well-received; it became clear, however, that our old stack and design systems reached their maximum. The time was ripe to ReImagine How the old favourite.

Ensuring Longevity Through Flexibility and Attractive, Modular Design

In a process that Wireless Media is known for, the process of true collaboration with the client, we worked together in order to define, test and design the new finite video news experience. The WM and N1Info teams were tightly integrated so we could all understand N1’s needs, identify workflow constraints and requirements, and harmonise our designs into new and developing storytelling formats.

Thus we set a complex goal, together - to build a sustainable product and process and ensure the long-term viability of what we create. Thinking ahead, way into the possibility of eventually expanding the project into more of United Media’s digital properties, we had to build in the qualities of scalability and flexibility, so that our system would be able to adapt, with time, to the more intensive and custom needs across UM’s larger media ecosystem.

 The challenge was to accommodate both (more) active and (more) passive kinds of N1Info’s readers - the hardcore business news junkies who need fast, accurate, dynamic information about the markets, as well as those more casual, topic-focused readers who look for N1’s take on politics or tech. We’ve also decided that, for both of these, the new assets had to be more exciting, more compelling - they simply needed more - more video, more visuals, more flexible content creation, more dynamic curation capabilities.

The solution was to be found in what we came to expect of brands, and what we came to cherish in life as 21st century humans - flexibility. As far as design went, it meant a modular system that was able to highlight N1’s breadth of news coverage, while encouraging deeper engagement into each vertical.

The Strategy - the Marriage of Design, Functionality and Purpose

Welcome to the ReImagined

Welcome to the system of building blocks - a robust central library of all the shared page elements and modules across properties. In creating each of these blocks, every design decision had to consider the implications of the various destinations and breakpoints across the spectrum, from mobile to desktop. While being scalable at the onset, this system also had to allow for a seamless delivery of updates, optimisations and new technology for years to come.

Welcome to that landing spot, the where-you-usually-come-first, the point you’ve come to expect to give you both comfort and excitement - the home, video and article pages, that were a major focus of the redesign. We made sure visitors were presented with a variety of visual cues – or pathing options – to encourage a continuous, uninterrupted reading experience.

Visual design made for (video) storytelling.

Welcome to the harmony of aesthetics and function - our recognisable, on-brand and on-trend visual language. From the bold colors, through the use of motion, to visual cues like breaker modules and pull-quotes — everything was purposefully designed to help move a user down the page. In order to drive habitual use, the team worked to create a new finite visual news experience, driven by a visual YouTube-like format that was curated and optimised for mobile use. The project focused on visual media design, packaging editorial news, user paths, and experience design. Flexibility in design enabled N1 editors to explore different storytelling formats – between standard video, mixed media of video and photo galleries, and breaking news that also contained videos – in a single user path, providing depth as the user progressed through the content.

Welcome to the infinite, yet logical options - to ensure that the visual treatment of every story matches its editorial importance in the news hierarchy, each content module - like live video feeds, image galleries, text, or pull-quotes - can be snapped together in near infinite ways.

Welcome to the new, frictionless experience of consuming video - where we decided the innovative spirit of N1 had to be felt the most. The previous N1 app was limited in its mobile video experiences, offering only basic features that fell behind what was expected of the brand. With the rise of digital video as the main source of information in the news industry and the need to target the affluent demographic, it became clear that N1 needed to make some changes. The additional challenge was to integrate a dramatically different and unique experience, including all new assets, into the native app structure.

This required stripping down the editorial toolkit to its most basic parts and then building it back up. Through that process, we laid the foundation of a scalable modular system with a library of necessary page components that met the core storytelling and packaging needs of each vertical, that could be stacked, arranged, and repurposed on any page in numerous ways. The approach opened us up to refocusing on storytelling craft, doing more with less, and allowing editors to easily manage curated and dynamic content packages with variable visual hierarchies and content densities to give each vertical a distinct voice and feel.

In order to remove all friction we thus deconstructed the 3rd party player in order to rebuild our own - a more interactive and intuitive video solution, a blazing fast video player, as well as bold video modules and video pages that draw users into the experience.

Welcome to the world of modularity, welcome to the modern, modular packages - departing from rigidly structured page templates, we developed modular packages that could be placed on fronts and allow editors to create new page layouts on the fly. A front is now just a container of modules, not a fixed page layout. All packages can be shared across all fronts, and stacked as desired. This enables the creation of modular homepages and the ability to spool up new fronts in minutes instead of weeks, without the assistance of developers. Furthermore, fronts are no longer static templates, but rather containers of packages. These packages can now be re-arranged by editors all the time, creating dynamic pages that adjust to storyflow as needed.

Creating Connections, with Trust

It was never about stories, themselves. It was always about people, and how they experience things.

This is why we thought of user experience from the get-go.

Our strategic framework focused on re-establishing audience connections with N1 as a trusted news source, through the stories we delivered and the perspectives we wrapped them in, and doing that at scale with advertisers integrated into the storytelling framework.

By establishing a clearer hierarchy on the site that was easy to navigate, along with engaging hero treatments and wayfinding design, we created a seamless cross-platform experience that opens new possibilities for editors and advertisers alike.

We believe that how journalism is delivered to audiences is just as important as the journalism itself.

This is why we built a complex, yet flexible set of digital storytelling tools that would allow editors to focus on creating N1’s strong editorial voice, whilst building trust in their ability to deliver both engaging and immersive original content, responsive to the users’ context.

We solved moving users forward in their content journey and exposing them to the larger perspectives of the narrative by seamlessly transporting them into vertical fronts constructed with a library of reusable content templates & packages.

We’ve also improved the CMS workflows to allow for editors to create and manage breaking news, developing stories, verticals and sub-verticals, so that they could focus on guiding users to what is relevant and important at the moment.

In Short, We Built for Scale

We ReImagined How -

We designed and developed a modular and scalable design system that could extend far beyond the verticals we launched.

The packages were created to flex across variable content densities and to address unique editorial and content type needs. Ultimately the packages we constructed to work dynamically and to allow editors to not just curate content but also editorialise it with inline quotes or media.

In Short, We’re Never Going to Stop

We Reimagined How -

Our journey was one from product ideation and validation, all the way through to scalable design and development. The N1Info site & apps are the proud result of several months of prototyping, iteration and scaling of everything - from content to advertising to platform.

We Reimagined How -

As the hard and fast rules of how content was consumed continued to change, as we evolved further as digital beings, as we kept understanding more and more how forward movement grew - we have successfully defined, designed and developed a digital toolkit that was, and is adaptable to the ever mutable, and unforeseeable, future of the digital landscape and platforms.

And -
We’ll ReImagine How.

The re-launch of N1info is an ever-flowing, innovative, ongoing and iterative process. As we conquer new territories and go ahead of times, we’ll keep on leading with our continued rollouts.

Welcome to 2.0.

May there be many, many more.