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.
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.
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.
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.
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.
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:
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).
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.
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.
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.
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!
