JRMC 7013: Budgets to Blueprints Design System
Project Date: Fall 2023
My Role: I worked on this Design System along with my teammate Heaven Robinson but I was primarily in charge of our editorial style as well as some of the UI components and the pattern library.
Project Overview
The goal for this project was to create a comprehensive Design System for my group’s Emerging Media Capstone Project, Budgets to Blueprints which is an interactive website meant to teach young adults about important financial topics. This was also created entirely through Figma. The requirements for this Design System were:
- A style guide that contains a visual and editorial style
- At least 5 UI components, their properties, and how it is to be used
- At least 2 pattern library groupings.
The Problem
A Design System establishes a complete set of design standards across various components and patterns. This ensures consistency across team members and streamlines the design process. By polishing our Design System during the early stages of development it will allow the project to evolve more smoothly while keeping a cohesive and polished design across all elements.
The Solution
This Design System was a collaborative effort and my teammate Heaven was in charge of the visual style, I did the editorial style and we worked on the UI components and the pattern library together.
My teammate Heaven did the logo and this was the logo we ended up with for the brand.
We wanted our brand voice to be trustworthy and educational but also engaging to captivate our user’s attention. The tagline needed to be something that would draw users’ attention but was unique to our website and was different from other financial learning tools.
Moving onto the UI components which were made up of 6 different components but I’m going to focus on the game category headers for our trivia game Trivia Terrace. We go into detail about the colors that are to be used, the sizing, and how far apart they are to be placed.
Our Pattern Library is made up of 4 different groupings, one of them being the Trivia Terrace table made up of category headers and game buttons.
We also created question and explanation cards, another integral part of our pattern library. These cards feature distinct iconography and colors based on the topic and the explanation cards highlight essential information for quick user understanding.
Results
Developing this Design System early on has made the design process for the website much easier, I refer back to it a lot when working on our capstone. Next semester we will being user testing so future iterations will focus on expanding content and refining features based off that feedback. Since our website is still in its early stages, this Design System mirrors our current process, so as our website evolves we will make the necessary updates to ensure that our Design System remains relevant and effective.
