01 / Context

The Company

Poof can create custom flows for processing payments

Most Payment API's require a long process for users to adapt to their market. Poof API is a fast, lightweight, and simple REST programmable API for processing payments across all popular payment systems and gateways. With Poof's API, you will be able to create your own custom payment flows, accept payments, automate payments, or create your own payment service. At its current stage, Poof offers an option for their users to create their own built in store page with their API automatically connected.

The Problem

Creating a store page felt too empty and lacking customization

When Poof put their focus on their users having the option to create their own store page, it came an increase of customer frustration over the shop experience - difficulties creating, questions about features, and website bugs. In fact, customer complaint tickets and calls were so severe that the company phone number was even removed from the website to prevent an excess amount of calls.
‍
Poof was ill-prepared for the sudden feedback of its lacking store creation page. It was clear that patchwork UX solutions previously tolerated in its initial product experience could not adequately scale, and a change was necessary.

03 / USER RESEARCH

Two sets of customers: first-timers and existing members

Once a user creates their store from Poof, they then are able to add multiple items although in a very simplified look. Thus, although I was primarily concerned with re-designing the store for the first-time customer, I also had to keep in mind how the experience would differ in the store page for existing members.

I interviewed 4 people within our target market and 5 existing customers to uncover these issues. On average, most of Poof's users are younger to mid generation, ranging from 25-45+ years old.

3A / INTERVIEW TAKEAWAYS

New users needed more context and guidance.

For people who have never created a store from Poof, 3/4 interviewees commented on the confusion they had with information presented (or lack thereof) in the creation flow. It was unclear what create tags are meant to do and how certain constraints were explained i.e. having the option to add text attachments for emails for each item provide for their store, . A more step-by-step experience was desired.

Existing members needed more control and flexibility.

Repeat users of Poof already know the drill. They know what to do in creating an item and adding it to their store. However, what they expressed was a desire for granular control, such as the ability to easily upload different file types such as gifs, mp4's, or png. As well as customizing when a sale will go up at a certain time of day and being able to create collections for their store items.

3B / THE CURRENT ITEM CREATION EXPERIENCE

The item creation process feels empty

After conducting a personal site audit, I noticed 3 key issues:

Poor experience

Confusing for users to see their items with a big negative space.
Small target areas
Difficult to understand the item creation process.

Empty visual design

Products created had images that overfilled the page.
The visual design felt lacking compared to the current trending market that Poof wants to tackle.

Lack of clarity

Unclear what purpose the text attachment adds to the item page.
Product value proposition not being effectively marketed
Lack of personalized customization to the product store page.

3C / GOALS

Make it clear, reassuring, and accessible to create a store page.

Before beginning explorations, I wanted to make sure each design decision tied back to a user pain point. The redesign needed to be:

Clear

Use plain language over jargon
Product details are clear in both content and visual presentation
Easy to spot common actions by providing descriptions of each process.

Reassuring

Allow for flexibility of mistakes
Include a breakdown of product value
Guiding language, popups, and simple steps

Accessible

Defined information hierarchy
Provide a dark mode option for users used to using Poof at night.
Any visual aids are paired with text

05 / VALIDATION

Running two rounds of testing with both user segments

Finding #1

Item creation was still too simple

Originally, item creation page was simplified to providing just the basics needed to add an item to a user's store. However, the feedback suggested the creation process was too simple and had no option to adapt to a user's needs in case they wanted to add more customizations such as the option to add the item to a grouped collection.

Finding #2

Unlock feature had low visibility, confused for why the option was available

In the designs being tested, I had added an unlocked once purchased tab during the item creation process near the last steps of the page so that the item a customer has bought is able to unlock and keep as they choose. This was perceived as a confusing option, and thus when I asked users if they "locked their item till a certain price hits", they were hesitant to click it or ignored it altogether.

Finding #3

Difficult to navigate through flow

When discussing with engineering, users who used the native back button on their respective devices while in the middle of the item creation flow would be taken back to the landing page and their content is wiped rather than saved as a draft due to various web app constraints. As such, I needed to adjust for this in my designs and implement prominent navigation options (save as a draft) that were easy to select after going through the process.

06 / SOLUTION

Making it frictionless to build your store-front.

Modernize the product store page

Poof originally relied on a simplified process to carry out the item creation page, which led to users dropping off due to an empty visual design, as well as users clicking "back" on desktop but accidentally exiting the flow. By designing and shipping our own product store page flow, we could mitigate these issues and simultaneously make the design language in the store experience consistent.

Guiding customers through the item creation, step by step

In the design that got shipped, I added an onboarding step that didn't exist before, displaying it as soon alongside the products so customers could easily see what they're adding. Lastly, more details were communicated in the microcopy to answer some of the frequently asked questions users would have previously about the details (definitions, examples).

Provide customization while limiting content load

After some brainstorming, the new idea we came up with and shipped was allowing customers to to be able to have multiple options for their item creation. What we found was that having the whole process on a single page rather than previously being on multiple tabs led to users finishing the journey rather than feeling some decision fatigue. By emphasizing item creationfirst, users have less pressure to finalize what they want in their item right away. Of course, to supplement this we also created a sample process so users have an idea how to create an item before they make an account with us.

07 / RESULTS, LEARNINGS, & FUTURE

Conversion rates increased by 20%

In early May, the Onboarding designs were shipped and A/B tested with the previous launch in order to control for variables when testing conversion rates. We saw a 20% increase in conversions throughout the month up to end of May.

What I learned

Test often, and test early

I didn't need a 'perfect' prototype in order to test my ideas, people were more than happy to comment on any small thing I had
You are not your user is a phrase I had to train myself to remember throughout testing
Taking a step back from my designs and getting feedback from actual members of our target demographic yielded more insights than I could've discovered alone

Speak the same language with your developers

It was my first time working with developers on a team, so I had to very quickly learn how to communicate feedback in a way that made sense to my developers during handoff and QA
Oftentimes, I found it was faster to just hop on a call or record a Loom video/take screenshots to get my point across

Microcopy matters

Much of the solution revolved around providing the right context to customers, which required clear language
I didn't realize how much time I had to spend focusing on solely copy, and that it was just as significant as the actual UI
I also learned to pay attention to areas where microcopy may be needed for additional context, or edited for clarity

Reimagining the store page experience for an all-in-one payment system

Overview

Duration

Role

Toolkit

Team