Case Study
Viafoura's Design System
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.
Results
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