ReX – Marketplace App Design

Summary

ReX is a mobile application prototype that allows users to buy and sell pre-owned items. While there are several major competitors (e.g. eBay, Craigslist) in this space, few are supported by a strong mobile experience. After an in-depth study, we designed a viable product that brings the garage sale into the mobile age.

ReX allows for easy discovery of new items and quick listing of items for sale. But most importantly, it supports a clear and simple communication between buyers and sellers that provides an atmosphere of trust.

Type:

Class Project with Donglu Song and Lindsay Truitt

Role:

User Researcher, UX/UI Designer

Time:

10/2014 -12/2014 (3 months)

Deliverables:

Design Specification, Low-fidelity Prototype, High-fidelity Prototype

Project Scope:

User Research, Prototyping, Usability Testing


Problem & Design Question

We believe there is a strong interest in community-based services for people looking to buy and sell pre-owned items. Social media groups have sprung up, attempting to connect people through a common need: one person has an item they no longer need and another person wants to obtain that item.

These groups are often budget-focused, community-centric and environmentally conscious. However, they reach a limited set of users and lack a modern user-experience.

Several companies maintain presence in the online shopping space (eBay, Craigslist, Goodwill). While they may support a more robust user experience and reach a wide audience, the shopping experience is impersonal.

Our design team focused on building a mobile application that provides local communities with a technology-rich forum to facilitate the buying and selling of high quality pre-owned items via safe and friendly interactions.

How can we use mobile technology to help people buy and sell pre-owned items?

Process

Our team of three graduate HCDE students worked on this project as part of the “User-Centered Design” course during the winter quarter of 2014. We followed the user-center-design process as seen in this image (© Julie Kientz).

User Research – Discovering User Needs

Secondary Research

By gathering and analyzing data from research articles, blogs and papers we were able to gain more insight into the motivations and behaviors present during the user task. This helped us to identify the most common items and use cases for buying and selling used items.

The most mentioned risks were that items may be broken or stolen, while benefits included lower prices and immediate availability, among other economic and environmental advantages.

Competitive Product Analysis

Analyzing the strengths and weaknesses of 15 existing services helped us to understand the limitations of existing solutions. Current services can be divided into two major categories:
  • Generalized services that allow users to sell all kinds of pre-owned items.
  • Specialized services that focus on one specific good.
For each service we did a heuristic evaluation and tested certain factors like convenience and trustworthiness.

Survey

After learning about the general landscape and the current products in the market, we decided to conduct a Survey. We were able to get more than 120 answers through different social media channels and Reddit.

While buying was a pleasant experience for most users, selling was perceived as inconvenient and slow. The participants were fairly satisfied with Amazon and eBay, but quite frustrated with services like Craigslist.

Interviews with Cognitive Task Analysis

To wrap up the research phase of the project, we identified eight participants who were similar in age, gender and interest to our evolving personas. While the survey provided answers to broad questions, we were left with many questions about how users engage with these services and why.

During the interviews we learned that users share the same concerns across the buying and selling tasks: They want to save time and money but they experience difficulty in engaging with competitor services. It was very important for all our users to be able to establish trust with the person on the other end of the exchange.

Personas

Based on the research findings we created three personas in order to guide our future design efforts.

Ideate - Generate Ideas

Sketches

Considering the needs and desires of our personas we created over 40 initial sketches. We used these sketches to ideate different features, interaction types and user flows.

Feature Prioritization

With an affinity diagram we grouped our features into four different categories. We prioritized these features for each category and focused on the ones that were at the core of the application.

Core Issues

Based on the learnings from our user research and our feature prioritization, we focused the prototype on solving these three core user issues:
  • Easy discovery of items for buyers.
  • Quick and easy listing of items for sellers.
  • Supporting a clear and easy communication between buyers and sellers that also provides an atmosphere of trust.

Prototype – Produce Something Tangible

The prototyping design process began with multiple rounds of paper sketches.

The primary interaction point for users with this design is the first discovery screen. Within this view, it is critical that we support both the buying and selling experiences. For Sellers, we have provided an easy and prominent entry point in the upper right corner of the main view for listing new items.

For Buyers, we know that one common complaint is the inability to navigate a large selection of listing. We know that user engagement in searching or browsing behaviors depends on their intended purpose; this design includes the opportunity for users to engage in either behavior. We have included a search box in the top navigation and a Category menu on the page. This sketch also presents a waterfall view of listing results, with options for changing the results display, filtering the selections and comparing listings. Finally, this design also lays the foundation for a consistent look & feel throughout the pages of application with the use of a stable set of “tabs” at the bottom of the screen.

