Design System
I made this to align and update my two apps (Pocket Pitch and Pocket Guitar Chords) and their marketing materials. Pocket Pitch was the much more popular and successful of my apps, so I focused on starting each decision with it in mind and then reusing as much as possible for Pocket Guitar Chords.
Before and After
I made this to align and update my two apps (Pocket Pitch and Pocket Guitar Chords) and their marketing materials.
Mission Statement
I failed a few times at the start of this endeavor. I would try to establish new colors or components, and just kinda kept going around in circles. I decided to type up a sort of mission statement for my design system to guide my decision making.
I wanted to prioritize accessibility, utility over branding, and being comparable to other apps users may use in tandem (i.e. YouTube).
Existing Design Elements
I wasn’t looking to change the UX of either app if possible, and so I started by laying everything out together and taking inventory of all the different elements I needed to account for in my design system.
Colors
Initially I had copied how other designers start with the brand color, but I felt like starting with my background helped me prioritize my accessibility goals. After my blacks and grays, I wanted to establish all special indicator/alert/error colors and then move the brand color away from them. For example, I wanted to be able to use as an error indicator but the brand color was a reddish-pink.
I ended up throwing in yellow and blue in there too to help future proof things, and then put my new brand colors last. I checked and labeled all the contrast ratios against my background, and I was surprised by how much I felt like the accessibility standards where actually helping rather than limit me.
Typography
The existing typography used Poppins as a title font for the brand name, but the rest was unfortunately split between two other fonts by mistake. I liked the use of Poppins for the title, and the font had other weights that I felt would work great for body text, headers, and labels, so I redefined all the typography using Poppins.
I also standardized the line heights to be 1.5:1 compared to the font size, and I made the ratio of different font sizes to be 1.25:1 (i.e. 16, 20, 25).
Spacing
Spacing was so inconsistent before, that I really wanted to double down on clear and thought out guidelines for my apps. I went for a common 8pt spacing plan, because this was one of the areas that I wanted the apps for feel as common or mainstream as possible.
Documenting & Organizing
After all the previous elements were defined and/or redefine, I cleaned things up a bit and organized the Figma file holding it all together. I turned all the buttons and widgets for Pocket Pitch into Figma components that I could add different properties to. Then I copied and reused as much as I could for Pocket Guitar Chords.
New Pocket Pitch
Depending on when you read this, this UI is either current or in the process of being updated on the AppStore. Impact metrics are TDB.
New Pocket Guitar Chords
This UI is planned to be updated on the AppStore shortly. The programming needs to be updated, and that will follow completion of the Pocket Pitch update.
Lessons
I went into this process thinking of UI Kits and Figma components, but in the end I think of Design Systems more in terms of documentation and core goals. I made something that would be valuable and time-saving for myself, and next I would like to build or contribute to a Design System used by a larger team with more elements.