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.
CHALLENGE
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.
SOLUTION
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.
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.
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
Hex border and stitching construction and spacing
Employee profile modal box displaying awarded triggered badges
Patch library as of 2023
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.
