Swappr • UX/UI Design

Swap Meetup App


Swappr is a swap meetup app that allows users to discover upcoming swap meets, farmers' markets, vintage boutiques, gem fairs, and garage sales with ease while bringing local communities together. Users are able to filter by event category, distance, and time. Users also have the ability to create their own interest groups and events.

It is important to note that I did not want this tool to offer an online market; I wanted it to facilitate in-person experiences and encourage the local community to come together. While I was initially inspired by the Gem Faire, I quickly knew that the scope could expand to include all types of swap meets. I decided to use the umbrella term “swap meet” to describe a gathering where people go to trade, buy, and sell items of common interest. I wanted my app to be inclusive and fun while being usable and useful.

The app would be useful to buyers by giving them early access to catalogs, the ability to save events and items for easy reference, easy walking directions to booths, an advanced discover functionality complete with customizable filters, and the ability to connect with other users through interest groups and messaging.

Meanwhile, the app would help vendors by increasing their visibility to the public by giving viewers a first look at their offerings. The app also lets users create their own mini-swap meets and garage sales.

​​This project took 4 weeks to complete and was the final deliverable for Advanced Design (IN4MATX 284) from UCI's MHCID program.

Successful Output

An interactive high-fidelity prototype, which shows all key features of the swap meetup app

Project Timeline

Week 1: Project Ideation/Research

Week 2: Wireframing

Week 3: Gain peer feedback + Iterate on Wireframes

Week 4: Complete high-fidelity mockups + Demo reel video

Developing the Idea

Since 2014, I've been running a small online jewelry business where I make and sell handcrafted pieces, as designing and creating jewelry has become one of my favorite hobbies over the last few years. I get the bulk of my supplies from online sources. In contrast, I have a friend who is an established jeweler for his dad's business. They buy the bulk of their materials directly from wholesalers whom they have gotten to know and befriend over the years. His father has been making jewelry for decades and as a result, he has a well-established circle of connections. However, for those like myself who do not have a plethora of connections, we have to resort to alternate methods for insourcing our supplies.

This got me thinking about potential places where jewelers, crafters, and hobbyists could go to not only purchase supplies at wholesale prices but also to make in-person connections.

This got me thinking about potential places where jewelers, crafters, and hobbyists could go to not only purchase supplies at wholesale prices but also to make in-person connections. As a jewelry-making hobbyist, I often buy materials such as gemstone beads. I have in many instances been fooled into purchasing faulty gems online, which leads me to believe that online photos, descriptions, and sellers cannot always be trusted. Even on big platforms like Amazon, there are tons of sellers who have sold me gemstones that turned out to be fake in the past. I realized that the ideal scenario for me to purchase supplies would be in person so that I can properly inspect what I am about to purchase.

The Gem Faire, one of the largest gem, jewelry, and bead shows in the U.S., quickly came to mind as I thought about this. I have attended the Gem Faire only a couple times due to a few challenges that prevented me from wanting to return. These challenges became the driving forces for my project.

Some of my major pain points for gem fairs are:

  1. Without a catalog, it is extremely difficult to compare, discover, or find products
  2. There is no way to track purchases

Wireframes, Feedback, and Iterations

With that vision in mind, I began to create my wireframes. My initial wireframe had four elements on both the header and footer navigations. On the header, I featured shortcuts to alerts, messages, user profile, and settings. On the footer, I featured shortcuts to home, explore, favorites, and the calendar. I created wireframes for the home, explore, filter, search results, event detail, and favorites pages. After receiving user feedback, I came to the following conclusions:

  1. There were too many navigation items.
  2. Certain pages (e.g., explore) had too much white space that was not being utilized.

In my next round of iterations, I created higher fidelity prototypes. I decided to simplify the top navigation by creating a “more” shortcut. I decided that I would have “more” result in a widget that slid in from the right side like a menu and covered about 2/3 of the screen so users would not feel like they were being disrupted or taken away from their current screen.  

I also redesigned my explore page by revealing more of the contents upfront rather than only showing users two buttons since the previous wireframes featured only two buttons on the explore page (one for events and one for groups). I kept a search bar at the top, but this search bar is strictly for events and not for both events and groups like in the wireframes.

I decided to rename the favorites page "saved" because a user mentioned that having a way to save events would be helpful, without realizing that favoriting an event offered the same functionality. I then realized that the term "favorite" may inherently carry some biases that make users think they should only really favorite events they truly like as opposed to events they simply want to bookmark.

Tools: Sketch

User testing participants: 6 peers (3 per feedback session)

Final Thoughts

Overall, I am pleased with the app’s final design although there are still a few user flows I need to expand upon. I think that may be the part I struggled with most: discovering and designing the most intuitive user flow that matches user expectations. Because everyone is different, each user is going to approach the app with a different intention and goal. Some users want to use it to upload items to a catalog, others would use it to create a garage sale, and yet others may just want to use it to connect with the community through interest groups. I wanted to make the pathways for each of these different users as seamless and as the other. However, given the scope and time constraint of our project, I feel that there may be some loose ends and user flows that, with a bit more time and research, could be improved further.