Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes

3 mins read

How we attained Product Market Fit

How we attained Product Market Fit

Client

Mason

Timeline

Timeline

Nov 2020 – Mar 2021

Role

Role

Product Designer & User Researcher

Product Designer & User Researcher

Outcome

Outcome

Significant increase in user retention and became the biggest revenue generator for the company. We were awarded Product Hunt Golden Kitty Award for 2021 and the Shopify Ecommerce 2020 Award for the Best User Interface.

Significant increase in user retention and became the biggest revenue generator for the company. We were awarded Product Hunt Golden Kitty Award for 2021 and the Shopify Ecommerce 2020 Award for the Best User Interface.

Introduction

In the fast-paced world of e-commerce, the ability to efficiently add stickers and promotions to product images is a game-changer due to its direct impact on sales and conversions. ModeMagic, an app offered through the Shopify App Store, has gained substantial popularity among Shopify users for this very reason.

However, we observed a concerning trend where nearly 40% of new users were uninstalling the app shortly after installation. While this initial traction suggests that we are addressing a genuine problem, we recognize that there is a significant gap in how we are delivering our solution. I was tasked to examine and reevaluate our approach.

Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes

Old Design

Old Design

Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes

Old Flow

Old Flow

Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes

Process


  1. Conducted Interviews: We conducted interviews and distilled the insights into actionable takeaways.

  2. Empathy Mapping: Translated interview insights into a collective empathy map for team-wide understanding.

  3. User Interaction Monitoring: Monitored user interactions via Hotjar and formulated corresponding hypotheses.

Insights


  1. Workflow: We could observe users struggling to browse through all stickers.

  2. Hard to browse stickers: Monitored user interactions via Hotjar and formulated corresponding hypotheses.

  3. Users looking at similar messaging: Users were looking for the stickers with the same intent just different styling.

Strategy

The redesign process began with a thorough dissection of user behavioural patterns; using recordings of user sessions, we dissected and evaluated the user journey. The process allowed us to identify areas of improvement and opportunities for innovation.

1. Rethinking the workflow
We identified that users generally preferred to pick a sticker before deciding on the product it would be applied to. This order was contrary to our existing workflow which pushed users to choose the product before the sticker, a sequence that seemed less natural to them. Acknowledging this user preference, we revamped the workflow to prioritize sticker selection ahead of product choice. This change profoundly impacted the user experience, making the process more natural and intuitive.

2. Using sticker selection as a way to capture intent

Another observation was when a user selects a type of sticker, i.e. "New Arrival" sticker. The user is in a focused state to find the best version of that intended messaging. So we decided to surface related stickers to the selected intent. These refinements eased the user's search for the ideal sticker, consequently reducing the time and effort involved in the process.


3. Improving Cart Visibility and Checkout Experience

The cart was hidden and would be revealed only once the user chose to confirm changes. This meant that users had to go through an extra step to extract value, but also that they often didn't have a sense of their credit balance. This led to avoidable complaints from users who felt they were unfairly charged. In the new design we exposed the cart as a tab, and the total amount due is upfront available always, regardless of the selected tab. Which reduced the hassle of checkout while giving users a consistent view of the system status with respect to purchased credits available at any point. This helped resolve a significant source of friction.

Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes
New design

Impact

The ModeMagic redesign unlocked significant value, not only for the users but also for the company. We saw a significant boost in retention rates. The enhanced user experience and app efficiency led to an upsurge in user engagement and satisfaction. Recognizing the app's potential as a robust tool for Shopify users, our company decided to channel further investments into it.


The success of the redesign, however, went beyond our internal metrics. The revamped ModeMagic clinched two prestigious awards, Product Hunt Golden Kitty Award for 2021 and the Shopify Ecommerce 2020 Award for the Best User Interface. These accolades validated our relentless efforts and the tangible value we delivered to our users.

Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes

Further improvement

We also got a feature request to automate certain stickers, i.e. Hot, New, Few left. These stickers can be applied automatically based on predefined rules. To facilitate this, we introduced a straightforward template for each sticker type, incorporating if/else logic. This feature allows users to easily set the threshold at which a particular sticker should be triggered, enhancing their control and and customization options.

Men brainstorming with sticky notes
Men brainstorming with sticky notes
Men brainstorming with sticky notes