TradeOut Interactive Website Prototype
Client Work - Case Study
TradeOut is a centralized peer-to-peer platform that allows people to create electronic contract agreements to facilitate safer transactions between two parties. From a new homeowner buying their first dining table off of Facebook Marketplace to your mom selling her laptop on Craigslist, TradeOut’s vision is to make the online marketplace experience more secure for everyone.
Opportunity
People take on a certain level of personal risk when selling and buying online. Agreements fall through, and the potential for scams is always there. Here is where TradeOut enters. By creating a platform that allows individuals to verify identities, define payment agreements, and clarify logistics of item exchange, TradeOut facilitates transactions based on trust and security.
Challenge
Our UX Design Team had the opportunity to work with TradeOut to communicate its benefit to the online marketplace space, bringing its vision to life by including real-life user experiences in the development process.
Role
Role: UX Designer and Researcher
Tools & Programs: Figma, Figjam, PowerPoint, Google Suite, Google Spreadsheets, Zoom, Transcription software
Methods
Competitive Analysis
Secondary Research
Directed Storytelling User Interviews
Surveying
Data Synthesis / Affinity Diagramming
User Flow Charts
Wireframes
Sketches
Low Fidelity
High Fidelity
Annotated
Prototyping
Interactive Website and Mobile Views
Results
Informed by user insights and competitive research, we created an interactive prototype showcasing four key user flows:
Onboarding
Contract creation
Contract collaboration
Item handoff/exchange confirmation
I was responsible for building out the item handoff process, profile page layout, settings pages, and ID verification badges that would be displayed on profile pages. Additionally, I focused on creating sidebar navigation and optimizing the handoff process for a mobile browser view. This was important when considering how and where users would use this platform to provide flexibility and intuitive functionality.
Results
Prototype Designs & Interactivity
The guiding through-line across all user flows and processes is Transparency. After reviewing users' values, goals, and perceptions in initial interviews and evaluative usability tests, it became apparent to our design team that the strongest way for TradeOut to build trust and confidence with people is by making the process clear and the information visible. In response, our team made intentional design choices to communicate this value.
Visibility of Homepage Info
As the first introduction to TradeOut, the home landing page needs to concisely explain TradeOut’s value, purpose, and story.
Page layout and content are integral to consider as we want to provide users with a lot of information in a digestible format.
From this page, visitors can identify what site they are on. The call to action to register a new account or log in with an existing account is front and center for high visibility.
Onboarding Process
By verifying your identity with TradeOut, others you conduct business with can rest assured that you are legitimate.
We incorporated the verification into the account creation process, bringing visibility to the feature and creating a more verified community.
It was integral to make this feature optional. Allowing users to complete the verifications they felt worked for them later builds flexibility and customization of experience into the process.
Contract Creation
A key finding from our user interviews was that contracts can be difficult. Their purpose and usage can sound daunting.
To tackle this perception, our team conceptualized a contract creation process broken down into easy steps.
The input fields provide users with guidance and auto-populate information into a contract, allowing users to create their legal documents easily.
Contract Collaboration
Negotiations on online marketplaces usually happen through private messaging with no real way to confirm when new agreements are made.
A dedicated feature for collaboration that records changes made to a contract provides documentation both parties can easily refer to.
Input fields are used so that users are not burdened by too much text while making edits. In-platform messaging provides security and privacy
Item Exchange Process
The item & payment exchange process is streamlined, providing a record of who you are going to meet, where, and when.
Users are presented with a checklist to remind them of what to review and look over before completing the handoff.
Both parties are prompted to confirm a successful exchange with the ability to add photos and notes of the item at the time of exchange for future reference.
Item Exchange Mobile View
Since item handoff/exchange usually occurs in person for online marketplace transactions, TradeOut must be mobile optimized.
Using cards to organize information and steps within a process allows for intuitive optimization for various screen sizes.
Converting to a collapsable side menu also provides space for content while also having the navigation accessible.
Progress bars can provide consistency across devices and provides visibility of status and transparency.
Personalization & Customization
In addition to the major user flows, illustrative, high-fidelity screens for the profile page and settings were created. These screens, while not identified as top priorities, help demonstrate TradeOut’s values and future features that set out to increase security and trust.
Reviews and ratings are stored within a user’s profile, allowing others to decide if a person is safe to interact with. ID Verification results in badges that are visible to the public and add another layer of trustworthiness.
The settings page provides a central place for users to edit their information and complete ID verifications whenever convenient.
The Process
What Exists In This Space?
Usually, people buy and sell used items, which can vary greatly in quality and condition. Negotiations on pricing happen through private messaging with no concrete way to record new agreements. The exchange of the item and payment are also usually discussed through messages. While this can be convenient for quick sales, it also exposes people to the risk of sudden changes or even scams.
Client Goals
Our team’s whiteboard brainstorming session on key user flows and potential features that would meet TradeOut’s goals
What do the clients want to accomplish with this product?
Through client meetings and scope of work discussions, our team outlined a list of deliverables that would address TradeOut’s needs as they develop an MVP.
Pinpointing the need for an onboarding process and handoff step, I created user flows for both tasks.
Sketching low-fidelity wireframes, I discussed information layout with my team members and began prototyping in Figma
User Goals and User Flows
After pinpointing the need for an onboarding process and handoff step, I created user flows for both tasks.
Additional flows were created for Contract Creation and Collaboration
Registering or logging in to TradeOut’s platform by linking other accounts (like Gmail or Facebook) can streamline the account creation process.
This allows users to explore TradeOut’s capabilities and create contracts quickly and seamlessly.
Usability Testing
With version 1 of our interactive prototype complete, our team began to conduct usability testing to identify improvement areas and gain insights into how users interpret the information architecture and content. Were the actions available to users visible? Did the process provide adequate guidelines and support for new users? And how could users envision using TradeOut in their real lives? These were questions we explored with participants as they completed five key tasks.
Key Findings
Through affinity diagramming, our team documented common themes throughout the 5 usability tests conducted.
1. The features that delighted users the most had high transparency and simplified processes.
2. Users appreciated the ability to verify identities on the platform but were wary of entering personal data during account creation.
3. Through the collaboration task, users gained more insights about how they could use a contract that was not readily apparent on the homepage.
Usability Tests Affinity Diagramming
Next Steps
As TradeOut continues developing its platform, developing a payment or subscription model could provide direction and require user flow mapping for that process.
Considering TradeOut’s future goals of providing a secure way to hold payments in escrow until a successful contract completion, user interviewing and surveying could uncover what level of security users desire in peer-to-peer transactions.
Further optimizing TradeOut’s desktop platform into a mobile browser or app version and conducting usability testing could allow TradeOut to reach more potential users in the future.
Explore the TradeOut Interactive Prototype!