Designing bartering experiences for mobile (iOS) and tablet where people can trade goods, skills & services within proximity to each other.Bartering is a powerful community builder, and in a densely populated city like New York, the pandemic made the disconnect between neighbors apparent. During the pandemic lockdown, Xi’an residents in China turned to WhatsApp to barter supplies within the same building as resources started dwindling down.
Time Frame
2022 (2 months)
Role
Product Design, research
Platforms
iOS, Tablet
Home Page / Messaging / Confirm Trade
Seamlessly showcased a variety of available trades with filters on top for easy navigation.
Pre-selected messaging prompts helps facilitate initial conversations.
Public meeting space is determined through GPS, eliminating the back and fourth on where to meet.
Usability Feedback
“Everything is clear and visually appealing. I had no issues navigating from one screen to the next. I appreciate the pre-selected messaging prompts because I’m not sure how to start the conversation with a stranger.”
Confirmation / Map / Rate User
Confirmation page with ability to cancel or message the trader and map view of public meeting spot.
Accountability: Next time the trader signs on the app, a smiley rating system to indicate whether the trade went well or not.
Usability Feedback
“I like the emojis for rating instead of the 5 star rating because it simplifies the overall process.”
Service Design / Customer Journey
Considers touchpoint between Tradesies and the user experience.
Showcases the registration process & user dashboard.
Goes through the flow of the user creating a new post.
Usability Feedback
“The dashboard is helpful by showing stats of how many views the trades are getting and I like the simplicity of the “create a post”.
Scaling up from mobile provided more opportunity to showcase additional items like map of current location and displaying tips for a positive trade experience.
Secondary objectives includes safety tips under trade details so the trader can report the listing or the trader without navigating away.
Responsive Design
How can we create an exchange without money while teaching community building and support at the same time?The Process
Relevant Research Insights
I led 6 user interviews to understand users’ current experiences with buying, selling, and familiarity with bartering in order to identify major pain points.
01/ Pain Point
Users dislike the idea of meeting up at each others homes for exchanges.
“How might we prioritize safety so that users can have a positive experience during the exchange?”
02/ Pain Point
Users are often annoyed during the negotiation process because it takes too long.
“How might we focus on accessibility for the user to ensure clear communication throughout the process to avoid confusion?
03/ Pain Point
Users liked the idea of being friendly with their neighbors but are unsure of how they can get to know them.
“How might we foster a positive environment for the user so that they can find common ground with their neighbor during the exchange?
In a barter system, what are you most likely to trade?
How often do you engage with your neighbor?
Which of the following best describes your housing?
High Level Goals
After the interviews, I created an affinity map to converge our findings. These goals will be the north star for Tradesies.
Pivot: Based on the interview findings, I scraped the original idea of incorporating an area showcasing community events since most users disliked the engagement aspects of the app outside of trading.
01/ Prioritize Safety
Direct traders to a public meet up location based on their current locations to avoid meet ups at their homes. Also providing safety tips and best trading practices on the app.
02/ Make it Accountable
Focus on accountability to reduce the chance of being “ghosted”, ensure all communication to be done through Tradesies.
03/ Make it Accessible
Help guide the bartering process by requiring a clear explanation of trade being offered in order to eliminate any unwanted surprises.
Understanding the Market
Synthesis: App Map
Tradesies will be a bartering only platform for a unique experience while prioritizing location based trades and keeping user safety in mind.
I created an app map to further understand how the users will navigate the main user flow in order to inform my design decisions on the overall structure.
Mobile Iterations
All designs for iOS were created following Apple’s HIG guidelines when applicable. This helps streamline the development process and creates a better user experience, resulting in happier users.
Home Screen (Wireframe > Hi-Fi Iteration > Final)
❗ “Am I searching through the entire app or just for trades?”
The search bar caused initial confusion for users so I re-visited the hierarchy of the layout.
❗ “Where does the back arrow take me back to?”
The back arrow is removed from the final iteration because there was no need to go back once you’re logged in.
✔️ Filters were clear, slight modifications in terms of spacing for the final design.
Message Screen (Wireframe > Hi-Fi Iteration > Final)
❌ “I thought the confirm trade button was the send button. When do I use that button vs. the send button in the chat box?”
This was one of the more trickier screens for me because by wanting to streamline the exchange process, I ended up adding more steps which made the entire process more cumbersome.
Confirmation Screen(Lo-Fi > Hi-Fi Iteration > Final)
❗ “I would like the ability to just cancel the trade instead of messaging back and fourth.”
It was redundant to ask users to message the trader to reschedule so to streamline the process, I included a “cancel” button to eliminate the extra step.
✔️ Addressing accountability: The final design included the ability for traders to flag the other party if they were a no show. After a set number of no shows, the trader would be banned from this platform.
Dashboard Exploration (Hi-Fi Iteration, Final)
❗ “The orange icons are a bit hard to see.”
Initial navigation icons and the orange color did not pass accessibility guidelines.
Tablet Dashboard Iterations
Lo-Fi Iteration
❌ What users said: Vertical navigation bar was quickly abandoned as it took up too much real estate.
✔️ What I did: With this feedback, I proceed to create my first round of hi-fi iterations with changes before doing another round of usability testing.
Hi-Fi Iteration
❌ What users said: There are too many trades listed throughout the dashboard and users don’t know where to look.
❌ What users said: “Popular Near You” felt like spam and would not browse.
❌ What users said: Overall spacing still felt off, more revisions are needed.
Final Design
✔️ Carousel style cards for each trade are enlarged to address information overload and to avoid overwhelming the user.
✔️ Search bar features auto suggestions to help users predict based on entered characters with a limit cap at no more than 10 auto suggestions to not overwhelm the user.
✔️ Cleaned up the overall layout for a cohesive experience.
Design Handoff Example
It is essential that developers are involved in the design process as early as possible with clear communication for the best product outcome.
Learnings & Next Steps
🙂 Usability Testing is Key
Every time I thought I was settled on a design idea, I would do a round of usability testing to confirm but would end up re-iterating to make the concept better.
🙃 It’s Okay to Pivot
At the start of the project, my teammates and I had the intention of prioritizing the community bonding/social interaction aspect of this app by using bartering as a tool. After our user interviews and new findings, we quickly abandoned this approach and re-evaluated the new priorities.
🤔 What about Monetization?
Raise funds by aligning with a foundation and their grants
Exist under an umbrella of a mutual aid, non-profit
Utilize crowdfunding platforms