The Problem

Reimagine the Network

Process

Audit
The first step in determining the best path forward was to gain a deeper understanding of the present situation. It would involve gathering screenshots and a component breakdown of every page on the existing network. We would then identify and collate the common patterns in a process aimed . This would give us a foundation from which to work from, a critical path on what to initially focus on and to identify a means to consolidate many patterns into one. The audit also gave us a clear sense of the scope of the project and cues on the process we should take which would be the most efficient.

Information Architecture
Given the large size of the Yahoo7 network and the number of pages and layouts that would require consideration we completed a sitemap. This would give us a picture of the existing network and enable us to find ways to optimise it.

Persona’s
Creating the key user personas was an important first step that was used as a reference for parts of the research process. Given our large social media audience we devised a method for looking deeper into a sample of our followers profiles to get a real world sense of who these people were. On Facebook for example there was a wealth of factual knowledge about some of our most frequent commenters which was helpful in developing some of the power-user profiles. We collated a set of various persona’s based on referrer type, demographic and device usage based on audience analytics and with help from our Insights team.

Contextual Inquiry
In order to get qualitative understanding of our existing sites from users we conducted a number of interviews and tests in-house to observe and record their impressions. The information gathered would provide essential feedback on the usability, aesthetics and information architecture across the network. During these inquiries we’d also ask about competitor sites they may use and for what reasons.

Competitor Analysis
To get a full appreciation of what other publishers were doing we completed a comprehensive competitor analysis from over twenty websites globally. With each site, key patterns were critiqued and noted for their qualities and stored in a sharable pattern library. We would later draw upon this pattern library as inspiration for patterns we created.

Creation of a Global Design System (GDL)

Defining the Goals of the GDL
As Yahoo7 grows and evolves we face ongoing challenges implementing and maintaining consistent and coherent experiences across our web properties. When we hire a new UX designer it’s important that they can quickly start working with and building upon a global set of design patterns. We also need official design documentation that is used as the source of truth for other designers, developers and other stakeholders to refer to for specifications and business rules.

Conceptualisation
The Yahoo7 network at the time consisted of differing types of content and brands. There was Plus7, 7News, 7Sport, Be Lifestyle and others. All very different in their content offerings, difficult to conceive of a way to consolidate into one design system without too much compromise. The complex challenge of designing a component out of context was difficult so it seemed the best approach would be to conceptually design each property individually. Therefore as lead I thought the best approach would be to start off conceptually and work backwards from that.

The concepts could be rough and abstract, but the idea was to conceptually treat each property as a unique entity, then identify which UI elements could be most re-used and then know which ones would require bespoke requirements. For something like Plus7 which is very video-centric it’s difficult to know how to create a compatible set of components unless working on another compatible set of components like 7News simultaneously. The conceptual approach allowed us to go wide then narrow the scope quickly.

Modular. Atomic Design
We employed the Atomic Design Methodology to define the hierarchy and semantic relationship of each component a page layout. By breaking down the modules into smaller components it enabled us to make small iterative improvements much more efficiently. These components could then be used throughout various pages and layouts and updated from one location. The core set of these patterns were named the CoreModules.

Wireframes and Business Rules
Now that we had a framework in place, it was time to design and define the functionality of each of the CoreModules. Modules were categorised by their key functionality. For example we had navigation modules, e.g. “Navigation / Primary / Desktop”, and content discovery modules, e.g. “Cards / Hero / Large”. These modules spanned all the functionality throughout the network for such things like video player, gallery, social sharing, carousels, etc.

As we were designing these CoreModules we also needed to define the business rules from which they operated. Defining the specifics of the interaction, logic and functionality was a key part of this process and required input from various other stakeholders. These business rules were annotated alongside the wireframes for each component and would help communicate it’s functionality to the developer building it.

Consistent yet Distinct
Each component and module was designed to be as robust and reusable as possible. The key was ensuring that components could span as many layouts and websites as possible as to ensure their maximum efficiency. The potential problem with this approach is that everything starts looking the same and the individual sites suffer from a sameness to the look and feel. Therefore we conceived of a theming layer which was referred to as CoreTheme. Each component would inherit the theming variables for it’s brand, changing the colour, typography and spacing to suit. Components could then be consistent across properties, yet distinct in look in feel without adding to the tech debt.

This portfolio is a work in progress and additional details of this project will be added shortly