Viafoura Case Study

Context

Problem

Process

Contents

Results

Context

Who are Viafoura’s customers?

Viafoura powers the commenting & other on-page experiences on major news publisher websites.

How does Viafoura make money?

Viafoura sells ad space within the comment and message feeds of their on-page widgets.

How does Viafoura measure success?

An increase in the number of guests registering for an account, or customer approval of a feature/update.

So where do I come in?

I was the sole designer, working closely with the Director of Product, VP of Product, CEO, COO, and many engineers.

Problem

What was the current state of design?

No design system, brand guidelines, core objective, or design strategy. Design was an afterthought until now.

Why is a Design System important?

Viafoura’s commenting experience lived on websites owned by other entities, and therefore needed to have components be customizable in such a way that would enable customers to deliver a native look & feel to their users, while also retaining consistency in the experience.

Process

Where did we start?

We started with a core objective & design strategy. The core objective should explain why the product exists and the design strategy is what the product gives the user in order to get them to do something.

How did we determine a new look & feel?

Brand guidelines help specify certain characteristics of the product’s look & feel. We started with a mood board of different brands such as: clean & simple, friendly, techie, etc.

How was this visualized and reviewed?

Characteristics from brands that aligned with the product’s direction were used to redesign a few screens as tasters. Once happy with the new direction, the rules & patterns used to create that look & feel are extracted to form the initial brand guidelines.

Contents

Themes

Themes are recurring concepts that have rules or certain behaviours to them such as accessibility, spacing, language, etc…

Style Guide

A style guide the rationale & behaviour of the creative assets used such as fonts, icons, colours, shadow levels, animations, etc…

Component Listing

A component listing is used to show how components react to different devices and how they look in different states.

All design debt was eliminated due to the implementation of the design system.

Engineers also took the opportunity to clean up a large amount of front-end technical debt.

Customers can now customize components to a more native design language, while retaining a consistent commenting experience.

The cost of Des/Dev efforts was dramatically reduced, while still keeping the same user experience and level of quality.

View Another Project