Background reflecting the user’s selected location on the map
Animation show casing the different environmental variables being analyzed
After competing the garden set-up, the users are taken to an analysis loading screen before receiving their recommended plants
Track days since first planted
Digital view of the garden that indicates where each plant should planted
Select Garden to work on
Task list that provide users with step-by-step directions for setting up their garden
A task list that guides users throughout the initial garden set-up process upon receiving their GrowSquares in the mail
Track days since first planted
Responsive digital view of the user’s garden. Blue indicates the need to water. Green indicates the need to pull out weeds. Each plant icon will also animate differently based on the growth stage it’s in
Select Garden to work on
Task list that provide users with step-by-step directions along with visual references for what to look for
Reminders and tasks to track the growth stages of each plant and maintain health of the garden
View of the garden with available plots represented by the overlaid grids
Plant list sorted by compatibility
A new feature that provides users with a quick and convenient options to auto fill their garden with the most compatible plants
Garden plot that changes color based on the selected plants. Green shows a good match, red indicates a bad match.
Scrolling list of cards showcasing all available plant varieties. Each card can be turned over for more information.
Users can also manually select plants they want for their garden with guidance from informational cards and visual codification that indicate the compatibility of the plants to the user’s environment and neighboring plants
UI/UX
Role
Lead UI Designer
Zachary Witman, Daeshaun Mcclintock
Goes
Digital
Ambition
How might we develop the next generation of gardens that is personalized, easy-to-use, and responsive?
GrowSquares is start up that aims to design the garden of the future. It is a two-part system featuring custom garden squares and a companion app that helps you navigate your planting journey in real time. In 2019, I was tasked to design their digital onboarding experience, and define their key in-app interaction models.
Needs a third option for Raised Bed gardens
No visual reference to help better determine planter depth
Birds eye view is disorienting and feels disconnected with the isometric perspective introduced previously
No clear visual boundaries to accurately indicate the area of the selected property
No way of designing multiple gardens of different types simultaneously
Cannot select individual plants and no reference to the garden being purchased for
Need to design for different varieties of the same plant
No clear visual indicator of how good of a match a plant is for your garden, or neighboring plants
To many clicks to replace and customize order
On the top, a tracker that indicates where the users are in the end-to-end onboarding process and a help button to provide additional helpful instructions or context.
The middle section illustrates a visual example of the type of garden being selected. The illustration dynamically responds to the user input.
The bottom section is an interactive control panel that allows users to select Garden Type and adjust Planter or Bed depth using a responsive scale.
The new design spilts the screens into 3 sections that grounds the users through clear visual examples and responsive controls
The main portion of the screen allows users to build their garden. The green squares indicate where a square can be placed, and the semi-transparent planter indicates what has been placed.
The top label indicates which garden is currently being viewed and built.
The bottom minimized panel allows a user to confirm, edit, or delete the gardens that have been built. Users have the option to build a new garden as well.
The new garden designing experience carries over the isometric illustration style from previous interactions. The use of 3D enables users to view their garden in a more tangible way while still seeing the garden type.
A map view of the location with indications of property boundaries and a dotted grid to guide users to place their gardens
Search for an address to narrow down on a specific location
A bottom panel that shows all the gardens built in the previous step that can be placed onto the map.
The updated location selection experience is simple and intuitive. With clear demarcations of the selected location and an easy drag and drop interaction to place multiple gardens.