JRMC 7013 Emerging Media Strategy: Budgets to Blueprints Design System
A comprehensive set of branding guidelines including a visual and editorial style guide, UI components, and pattern library.
Project Date
December 2023
My Role
Design Lead
Working alongside team member, Catherine Tran
Project Overview
For the design system, we were tasked with producing a complete set of standards intended to manage design at scale using reusable components and patterns for our capstone project, Budgets to Blueprints. Budgets to Blueprints is an interactive and engaging website game to help young adults learn important financial topics.
The design system included:
- a style guide with elements such as editorial and visual style
- user interface (UI) components
- a pattern library of at least two UI-groupings
The design system and its elements were produced using Figma, Adobe Illustrator and Photoshop. This project went through two iterations over the semester, with a peer critique of Iteration 1 and a presentation of Iteration 2 featured changes based on feedback.
The Problem
In the dynamic landscape of digital experiences, the creation of a design system is essential for introducing and communicating a new brand effectively. This design system acts as a comprehensive manual for internal and external designers, with clear guidelines for visual style and UI elements. This system not only ensures a unified and visually appealing brand but, more importantly, enhances the overall usability and effectiveness of the website.
The Solution
When approaching this project, my teammate and I allocated specific responsibilities — I took charge of overseeing the visual style and UI components, while Catherine focused on the editorial style and pattern library. We utilized Figma to collaboratively develop the design system, allowing us to make real-time updates seamlessly.
As for the visual style of Budgets to Blueprints, I began brainstorming ideas and pulling inspiration into a Pinterest board, with thoughts for the logo, fonts, colors, and UI. I also researched competitors like Spent and Payback to see what the landscape was currently, as well as what visual trends were popular with Gen Z, our target audience.
We had made an MVP last semester for The One Project, so I had an idea of the colors to include. I just had to be more specific in the descriptions and explanations as to why certain colors were chosen. I explored color palettes using Coolors and Adobe Color and tried out different font pairings through Adobe Fonts, considering accessibility requirements and color psychology along the way. I ultimately landed on the following color palette, leaning on blues and greens to make for a refreshing, yet calming tone in the website. The typography choices are bold and solid, representing the stability we want users to feel when playing the game.
Moving onto the logo, this took the longest to nail down. I began sketching ideas on paper, trying out different variations of the home and finance elements. Once I found sketches that I liked, I moved into Adobe Illustrator to see how it would look on-screen with a more graphic touch. I also played around with type and different shapes to see if any ideas would come about naturally.
After drafting the logos and receiving feedback from peers, I landed on the final logos for Budgets to Blueprints, including the primary logo of a horizontal combomark, a wordmark, pictorial mark, lettermark, and vertical combomark. I was especially proud of the pictorial mark, with the goal of merging a pie chart and home icon in a way that wasn’t completely obvious — hinting at the home building and financial elements of the brand. The wordmark features the Rig Solid font from the typography, and gives a solid and trustworthy look to the brand. And to tie the logos together, they include the primary colors, making everything cohesive and recognizable.
With the iconography and imagery, I knew that I wanted to have a flat illustration approach and was inspired by the drafting, sketchy style that “blueprints” suggests. Yet, we decided to pivot slightly towards a more graphic, almost upgraded clipart style for the icons. It adds a human touch while still keeping things professional and trustworthy. The images also have an illustrative approach, and strike a balance between playful illustration and realistic photography. These choices help us maintain the fun, game-like tone while ensuring a solid and dependable appearance.
Catherine and I both made contributions towards the UI components and pattern library, with me focusing more on the home building portions and Catherine, the trivia portions. Again, the MVP informed our initial decisions while we coded the website, and we made updates reflected in the design system as we kept developing. We researched existing design systems like Atlassian and Apple for inspiration of what components to include such as buttons and groupings. Below are a few of the current components and UI-groupings in our design system.
Although many decisions were informed by my prior experience and knowledge of design and branding, this refined iteration of the design system incorporates input and elements suggested by my classmates and peers. This collaborative approach results in a more compelling design that resonates with the target users and makes for a strong brand appearance to enter into the market.
Results
Through this project, I learned about the importance of a design system and effective collaboration on a team. By being consistent and detailed, all elements are cohesive across screens and platforms as team members know exactly how components should appear. I also learned to be flexible and open to feedback, since getting multiple perspectives really does enhance the product and leads to a stronger brand to build upon.
Moving forward with future iterations, we’ll begin user testing to identify potential pain points and gather insights about the current design system. Using this feedback, we’ll make any essential adjustments to ensure that Budgets to Blueprints stays true to its mission of empowering users to make informed and responsible financial decisions through its interactive learning website.
Final Deliverables
Design System
https://drive.google.com/file/d/16Iwh5yBygomcCVjWi5Elifg3-0u2BFHk/view
