Working with a tight-knit team (Jobber's principal designer and Atlantis' tech lead) we implemented a new visual direction for Jobber's web application in 3 weeks.
- audited UI elements to ensure full coverage of our semantic color system
- worked with tech lead to point legacy color definitions to the design system
- implemented the new color palette, radius and component-level updates
- made adjustments to areas of the product that didn't look quite right with the visual lightness of the new theme
What did this solve?
Too much clutter, not enough clarity
As Jobber grew, a frequent pain point of the product was a lacking of "right-size" complexity.
By keeping the product simple enough for small businesses, we make it hard for larger businesses to adopt.
By showing every possible feature up-front, we overwhelm new users and smaller businesses. Visually, we were
over-indexing on borders and boxes to structure our content, and under-serving our typographic hierarchy and
relational groupings.
The design team had explored the idea of introducing functionality in a modular way, where the product could grow with you.
The challenge with this was our over-reliance on borders, backgrounds, and boxes to delineate interfaces across the product
- any element that needed to be shown conditionally would require a ton of "state management" from both a design and development
perspective to look right in context. The visual techniques we were relying on for structure were hindering both adoption and evolution
of the product.