PM Banner.jpg

Poshmark

 
PM-logo-large 1.jpg

AN APP FEATURE CASE STUDY

PROTOTYPE


Progress Bar (Intro).jpg

For this project, I designed a new feature for an existing app, Poshmark.

MY ROLE: End-to-end sole UX designer

BACKGROUND:

Poshmark is a popular online marketplace in the United States that provides individuals with a convenient way to buy and sell preloved clothing, shoes, and accessories. Launched in 2011, the e-commerce platform is rapidly expanding, even adding a home market section to its previously fashion-centered marketplace, and had approximately 50 million users in April of 2019 (source). Users can “follow” each others closets to see new posts and share listings, and they communicate through public comments on product listings.

Poshmark rewards social sharing, encouraging users to share listings to gain more exposure and drive sales. However, it wants to find a way for buyers and sellers to communicate more efficiently and easily on its popular app. Poshmark users have expressed confusion and frustration with the lack of private messaging in online forums (​Reddit​), and Poshmark wants to find a way to resolve the issue.

Most importantly, Poshmark is concerned with the safety and comfort of all of its users and wants to ensure that any communication between users follows ​user conduct guidelines​. Poshmark also wants to remind users not to take transactions off the platform for their own safety.

Poshmark’s goal for this project is to increase transparency and safe engagement between buyers and sellers.

HIGH-LEVEL OBJECTIVES:

  1. Design a new messaging feature that embeds smoothly within the current Poshmark app.

  2. Design complementary elements that enhance the safety and security of the new messaging feature.


Progress Bar (Research).jpg

PM Research 1 Header.jpg

RESEARCH GOALS:

  1. Identify common methods of communication between individual buyers and sellers online

  2. Identify process for standard transaction on preloved markets

  3. Identify motivations and deterrents for using preloved markets

  4. Identify pain points for users on preloved markets on both buyer and seller sides

  5. Through the preliminary usability test, identify common user and task flows.

METHODOLOGIES:

For this project, it was important to get a read on the emotional responses of users to preloved markets and using the Poshmark app. To that end, I decided to conduct user interviews in-person or via video chat. I also asked in-person research participants to perform a preliminary usability test on the existing app.


Photo by Crew on Unsplash

Photo by Crew on Unsplash

1) User Interviews

I recruited 10 participants. Five were interviewed in-person and 5 were interviewed via video-chat.

Wanting to suss out attitudes towards preloved markets, I asked about their experiences buying and selling.

From my interviews, two general groups emerged:

  1. Hobby users, who frequently browse resell markets for fun and to find particular items of interest, and

  2. Circumstance-driven users, who generally tend to sell rather than buy and do so because of circumstances that cause them to downsize their belongings or otherwise get rid of certain items.

KEY TAKEAWAYS:

Most commonly mentioned resell platform was Facebook for the convenience and familiarity.

Communication was key and expected between buyers and sellers, and all participants communicated with sellers or buyers at some point during their experiences.


Photo by Brooke Cagle on Unsplash

2) Preliminary Usability Test

I asked my five in-person interview participants to perform three tasks on the existing Poshmark app. I wanted to determine how users would navigate the app and where they would expect to see a messaging feature.

Task 1: Find and purchase a Gucci belt for under $300.

Task 2: Find a “Filofax A5 Classic Croc Ebony” and offer $50 less than the listed price.

Task 3: For the same product, message the seller privately about the condition of the item.

KEY TAKEAWAYS:

Participants expressed that the Poshmark app felt overwhelming and busy at first glance.

Participants checked the product listing page and/or the seller’s profile for a messaging option.


Now that I conducted my research, I put together research deliverables to organize and contextualize my findings.

First, I created two personas, or fictional characters that represent my target user, based on the two general groups of users I determined through my user interviews.

Danielle Persona and Empathy Map

Danielle Persona and Empathy Map

My first persona (to the right) is named Danielle and is based on the circumstance-driven user.

Danielle doesn't regularly browse resell markets unless she has a need. Her primary motivation for using resell markets is to easily sell items that she no longer wants. Danielle is concerned with secure and safe transactions, and she wants to sell items with ease and minimal effort.

