Project Overview

Sellit is a classifieds app prototype for Android that lets users buy and sell items to other users in their area.

 

My Approach

I typically approach any interaction design challenge by following a few initial steps:

  1. Look at analogous or similar apps to see common design solutions

  2. Review published research on usability best practices (NNGroup and Baymard Institute are my two favorite sources)

  3. Review design languages (e.g. Material Design or iOS Human Interface Guidelines) to learn best practices

Below I’ve shown how I applied this approach to my design of Sellit’s core features.

 

Research and Strategy

Discovery Research

I began by tackling the app's information architecture. I did a brief review of classifieds apps to identify the common sections of navigation.


[insert screen shots of Kijiji, Craigslist, Letgo]


Based on this review, I planned an architecture with the following sections: Find, Chat, Sell, Favorites, and Account. 

 

Task Flows

The two core use cases for the app are buying and selling items.

I chose to focus on buying items first, as this is likely be the most common use case. I broke this down into a few key task flows.

  1. Exploring and finding desired items for sale

  2. Saving items for later action

  3. Evaluating and comparing items to consider purchasing

  4. Contacting sellers about items

Selling items could be planned at this stage and designed in more detail at a later time, as this is a secondary use case.

 

Design

User Task 1: Exploring Items

The primary use case for Sellit is finding desirable items for sale. This involves two types of exploration: known-item searching and spontaneous discovery through browsing. The home page enables known-item searching, controlled/categorical browsing, and personalized browsing. 

 

Searching

As a former librarian, I have a particular interest in, and experience with searching. Check out my ACC Search project [link] and my article How to Design a Good Search Flow [link].

To plan search, I relied heavily on Baymard Institute and NNGroup usability research, as well as Material Design Guidelines.[I could include a small list of articles or not]

search-flow@2x.jpg
 

Search Decision 1: Persistent Search Bar

Baymard Institute research has shown that users perceive search bar prominence as a guide to exploring the product. A prominent search bar suggests that searching will be helpful, while a less prominent search design steers them toward browsing. I chose a persistent search bar encourage searching. I relied on Material Design’s persistent search bar layout.


[insert Material Design persistent search image and Sellit Search Only]

 

Search Decision 2: Filtering and Sorting

Research from Simply Usability suggests a few important design requirements for filtering and sorting search results. 

  1. Filter and Sort options should be presented separately

  2. These options should be always visible to users

  3. Applied filters should be visible and easily edited or removed

I explored apps to find good applications of these rules for layout inspiration, prior to designing my own search results screen.

[Insert screen shots of good examples]

I incorporated each of these best practices into my own design. 

filter-and-sort-flow.jpg
 

Search Decision 3: Product Details

Baymard Institute’s research lists a few keys to successful product pages:

  1. Product pages should include limited and relevant information, along with the option for detailed spec sheets if desired by users

  2. Pages for products within a similar category should include similar information for easy comparison

  3. Product pages should include separate sections for analogous items (for comparison) and complementary items (for continuing the journey)


I applied each of these rules below to the product page.

product-pages-examples@2x.jpg
 

Browsing

Users can scroll through the homepage to browse personalized recommendations for items. They can also by item type if they choose a category by tapping a category from the list.

browse-flow.jpg
 

Chatting

Users can contact other users through a standard chat layout using Material Design’s list view.

chat-flow@2x.jpg
 

Selling an Item

Users can see items they currently have on sale and items they’ve previously sold. They can post a new item for sale by hitting the Floating Action Button (FAB) to trigger a form.

sell-flow@2x.jpg
 

Evaluating Favorited Items

To enable better consideration of items over time, users can easily save items and refind them in the Favorites tab.

favorites-flow@2x.jpg
 

Interact with the Prototype

Please check out the high-fidelity prototype below! Try searching for laptops or browsing furniture.

[Insert InVision prototype]