The color system used in the JRNY app had become inconsistent and disorganized, making it difficult for users of the app. Without a set of color usage rules in the design system, the app lacked cohesion from one screen to the next. The goal of this project was to identify the issues, organize the color patterns, and set a system in place for future design and development.
We reviewed the colors in the JRNY app and where they were used. Some issues like issue 3, the legibility of the primary buttons immediately stood out as issues, while others took a while to discover.
We decided on a simpler color scheme to quiet the overall experience and highlight the most important elements; the workouts.
Above, you can see the same screen before and after the color update. Although this affects the entire JRNY app, focusing on one screen allows us to easily compare the differences. Notice where your eye naturally goes, and which elements call out for attention rather than highlighting an active state.
Through this project, Edyta and I were able to simplify the use of colors throughout the JRNY app, and set specific rules where those colors should be used. We also set up a color library in Figma to make it easier for designers to use (example shown here).
This improved readability in the app, and made it easier for our users to navigate. Simplifying the colors also allowed us to highlight the workout content rather than the navigation, and more aesthetically pleasing in general.
We worked with developers and project managers to implement these updates one step at a time, focusing on the most important aspects first. The updated colors are available in the current version of the JRNY app, available in the App Store or Google Play Store.
The refined color library within the JRNY design system with descriptions of where to use each color.