The Garden℠ is an employee intranet and mobile app for an American multinational manufacturer of consumer lawn, garden, and pest control products and soilless indoor gardening equipment. With features steadily rolling out beginning in 2016, The Garden aims to provide a point of access for free-flowing information between its members. Exchanging documents, internal communications, accessing a library of enterprise-level applications, uploading forms, and creating a space for collaboration among its employees.

A major challenge for the Corporate Communications Team was getting the word out about the launch of the application to all 6,500 employees in multiple locations across North America and Europe and increasing long-term user adoption rates of the platform.

We aimed to increase user engagement by implementing a gamified system to user profiles and providing rewards in the form of profile patches. I designed a series of tiered badges that would be rewarded and displayed on employee's profile pages for completing various tasks: attending corporate events, achieving internally set goals, participating in corporate initiatives, and more. 
Icon grid and keyline 

The icon grid establishes clear rules for the consistent, but flexible, positioning of graphic elements. Keyline shapes are the foundation of the icon. 

By using these core shapes as guidelines, one can maintain consistent visual proportions across system icons.
Two-columns demonstrating icon baseline grid and keyline
Hex diameter and icon live area 

The keyline scaffold nested within the hex diameter sets clear rules for fitting nonidentical icons. 

By sticking within the bounds of the icon live area, one can maintain consistent visual placements across system badges.
Two-columns demonstrating hexagonal diameter and icon live area:
Patch icon anatomy 

Patch icon anatomy describes the graphic elements that make up a patch icon. The Consistency of these elements across icons for a given patch is critical in maintaining a cohesive visual language. Familiarity with these elements will help staff designers recognize and recreate the underlying structure as new patches are created. 

1.    Border 
2.    Stitching 
3.    Foreground 
4.    Background​​​​​​​
Two-column Patch icon anatomy: components  and construction
Three column mockup of the three different tiered Hexagonal badge levels
Hex border and stitching construction and spacing
Employee profile modal box displaying awarded triggered badges
Employee profile modal box displaying triggered badges
Patch library as of 2023
Library of 84 hexagonal tiered badges with assorted icons
Special thanks to:
The Material Design Team for generously open-sourcing their UI Styles, best practices, and material symbols and icons library. These resources were fundamental to the success of this project.
Jonathan Wade – Front End/UX Developer – for doing the hard part, implementing the aesthetic bits and making it all work through back-end wizardry.

You may also like

Back to Top