Furthermore, my user research indicated that inconvenience or complicated-looking resell platforms was a primary deterrent for casual users.

Overall, Danielle wants ease, simplicity and little commitment.


Annabelle Persona and Empathy Map

Annabelle Persona and Empathy Map




My second persona (to the left) is named Annabelle and is based on the hobby user.

Annabelle regularly browses resell markets (and various ones, at that), to keep an eye on luxury items and shop. She enjoys both buying and selling, and keeps her listings up-to-date. She loves the fun of discovery on resell markets but she is wary of scams, especially where there’s a lot of money involved, and she struggles to balance her love for luxury with her desire to reduce her carbon footprint in the world. For that reason, she thinks resell markets are great.

Overall, Annabelle wants a great selection, good prices, and an enjoyable browsing experience.


Next, after considering both personas and thinking back on my user research, I decided to use Danielle as my primary persona for the purposes of this project. Danielle represents the majority of the participants in my user research. Furthermore, in regards to a Poshmark messaging feature, both personas had overlapping goals and frustrations.

I created a storyboard based on how Danielle may use my messaging feature. This helped me envision and contextualize my target user’s problem.

Storyboard

Storyboard

From my research and my deliverables, I came up with these actionable takeaways as well as a “How might we…” and problem statement.

ACTIONABLE TAKEAWAYS:

  1. Keep it simple.

    Any communication feature needs to be as clear, straightforward, and easy-to-find as possible.

  2. Make it secure, safe, and comfortable.

    Numerous participants had uncomfortable or negative experiences communicating with a user on a resell platform (one participant was even subject to a scam!).

    Encourage and enforce a civil and fair exchange, as well as perhaps including a way to block or report users.

  3. Consider both the listing and the seller profile for the location of a messaging feature.

    All five participants in the usability test scrolled through the listing first before clicking on the seller profile for a messaging option.

HOW MIGHT WE + PROBLEM STATEMENT:

How Might We . . . provide a convenient and straightforward way for Danielle to communicate with a buyer on the Poshmark app?

Because casual sellers are pressed for time and energy, they need a convenient and efficient way to communicate with potential buyers.

FoDL IA Header.jpg

Now that I had my actionable takeaways and a better understanding of my potential users, I needed to determine how information was organized on the existing app and where a new messaging feature could be embedded smoothly into it.

Poshmark App Sitemap (cropped for brevity)

Poshmark App Sitemap (cropped for brevity)

I created a site map using GlooMaps, which is used to demonstrate relationships between content within the Poshmark app. The site map made me realize how much information was contained within the app, and I understood how overwhelming the app could be to users.

Because I asked participants to perform a preliminary usability test during my research, I had a general idea of common user and task flows already. Using Whimsical, I created visual user and task flows from a buyer and a seller perspective.

For the user flows (below), I considered two tasks:

  1. Asking a question about a product listing as a buyer.

  2. Replying to a question as a seller.

User Flows (view here)

User Flows (view here)

For the task flows, I considered three tasks:

  1. Finding a specific item on the app.

  2. Asking a question about a product listing as a buyer.

  3. Replying to a question as a seller.

Tasks Flows (view here)

Tasks Flows (view here)

Overall, I found that the flows were pretty straightforward.

My user research informed me of user goals and frustrations in regards to resell markets, and I also had an idea of where users expected to find a messaging feature on the app.

My next task was to ideate what a messaging feature should entail and where it could be smoothly embedded into the Poshmark app.


FoDL Design Header.jpg

Ideation Banner.jpg

To spur ideation and get the process running, I put pencil to paper for a couple ideation sessions. In the first session, I wrote out keywords and ideas. In the second session, I freehanded simple sketches of how a messaging feature could look and where they might be located. The goal here was to get the creative juices flowing.

Ideation Session #1 and #2

Ideation Session #1 and #2

Paper Wireframes Banner.jpg

Next, I created paper wireframes. I thought back to the preliminary usability test when trying to decide where to embed the messaging feature. Participants looked towards the top of the product listing page first, then clicked on the user profile as a last resort, so I placed messaging shortcuts in both of those locations. Using POP by Marvel, I put the wireframes together to make a prototype.

