letgo App V2.0 USER EXPERIENCE SPECIFICATIONS DOCUMENT
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez
Table of Contents Chapter 01 Chapter 02 Chapter 03 Chapter 04 Chapter 05 Chapter 06 Chapter 07
Goals for the project (project overview) High-Level Information Architecture, App Map User Flows/ User Tasks Low-Fidelity Wireframes High-Fidelity Wireframes + Link to the prototype Style Guide Revision History
Additional things you may want to add: * Research Synthesis (survey diagrams and other user research)
Do NOT include: * Persona * Interview questions and quotes * Research Plan
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 01
Chapter 01 - Overview Project Overview This project adds two features to the existing letgo mobile app 1. In-app purchasing for items 2. To add a shipping option for item The new App map is detailed in Chapter 2 of this document, highlighting the new features and in the App User Flows are detailed in Chapter 3, and User Tasks are detail the following tasks 03.02.00 - Seller posts an item and adds shipping options 03.04.00 - Buyer makes an offer and buys an item, paying for the item and shipping online 03.06.00 - Seller receives an offer and confirms the offer in order to allow the Buyer to pay for the item
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 2
1
Welcome
Login
02.01.00
tap tap
App Map Notes
Home
Search
Filters
tap
tap
1. The App Map shows the overall app structure and connected pages. This high level view shows the main pages, without all notifications or some of the subtasks
tap
Categories
Camera
User
Active Chats
2 Area shows added fucntionality introduced specific to letgo App v2.0
Add details
tap
tap
tap
Items
Price
Chat
tap
tap
3. Larger details of App Map follow on next
tap
pages
Filters
tap
3
2
1
First time login. Uses FaceBook, Google or email. App does not log-out on close.
2
Optional task. Add product details.
3
Optional task. Make a commercial for the product.
4
Make an offer. Buyer or seller can make an offer for a product. Offer is made via formal dialogue.
5
Optional task- select shipping options. Seller can add shipping options for the product. The “from� address is populated from the sellers profile.
6
7
8
Chat interface, buyer side. Chat used to record all transactions with agreed to price and date-tamp
9
10
Make an Offer
tap
tap
5 Select shipping otions
tap
tap
6
7
Chat
8
tap
9
Chat
Offer sent
Chat interface, seller side. Chat used to record all transactions with agreed to price and date-stamp Offer confirmation. Message screen confirms formal offer has been sent to buyer or seller
4
Enter product details
Add Commercial
10
tap
notification
11
Select transaction options
Offer accepted. Proceed to check-out
tap
Pick shipping
tap
!
notification
tap
tap
!
Acceptance confirmation. Message screen confirms seller has accepted price and buyer can continue to check-out
16 Offer accepted. Buyer purchasing
Transaction options. Buyer can choose
14
13
Confirm payment
Success
12
Payment log-in
Shipping details
Select payment type
cash/pick-up, on-line payment/pick-up or on-line payment/shipment. If pick-up is chosen, buyer is sent to chat. If no
tap
tap
tap
shipping is chosen buyer proceeds to buyer proceeds to shipping selection. payment type. If shipment is chosen,
11
Pick shipping. Buyer selects from the shipping options that the seller has posted w/the listing
12
Select payment type. Buyer selects from payment options available.
13
Payment type log-in. In-app interface for log-in to payment function.
14
Confirm payment. Buyer confirms amount of purchase, and shipping if it is included.
15
Cancel purchase. Buyer has selected to cancel purchase. This prompt confirms that the purchase should be canceled.
16
17
Offer acceptance confirmation. Message screen confirms that the buyer has accepted price and buyer will continue to make payment or contact the seller for pick-up information Payment confirmation. Message screen confirms that the buyer has completed the payment process. Seller needs to check email for receipt and shipping label (if shipping is selected)
notification
tap
! 17 Buyer completed transaction
15 Confirm cancel purchase
2 UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez
tap
02.01.01 App Map (detail 1) Notes
1 Welcome
Login
tap
tap
1. App Map shown for detail
Home
tap
Filters
Search
Active Chats
User
tap
tap
Add details
Categories
Camera
tap
tap
tap
Items
Price
Chat
tap
tap
tap
3 Add Commercial
2 Enter product details
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar 4 Cesar Sanchez Make an Offer
tap
Filters
tap
02.01.02 App Map (detail 2) tap
tap
3
2
4
Enter product details
Add Commercial
Notes
Make an Offer
tap
1. App Map shown for detail
tap
tap
5 Select shipping otions
6
tap
8
7
Chat
tap
9
Chat
Offer sent
Offer accepted. Proceed to check-out
tap
notification
tap
!
notification
!
16 Offer accepted. Buyer purchasing
14
tap
notification
13
Confirm payment
Success
Payment log-in
tap
tap
!
17 Buyer completed transaction
15 Confirm cancel purchase
2 UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez
tap
02.01.03 App Map (detail 3)
1
First time login. Uses FaceBook, Google or email. App does not log-out on close.
2
Optional task. Add product details.
3
Optional task. Make a commercial for the product.
4
Make an offer. Buyer or seller can make an offer for a product. Offer is made via formal dialogue.
5
Optional task- select shipping options. Seller can add shipping options for the product. The “from� address is populated from the sellers profile.
6
7
8
9
10
Notes
1. App Map shown for detail
Chat interface, seller side. Chat used to record all transactions with agreed to price and date-stamp Offer confirmation. Message screen confirms formal offer has been sent to buyer or seller
tap
8
9
Chat
10
Chat interface, buyer side. Chat used to record all transactions with agreed to price and date-tamp
notification
11
Select transaction options
Offer accepted. Proceed to check-out
tap
Pick shipping
tap
!
Acceptance confirmation. Message screen confirms seller has accepted tapprice and buyer can continue to check-out Transaction options. Buyer can choose cash/pick-up, on-line payment/pick-up or tap
on-line payment/shipment. If pick-up is
tap
chosen, buyer is sent to chat. If no shipping is chosen buyer proceeds to
14
buyer proceeds to shipping selection. payment type. If shipment is chosen,
11
Pick shipping. Buyer selects from the shipping options that the seller has posted w/the listing
12
Select payment type. Buyer selects from payment options available.
13
Payment type log-in. In-app interface for log-in to payment function.
14
Confirm payment. Buyer confirms amount of purchase, and shipping if it is included.
15
Cancel purchase. Buyer has selected to cancel purchase. This prompt confirms that the purchase should be canceled.
13
Confirm payment
12
Payment log-in
tap
Shipping details
Select payment type
tap
tap
tap
16
17
tap
15 Confirm cancel purchase
Offer acceptance confirmation. Message screen confirms that the buyer has accepted price and buyer will continue to make payment or contact the seller for pick-up information Payment confirmation. Message screen confirms that the buyer has completed the payment process. Seller needs to check email for receipt and shipping label (if shipping is selected)
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez
required only first time log-in or after log-out
Login w/ email/FB/ Google
03.01.00
Splash
User Flow: Posting an Item Notes
Home
need to sell an item
Camera
take photo
1. User flow showing Seller posting an item and adding shipping details
choose from camera roll
no
Existing photos on phone
2. See section 03.02.00 for annotated Wireframe illustrations of the task flow
Post more items
choose photo
Post? (confirm)
Item weight/ Origin address/ Courier type (other)
Add shipment info. yes
Add title/ Add morephotos/ Add description/ Select category
Product posted!
Add price
Post more items
Success
Close
(input/ selection screens)
Add more details
Listing details
done
key
Screen buyer
Screen seller
Optional task Pop-up
Action
03.02.00 User Task: Posting an Item Notes 1
2
3
The Seller needs to post an item and add UPS as a shipping option to the lsiting 1. The Seller taps on the “Sell Your Item” button on the home screen to begin the posting process.
2. Camera is accessed by the app and used the letgo camera camera interface. The Seller then focuses on the item to sell and taps the “Camera” button to take a picture. 3. The picture taken is the shown in the viewer window. Once the Seller likes the picture taken the “Post” button is tapped. 4
5
6 4. A confirmation screen is displayed, that the item has been posted successfully. The Seller can now add a price to the item. This is an optional process. The iOS numeric keypad is used price input. The entry field is pre-filled with “Negotiable” 5.
6.
Once a price is entered or if the Seller elects to leave the item as “Negotiable”, the “Done” button is tapped
A modal is dsplayed with a “Congratulations” message that the item wil be listed in 10 minutes. The Seller taps the “Add More Details” button to proceed.
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez
03.02.01 User Task: Posting an Item Notes 1
2
3
1. The Seller can add details and for the item on this screen. The Seller taps the “Shipping” button to select a courier service.
2. The pop-down menu offers shipping options and the user selects the “UPS Ground” as the delivery option for the item.
3. The Seller now taps the “Done” item and completes the posting an item task.
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez
03.03.00 User Flow: Buyer making an oer Notes
1. User flow showing Buyer initializing an oer to the Seller and the options of selecting shipping and on-line payment 2. See next pages for detailed view of this user flow 3. See section 03.04.00 for annotated Wireframe illustrations of the task flow
key
Screen buyer
Screen seller
Optional task Pop-up
Action
required only first time log-in or after log-out
Splash
03.03.01
Login w/ email/FB/ Google
User Flow: Buyer making an offer (detail 1) Notes
Home
1. Detail of Buyer user flow
Chat notification
Chat session
Start chat w/seller
Select item
Filter items
Item Description
Items by category
Chat session Select item
Make an offer
decline
Enter $
Buyer has made an offer!
Submit
You’ve made an offer!
close
Buyer has made an offer!
Submit
You’ve made an offer!
03.03.02
close
User Flow: Buyer making an oer (detail 2) Notes
Chat session
1. Detail of Buyer user flow
You will be notified once buyer has finalized payment
Seller has accepted your offer. Proceed to chekcout
accpet
close
Proceed to checkout
Chat session
Chat session (pick-up address)
Chat session (pick-up address)
EXIT application
EXIT application
EXIT application
Product paid for. Please communicate with buyer via
cash/ pick-up chat request
Payment/ shipment options
pay online pick-up
pay online ship
choose payment platform & enter details
choose shipping enter ship to address
confirm
confirm
final confirmation
choose payment platform &
Chat session
Chat session (pick-up address)
Chat session (pick-up address)
cash/ pick-up chat request
Payment/ shipment options
03.03.03
User Flow: Buyer making an oer (detail 3) Notes
EXIT application
EXIT application
EXIT application
pay online pick-up
pay online ship
1. Detail of Buyer user flow
Product paid for. Please communicate with buyer via chat for pickup details
choose payment platform & enter details
choose shipping enter ship to address
confirm
confirm
final confirmation
choose payment platform & enter details
EXIT application
confirm
Product paid for. Please check email for shipping label
final confirmation
Chat session (pick-up address)
Chat session (pick-up address)
EXIT application
EXIT application
pick-up address chat request
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez
Please communicate with seller via chat for pickup details
03.04.00 User Task: Buyer Makes an Offer Notes 1
2
3
The Buyer needs to buy an item by chatting with the Seller to come to an agreement on price. Once the offer is accepted, the Buyer has to pay in-app for shipping and the item. 1. The Buyer finds an item on the Home screen to Buy, and taps on the item image to see the item details.
2. Once the buyer confirms this is the item to buy, and seeing that there are shipping options, the Buyer taps the “Chat with Seller” to come to an agreement on on price.
3. In the Chat window, the Seller and Buyer 4
5
discuss the details of the item and agree on price
6
4. The Buyer then taps the “Make and Offer” button ($) to make an “Official” offer to the Seller.
5. In the Offer screen, the Buyer enters the price agreed to with the iOS numeric keypad.
6.
Once the price is entered, the Buyer taps the “Done” button to submitt.
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez
03.04.01 User Task: Buyer Makes an Offer Notes 1
2
3
1. The Buyer receives a notice that the Offer has been sent to the Seller. The messsage indicates that a notification will be sent when the offer is accepted by the Buyer. The Buyer taps the “Great” button to return to the Chat window. 2. The Buyer is returned to the Chat screen. There is interaction needed on this screen.
3. When the Seller accepts the offer. The Buyer is notified, and can proceed to pay for the item. The “Proceed to Checkout” button is tapped.
4
5
6
4. The Buyer selects the “Pay Online and Have it Shipped” button.
5. The Buyer selects from the Shipping options that the Seller had offered in the Item description. The UPS Ground option is selected.
6.
The Buyer confirms the Shipping option by tapping the “Next” button.
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez
03.04.02 User Task: Buyer Makes an Offer Notes 1
2
3
1. The Buyer has to enter the Shipping To details (the Buyer’s address).
2. Once all the Shipping details are entered the Buyer taps the “Next” button to proeceed.
3. A confirmation scrren with the Ship To address and payment options are given. The Buyer selects “PayPay” as the method of payment.
4
5
6
4. The Buyer has to log-in to PayPal to proceed with the transaction. The Buyer enters their user name and password.
5. Once user name and password are entered the “Login” button is tapped.
6. The Buyer can now confirm the amount to be paid to the Seller. The Buyer pressed the “Cancel” button to end the transaction
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez
03.04.03 User Task: Buyer Makes an Offer Notes 1
2
3
1. A warning message appears to confirm if the transaction should be canceled. The Buyer taps the “No” button to go back and continue with the transaction
2. The Buyer taps the “Make Payment” button to confirm the payment to be made to the Seller.
3. A message window confirms that payment has been sent to the Seller. The Buyer taps the “Great!” button to completer the process.
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez
03.05.00 User Flow: Seller making an oer Notes
1. User flow showing Seller initializing an oer to the Buyer and waiting for the Buyer to complete transaction. Seller then receives confirmation 2. See next pages for detailed view of this user flow 3. See section 03.06.00 for annotated Wireframe illustrations of the task flow
key
Screen buyer
Screen seller
Optional task Pop-up
Action
required only first time log-in or after log-out
Splash
03.05.01
Login w/ email/FB/ Google
User Flow: Seller making an offer (detail 1) Notes
Buyer searches for item
Home
1. Detail of Seller user flow
Chat notification
Chat session
Start chat w/seller
Chat session
Make an offer
You’ve made an offer!
Enter $
decline
Submit
Seller has made an offer!
close Buyer has accepted your offer. Request payment
accpet
close Buyer has accepted your offer. Request payment
accpet
03.05.02 User Flow: Seller making an oer (detail 2)
Chat session
Notes
Chat session
1. Detail of Seller user flow
Submit
You will be notified once buyer has finalized payment
Seller has requested you proceed to chekcout
Buyer pay process
close
Chat session
EXIT application
Buyer paid online for item and shipping Product paid for. Please check email for shipping label
Buyer paid online for item wants to pick-up Product paid for. Please communicate with buyer via chat for pickup details
Buyer wants to pay cash on pick-up Buyer wants to pay cash at pick-up. Please communicate with buyer via chat for pickup details
03.06.00 User Task: Buyer Makes an Offer Notes 1
2
3
The Seller has received an offer from a Buyer for an item the Seller listed. The Seller must now review the Offer details and accept so the Buyer can proceed to pay for the item.
1. The Seller has an offer for an item on sale. The alert is in the Chat inbox. The Seller taps the “Chat” button on the bottom nav of the screen to go into the Chat summary window.
2. In the Chat window the Seller sees that there is an Offer for the Stool for sale. The Seller taps the Message which indicates an offer with the ($) sign.
4
5
6
3. The Seller is presented with the official Offer in a new window. The Seller is happy with the price offered and taps the “Accept” button to confirm the sale and allow the Buyer to proceed to payment. 4. The Seller receives a message that the Buyer will receive a message that the Offer was accepted and the Buyer can continue to Payment. Once the Buyer completes the payment process the Seller will receive a notification. 5.
6.
The Seller is returned to the Chat inbox. There is interaction needed on this screen.
Once the Buyer completes the payment, the Seller is sent an alert that the item has been paid for and to check email for payment and shippment details.
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez
COLOUR GUIDE
04.01 bg colour for top titles
App red FF3F55
F7F3F3
chat boxes
bg color for bottom nav
FFE0E4
E6E3E2
App black
App white
2C2C2C
Style Guide Notes
FFFFFF
App dark gray
1. 2. 3.
757575
SYMBOL GUIDE
home
categories
sell your stuff
chat
profile
share
logo
search
filter
favourite marked
mark as favourite
exit/ close
A job done
profile
front camera
camera flash
2h product posting
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 8
BUTTONS FOR PRICING
Lato Regular, All Caps 17pt white
Large button
Style Guide Notes
Lato Regular, Sentence case 18pt white
Small button
04.02
Lato Regular, Sentence case
1. 2. 3.
15pt black
Small button
Lato Regular, Sentence case 15pt white
Price font
Lato Regular, Sentence case 17pt white
Notifications title Product name
Lato Bold, Sentence case 20pt white
Lato Regular, Sentence case 18pt black
Product title generated by letgo
Product description
Lato italic, Sentence case 14pt dark gray
Lato Regular, Sentence case 16pt dark gray
Seller/Buyer address
Lato Regular, Sentence case 16pt black
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 8
05.16.00 Seller location pop up Notes
1. Context: location seller map Behavior: once buyer clicks on location icon on product description page, he gets a map to refer to
1
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
05.15.00 Shipping preferences page Notes
1. Context: shipping options Behavior: can select shipping option with the price for shipping mentioned once selected, it turns great and the optional check box becomes pink 2. Context: next Behavior: takes you to shipping details page 1
2
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
05.19.00 Payment options selection page Notes
1. Context: Buyer shipping details Behavior: the data is taken from the imput field and kept for reference
1
2.Context: change Behavior: can change the shipment address through this 2
3
3.Context: pay via paypal Behavior: takes you to paypal page 5.Context: pay via venmo Behavior: takes on to venmo payment page
5
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
05.18.00 Paypal sign-in Notes
1
1. Context: paypal logo Behavior: paypal logo to signify that the payments are secured
2
2.Context: username input field Behavior: buyer puts in his paypal user name
3
3.Context: password Input field Behavior: buyer inputs his paypal password
4
4.Context: login Behavior: logging in to paypal payment page 5.Context: sign up Behavior: new users can sign up for paypal from here
5
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
05.17.00 Paypal make payment page Notes
2. Context: payment description Behavior: details of the seller and price and mentioned here 4.Context: make payment Behavior: select this to proceed with the transaction 2
5.Context: cancel payment Behavior: upon selection, a pop up comes to agree or disagree the cancellation of payment 6.Context: logout Behavior: user can lot out from paypal upon clicking here
4
5
6
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
05.14.00 Payment complete notification Notes
2. Context: congratulations message Behavior: a message congratulating the buyer on the completion of payment and told that they will be notified when the seller receives the payment 5.Context: great Behavior: takes buyer back to chat page
2
6.Context: continue shopping Behavior: takes buyer back to home page
5
6
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
05.13.00 Shipping details page Notes
2. Context: user name field Behavior: enter user name in field 3.Context: address line 1 field Behavior: enter address ine 1 for the shipment
2
4.Context: address line 2 field Behavior: enter address line 2 for shipment
3 4 5
6
5.Context: city field Behavior: enter shipment city name 6.Context: state field Behavior: enter shipment state name
7 8
7.Context: Zip code field Behavior: enter Zip code for shipment
9
8.Context: country name field Behavior: enter country name for shipment 10
9.Context: buyer phone number field Behavior: enter buyer phone number 10.Context: next Behavior: take to payment preferences page
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
05.12.00 Cancel payment pop up Notes
1. Context: Cancel payment message Behavior: message for payment cancelation 3.Context: agree cancelation Behavior: the user is signed out from paypal and brought back to chat 4.Context: no Behavior: disagrees the cancellation and goes back to payment page on paypal
1
3
4
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
05.11.00 Payment and shipping options page Notes
1
1. Context: Back to seller chat window Behavior: takes you back to seller chat window
4
5
6
4.Context: pay online and have it shipped option Behavior: taken you to shipping preference page 5.Context: pay online and pick it up option Behavior: taken you to online payments and seller address details page 6.Context: pay at pick up option Behavior: takes you to chat window to further plan the visit
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
05.09.00 Offer history in chat Notes
1. Context: offer history Behavior: when buyer/seller make an offer it is saved in chat history 3. Context: offer accepted Behavior: when buyer/seller accpent an offer it is saved in chat history 4. Context: prompt messages Behavior: activated/ deactivates prompt messages to initiate chat 1
3 4
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
05.10.00 Seller offer accpetance pop up Notes
1. Context: offer accepted description Behavior: mentions the price and the fact that the seller has accepted the price offer 4.Context: proceed to checkout Behavior: takes the buyer to checkout page 1
5.Context: cancel Behavior: cancel the offer and the transaction, quit
4
5
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
05.08.00 Buyer chat window Notes
1. Context: make seller an oer Behavior: while chatting, buyer can make an oer to seller 1
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
05.07.00 Buyer/seller chat window Notes
1. Context: make final oer option Behavior: which chatting, buyer or seller can make a final oer to each other by clicking on this 1
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
05.06.00 Buyer notification page Notes
2.Context: congratulations message Behavior: once the seller has received the oer, this description is shown 2
4.Context: great button Behavior: select this to accept the page details
4
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
05.05.00 Make an offer page Notes
2
2.Context: making an offer title Behavior: description for offer 4.Context: product price field Behavior: enter the proposed price for the product
4
5.Context: done Behavior: after the price field is filled, press this to send seller an offer
5
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
05.04.00 Product description page Notes
2. Context: chat with seller Behavior: buyer can chat with seller and directed to a chat window 3. Context: buyer can make an oer Behavior: directed to oer page
2
3
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
05.03.00 Product description page Notes
1. Context: shipping available Behavior: seller can select if the shipping is available, and then when the buyer sees the product description he can check for the availability of shipping for the product
1
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
05.02.00 Edit product details Notes
1. Context: shipping details Input field Behavior: selected option is highlighted, you can select multiple options
1
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
05.01.00 Edit product details Notes
1. Context: Shipping details field Behavior: seller selections shiping options from here 3. Context: Uproduct category field Behavior: seller selects the category the product falls under
1 3
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.22.00 seller offer notofication in chat acceptance Notes
1. Context: offer accpetance history Behavior: once the seller accepts the buyer’s offer, it is saved in the chat window as this
1
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.21.00 seller offer notification in chat Notes
1. Context: offer history Behavior: seller is notified that buyer made an offer and is saved in the chat history
1
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.28.00 transaction complete pop up to seller Notes
1. Context: product is sold Behavior: the product image is posted 3.Context: buyer profile field Behavior: buyer information, image and name is mentioned here 1
4.Context: message for seller Behavior: buyer payment and shipping details are sent via email 6.Context: great Behavior: seller accepts it all
3 4 6
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.27.00 accepting oer notification Notes
1
1. Context: buyer notification message Behavior: seller gets this once they have accepted the oer and are told to wait ntil buyer fills in the details 4.Context: great Behavior: seller accpets the notificationa and is directed to chat window
4
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.26.00 decline offer pop up Notes
1. Context: decline offer message Behavior: when seller chooses to exit the page, he gets notified with this message box 3.Context: yes Behavior: agree to decline offer and be directed to the chat page 4.Context: no Behavior: go ahead with offer and accpet it after selecting this
1
3
4
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.25.00 offer received by seller Notes
2. Context: close button Behavior: exit offer page
2 1
1.Context: here’s an offer message Behavior: when buyer makes an offer, seller receives the product name, buyer name and price of the offer 4.Context: accept offer button Behavior: seller can accept the offer by clicking this 5.Context: negotiate button Behavior: seller can further negotiate the offer and be directed to the chat window
4
5
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.24.00 chat page Notes
1
3
1. Context: top chat navigation Behavior: the chats are broken down under all, selected, buyign and selling. the selected one is highlighted in pink 3.Context: made an oer chat message Behavior: when a buyer makes an oer, a chat opens with a dollar sign on the side with the product name, picture and buyer name
6
6.Context: normal chat Behavior: a negotiating or ongoing chat with buyer, where the unread messages appear on the side as a numeric value
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.23.00 payment complete notification Notes
2. Context: congratulations message Behavior: a message congratulating the buyer on the completion of payment and told that they will be notified when the seller receives the payment 5.Context: great Behavior: takes buyer back to chat page
2
6.Context: continue shopping Behavior: takes buyer back to home page
5
6
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.20.00 cancel paypal payment pop up Notes
1. Context: Cancel payment message Behavior: message for payment cancelation 3.Context: agree cancelation Behavior: the user is signed out from paypal and brought back to chat 4.Context: no Behavior: disagrees the cancellation and goes back to payment page on paypal
1
3
4
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.19.00 paypal payment description Notes
2. Context: payment description Behavior: details of the seller and price and mentioned here 4.Context: make payment Behavior: select this to proceed with the transaction 2
5.Context: cancel payment Behavior: upon selection, a pop up comes to agree or disagree the cancellation of payment 6.Context: logout Behavior: user can lot out from paypal upon clicking here
4
5
6
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.18.00 paypal login Notes
1
1. Context: paypal logo Behavior: paypal logo to signify that the payments are secured
2
2.Context: username input field Behavior: buyer puts in his paypal user name
3
3.Context: password Input field Behavior: buyer inputs his paypal password
4
4.Context: login Behavior: logging in to paypal payment page 5.Context: sign up Behavior: new users can sign up for paypal from here
5
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.17.00 choice of payment page Notes
1. Context: Buyer shipping details Behavior: the data is taken from the imput field and kept for reference
1
2.Context: change Behavior: can change the shipment address through this 2
3
3.Context: pay via paypal Behavior: takes you to paypal page 5.Context: pay via venmo Behavior: takes on to venmo payment page
5
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.16.00 shipping details page Notes
2. Context: user name field Behavior: enter user name in field 3.Context: address line 1 field Behavior: enter address ine 1 for the shipment
2
4.Context: address line 2 field Behavior: enter address line 2 for shipment
3 4 5
6
5.Context: city field Behavior: enter shipment city name 6.Context: state field Behavior: enter shipment state name
7 8
7.Context: Zip code field Behavior: enter Zip code for shipment
9
8.Context: country name field Behavior: enter country name for shipment 10
9.Context: buyer phone number field Behavior: enter buyer phone number 10.Context: next Behavior: take to payment preferences page
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.15.00 shipping details and choices Notes
1. Context: shipping options Behavior: can select shipping option with the price for shipping mentioned once selected, it turns great and the optional check box becomes pink 2. Context: next Behavior: takes you to shipping details page 1
2
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.14.00 checkout process options Notes
1
1. Context: Back to seller chat window Behavior: takes you back to seller chat window
4
5
6
4.Context: pay online and have it shipped option Behavior: taken you to shipping preference page 5.Context: pay online and pick it up option Behavior: taken you to online payments and seller address details page 6.Context: pay at pick up option Behavior: takes you to chat window to further plan the visit
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.13.00 offer notification received by seller Notes
1. Context: offer accepted description Behavior: mentions the price and the fact that the seller has accepted the price offer 4.Context: proceed to checkout Behavior: takes the buyer to checkout page 1
5.Context: cancel Behavior: cancel the offer and the transaction, quit
4
5
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.12.00 buyer notification when seller has sent oer Notes
1
1. Context: Close page Behavior: exits from page
2
2.Context: congratulations message Behavior: once the seller has received the oer, this description is shown 4.Context: great button Behavior: select this to accept the page details
4
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.11.00 offer received by seller Notes
1
2
1. Context: close icon Behavior: exits the page 2.Context: making an offer title Behavior: description for offer
4
5
4.Context: product price field Behavior: enter the proposed price for the product 5.Context: done Behavior: after the price field is filled, press this to send seller an offer
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.10.00 buyer chat window with offer history Notes
1. Context: history of offer made Behavior: once the offer is made, it shows up on the chat page for future reference
1
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.08.00 seller product description Notes
1
2
3
1. Context: back icon Behavior: takes you back to the previous page 2.Context: favourite icon Behavior: turns pink when selected
5
3.Context: share icon Behavior: you can share the product on various platforms 5.Context: prouct image Behavior: all product pictures show up here
1 6
7
8
9
6.Context: user profile link Behavior: user profile thumbnail 7.Context: image thumbnail Behavior: product image thumbnails
10
11 12
13
14
8.Context: product description Behavior: details for the product 9.Context: product price Behavior: mention the product price 10.Context: shipping preferences choices Behavior: seller shipping preferences 11.Context: seller location field Behavior: seller lication details which works in sync with the phone location device 12.Context: chat with seller Behavior: takes the buyer to a chat window with seller 13.Context: make an oer icon Behavior: directly make an oer to seller 14.Context: share product Behavior: share the product through any of the given links UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez
5
06.09.00 buyer chat window Notes
1
2
4
6
7
1.Context: back icon Behavior: takes one back to the chat page 2.Context: seller profile icon Behavior: links to seller profile page 4.Context: product name and price Behavior: product name and price field 6.Context: product image field Behavior: product thumbnail 7.Context: extra settings Behavior: settings such as report, delete chat
10 13 11
10.Context: prompt messages Behavior: select this to initiate chats, can be closed off 11.Context: emoticons Behavior: select relevant emoticons 13.Context: make an offer icon Behavior: opens page to make an offer to the seller
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.07.00 edit product description Notes 1. Context: close icon Behavior: exit page 3.Context: uploaded product picture 4.Context: upload new photo Behavior: can upload a new picture for the same product
1 3
4
5
6.Context: product title space Behavior: enter product title in the field
6
7.Context: price Behavior: enter price in empty field
7
8.Context: product description Behavior: enter desired product details
8
9.Context: shipping Behavior: select shipping options
9
11.Context: category Behavior: select product category field
11 12
14
5.Context: empty picture field Behavior: select and can upload picture
13
12.Context: post another item Behavior: links with the page where you can post another item 13.Context: done Behavior: all the details in the page have been select this 14.Context: share with facebook button Behavior: activate or deactivate facebook sharing
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.06.00 product posted and add more details pop-up Notes
1. Context: close icon Behavior: exits pop up window
1
2.Context: share icon Behavior: share uploaded product across dierent social media sites
2 3
3.Context: congratulations message Behavior: tells you that the product will appear on letgo in 10 mins
6
8
6.Context: add more details Behavior: takes you to adding more detils page 8.Context: post another item Behavior: upload another item if clicked this and can add details then
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.05.00 make an oer page Notes
1 1. Context: close icon Behavior: exits page
2
2.Context: congrats icon Behavior: product posted positive feedback
4
4.Context: Adding price Behavior: enter price in the space, which can also be left negotiable
6
6.Context: done Behavior: processed page and price inserted with product 7.Context: numeric keyboard Behavior: when price needs to be entered 7
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.04.00 post photo page Notes
2.Context: retake Behavior: take image again 3.Context: post Behavior: post the picture on the app
2
3
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.03.00 take/upload photo page Notes
1. Context: Product image 2.Context: camera frame Behavior: helps gulde the product picture 1
3.Context: picture icon Behavior: takes pictures 4.Context: gallery link Behavior: links to phone gallery 5.Context: photo link Behavior: current page
2
3
4
5
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.02.00 home page Notes
2
1
1.Context: Search field Behavior: Search for products 2.Context: filter Behavior: links to filters page where you can select the requirements needed
5 4
4.Context: product image Behavior: photo of the product you have uploaded 5.Context: recent updates Behavior: symbol to mention the recent products that were uploaded 6.Context: sell your stull icon Behavior: click into it to open the application camera to upload product picture 7.Context: home icon Behavior: turns pick when selected 8.Context: categories icon Behavior: turns pink when selected
6
7
8
9
10
11
9.Context: camera icon Behavior: turns pink when selected 10.Context: chat icon Behavior: turns pick when selected and mentions the number of unread messages 11.Context: profile icon Behavior: turns pink when selected
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
06.01.00 app landing page Notes
1. Context: Logo Behavior: Shows up on the home screen
1
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 5
Revision History v0.0 - [21.06.2016]: Pankhuri began documenting style guides v0.1 - [22.06.2016]: Cesar began document content and document styling v0.2 - [24.06.2016]: Cesar began importing App Map v0.3 - [24.06.2016]: Pankhuri beagn importing hi-fi wireframes for documentation v0.4 - [26.06.2016]: Cesar finished App Map, and App Map detail pages v0.5 - [26.06.2016]: Cesar added User Flows and Task Flows v0.6 - [26.06.2016]: Pankhuri added low and high fidelity prototype pages v0.7 - [26.06.2016]: Pankhuri completed style guide
v1.0 - [26.06.2016]: First issue of User Experience Specification Document
UXDI Project 3: letgo App V2.0 Pankhuri Kanwar Cesar Sanchez 10