![Hero Shot Website.png](https://static.wixstatic.com/media/89abfd_c02b5ebd67b24ae094096028019eb427~mv2.png/v1/fill/w_892,h_595,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Hero%20Shot%20Website.png)
Summary
![Flow Part 1.png](https://static.wixstatic.com/media/89abfd_6010a7154119440391a04fb69d0ba771~mv2.png/v1/crop/x_738,y_813,w_6163,h_3250/fill/w_967,h_510,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Flow%20Part%201.png)
Often times money is tight or we have things we want to get rid of, but not necessarily throw away. Trade Up is for people who are looking for a way to get the goods they need without having to spend money. The app would be most appealing to people who are on a tight budget or who are looking for a more sustainable way to obtain goods.
Project Timeline
My Role
Project Background
Wireframes & Design
Testing
Topic Selection
Competitor Research and Analysis
Survey and Remote Interviews
Lo Fi Wireframes
Site Structure and Task Flows
Mid Fi Wireframes
Hi Fi Wireframes
Prototyping
User Testing
Timeline
January 26- May 4
Project Type
Mobile App, Academic Project
My Role
User Research, Research Analysis, Brand Creation, Usability Testing, Wireframing, and Prototyping
Team
Solo project completed with peer reviews and mentorship from a User Experience Strategist
Tools
Figma, Photoshop, Illustrator, InDesign, Mural, Whimsical,
and Miro
Topic Selection
Currently, there is no easy way for people to trade and barter goods with each other. They either have to find someone who is willing to trade with them in person or they have to use a third-party website or app. Both of these options are inconvenient and time-consuming.
My goal was to create a safe and simple looking app to encourage trading and bartering to help reduce waste. Safety is an emphasis so that users feel more secure trading with strangers. Simplicity is my next priority. Users are using the app to view items; that is the focus rather than making the UI look flashy.
Competitor Research & Analysis
In terms of specific trading apps, there are not many. There are two websites/apps I found that are targeted specifically for trading and bartering.
Other than trading and bartering, I also looked at buying and selling apps that people commonly sell on. Depop, Mercari, Etsy, and Facebook Marketplace were chosen because they also had safety disclaimers.
For the trading and bartering apps, I mainly looked at the UI to see how they sorted their categories and how it helps people find what they are looking for.
For the buying and selling apps, I looked at how they ensure and promote safety when shipping. Facebook Marketplace was most valuable to look at since is also promotes in person buying and selling.
Competitor Research Findings
Overshare
Freecycle
Facebook
MP
Etsy
Description
Pros
Cons
An IOS app targeted to people who would rather trade than buy. It promotes safety, privacy, and a VR feature to view products.
A website, which will soon be available as an app for IOS. It is also a trading app and greatly distinguishes what people can look for and post.
A feature withing Facebook, where users can sell items to other users. This was researched to see how they posted items and what safety features were available.
Etsy is an online marketplace connecting people who make goods, to people who want more personalized items.
Has safety features, good navigation, a VR viewer, and a way to locate items in a relative location.
Users can see items that are being sought after and items that are wanted. Posts also show how long ago an item was posted and have a short description of each item.
They have many safety disclaimers for people who decide to meet up in person. It has a great UI for listing items, and you can rate others after a sale.
Great at showcasing items without making the UI feel cluttered. Features good recommendations on the landing page and is easy to navigate.
VR feature is not straightforward, bold font choices, and odd UI choices.
UI is simply not good. Too many colors are used, font pairings are not good, not easy to navigate.
Many scams happen on Facebook Marketplace. It is easy to scam people who aren't tech savvy.
Suggests downloading an additional app to use if the user is a seller.
Depop
A buying and selling app/website mainly used for clothing, accessories, and shoes.
Great at giving recommendations, has a likes page, easy UI for selling. Features hashtags to better sort items and has easy navigation.
Targeted for shopping, recommendations are a hit or miss. Can be hard to sell and get views on listings.
Another buying and selling app that is used for selling many items.
It has a verification process to verify that users are not bots and are less likely to scam others.
Too much information at one, and the navigation is a bit hard to understand.
Mercari
Survey & Interviews
From the interview, I was able to gather much information about what should be included in the trading app. The main findings included potential safety measures, why they like certain marketplaces, and what features they find beneficial for selling.
Many people have unwanted goods that are not nice enough to sell, but not bad enough to throw away. Other times, people are looking to trade goods for a budget friendly, or sustainable way to reduce waste. Everyone in the interview agreed that they had traded or were actively in trading groups online.
Interview participants liked meeting up in person for sales. They all found it to feel safer because they could meet at an agreed upon place and time. If anything were to happen, there would be plenty of witnesses. This let me know that safety would need to be a priority.
The last factor to tie in is users' reliability. All participants liked how Etsy has their user profiles set up. You can easily see what users are selling, how much they have sold, a short blurb, and reviews for the user. All participants liked to see the relevant information and assess the reliability of a seller.
![Empathy map PNG.png](https://static.wixstatic.com/media/89abfd_ec178634449a497fac6a193f4d75ae92~mv2.png/v1/fill/w_753,h_772,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Empathy%20map%20PNG.png)
Conclusions
Connecting with other users to find items, privacy, simple UI, and a sense of security are all of the features I want to highlight in this app.
Connecting users with relevant items is important; as seen in the user interviews. I looked at Facebook Marketplace and Depop to see how they accurately recommended relevant items to users.
A sense of privacy was also mentioned and found during user interviews and case studies. Especially when giving out information such as home addresses, I looked at how Mercari, Facebook Marketplace, and Depop keep users' information safe.
A simple UI is needed after looking at all the websites from the competitor analysis. The main focus is connecting the users with relevant goods. The background should be more of an afterthought, while the pictures should be highlighted.
Lastly, but most importantly, security is the number one factor. All of these websites are vulnerable to people getting scammed. By implementing user verification pages, rating users, and informing users of scams, the app can help users feel more confident in trading their items.
Task Flows
These three task flows were created to help show the most important features within my proposed app. The first and second flow addresses the main point of the app; to trade with others. The third flow addresses the security and privacy features I want to implement.
Feature Roadmap
![Task Flows.png](https://static.wixstatic.com/media/89abfd_2035f0a83dbc497393166087de264793~mv2.png/v1/fill/w_799,h_872,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Task%20Flows.png)
Branding
The branding has a simple logo that incorporates blue and black. The blue color is used to give a sense of peace and a simplistic design. This app is mainly about pictures and trading, so I wanted the logo to be minimalistic. The smaller logo plays off of the letter "A" and points up, to play off the words.
User Flow: Trades Item
![User Flow.png](https://static.wixstatic.com/media/89abfd_a303326cdae247faa6d6c40cd7e76546~mv2.png/v1/fill/w_977,h_322,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/User%20Flow.png)
Site Map
![Site Map.png](https://static.wixstatic.com/media/89abfd_4c98e522028846a3b22893973c764d83~mv2.png/v1/fill/w_977,h_549,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Site%20Map.png)
Lo Fi Wireframes
Mid Fi Wireframes
![Lo Fi Wireframes 2.png](https://static.wixstatic.com/media/89abfd_f9b3fc54d007496d99df24175df269fa~mv2.png/v1/crop/x_988,y_0,w_5600,h_5000/fill/w_499,h_446,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Lo%20Fi%20Wireframes%202.png)
![Lo Fi Wireframes 1.png](https://static.wixstatic.com/media/89abfd_8718311b56894ca2a183e1dc38deeddb~mv2.png/v1/crop/x_1025,y_924,w_5594,h_3129/fill/w_502,h_281,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Lo%20Fi%20Wireframes%201.png)
![Mid Fi Wireframes 2.png](https://static.wixstatic.com/media/89abfd_240a1e35128a485480a38f40d2bcc1d9~mv2.png/v1/crop/x_938,y_1125,w_5750,h_2925/fill/w_513,h_261,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Mid%20Fi%20Wireframes%202.png)
![Mid Fi Wireframes.png](https://static.wixstatic.com/media/89abfd_f60d6f2689ac475e8dc3bf70a0ff25e9~mv2.png/v1/crop/x_913,y_1050,w_5800,h_3000/fill/w_518,h_268,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Mid%20Fi%20Wireframes.png)
High Fi Wireframes
![Flow Part 1.png](https://static.wixstatic.com/media/89abfd_edf4b04811fd40ca993890659da267df~mv2.png/v1/crop/x_984,y_1141,w_6505,h_2875/fill/w_581,h_257,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Flow%20Part%201.png)
![Flow Part 2.png](https://static.wixstatic.com/media/89abfd_1b5116d0b7b24ab790ffdfaad0ef5cb7~mv2.png/v1/crop/x_1017,y_1163,w_6472,h_2785/fill/w_579,h_249,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Flow%20Part%202.png)
Main Iterations
Iteration 1
![Homepage Iteration 1.jpg](https://static.wixstatic.com/media/89abfd_3a56360852aa4628b3a4bea066f36a0b~mv2.jpg/v1/fill/w_212,h_459,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Homepage%20Iteration%201.jpg)
Iteration 2
![Landing Page 1.jpg](https://static.wixstatic.com/media/89abfd_5b42b66976d74bc5a496f239805713e8~mv2.jpg/v1/fill/w_213,h_460,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Landing%20Page%201.jpg)
Most iterations were very minor such as spacing and text thickness. Here I have shown the most notable iterations.
From iterations 1 to 2, I changed the length of the search bar and gave less emphasis the the logo on this page. By extending the search bar, it allows users to have more space to type.
I also moved the "filter" and "sort" into the same function by using an icon for people to use. I also used the new space for users to choose between viewing "Offered" and "Wanted" items.
Lastly, I changed the heart icons to match the rest of the set, and I removed the message icon to make the card less cluttered.
Iteration 1
Iteration 2
Iteration 3
![Listing Page 1.jpg](https://static.wixstatic.com/media/89abfd_8a8401a3b2fc49369e9fe2c80ab97381~mv2.jpg/v1/fill/w_212,h_459,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Listing%20Page%201.jpg)
![Listing Page 8.jpg](https://static.wixstatic.com/media/89abfd_63759c7baed74c99817367efbf80c17f~mv2.jpg/v1/fill/w_213,h_460,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Listing%20Page%208.jpg)
![Listing Page 18.jpg](https://static.wixstatic.com/media/89abfd_f6e74050b3f14129864b7a2818ca2bf1~mv2.jpg/v1/fill/w_213,h_460,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Listing%20Page%2018.jpg)
These iterations consisted of moving the back button higher and moving the progress bar in its place. This allows users to easily see how many more steps they need to complete when first starting the task.
Lastly, I decided to take out the bottom navigation so users don't accidentally end up exiting the task.
Prototype
UI Kit
![](https://static.wixstatic.com/media/89abfd_e6fb0fd6120e4a28873dab2b498ecab3f000.jpg/v1/fill/w_212,h_470,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/89abfd_e6fb0fd6120e4a28873dab2b498ecab3f000.jpg)
![Icon Set.png](https://static.wixstatic.com/media/89abfd_7d6e0066f0a542589ced86d9fbfab647~mv2.png/v1/crop/x_174,y_94,w_774,h_976/fill/w_490,h_617,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Icon%20Set.png)
This Prototype shows the flow of using the "add listing" feature from the navigation bar.
Key Screens
![Listing Page.jpg](https://static.wixstatic.com/media/89abfd_bf31df19c7244213b40327449e80503a~mv2.jpg/v1/fill/w_221,h_478,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Listing%20Page.jpg)
This screen is the first screen that pops up when users want to create a listing. Here, they are able to look at their past trades and temporarily disable their active listings.
![Listing Page 8.jpg](https://static.wixstatic.com/media/89abfd_165c83e8155a46d7939a582e0e9c1c01~mv2.jpg/v1/fill/w_222,h_480,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Listing%20Page%208.jpg)
After clicking on the "Create Listing" CTA, users start their first step. They must select whether they want to offer an item or trade an item. This will determine what information they need to fill out to post the listing.
![Listing Page 10.jpg](https://static.wixstatic.com/media/89abfd_c2b5653ea09b448b840091a4b0be745e~mv2.jpg/v1/crop/x_0,y_0,w_428,h_1030/fill/w_222,h_534,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Listing%20Page%2010.jpg)
This page is for users to fill out if they are offering an item to trade. It is the most valuable page and helps the algorithm recommend relevant goods to other users.
Users can also list their preferred trade in the bottom section to let other users know what they are looking for in return.
Usability Test Results
Testing was conducted by 4 different participants. All participants were able to easily understand how the feature worked and had little critique. All users stated that navigating through the brief was very easy and straightforward.
![Person 1_edited.png](https://static.wixstatic.com/media/89abfd_60da8203264d4d138ba176a7142eaafb~mv2.png/v1/fill/w_100,h_112,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Person%201_edited.png)
I assumed that it meant that I could look at a listing that was already made
The only main complaint was the "Add Listing" button in the navigation bar. Three users thought the wording could be better, so it would indicate what the feature was used for. Below, I have an example of what it was before, and what it is now.
Iteration 1
![Listing Page.jpg](https://static.wixstatic.com/media/89abfd_bf31df19c7244213b40327449e80503a~mv2.jpg/v1/fill/w_221,h_478,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Listing%20Page.jpg)
Iteration 2
![Website results.jpg](https://static.wixstatic.com/media/89abfd_de9d2128b16b45de94b4a7351ae807c9~mv2.jpg/v1/fill/w_222,h_480,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Website%20results.jpg)
Conclusion
This app was well received by users and people loved the concept. Because it had a relatable background, users could better see themselves using an app like this. Then people live in abundance, it is nice to be able to give away unnecessary things to those who would have a better use for it.
This app is also different than the current ones on the market that are specifically targeted toward trading and bartering because there is more thought and research into the UI and what people actually want in the proposed app.