One of the concerns I encountered during my user research was the safety and security of a private messaging feature. To that end, I wanted to ensure that all Poshmark users were reminded of user conduct guidelines prior to using the messaging feature for the first time. I tried to incorporate this element in the paper prototype in a straightforward and efficient way by having the reminder pop up like a message.

Paper Wireframes

Paper Wireframes

I gathered three participants (2 in-person, 1 remote) to conduct a usability test with the low-fidelity prototype. I gave each participant two scenarios with tasks, asked them to think out loud through their process, and observed their performance:

  1. Lately, you’ve really been liking Theory, a high-end luxury brand. You really like “Theory Frill Dress” after seeing it in-stores but you don’t want to pay the high MSRP price. You decide to check on Poshmark, hoping to find a better deal, and find a potential listing. You want to ask the seller a question about the dress. 

    Send a message to @usertwo about “Theory Frill Dress.” 

  2. You recently cleaned out your closet in anticipation of an upcoming move to a new apartment and you list a few used items on Poshmark. You get a notification that someone has messaged you about your “Big Tote Bag” listing. You want to respond.

    Respond to @userone’s message about your “Big Tote Bag” listing. 

HIGH-LEVEL FINDINGS:

  1. 100% task completion rate: all participants completed both tasks

  2. 75% error-free rate: all participants expressed minor to moderate confusion with the tasks

I created an affinity map to organize my findings and determine what to reiterate while creating my next set of wireframes. 

Paper Prototype Affinity Map

Paper Prototype Affinity Map

ACTIONABLE TAKEAWAYS:

From my usability test notes and the affinity map, I came up with three actionable takeaways.

 

Clarify what is required. 

  • 2 out of 3 participants expressed confusion over whether they needed to click Poshmark Community Guidelines before they could click “I Agree.”

    • Proposed Solution: gray out “I Agree” to make clear that Poshmark Community Guidelines should be clicked and read first. Make “I Agree” clickable afterward.

  • 2 out of 3 participants expressed confusion over whether they needed to click “Learn How” to the PM message regarding blocking or reporting users. 

    • Proposed Solution: Instead of making “Learn How” a CTA underneath the message, which mimics the previous message where the user must click on it to continue, put “Learn How” as a link inside the message itself and preface it with, “If you want to, you can learn how here.”

Make it short and sweet.

  • 3 out of 3 participants expressed frustration over the misconception that they had to agree to Poshmark Community Guidelines every time they messaged on the app. 

    • Proposed Solution I: Make it more engaging and short, with a message that this only occurs for new conversations

    • Proposed Solution II: Have users agree only once, the very first time they try to start a new conversation or respond to a new conversation.

Consider how to make Messages and Comments distinct.

  • 3 out of 3 participants confused Comments and Messages, wondering if they were the same thing. 

    • Proposed Solution: change up the icon, perhaps using an envelope instead. 

 
FoDL UI Design Header.jpg

Because Poshmark is already an existing brand, I had no need to create a logo or branding from scratch.

Hi-Fi Wireframes Banner.jpg

Due to time constraints, I moved right into high-fidelity prototypes, keeping the findings from my paper prototype usability test at the forefront of my mind. I relied on app screenshots to stylistically emulate the pages I needed to create from scratch, and I designed features on top of existing app screenshots.

Before/Afters: designing elements on existing screens

Before/Afters: designing elements on existing screens

The new pages included the actual messaging screens, the required agreement to Poshmark User Conduct Guidelines and Poshmark Etiquette, block/report elements, and message inboxes.

I had to consider the various user flows and design several versions of similar pages—for instance, the message inbox for a user who arrived from the “News” tab at the bottom navigation bar would look different than a message inbox for a user who arrived through their user profile. A message sent directly through a user’s profile would also look different than a message sent through a product listing.

New pages

New pages

I put together my wireframes and created a high-fidelity prototype in POP by Marvel for my next round of usability testing.


FoDL Progress Bar (Test).jpg

Usability Testing Banner.jpg

I recruited three participants who fit the description of my target user, Danielle, for in-person, moderated usability testing.

