What is Merch Dropper?

Merch Dropper is a site that allows sellers to create a merchandise shop without having to manage inventory and shipping. Merch Dropper is perfect for anyone looking to sell custom clothing and items such as T-shirts, hats, mugs, phone cases and more.

What’s the problem?

My team knew from the start that Merch Dropper was going to need some visual reworks and some attention to usability, and more features. 

Understanding user expectations

After seeing the current state of Merch Dropper, my partner and I generated user assumptions, and started to create a simple interview script. Through this research we wanted to make sure we were focusing on the right problems.

We learned:

How are we solving this?

Initially, Merch Dropper was the foundation of an e-commerce platform. Our job was to build upon that foundation and tailor the product to support the sellers. We needed to create an experience that drew in the small social media influencers, or the team moms, or the fundraisers that want to create custom products and have other obligations that keep them from working on their store full time.

To do this we planned to:

Simplify the onboarding process

With our plan set, my partner and I started to dive deeper into how we could redesign the onboarding flow. First we needed to decide what information was necessary to create an account, and add anything that we felt was missing.

Our new flow would contain this information:

• Username

• Password

• Stripe account number

• Store name

We then split this into 3 sections to keep the flow as simple as possible.

Section 1

• Username and password creation.

Section 2

• Link to Stripe to connect your account

• Redirect to section 3.

Section 3

• Create a name for the store.

• Using that name, Merch Dropper will generate a custom url.

This split of the information will

• Keep sellers from feeling overwhelmed.

• Only ask for information that’s necessary.

While expected every seller to complete all 3 screens, we added an option to skip the 2nd and 3rd screens. A potential seller could

• Add the minimum info required.

• Access the design and listing features offered

• Add what they skipped over.

without getting too invested.

Building missing features

After feeling confident about our work on the onboarding, we moved over to researching and framing out the seller dashboard. We looked at products like Shopify and Big Cartel, as well as Dribbble posts for inspiration. We knew we wanted something simple but functional, and it needed to provide the information that small e-commerce shop owners would require.

I started by trying to replicate Shopify’s dashboard with a menu on the side and the ability for heavy customization. This design quickly became overwhelming and didn’t follow our idea of “simple but functional”.

My next iteration tried to break down the elements of the Shopify design and utilized collapsible cards to showcase detailed information. However this was also more complex and broken than it was simple but functional.

My 3rd iteration turned the list from above into a page. The first section had basic analytics, the second was the seller’s inventory and the last was a settings section. This design embodied our idea of simple but functional. Everything that a beginner/intermediate seller would need is on one page. My partner and I continued to iterate on this design to make it more accessible and professional.

Prototype testing with sellers

With the designs done, we created a prototype to showcase how the onboarding process and how it is connected to the dashboard. We also wanted to figure out if the dashboard was connected to the rest of the site in a way that our sellers would understand.

We used Maze to break up our prototype and add questions so we didn’t have to sit in a room or video call with the person using the prototype. The prototype and questions would be integrated in a way to not break the testers’ flow and mindset.

We sent it out to 3 testers and when we got the results back we were met with very low usability score of 69. We looked through each section of the prototype and saw that the onboarding process was a breeze but the dashboard was causing confusion. Once the tester got to their dashboard their task was to add a shirt to their store. Due to the structure of the site, the design tool to create products and the button to add previously designed products to your store were separate functions.

The testers were confused by this separation and 2 of them didn’t realize that there were more options in the navigation bar. Once they got past the dashboard and into the design tool, the testers had no problem completing the rest of their tasks. Now we had to take our feedback to Figma and create a solution to our usability problem.

Restructuring the flow

The new flow between the seller dashboard and the product design tool had to simplify the steps of the current flow and have it still make sense to the sellers.

So we took inspiration from our testers’ misclicks and designed our new flow to work how the testers expected it to. The options on the navbar were refined and the button in the inventory section was now connected to the design tool and automatically added the design to the sellers store. The flow was now one step.

Adjusting the prototype

With the updated design, we created a new prototype that focused only on the interactions within the dashboard and design tool. The onboarding resonated well with testers in the first prototype so we didn’t feel the need to retest it.

We sent the new prototype to five testers and saw great results. Every tester was able to complete their task and thought that it was really easy and the only reason the score wasn’t 100 was because the testers were trying to experiment with the color selection and adjustment options on the design tool which weren’t part of the prototype, so it was recorded as misclicks.

From the two prototype tests we learned:

Design tool overhaul

With our first two sets of designs handed off to the dev team, my partner and I started to redesign parts of Merch Dropper that we thought could use some visual touch ups or even a complete function overhaul.

I started with the product design tool because it wasn’t intuitive, didn’t limit the area that the seller could place an image, and only allowed the seller to design shirts.

The new design tool would:

• properly limit images according to the printer’s ability

• provide a library of products that can be customized and designed.

• function in an “quick to grasp” way

When I started designing the tool I got a little confused about what type of user was interacting with the product so I created a sizing option. Sizing isn’t something that the seller needs to worry about but this first design’s style carried through to my most recent iteration.

Design 2 had a new layout and a slider to adjust design size for the product. This design was good but it was missing the ability to customize other products.

Design 3 is my most up to date design and fixes the problems of design 2.

• Choose product and colors.

• Place designs.

• Resize and move designs.

If I were to keep iterating on this design, I’d like to find a way to keep everything on one page. Having a multi-step design tool does not work with our idea of simple but functional, and I can see sellers getting annoyed by the number of clicks.

Conclusion

Overall working on Merch Dropper was a great experience. I worked closely with a dev team and had the support of another UX designer. I was able to pass off the onboarding and dashboard designs to the devs and unfortunately ran out of time when working on the design tool. But I was able to create an in-depth prototype of how everything came together.