Buyers are primarily interested in using a service that helps them to discover new products easily and interact with sellers that they can trust. The first sketch illustrates several features that support the navigation of product listings. The second Sketch takes users one level deeper into the buying experience by showcasing the interaction a user can experience with a specific listing. On a listing page, the buyer is able to view multiple images or video of the listed product. They can see information about the seller, such as name, ratings and listing details (payments type accepted, delivery method). The buyer can also easily contact the seller to ask questions, or initiate the transaction via an easy to read text message display on the listing page.

Additionally, this experience highlights several ways in which the buyer can engage in a few personalized experiences with listings. First, buyers are presented with recommendations of similar listings to the item they are viewing. Second, the act of engaging with an item will immediately notify the seller and remove, if necessary, the item from the listings. Finally, the notifications screen illustrates several useful features, like wish lists as well as item and seller tracking settings that put the user in control of notifications.

For the selling experience, the third Sketch assumes a registered seller has clicked on the Create an Item button from the main discovery screen. On this screen, a seller is then presented with a list of steps required (1-4) to create a listing and several optional features to enhance the listing. This page also features a quick toggle button in the upper right corner that allows the user to return to the buying experience.

Finally, this sketch features a Seller Dashboard that allows sellers to view all active and closed listings. For each active listing, a seller can quickly see the details of the listings and any buyer contacts. Color coding indicates who owns the next action in the buyer/ seller communication; red indicates to the seller that they own the next step and green indicates they are waiting for the buyer to take the next action.


Evaluate – Determine Ease of Use

Click-Prototype

After creating these sketches we leveraged POP to mock-up the interactions between the more than 25 different screens we created. We identified six participants who owned a smartphone and had engaged in buying or selling used items in the past. Each user was asked to execute four tasks in an example scenario while using the low-fi ReX prototype:
  • You register as a new user.
  • You have a pre-owned Dress that you would like to sell. Create a listing for this item.
  • You decide that you want to buy a dress. Find the category and select a red dress under $60. Buy this item with cash and select a time for pick-up.
  • You are a seller and you would like to view the status of all of your listings.

Usability Test Results

Once the task list was complete, participants were asked to answer a few brief questions about their experience designed to solicit additional feedback and actionable suggestions for improvement. The image below shows how we captured the findings of the usability testing. For each problem we added a severity and fixability rating, as well as an improvement suggestions and a status indicators. In this round of testing we gained 66 individual points of feedback. All user feedback was then classified in the following groups:
  • Error State: e.g. failure points in the design or the flow between screens, interaction leading to abandonment (28).
  • Cosmetic Improvements: e.g. placement of information, grammar, verbiage (10).
  • Feature Enhancement: e.g. expansion of existing features available in the prototype or suggestion of additional features (28).

Iterate – Prototype & Evaluate again

Taking into account the feedback from the low-fidelity prototype we began designing the high-fidelity prototype. We used Photoshop to design 28 unique screens, for which we then created interactions via marvelapp.com. We tested this high-fi prototype with six users applying a similar usability testing approach as before. Afterwards we iterated our prototype accordingly to the feedback and created the final prototype.

Final Deliverable

The first deliverable was the detailed UI design. The image below shows the basic process flow of the application. After a user logs into the application he can either start the selling or buying process. Based on the findings from the user research it was important to provide an easy movement between the buying and selling tasks with the understanding that many users will participate in both. The user is guided through the selling experience with a set of quick and simple menus.
The buying experience is supported by a modern navigation aimed at presenting users with a robust set of features to aid in listing discovery. During the design process we always focused on encouraging trust by facilitating communication between the buyer and the seller. Lastly, buyers and sellers have an overview screen where they can manage and edit their current and past transactions.

The Home Screen

allows the user to either find an item through the category list or the search bar. The user can also start the selling process at any time.

The Waterfall Screen

allows the user to scroll through multiple items. The user can also switch to the detail view or map view and filter his selection at any time.

The Item-detail

screen allows the user to see images and videos of the item. The user can also easily send an in-app message to the seller.

The Buy-confirmation

screen allows the user to select the payment and delivery options. The user can also suggest a pickup date and time.

The My Listing screen

is an overview page where the user can manage all current and past transactions. There is also an indicator that will tell the user if he is waiting or in charge of the next action.

The sell screen

shows step two of the selling process. It allows the user to describe the item and add audio and video content. The user also has the option to scan the barcode of the item, in order to create this content automatically.
Designed & built by Lukas Eiermann 2016
Always happy to chat .