A Flutter redesign for My Lawn
Jun - Aug 2020 (3 months)

Upgrade My Lawn with Subscription Service & Flutter Migration

Mobile Design, App Redesign

After running design sprints for 3 months, I renovated a popular lawn care app, My Lawn, and transplanted it to Flutter. It’ll be launching soon 一 stay tuned.
  • Client: Scotts Miracle-Gro
  • Role: Product Designer
  • Team: 3 PMs, 1 Product Owner, a large 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. They believe every lawn owner can take care of their lawn with some guidance and provide do-it-yourself bundles. 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. This time, they came to us with an ambitious vision — migrating their native apps to a cross-platform solution, Flutter. They wanted to rebuild the infrastructure with a centralized codebase and database and achieve a shorter development cycle.

5 screens that shows the bestsellers of Scotts Lawn Care products on the product detail page.
A few bestsellers of Scotts Lawn Care Products on the product detail page.

Industry Brief

Lawn maintenance is widely assumed as a specialized field that requires a broad range of knowledge and expertise to perform lawn care activities. And yet, our client doesn’t think that way.

Big Picture

Pivot from Marketing Tool to Problem-solver

My Lawn app has been long positioned as a direct marking tool to advertise products and subscriptions to new customers. However, this value proposition diverged from what users thought it should be. Many users downloaded the app and expected to 1) manage their lawn subscriptions with Scotts and 2) log their lawn maintenance activities. As soon as they found out the app didn't meet their expectation, they uninstalled the app and left angry reviews.

Given that, we repositioned the My Lawn app as a lawn care problem solver that our users can lean on. Besides, it should be a lawn care educational tool that teaches our customers how to take care of their lawns, when to water, and what actions they shall take when seeing any signs of an unhealthy lawn. They can journal about their lovely lawn in this app and get burning questions answered while spending some money on it.

A before-and-after comparison for the home screen and the subscription screen. In the new design, we shifted our language to a more customer-focused tone and restructured the content to reduce repetition and increase readability.

User Base

Our users are predominantly mid-age people who own yards of lawns (the size that New Yorkers can’t imagine). They aren’t tech-savvy by default; hence calling customer support is their go-to when something doesn’t meet their expectation. They are hands-on with lawn care and appreciate hand-holding instructions and reminders. They like to journal about what they did to their lawn so that they could reference them back in the future. When they see their lawns become healthier, they would pat on our back and say, “Great job, My Lawn!”.

A man mowing a massive lawn with a push mower.
Can you imagine owning this size of lawn? (Photo by Rémi Müller on Unsplash)

Research Process

Here is how I typically onboard myself to a new project — identify a list of research directions and do extensive desk research. In this case, there were 3 things on top of my head:

  • How people take care of lawns, their needs, and problems
  • How Scotts’s business works and their current business challenges
  • Users’ love-hate relationship with the My Lawn or other app competitors

I started with reading articles from lawn care websites and online forums (e.g., the Lawn Forum, r/lawns) and watching Youtube videos on lawn care to gain domain knowledge and understanding of our users. While doing so, I collected their problems, needs, and habits to empathize with our users.

To understand the business, I consulted our PM, the librarian of the app. I also listened to their earning calls which was a valuable resource to probe business strategies and challenges from publicly traded companies. These helped me strategize product decisions and identify new app opportunities to satisfy both business and users.

We have a group of passionate users who are very vocal about what they love or hate in the app. Although I didn’t have the luxury to talk to our user group regularly, I crunched through all the customer support data and app reviews to learn about their struggles and feel connected with them.

A 3-page document listing app reviews for My Lawn.
I looked through all the app reviews and found themes to improvement in this redesign.

Design Process

As the sole product designer in this redesign, my design sprints looked like this: on Monday, my PM briefed me on feature requirements, and I asked her millions of questions to know the inside out. After that, I developed low-fi designs and ran a design critique with my design lead. Since very little time was left for validating the assumptions, I made my best shots by tapping into PM's knowledge and trusting my gut feelings. On the following days, I made a few iterations based on the feedback, pushed designs to higher fidelity, and presented to my PM by the end of the week. If things look good, we scheduled a client review the next week to finalize the design.

What We've Done

Plug in Personalized Content to Boost Retention and Conversion

