27
Team Members: Donglu Song Lindsay Truitt Lukas Eiermann HCDE 518 ReX Design Specification
Team Members:
Donglu Song
Lindsay Truitt
Lukas EiermannHCDE 518 ReX Design Specification
HCDE 518 – ReX Design Specification Page 2 of 27
Table of Contents
Executive Summary
Audience
Design Question
User Research
Research Methods
Personas
Project Scope
In Scope
Out of Scope
High Level Process Flow
Design Requirements
Design Decisions
HCDE 518 – ReX Design Specification Page 3 of 27
Executive Summary
ReX is a mobile application that allows users to buy and sell pre-owned items. While there are several major competitors (ex. eBay, freecycle.com) in this space, few are supported by a strong mobile experience. After in-depth study, we have designed a viable product that brings the garage sale into the Mobile Age.
ReX has been designed to:
Support the buying experience with modern navigation aimed at presenting users with a robust set of features to aid in listing discovery.
Guide the selling experience through the listing process with a set of quick and easy menus.
Encourage trust by facilitating communication between the buyer and the seller.
Provide easy movement between the buying and selling tasks with the understanding that many users will participate in both.
HCDE 518 – ReX Design Specification Page 4 of 27
Audience
The intended audience of this document are iOS mobile developers. These design specifications have been written with the intention of describing the functionality of the ReX iOS mobile application and seeks to answer all questions regarding the product design and intended user interface.
The latest prototype is available under:
http://www.marvl.in/5b4854
HCDE 518 – ReX Design Specification Page 5 of 27
Design Question
How can we use mobile technology to help people buy and sell pre-owned items?
HCDE 518 – ReX Design Specification Page 6 of 27
User Research: Research Methods
Secondary Research & Competitive Product Analysis
Buying and selling pre-owned items has benefits:
It bringing extra money to the seller while presenting cost savings to the buyer.
Recycling goods through the second-hand market both reduces use of resources in manufacturing new goods, and diminishes waste.
Survey
Of the 124 survey participants:
66% of survey respondents are Women and 31% are Male.
41% are 24-29yrs and 26% are 30-39yrs
Buying: participants use Amazon, eBay, Craigslist and Etsy. (Perception: convenient, easy, frustrating)
Selling: participants us Craigslist, eBay. (Perception: not smart, slow)
Unstructured Interviews with Cognitive Task Analysis
Users share the same concerns across the buying and selling tasks:
Saving time and money
Experienced difficulty in engaging with competitor services
Establishing trust with the person on the other end of the exchange
HCDE 518 – ReX Design Specification Page 7 of 27
User Research: Personas
HCDE 518 – ReX Design Specification Page 8 of 27
Project Scope
The scope of this project is to design the ReX mobile application capable of supporting the buying and selling tasks developed for the ReX prototype.
In Scope
iOS mobile application
Login and registration to the app
5 step buying process
3 step selling process
Overview of current activities in the My Listing screens
Out of Scope
Exchange/Swap
Services – this design will only cover physical products, it will not support service exchanges
Site Tracking – including listings from other sites
Robust location awareness and mapping/matching of products to users – in the initial plans, we are relying on users to select their targeted area and shop within it.
HCDE 518 – ReX Design Specification Page 9 of 27
Launch App
Landing Screen
Register with personal
information
Login with credentials
„Home“ Page
No
Yes
Buying process
Selling process
Registered?Choose
Task
Bu
y an ite
m
Choose selling option
from menu
Take a picture of the item
Describe the item & choose
category
Set delivery method &
price
Review currently
selling items
Review currently
buying items
Select category on homepage
Select subcategory
Select item from
waterfall viewFilter?
Filter by preference
No
Yes
( Contact seller) & Buy
item
Set delivery method & payment
Se
ll an ite
m
High Level Process Flow
HCDE 518 – ReX Design Specification Page 10 of 27
Design Requirements Landing Screen
ALog in Button
On tap, present log in screen.
B
BSign up Button
On tap, present sign up screen.
CConnect to Facebook Button
On tap, present Facebook Login screen.
C
A
HCDE 518 – ReX Design Specification Page 11 of 27
Design Requirements Sign up Screen
ABack Button
On tap, present the landing screen.
A
BSign up Field
On field tap, the keyboard will display. User enters their username, email address, password and confirm password.
CSign up Button
On tap, the registration flow will be initiated.
B
C
HCDE 518 – ReX Design Specification Page 12 of 27
Design Requirements Log in Screen
1 2
3
AEmail address field
On field tap, the keyboard will display. User enters their email address. On field exit, if the email address field is empty, display an error message.
A
BPass word Field
Password entry will be masked (per mobile standards, with the last letter typed displayed). On field exit, if the email address field is empty, display an error message.
CLog in Button
On tap, the server side and client side validation will be performed, and appropriate error messages displayed per the following scenarios:
1. Email address/ Password combination not valid
2. Email address field blank.
3. Password field blank.
B
C
HCDE 518 – ReX Design Specification Page 13 of 27
Design Requirements Home Screen
1 2
3
AMenu Button
On tap, present the menu screen.
A
BSell Button
On tap, present the first step of selling screen.
CSearch Bar
On field tap, the keyboard will display. The user can type the items they want to buy. When they type, a drop down list will display according to what users typed in the search bar.
B
C
D
DCategory Buttons
In the list of categories, there are icons which represent the itemsin this category. On tap of category field, present the relevant sub-category screen.
HCDE 518 – ReX Design Specification Page 14 of 27
Design Requirements Subcategory Screen
ABack Button
On tap, present the previous screen.
A
B
B
Subcategory Buttons
On tap, present the items belonging to this subcategory (waterfall screen).
HCDE 518 – ReX Design Specification Page 15 of 27
Design Requirements Waterfall Screen
ABack Button
On tap, present the previous screen.
A
BFilter Button
On tap, a pop-up filter screen will display.
CView Modes
There are three view modes. The screen on the right is the waterfall view mode. The second button is the detail mode, on tap, a list of items will display, showing the picture, title, price and location of the items. The third button is the map view mode. On tap, present the location of items on the map.
BC
D
DWaterfall of items
The waterfall view mode only shows the pictures of items. On tap, present detailed information of the item selected (item detail screen).
HCDE 518 – ReX Design Specification Page 16 of 27
Design Requirements Filter Screen
ABack Button
Tap to close the filter screenA
BFilter Field
User can slide the three slide buttons to change the range of price, distance and condition. Blue is price button, green is distance, and orange is condition.
CIndicator
The range of price, distance and condition changes reflecting the selection made with the slide buttons above.
B
C
D
DOk Button
On tap, the filter result will display.
HCDE 518 – ReX Design Specification Page 17 of 27
Design Requirements Item-detail Screen
A
B
Dot Indicator
On sliding the picture of the item, another picture of the item willdisplay. The dot indicator can tell users which picture they areviewing.
A
B
Audio Button
On tap, the audio of the item description by seller will play. Tap itagain to stop it.
Like Button
On tap, the user can add this item into their favorite items.C
DC
D
E
Message Button
On tap, the keyboard will display allowing the buyer to leave a message for the seller. The seller can reply to the message by taping the message of the user.
Buy Button
On tap, present buy confirm screen.E
HCDE 518 – ReX Design Specification Page 18 of 27
Design Requirements Buy-confirmation Screen
A
B
Item information
On the top of the buy-confirmation screen is the title, price, location of the item.
A
B
Payment Option
There are three kinds of payment: cash, credit card and PayPal. On tap, highlight the selection made.
Delivery Method
There are two options of delivery method: pickup and ship. On tap, highlight the selection made. If buyer choose pickup, the pickup-time option will display.
C
D
C
D
E
Suggest Pickup Time
On tap of the calendar icon, a pop-up screen will display for buyer tochoose the date. The slide button is used to choose the time during aday. User can also tap the “+” button to add another time.
Confirm Button
On tap, present the pay screen or purchase confirmation if pay information has already been logged for the user.
E
HCDE 518 – ReX Design Specification Page 19 of 27
Design Requirements My Listing Screen- Buying
AMenu Button
On tap, present the menu screen.
A
B
D
Tabs of My Listing
There are five tabs: selling, sold, favorite, buying and bought.Upon selection of tab, highlight tab to indicate the location ofuser (see blue bar under Buying).
B
C
CStatus Indicator
Show status of item. Options are: waiting for the seller’sresponse or waiting for the buyer’s payment.
DContact and Cancel Button
The left button is contact button. On tap, present the chat screenwith the seller. The right button is cancel button. On tap, thebuyer can cancel this deal.
HCDE 518 – ReX Design Specification Page 20 of 27
Design Requirements Menu Screen
ACancel Button
On tap, present the home screen.
A
BHome Screen Field
On tap, present the home screen.
B
C
CMenu
There are five main functions in the menu: home, sell, notification,my listing and my account. On tap of sell button, user can sellitems; on tap of notifications button, user can check thenotifications from the system or buyer; on tap of my listings, usercan check the items they bought or sold; on tap of my accountbutton, user can manage their account information.
DLog out Button
On tap, user can log out and present the landing page.
D
HCDE 518 – ReX Design Specification Page 21 of 27
Design Requirements Sell Screen- Step 1
ATake Photo Button
On tap, present the camera screen. A
BPhoto Field
On tap, the photo taken will display. User can delete the photo bytaping the left-top blue button.
B CCAdd photo Button
On tap, present the camera screen.
DNext Button
On tap, present the next step screen.
D
E
EStep Indicator
The step indicator tells user which step they are on and how many steps to finish the task.
HCDE 518 – ReX Design Specification Page 22 of 27
Design Requirements Sell Screen- Step 2
ABarcode Button
On tap, sellers can scan the barcode of the items they want to sell.Then the server can provide the same new item on the websitefor seller to confirm information.
A
BCategory and Condition Button
On tap, seller can choose the category and subcategory the itembelongs to, and select the condition of the item.
B
C
CAudio Button
Hold to describe the item.
DVideo Button
On tap, present the camera screen to record a video of the item. Seller can record a video of the item or themselves introducing the item they are selling.
D
E
EPrevious Screen
Users can slide left to go the the previous screen.
HCDE 518 – ReX Design Specification Page 23 of 27
Design Requirements Sell Screen- Step 3
APrice field
On tap, the keyboard will display for user to input the price. A
BPickup Button
Seller can choose whether to allow local pickup or shipping by turning on or turning off the slide button. B
CPublish Button
On tap, show that the item has been published successfully. If the required information is not filled in by seller, the system will display an error information.
C
HCDE 518 – ReX Design Specification Page 24 of 27
Design Requirements My Listing- Selling
A
B
C
AMenu Button
On tap, present the menu screen.
BTabs of My Listing
There are five tabs of my listing: selling, sold, favorite, buying andbought. Upon selection of tab, highlight tab to indicate thelocation of user (see blue bar under Selling).
CPicture and Audio Field
In this field, sellers can preview the pictures, audio and video of the items they are selling.
DEdit, Remove and View Button
On tap of edit button, seller can edit the information on this item; on tap of the remove button, seller can cancel this deal; on tap of the view button, present the page of this item.
HCDE 518 – ReX Design Specification Page 25 of 27
Design Decisions
1. Why make it an app?
A smart phone application is a fun and convenient way to make good use of a few minutes of free time. Especially when the sellers and buyers want to track the item information and are not able to sit in front of a desktop or laptop. Additionally, there are a wide range of design opportunities available through a touch-screen application, over a standard click-based web experience.
2. Why use a special filter?
The slide button is convenient and easy to use on a mobile phone. We want users to have fun while using the ReX app; a different filter function can be interesting for them.
HCDE 518 – ReX Design Specification Page 26 of 27
Design Decisions
3. Why support a combined “My Listings” view of app activity?
Research indicated that many users engage in both buying and selling activities. As a result, we provided a single dashboard view of all activity for a particular user to allow for easy viewing of status of each executed task.
4. Why have so many options for communicating between buyer & seller?
This was a significant pain point identified during user research. The payment, pickup time, listing status and chat features are all in support of establishing clear communication between the buyer and the seller to encourage a positive transaction.
HCDE 518 – ReX Design Specification Page 27 of 27
Design Decisions
5. Why audio and video description of items?
For a buyer, it is important to know detailed information and condition of the item. The buyers are also curious about what kind of people used it before.
The audio and video description of item not only enables the buyer to acquire more information of the item, but also know some information about the seller.
6. Why pop-up screens of selling process?
We created a pop-up screen instead of a full screen for the seller listing task because it is easier for them to slide through the screens and understand which step they are on and what step is next.
It is also convenient for them to edit the information of previous screens by sliding the pop-up screen.