Two out of the three participants were casual Poshmark users who have listed, sold, and/or purchased on the app in the last couple years. One participant has never used Poshmark but has experience buying and selling on Facebook Marketplace, Slack, Craigslist, and Ebay. 

This time, I asked them to perform three scenarios and tasks to complete on the prototype:

  1. You recently listed a few unworn designer items, including a Prada jacket, on Poshmark after cleaning out your closet. After a few days, however, you decide to gift the jacket to your friend for her birthday and unlisted the item for sale on Poshmark. You notice that someone has sent you a message on the Poshmark app. From the notification on your phone, you notice that it’s about the Prada jacket.

    Check and respond to @itsjoyce’s message on the Poshmark app. 

  2. You respond to @itsjoyce’s message on the Poshmark app but she answered in a way that makes you uncomfortable. You want to report her to Poshmark and block her for good measure. Poshmark should feel safe and welcoming, and you don’t think her comment was appropriate.

    Report @itsjoyce for inappropriate behavior and block the user. 

  3. You’re looking for vintage Chanel pumps at a good price to wear for a costume party at work. You’re hoping to find a pair for around $175 and in a size 6.5. Once you find a pair, you want to message the seller about whether they fit true to size because, from experience, you know that shoe sizing can be very tricky. 

    Find Chanel pumps in a size 6.5 that are $175, and message the seller about the sizing. 

I formulated these tasks based on my prior user research; I wanted to see whether my anticipated user flows (derived from preliminary usability testing) would be validated, and I also hoped that the prior user frustrations with the paper prototype had been resolved.

HIGH-LEVEL FINDINGS:

  1. 100% task completion rate: all participants completed all three tasks

  2. % error-free rates:

    • 1st task 0% error-free rate: 3 out of 3 participants expressed confusion and had minor issues 

    • 2nd task 66% error-free rate: 1 out of 3 participants expressed confusion and had minor issues 

    • 3rd task 100% error-free rate: 3 out of 3 participants had no confusion or issues

High-Fidelity Prototype Affinity Map

High-Fidelity Prototype Affinity Map

ACTIONABLE TAKEAWAYS:

I came up with five specific reiterations based on my notes and the affinity map.

  • Indicate which messages are unread, perhaps by putting red dot next to unread messages.

  • Combine messages from a user, perhaps by putting “2+ unread” or some other indication to declutter message inbox. 

  • If user is using Messages for the first time to respond to another user’s message, show the received messages and not just the Guidelines agreement prompt, reducing confusion over whether user is in the right conversation. 

  • Make “Close” button clearer for Poshmark User Conduct Guidelines and Poshmark Etiquette.

  • Make it clear when user is blocked; perhaps add some kind of feedback mechanism or add “@itsjoyce has been blocked. To unblock, click here.” Consider adding place for comment/follow-up if reporting a comment. 

 
Revisions Banner.jpg

I applied the actionable takeaways from the usability test to reiterate my high-fidelity wireframes.

Reiteration of high-fidelity wireframes

Reiteration of high-fidelity wireframes


Progress Bar (Conclusion).jpg

CONCLUSION:

Unexpectedly, this project required me to focus on the emotional needs of a Poshmark user. Before I conducted user research and the preliminary usability test on the existing app, I didn't realize how strongly connected users’ emotions were to their decision to participate in a resell market. More than with any of my other projects, my target users tended to shy away from the unknown and complex to the simple and straightforward. For instance, users particularly liked the familiarity and ease of platforms like Facebook Marketplace because they felt confident on them. My user interviews seemed to reveal that the personal nature of individual buying and selling may be the reason why.

Applying my findings to this particular project, I recognized that while it was important to emphasize the convenience and efficiency of any new messaging feature on Poshmark, it was very important to reassure and comfort the user as well. To that end, I focused on 1) user safety by requiring any new user of the messaging feature to review and agree to Poshmark guidelines, and 2) designed the messaging feature to be as familiar and unthreatening as possible.

Limitations for this project included time constraints and the experience of working within an existing app. In my user research, many participants expressed that Poshmark felt “busy” and “overwhelming” but I had to work with the existing pages and integrate the new feature seamlessly.

NEXT STEPS:

I would like to test my reiterated prototype with the same usability test to see whether the issues have been resolved.