P3 letgo spec doc

Page 1

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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.