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.
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).
Icons
Lorem Epsim
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.
UX Patterns
I felt it would be worth noting any key UX “things” to keep consistent. For example, navigation at the bottom, feature settings at the top, etc.
Marketing
This last bit was to make sure I never forgot about the all important AppStore materials that I always forget about until it’s time for an update and I scramble to get something together. Also, I wanted my infrequent web and/or social content to have some consistency and a source of truth.
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.
Figma Styles & Components
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
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
New Pocket Guitar Chords
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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 numbers.