Our data showed that a more personalized experience could increase the retention rate. Thus, we reserved the most valuable screen real estate on the home page for the marketing team to communicate strategically with each user. They can compose journeys to either convert non-subscribed users to subscribed users, share personalized lawn care tips for retention or call for action.

Here are a few sample messages (left to right): promote a seasonal article, bite-sized pro tips, a reminder of renewing subscription, a tooltip for new app feature, call for a lawn action.

Design for Subscription Services

A dedicated website for Scotts Lawn Care Program had charted a course for lawn care subscription, and thus the My Lawn app had to follow their steps to provide a seamless experience across platforms. I mapped out all subscription-related user scenarios such as moving to a new location, changing shipping address, getting a refund for a product, notified for a separated package, the list goes on, and design features for them. After many too-early-to-talk-about-this types of conversations with my PM, I created user flows to give us peace of mind.

User flows that mapped out all the subscription-related scenarios.
User flows that mapped out all the subscription-related scenarios. When I was thinking through these user scenarios, my brain heated up quickly and needed some tea to cool down.

Take Guesswork out of Lawn Care

There is always a tricky balance to design experience for users with different levels of prior knowledge — lower the barrier of lawn care but not oversimplify it so that our users understand the why; inspire users who have lawn care expertise while taking care of newcomers. Thus, how to surface relevant information in bite-size at the right time becomes one of our biggest challenges.

The No.1 question the customer support team received was: how long should I water my lawn to get an inch. In the new design, we did all the heavy lifting in the backend and asked users for their nozzle type to convert watering time for them. Mystery solved!

We added watering and weather trackers to help users plan for their lawn events. When in doubt, users can get an estimated water time by inputting their nozzle type.
I created all the states for the water (green) and weather (blue) modules.

Meet Customers Where They Are at

Lawn owners like to log their lawn activities on the app for their future records. Saying they just finished mulching a bed, they can add a mulching activity with a date and a line of description. We found out that these activity screens could be the perfect place to upsell mulch products since they are the right people who usually do the task and need relating products. Boom, we connect the right product to the right mind!

Craft Dedicated Calendar to Win Hearts and Minds

We devoted a navigation tab to a calendar so users can access their activity log effortlessly. They can browse activities based on categories, get sneak peeks of each task with all the necessary information, and jump to different periods with a couple of clicks. They left us because their activity log was gone in a previous release, and we worked hard to win their hearts back.

A lawn calendar showing on a long-scrolling screen.
Introduce... our new Lawn Calendar!

One Fun Story

In an afternoon, I tuned in to Scotts 2020 Q3 earning call, hearing them talking about how their marketing team wanted to move mulch inventory. Meanwhile, I happened to be redesigning the lawn activity screens, such as mulching beds. All of the sudden, it stroke me that the activity pages could be the perfect spot to promote mulch products to the right people at the right time. Users on the mulch bed screen are the people who perform the activity; they have the right intention and the need. Isn’t this the least obtrusive way to serve an ad? Feeling exhilarated, I mapped out all the relevant products that can be promoted on each activity and prototyped all the screens.

When we presented new lawn activity screens to the clients, they were mind. blown. It was such an obvious connection, and yet no one has ever thought about that. We hit the jackpot! I was very proud to see my design killing two birds with one stone: it solved the user problems and created new business opportunities.

10 task screen with pro tips and relating product promotions.
Not just for moving inventory, adding pro tips and relating product to each task screen also aligned to our project goals (i.e., be an educational tool and a problem-solver),

If I Have a Magic Wand...

I wish there were time to do user testings before handing off designs to devs. As an external partner, we could only alter much about the waterfall process. And only when months later you found out that a feature looked so different from the original design, you realized some assumptions baked in my design were wrong.

Why This Project?

I felt fortunate to have this chance to reshape the entire app. This project was such an overhaul, and my hands were involved in 90% of the screens (roughly 440 screens produced)! I’m proud of the work the team achieved together and can’t wait to see how users respond to the new release on App Store and Google Play (coming out soon)! Shameless plug — if you have a lawn, I highly recommend you download the app, and please leave app reviews or share your thoughts with me. I’m curious!

Styleguide in Zeplin.
I built a system in the Zeplin with all the screens, components, and a clear commenting guideline to avoid questions like "what's the hex code for this rectangle?". It worked well for the team and saved us a great deal of time.
Grab some tea together?
Hit me up (Linkedin)
Oct - Nov 2020
My Garden 2.0