Update UI/UX based on mockups

18F / micropurchase

18F's micro-purchase threshold experiment management app.

https://micropurchase.18f.gov

Other

68 stars 34 forks source link

Update UI/UX based on mockups #60

Closed blacktm closed 8 years ago

blacktm commented 8 years ago

Current mockups here – post a comment if you have feedback on them:

mockups

awfrancisco commented 8 years ago

Here are my edits:

Heading/titles should be sentence case. So it should be: Getting started Complete your account Confirm details Issues open for bid Bid submitted (also a typo in that one) My bids Current bid

Probably should change “the shit you’re doing” but I’ll leave that one up to you all.

On page G, I’d change it to: “If your bid is selected as the winner, we will contact you with further instructions."

blacktm commented 8 years ago

@awfrancisco Thanks for the feedback! Didn't know about the heading/title capitalization (maybe I should read the content guide. And whoops, that was a placeholder – I should watch my :hankey: language.

adelevie commented 8 years ago

@blacktm anything left to fix here?

ddotrollins commented 8 years ago

Updated mockups with changes to the user flow and some layout changes. Key things to note are:

Forcing users to login in order to place a bid. They can view a project in the listing and detail view but the 'Bid' button is 'inactive' until the user logs in.
Updated user bidding flow (User places bid on listing or detail view and then confirms the amount)
Adding in additional UI elements on Open Projects View
Updated Footer and Header UI with additional Nav links
Added in link to Policies and Guidelines (if we need this)
Updated Project Detail view
Added in responsive considerations for Project listing component
Added in tagging system

Reach out with any questions. More work needs to be done with the copy but wanted to get the user flow out for feedback. micopurchasing-mockups v2.pdf

adelevie commented 8 years ago

@ddotrollins, this is great!

ddotrollins commented 8 years ago

Updated mockups based on conversations from today. Added in additional comments to reflect conversation and decisions made. micopurchasing-mockups v3.pdf

ddotrollins commented 8 years ago

Updated wires to reflect changes outlines in Sprint Planning Meeting. Updates show:

New bid flow. After bid amount is confirmed, user moves back to bid detail page with updated alert.
Bid Error Alerts. If a user attempts to bid an amount equal or greater than the current bid amount, user receives an error alert on that page (either the Home or Project Detail page).
Added note to the "Completed By" field on the Bid Detail page. When a project is closed, if we decide to show names, we can have the "Completed By" field shown in the right rail component. Otherwise, remove.

micopurchasing-mockups v4.pdf

ddotrollins commented 8 years ago

Updated wireframes. micropurchasing-mockups v5.pdf

Updated Landing page. m - landing page

vdavez commented 8 years ago

:+1:

ddotrollins commented 8 years ago

micropurchasing-mockups v5.pdf

blacktm commented 8 years ago

This is looking really good. Nice work @ddotrollins

adelevie commented 8 years ago

Hey Tom! Long time no talk!

On Mon, Dec 28, 2015 at 4:53 PM, Tom Black notifications@github.com wrote:

This is looking really good. Nice work @ddotrollins https://github.com/ddotrollins

— Reply to this email directly or view it on GitHub https://github.com/18F/micropurchase/issues/60#issuecomment-167664422.

ddotrollins commented 8 years ago

Early 2016 wireframes Micropurchase.pdf