Rethinking how users buy the perfect plant on Patch

Patch App
Product Design

Patch plants is a web app where you can find and buy plants as well as plant products. They provide a delivery service along with tips on how to take care of your plants.

unplugged case study mockup

Project Overview

As part of a project, I collaborated with a small team of designers to iterate on Patch. The current experience of viewing and buying house plants needed to be analysed and redesigned to ensure user had a seamless experience which would lead to more online sales. The goal of this project was to improve the user experience of checkout flow on Patch.
Role
  • ✓ User Research
  • ✓ UI Design
  • ✓ Prototyping
Tools
  • ✓ FigJam
  • ✓ Notion
  • ✓ Figma
Project
  • ✓ Teamwork

The Problem

Currently it is difficult for users to search, view and buy a plant that fits their lifestyle. This leads to users not feeling confident in buying a product and abandon the checkout process which is leading to a lower online sales for Patch.

Hypothesis

We believe that [by improving the search and checkout flow for the user, would increase the number of online sales for Patch].

The Solution

After concluding the research and problem definition phase, we came to the conclusion that by adding categories we could address the search issue. We also simplified the layout on mobile as the users were feeling overwhelmed by the amount of information. Some of the components were also redesigned to be easier to interact with on mobile for example the Navbar. Hierarchy of information was a major consideration as well as necessity of information as we wanted to reimagine the design to only have the most crucial information on the mobile scree so that the user was able to easily complete their goal.

unplugged case study mockup banner

The Full Process

Questions & Observations

We started with our initial observations and questions on Unplugged by analysing the current experience. To easily document these we followed the structure [situation], [response], [problem to business or experience] to ensure we were aware of users and business needs.

When [looking for plants to buy], users [search for plants], which causes [a problem as they are unsure which plants will match their lifestyle].

When [browsing through options to stay at], users [scroll through a list of cabins], which causes [a problem because they cannot filter or sort results].

unplugged case study observations

Assumptions

User Goal: We believe that by making it easier for users to purchase fresh and good quality plants as well as providing information on plant care will make users feel more confident in buying plants.

Business Goal: We believe that by making it easier for users to find plants that match their lifestyle as well as providing information on plant care, will make them more confident to purchase plants and increase the number of orders on Patch.

Validated Observations

By analysing our observations to understand users' main frustrations when using the mobile version of Patch, we identified the primary frustration based on what would provide the greatest gains for both user and business.

Primary Frustration
When [looking for plants], users are [finding it challenging to search for a plant that matches their lifestyle], which results in [them feeling insecure and doubtful].

How Might We

With a picture of the problem at hand starting to come into place, we jumped into the ideation phase and worked through the solution design model, identifying users actual behaviour, and optimal behaviour. This allowed us to form a how might we statement to begin forming a solution.

How might we make it easier for users to find their ideal plants on Patch?

User Story

We wrote down our main User Story to keep us focussed when we created both the current and improved user flow after which we decided on the features to incorporate in our design.

User Story: As a fan of plants, I want to buy a plant from Patch for my desk so I can improve my home office setup.

Ideation

To organise our ideas, we sketched some possible solutions on how might we solve the identified problem. We annotated the sketches with notes to give clarity and direction on the design which we used as guidance for the mid-fi wireframes.

unplugged case study mind map

Mid Fidelity Wireframes

We used a neutral colour palette to avoid any decision bias and would use mid-fi wireframes to get feedback internally. We also used these wireframes to determine the position and sizing of elements.

unplugged case study mind map

Styles & Components

The sketches and wireframes helped us recognise frustrations with the experience that we improved at hi-fi stage. To create the high fidelity prototype we inspected the products style and followed the 4px rule to effectively  and easily create a prototype that was consistent with the product styling. Before creating the prototype, we created interactive components in Figma to easily and quickly help us design.

unplugged case study styles

High Fidelity Prototype

Below is the final version of the prototype that we created. We included interactions and transitions from Figma to match the products flow. We recorded our solution to make it convenient to experience the improved flow.

Outcome

With the hi-fi prototype created we received feedback from users on the search the experience. We validated that it was more clear to users how to search and find plants that suited their preferences.

Conclusion

Improving on the experience on Patch was great to work on as we had the opportunity to contribute to meaningfully to a digital product. We reflected on how we approached the project, where we could improve next time and what the highlights were.

unplugged case study conclusion