Oct - Nov 2020 (1.5 months)

Refresh My Garden App for Millennial Growers

Mobile App Design, App Redesign

Within a month and a half, we replanted a gardening app, My Garden, in the Flutter landscape and grow it into an E-commerce app. It will be launching soon 一stay tuned.
  • Client: Scotts Miracle-Gro
  • Role: Product Designer
  • Team: 2 PMs, 1 Product Owners, a dev team
Text divider

About the Client

Scotts Miracle-Gro has the largest market share in the household lawn and gardening industry, selling a wide variety of lawn and gardening products to mainstream customers. If you have any huge yellow bags piling in your garage, you must be very familiar with their brands.

Heady has been Scotts’s external mobile product team for multiple years. We develop and maintain a series of their digital apps, including My Lawn, My Garden, and Home Grown. After the My Lawn remake, they wanted to continue to roll out the Flutter migration plan to My Garden and get more exposure while the gardening market was hot.

5 product detail pages with the bestsellers of Scotts Lawn Care Products.
A few bestsellers of Scotts Lawn Care Products on the product detail page.

Industry Brief

The gardening industry in the US has been blooming since 2020, thanks to the pandemic. More gardening apps and services were sprouting in the consumer market and benefited from stay-at-home orders. Miracle-Gro has been the top seller for garden supplies for many years, and its affiliated brand, Bonnie Plants, has a strong market presence in selling live plants. By working together, they can offer easy-to-grow gardening bundles to customers and keep riding the trend. And here is how the My Garden App comes into play.

Big Picture

Make My Garden a One-stop Shop for Gardener

My Garden is all about inspiration. To inspire people to grow their food, turn their home into an indoor jungle, or have a quiet companion to endure this crazy period. In this app, users can explore in-season planting projects, get gardening tips, and following planting schedules backed by Scotts’s horticulturists. And yet, we thought My Garden could be something more than a utilitarian app — our goal was to make My Garden a one-stop-shop for gardening. When a user discovers an interesting garden idea, s/he can order the planting kit, including Bonnie live plant and Miracle-Gro’s supplies, and start planting after the package arrives. As simple as that.

This makeover was part two of the entire Flutter migration plan. With a one-month timeline for design, our strategy was to leverage My Lawn as much as possible and limit design changes to the UI level.

Before-and-after comparisons for the home screen and the My Garden screen
Before-and-after comparisons for the home screen and the My Garden screen. In the new home screen, we restructured how projects display on it to reduce repetitive content. We also repurposed the My Garden screen to a dashboard-like screen where users can quickly look up the latest projects and tasks for the next 7 days.

User Base

We knew the user base wasn’t significant at the time we kicked off the project. However, as gardening has become one of the most popular things to do at home, we expected to have more new users ranging from GenX to millennials join the app after some marketing efforts. These new users were most likely to be 1) beginners who happened to find their second love in the backyard during the pandemic or 2) gardeners who were seeking newly in-season plants.

Design Process

Given the one-month timeline, I had my laser focus on polishing the UI and rolling out a handful of new features. As a sole designer working on the redesign, my 5-day design sprints structured like this: on Monday, my PM briefed me on feature requirements, and I asked her millions of questions to know the inside out. In the following days, I pushed the design straight to the highest fidelity, reviewed it with the PM, and iterated upon her feedback. On Thursday, we presented to the clients and collected their feedback. Then I would go over all the comments on the next day and made changes accordingly.

I had to say it was quite intense to keep delivering high-quality, production-ready designs at this speed. Nonetheless, I enjoyed the fast-paced working style, especially when many ideas were waiting in line to be flushed out.

A bell pepper product detail screen showing in shadow
Art Direction: Clean and Airy Look

To make our beautiful plant imagery shine in the app, I defined the art direction as fresh and airy, using lots of white space and washed grey. When users are exploring the app, I want them to feel refreshing and inspiring. Imagine this: you are taking a walk in the morning and feel the breeze scented with soil. That's the mood we want our users to have.

What We've Done

Restructure Content on the Home Screen

Users usually land on the home screen to find new gardening projects. In the previous design, projects were organized with horizontal scrolls based on users' garden interests. Chances were, the app would show a project multiple times in different interest categories — what a waste of the precious real estate on the home screen.

