Revitalizing a brand & design system

Documenting the design system used to update Snagajob native mobile apps pre-rebrand, prompted the Android app to be promoted to editor’s choice on the play store using the principles from the metronome system.

The Snag brand was launched on April 3rd, 2018.

A comprehensive implementation of the Snag brand across native mobile clients to reflect the new product marketing and marketplace positioning.

A simple grid and layout system for app design across mobile and web.  With the myriad of grid systems across the mobile and web application landscape, Metronome was concepted as a music metaphor to represent the visual rhythms of grid systems, while defining a guideline of practices used at snag for native mobile app design.

Metronome was a documentation of the principles I used to develop the Android and iOS apps prior to the Snag brand update.

The formalized brand style guide based on input from the entire Snag Design team.

One of the first design pattens to explore was input textfields.  Our design team uses an agnostic approach to patterns as we see users frequently moving between web and native mobile applications.   This agnostic approach provides users with a more consistent experience.

The rebranding effort required a phased approach, updating UI components with colors and CTA shapes, then iconography and default/zero state illustrations/photography, followed by fonts and design patterns like input textfields.  This allowed engineers to update the codebase in a strategic manner, as Android and iOS apps for Snag have approximately 250 screens of functionality, and myself as the sole designer.  

The following screens are a small snapshot of the primary screens users interact with as a proxy of the implementation of the new Snag brand.  You’ll see that Android and iOS screens are stacked next to each other as a reference for feature parody.