Home Facebook Marketplace

About the project

In 2019, marketplace apps accounted for 47% of online marketplace purchases worldwide. [1] It is estimated that by 2021, 54% of eCommerce will be generated via mobile. [2]

 

Facebook Marketplace was launched in late 2016. It is available in 70 countries and has around 800 million monthly users, which is 15% of the app’s total population. [3]

I have been selling and buying on a wide range of eCommerce platforms in 3 countries for over 10 years. In my experience, Facebook Marketplace has a lot of room for improvement compared to other flea market apps. I wanted to learn about other others’ experiences, and redesign the Facebook Marketplace to bring it on par with other apps.

The problem

How can I improve the user experience of Facebook Marketplace?

The design process

I used design thinking methodology to guide my project. This involved:

Empathise
  • User surveys and interviews
  • User research analysis, affinity diagram
  • User personas
  • Journey maps
  • Task analysis, user flows
  • Competitors research, heuristic analysis
Define
  • Defining user needs and pain points
  • Site map
Ideate
  • Low-fidelity wireframes
  • Mid-fidelity wireframes
Prototype and test
  • Mid-fidelity working prototype
  • Usability testing
  • Refining the high-fidelity working prototype
Tools used

Quantitative research

I began the process of empathising with my users by conducting a survey. The goal of my survey was to find out:

  • Demographics
  • Do they buy? Sell? Or just browse?
  • What kind of items do they sell?
  • How much money do they spend/make?
  • Which apps do they use?

Qualitative research

I also sat down with 4 survey respondents to conduct in-depth interviews and find out more about their motivations and experiences.

I collated this information into an affinity map.

Competitor research and analysis

I analysed Facebook Marketplace and its 3 main competitors, chosen based on my research participants’ favorite apps. I gave each a score based on the 10 usability heuristics, then went into more detail.

User personas

Based on my research data, I created 2 personas to represent the 2 main use cases.

Journey maps

Task analysis and user flows

User needs and pain points

Empathising with my users during the research phase helped me to identify their key needs and frustrations.

Site map

I designed a site map to meet my users’ needs for simple navigation and processes.

Low-fidelity wireframes

I used Balsamiq to create low-fidelity wireframes of the app’s main pages.

Mid-fidelity prototype

I used Figma to create a mid-fidelity prototype of the app’s main task flows.

User stories and flow

I created user stories for my personas, and user flows based on my redesign.

User testing

After testing my prototype for basic functionality, I planned how to execute user testing.

My main goals were:

  • Is it functional?
  • Does it address the pain points identified in the research phase, and to what degree?
  • Is anything missing?
Logistics
  • 29-30 July
  • Online/remote
  • Online Figma prototype (PC browser)
  • Participants: 5 people who fit the demographics and use cases identified in the research phase
Data collection
  • Google survey with short and long-form answers
  • Observation (remote) with 2 users
  • Interview via video call with observed users
Test tasks
  • List an item for sale
  • Buy an item by making an offer
  • Follow a seller
  • Add a new address
Metrics
  • Success/failure rate of task completion
  • Errors
  • Overall satisfaction ranking
  • Qualitative feedback, suggestions

95%

Task success

2

Errors

56%

Overall satisfaction

Feedback

I received a lot of qualitative feedback from users, which I prioritised by severity.

High-fidelity prototype

Taking the feedback from my user testing on board, I proceeded to refine my prototype. In order to stay consistent with Facebook’s branding, I used screenshots of the app to guide my visual design. I installed the default font for iOS apps, and used real advertising from Marketplace to make my prototype feel more authentic.

Mood board
Design system

I was not able to find any Facebook branding or UI assets, so I created my own design system. I used the screenshots I took of the app to maintain branding consistency.

Illustration

I mimicked Facebook’s Alegria illustration style to create imagery for the tutorial screens.

Figma prototype
Home and profile
Buy an item flow
Sell an item flow

User testing

I conducted a final round of testing to determine if I had successfully improved the usability of my prototype.

100%

Task success

0

Figma/prototype errors

90%

Overall satisfaction
All was pretty straight forward
Good checkout options and it's clear
It's simple

Challenges and lessons

It was difficult to adopt a beginner’s mindset when I have more knowledge and experience with the subject than my users. To overcome this, I focused on listening carefully during my user research interviews to overcome any assumptions I had about other users’ motivations and feelings.

I learned the value of research when some survey participants proved my hypothesis wrong. While many people used the same apps, there were varying experiences and opinions of the same apps. For example, some people said Depop’s navigation is frustrating to use whereas others didn’t have this issue.

There were several challenges during initial user testing. I couldn’t see a share link so users could view the prototype on a phone, which detracted from creating a natural testing environment. Users had trouble with the Figma software – unsure whether you could scroll or not. I believe that if I were able to test in person on a mobile device (rather than remotely), these issues would have been avoided and I could have collected higher quality qualitative feedback in real time.

Several users also encountered an apparent bug where an overlay would not close as designed.