The product thinking part of my brain wouldn’t allow me to keep it as is. Thus, I rolled up my sleeves and rearranged the content into 3 categories:

  • New This Month
    Newly in-season projects should have the highest visibility at the top to grab user attention. Fresh content entails the app is rolling and gets users excited when they open the app.
  • Top Matches
    We surfaced 10 Individual plants that match users’ gardening interests to personalize the experience and increase retention. How those projects were prioritized would be further determined by the client's business needs. They are tiled into 2 columns within a long vertical scroll so that users can quickly skim through.
  • Garden Ideas
    Multi-plant projects have preview slots (like a raised bed) to show which plants are featured in the projects. These projects are placed in a vertical scroll to avoid a lengthy home screen.
3 screenshots of previous home screen design.
Previous home screen design (screenshots taken from the production app). While scrolling through projects, you may notice the plant, Strawberry Begonia, shows up multiple times throughout the screen.
3 screenshots of the new home screen design.
The new design emphasizes more on suggested content itself rather than why it is being recommended. It comes with a trade-off: obscuring the pairing between garden interests and related projects (which was more visible in the previous design).
Reorganize Information Architecture for Project Detail Page

Previously, the project detail page contained basic information about the plant, care tips, recommended products & tools, and planting instructions. The same plant with different planting environments (e.g., raised bed v.s. indoor container) were technically separate projects. However, this confused users when they searched for, let's say, bell pepper and found multiple bell peppers in the search results. To solve the repetition, I kept all bell pepper projects in one detail page and organized information with planting environment tabs. In this way, users can toggle between different environments more easily and get all plant care tips in one place.

Another issue on the PDP was the feeling of a dead end: after users read through the content without taking any further action (i.e., add to my garden), they had to go back to the previous page to browse other projects. To make the experience more frictionless, I added relating content such as its varieties, companion plants, pests, and garden ideas featuring the project. Then users can explore endlessly in the app (and fall into the rabbit hole).

A before-and-after comparison for the project detail page.
A before-and-after comparison for the project detail page. Significant changes (i.e. adding tabs for different environments and related projects at the bottom) make the user experience more streamlined. At the top right corner, you can also find the previous search pages showing multiple bell peppers in the search results.
Consolidate Gardening Tasks in a Single View

What is unique about My Garden is that it charts a course for each plant based on user location and guides users through the journey of plant parenting. In the previous version, each plant had its page listing all the plant care tasks. To mark tasks as done, users had to tap into separate plant pages, and they weren't happy about it.

In this new release, we scraped the architecture completely (after many back-and-forths) and created a consolidated Calendar screen for all tasks while featuring the upcoming tasks on the My Garden screen for quick lookups. To make the task card more concise, we introduced swiping interactions to complete or undo/delete a task.

Iterations and final design of the My Garden and Calendar screens.
Iterations and final design of the My Garden and Calendar screens. We explored different ways of structuring tasks and various interactions for marking a task as done. In the end, we featured all upcoming activities on the My Garden screen and had the Calendar screen contain the entire list of tasks in the past, present, and future with filters for different task categories.

One Fun Story

Do you know how it feels when you hand off designs to dev? For me, it is like handing off your baby to a stepmother in a way — you would hardly know how the dev and QA treat it until you see the beta releases. Surprisingly, this time felt different! Thanks to the dev team weekly demos, I got to participant in my design babies’ growing and did some design QAs (of course I did) along the way to ensure design details are well-translated.

If I have a magic wand...

I would test my designs in different brightness settings before handing them off. I learned this lesson from a conversation with the client’s UX lead — she pointed out that some light grey lines wouldn’t be visible enough if users use the app under bright sunlight. I acknowledged my mistake, did a quick audit using a feature on Zeplin, darkened a few icons and indicators here and there, and re-uploaded the design.

The same calendar screen showing in different screen brightness settings.
Pro tips for Zeplin:
If you ever tap on the square-ish icon on the bottom left, you can change the opacity of the screen and see your design rendered in different screen brightness (not sure if it was designed for this purpose, but I found it useful in this way).

Why This Project?

I’m proud to say that this is my (soon-to-be) second app on the both App Store and Google Play; I reshaped it from head to toes. As a plant lover, I can’t wait to use this app to help take care of my plants and find usability issues to iterate in the next release. Shameless plug — if you have many houseplants in your place and need some guidance on parenting each of them, I recommend you to check out My Garden and let me know how we can improve. I’m always listening!

Family apps from Scotts: My Lawn and My Garden.
Scotts's app family: My Lawn and My Garden.
Grab some tea together?
Hit me up (Linkedin)
More Projects
Jun - Aug 2020
My Lawn 2.0