PROJECT

GoNation Design System

Design System + Style Guide

A library of reusable visual components and features that reflect GoNation’s aesthetic and promote design cohesion

Tools

Sketch | Adobe CS

Timeline

2 weeks

Outline

OVERVIEW

GoNation is a social media platform that utilizes geofencing data to connect users to local businesses.

My objective for this project was to build a design system using atomic design principles that builds upon GoNation’s existing visual design scheme.

The purpose of the design system is to provide a living, dynamic collection of visual features for use on the GoNation platform. In addition to serving as a style guide, the design system will grow with the platform and evolve to meet the changing needs of the application.

The design system will allow GoNation’s designers and developers to collaborate effectively by delivering reusable components with consistent attributes that can easily scale.

RESEARCH + VALIDATION

case study published by UXPin describes the usefulness of design systems. They found, as platforms grow, user interfaces can become increasingly inconsistent which can lead to user confusion and dissatisfaction. Designs systems can prevent these inconsistencies by supplying the entire team with a single resource to draw from.

 

The benefits that design systems deliver to enterprise companies are clear, as they allow huge teams to maintain established norms, but they can provide value for small teams as well. Design systems created early in a company’s growth can provide a template for development of future features and speed up the design process.

Airbnb Design System - An example of large company's design system
"By creating a consistent language that our internal and external users can understand, we can create better experiences for the people who are using our products."
- Arjun Narayanan
UX Designer

INTERFACE AUDIT

I began the development of GoNation’s design system by auditing the existing platform and creating an inventory of the current user interface components:

BRANDING GUIDE DEVELOPMENT

From the interface inventory, I identified patterns in the usages of each component. These patterns informed the creation of a set of design principles for GoNation’s Branding Guide.

DESIGN SYSTEM DEVELOPMENT

The design system, built in Sketch, features nested symbols that will expedite workflow and provide a customizable template for further platform development.

 

If the company’s visual branding evolves over time, this library can continue to grow and change – providing an enduring style reference.