Making a Design System for 2 apps.

I have 2 apps that I created for musicians, but until recently their designs were inconsistent and not fully compliant with accessibility standards. I felt that a design system would address these issues and create a more professional experience for my users.

Pocket Pitch is used by singers and Pocket Guitar Chords is used by guitarists.

Pocket Pitch

Pocket Guitar Chords

POCKET PITCH AT A GLANCE.

By far the more successful and professional of my 2 apps, but…

  • I needed to move the Pink-ish/Red brand color away from red. The new Tuner feature used green as a success indicator, which kinda infers the use of red as an error indicator. I want users to associate my brand with success!

  • Some of the spacing seemed to be inconsistent throughout the app.

  • The use skeuomorphism felt dated to me.

  • I don’t think I had previously taken the time to check accessibility standards of every little detail.

Pocket Pitch key screens prior to the design system.

POCKET GUITAR chords AT A GLANCE.

Obviously in need of an update here…

My game plan was to use as much of the styling from Pocket Pitch to redesign Pocket Guitar Chords.

Pocket Guitar Chords key screens prior to the design system.

THE PLAN:

  1. Layout everything to account for all existing design elements.

  2. Define and Redefine design elements moving forward, starting with Pocket Pitch.

  3. Document everything to reference for future updates.

LAYING EVERYTHING OUT.

REDEFINING COLORS.

My main goals for the colors were to:

  • Contrast the brand colors from the indicator colors (red, green, etc.).

  • Check the contrast of all colors compared to the background color (white).

So I ended up starting my color palette with my white background color, then my blacks and greys for all my text and labels, then indicator colors, and then finally my brand colors.

I had previously seen, and copied, other designers start with the brand color, but I felt like starting with my background helped me prioritize my accessibility goals.

Old colors (left), new colors (right).

REDEFINING 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).

POCKET PITCH REDESIGNED.

…

Pocket Pitch key screens prior to the design system.

POCKET GUITAR chords REDESIGNED.

….

Pocket Guitar Chords key screens prior to the design system.