JRMC 7013: Design System
A collection of components and guidelines to ensure a cohesive brand vision and voice across different platforms.
Project Date: Fall 2023
My role: I worked on this assignment with a group and we decided it would be best to split our Design System up into sections and each take a section to focus on. The section I took the lead on was our Pattern Library. This section consisted of reusable components and design patterns that are part of our product.
Project Overview: Our goal was to ensure our UI design reflected our brand’s identity and values. We focused on the importance of having one place where all design elements could be found for the brand. We worked off of our clients existing Style Guide to create a Design System that was updated with the brand’s new guidelines and new user interface components. In creating our Design System, we used Adobe Illustrator for the creation of our logo, Figma for prototyping, and Weebly for the development of our Capstone Project.
The Problem: It is important as a brand to have specific guidelines to follow to ensure the brand is seen and shown consistently across different platforms. Our goal was to make sure the Greek Life Olympics had its own branding apart from The Backpack Project of Athens. The brand lacked many design elements and guidelines so our goal was to create and refresh elements and guidelines to help our brand come to life.
The Solution: We worked very closely with our client throughout the entire process of creating our Design System. It was important for us to keep our client in the loop and get feedback on the work we were doing. We got very positive feedback on the majority of the designs and decisions we made. We got constructive feedback on the original logo we created, so we took their feedback and ideas and created a logo we all thought fit the brand much better. The new logo can be seen below.
It was very important to our client to have a fully functional Design System document. This was something they had never had before so the brand was portrayed inconsistently across different platforms which was confusing for users. Through brainstorming and working together we solidified a color palette and typography that would create a positive impression and interest in our brand. When deciding on the color palette we chose colors that represented trust, tranquility, growth, excitement, and optimism. These characteristics embody our brand so we wanted to be sure that was seen throughout the branding colors. The color palette and typography can be seen below.
When working on the Graphic Elements section of our Design System we worked with our client to add a few new icons and patterns, but we mainly focused on refreshing much of what the client already had in place. We chose these icons because they are familiar, uncomplicated, and friendly. We made sure to note they should always be reproduced on a white background. The patterns and backgrounds are bright, attention-catching, and friendly. The idea behind the icons and patterns is for them to be used when imagery is not available and for smaller items of communication. We wanted to communicate that these should never be used in a serious manner. The icons, patterns, and backgrounds can be seen below.
Our UI Components and Pattern Library were created as we worked on creating our product for our client. We were focused on having very simple and intuitive designs, so that is what can be seen within our components and our pattern library. Within this section of our Design System, we made sure to include “do” and “don’t” guidelines so that components are not used incorrectly or in the wrong scenario which could hurt the brand image. Below you can see a small glimpse into our UI Components and Pattern Library.
Results: This project really helped to lay the foundation with client communication. It was a great way to work closely with our client and receive continuous feedback. Our client is very pleased with the final product of our Design System and we are proud of the hard work we put into the project as a team. We learned the importance of a brand having a Design System that is continuously being updated and not a forgotten document. We plan to continue to update and refresh our Design System when needed as our project progresses.