jonny grass
jonny grass
Evidence-based UX Design

Sellit Mobile App

Sellit is a native Android app prototype for a classifieds app. With Sellit, users can buy and sell products locally to other users.

As the UX and UI designer on this project, I applied e-commerce best practices to a classifieds app.

This case study is about applying search usability research and Material Design Guidelines to create a native mobile app.

sellit-portfolio-thumbnail.jpg

Design Approach

As a former librarian, my approach is very evidence-based.

Research for this project included 3 steps.

  1. Auditing similar apps.

  2. Reviewing published usability research.

  3. Consulting Material Design Guidelines

Competitor Audit

I audited classifieds and e-commerce apps to identify the main content to include.

Each app included 5 task-oriented sections of the navigation as shown.

Navigation

NNGroup research shows hidden navigation hurts discoverability. I wanted the primary navigation options to be universally visible. 

I used Material Design bottom navigation, supplemented with a modal drawer.

Finding Products

The primary use case for Sellit is to find products for sale. A good browse and search experience were my main design objectives.

My own article (below) reviews usability research and identifies 4 steps in a good search flow (shown in image 3 to the right).

1. Initiate Search

Persistent Search Bar

Baymard Institute research shows that users view a prominent search bar as a suggestion to search (and a less prominent search bar as a discouragement from searching)

I used a persistent search bar to guide users toward search.

persistent-search-img@2x.jpg

2. Data Entry

Guided keyword search

NNGroup research shows that scoped searches (limiting results while or before searching) confuses users.

I’ve provided simple keyword autosuggestions but deferred filtering until the results page.

entering-search-data-img.jpg

3. Limiting Search Results

Separate filter and sort

Simple Usability research offers a few best practices for filter and sort design.

  1. Filter and Sort should be separate.

  2. Filter and Sort buttons should always be visible.

  3. These buttons should have labels.

  4. Applied filters and sort order should always be visible.

4. Evaluate Products

Product Pages 

Baymard Institute lists a few keys to usable product page design:

1. Limited and relevant product information

2. Option to see detailed spec sheets if desired

3. Similar products for easy comparison

4. A separate section of supplementary products

product-page-image@2x.jpg

Other Flows 

Chat, sell, favorite

People can chat with other users to buy and sell products, favorite items for re-finding, and post items for sale.