User Research for and Development of a Classifieds App
OBJECTIVE & OVERVIEW
Classified apps are easy enough to use, but few offer their users the option for a good old-fashioned barter. Swap Left makes this choice a breeze.
The challenge was to create a classifieds app with all of the standard functions of OfferUp (the gold standard for classifieds), with enough inventive flair to give users a reason to return.
With a playful nod to the "swipe left" culture, Swap Left gives users the choice to either barter their goods or services, or offer to pay in cash. Have something to swap? Swipe left. Prefer to pay cash? Swipe right. It's that easy!
UI ELEMENTS & HIERARCHY
This project began with rough sketches and wireframes. My goal was to prepare a handful of screens to present to a select group of volunteers for a rapid prototype analysis. The earliest sketches were similar in form and function to competitor apps like OfferUp, Craigslist Mobile, and LetGo, with the exception of the “swap” feature. For that, I watched a series of YouTube videos regarding the functionality of Tinder, which is the preeminent app in the “swap left” culture.
The first rapid prototype was followed by two iterative low-fidelity paper wireframes before I translated them into mid-fidelity wireframes using Sketch. Careful consideration was taken when deciding how to incorporate the relevant UI elements into my design, making sure that the visual hierarchy was clear and effective.
The audience for Swap Left are people who are followers of Etsy and Pinterest; people interested in arts and crafts who are looking for a place to score inexpensive thrift items or a place to swap their DIY projects with like-minded users.
Before I began drawing the icons for Swap Left, I took some time to explore other popular classified apps: Offer Up, LetGo, and Craigslist. Of the three, Craigslist had the most elaborate icons and symbols, but they were also the least visually appealing, and least consistent. Both Offer Up and LetGo utilize generic icons, in a very positive manner. The user can clearly recognize the functions of each glyph, and the main focus can remain on the goods or services being shared by the community.
As I began to design my icons, I asked myself, would the icon still convey its meaning if a part or detail was missing? If the answer was no, then I maintained that component. If the answer was yes, I eliminated it. The result was a set of crisp, minimalistic icons that perfectly convey their intended meaning.
SYMBOLS & ICONOGRAPHY
EVOKING EMOTION IN UI
My thought process for choosing a color scheme for Swap Left revolved around the concept of cleaning out your house and getting rid of your old stuff or “spring cleaning”. With “spring” in mind, I focused on colors that display as clean and new, like a fresh new start. In addition to this, I also considered other classified apps that have already been successful, keeping in mind not to replicate their color schemes: Offer Up is Green, LetGo is Red, and Etsy is Orange. And though the Craigslist app is purple, its a much duller monochromatic plum color, and frankly, it lacks visual interest.
That said, I decided to use a color scheme heavily infused with vibrant purples, like the fresh bloom of lilacs in the spring.
As I transitioned from mid-fidelity wireframes to high-fidelity wireframes, I decided to perform an A/B test to see how my users might respond to a category carousel in the header, similar in style and function to the one used in LetGo's app.
The participants only had the visuals for comparison, so they weren't able to test the functionality of the carousel. That said, the responses were overwhelmingly positive regarding the added carousel, so I took the time to illustrate the additional icon glyphs to match the respective categories. The carousel uses gamification in the form of a low-end engagement loop, encouraging users to play with the carousel bar like a digital fidget spinner. That said, for the sake of additional user ease, there's still a drop-down menu with text-based options for each category, as well.
ADDITIONAL ITERATIONS & PROTOTYPING
Once I began to assemble the final UI, I decided that I needed to learn how my users responded to the swipe feature. After all, while common, it’s still a relatively new pattern. For this test, I submitted a high-fidelity prototype to a few of my previous participants, as well as a few new users. I assembled a more thorough prototype using the Craft plugin within Sketch along with InVision, and gave my users the task of searching for an item, and then choosing to swap (swipe left) or pay cash (swipe right).
The participants who’d already been exposed to the rapid prototype offered no negative reaction to the swipe feature, though it did seem to confuse the new users, whose ages were deliberately of the baby boomer and older generations (I reached out to an aunt, an uncle, and a family friend). The swipe-left gimmick was not intended to alienate users, but the results from this testing may have revealed a major flaw in the entire premise of the app. However, a feature that was not given enough prominence in any of the prototypes might correct this; the onboarding screens of the app offer a quick tutorial, intended to be presented in under 30 seconds which clarifies how to use the swipe left/right features of the app, as well as the horizontally scrolling carousel at the top.
Another unforeseen hiccup occurred when my users reached the swap/cash screen (which also may have contributed to the confusion of my 'boomer testers): they were confused about which direction to swipe.
Even though the main premise of the app is to swipe left in order to make a swap (Swap Left), because of the card tab exposed on the left and right of the screen, the users felt that perhaps you should swipe to the right in order to "pull" a swap from the left. A subtle tweak to that screen and a follow-up prototype testing seemed to be enough to rectify that problem for my users.
With the on boarding tutorial added and the swipe issues worked out, I was able to assemble the final user interface for the app.