← Back to list

Design System — Team Synergy

A Design System for Team Synergy’s Capstone Project.

Jaya Franklin · 2024-12-07 00:11 · 0 claps · 2.3 min read
#jrmc7013e #design-systems #capstone #branding #design
Open on Medium ↗
Wiki topics: PRD · Product Design BRD · Branding & Identity DSN · Design · General

Design System — Team Synergy

A Design System for Team Synergy’s Capstone Project.

Project Date: Fall 2024

**My Role:** I was tasked with creating the pattern library for Team Synergy’s Design System and reviewing the design system to make sure it is aligned with our goals and vision for our Capstone Project.

Project Overview: The goal for this project was to create a design system for the Synergy Athletic Solutions brand. The Design System solidifies the company’s brand, offers structure and provides the business with a consistent guide to follow.

Cover Page of Design System — First Draft

Cover Page of Design System — First Draft

The Pattern Library section of the Design System stores our design components. It includes a chat box Q&A feature; an appointment setting tool; interactive forms and a navigation menu for our online store.

Pattern Library

Appointment Setting Tool

Appointment Setting Tool

The Problem: Initially, Synergy Athletic Solutions did not have a style guide or any real assets to distinguish the brand. There were several different colors and tones used across their old website. The brand’s identity was hard to identify and the company’s design looked outdated.

Synergy Athletic Solutions — First Website

Synergy Athletic Solutions — First Website

The Solution: We put together a design system to enhance the brand, give it more life and add a common, cohesive language for the business to utilize and prosper. The Design System includes logos, a brand color palette, the pattern library, UI components and typography. There are instructions about how to use the logos and the do(s) and don’t(s). We decided to go with a clean, sleek look for the company design to make it user-friendly and easy to identify. In the beginning we faced several issues when trying to put together the Design System, it took us some time to settle on a font system and a logo that didn’t deviate a great deal from the original design.

Design System Logo Page

Design System Logo Page

The Results: Although Synergy is a distinct brand with a specific purpose, it wasn’t hard for us to identify the pain points for the brand and areas on their website that could be improved. We did struggle a bit with locating a font that would pair well with the company. But ultimately we found one that we like and we have received many compliments about the look and style of the design.


메타데이터
post_id
a0ffc9ec3190
slug
design-system-team-synergy-a0ffc9ec3190
url
https://medium.com/@jayathejuice/design-system-team-synergy-a0ffc9ec3190
canonical_url
https://medium.com/@jayathejuice/design-system-team-synergy-a0ffc9ec3190
author_url
https://medium.com/@jayathejuice
status
ok
fetched_at
2026-08-22 06:11:13