Note: This is just an example Pull Request... all links that would point to our git repo will simply redirect you tho this gist. All external links have remained.
This update highly optimizes the Gift Campaign page flow to emphasize the most important modules while making it easy to find and use the not-so important modules while guiding the user through a seamless purchasing process.
This update began with the intent to optimize the placement of the 'Pitch-In' (primary) and 'Invite Friends' (secondary) buttons on the Gift Campaign page and turned into an optimization of the entire page, payment, and share flow to get one step closer to the Contributor User Funnel. Up-and-beyond changing, removing, adding, and updating components within the page, the page itself is getting a major update.
Most noticeably, the pitch in grid has a button directly beneath it allowing the a user to click a few tiles and click "pitch in" a lot quicker and easier than they could before. Much more, on large screens, the pitch in grid and pitch in buttons are always visible throughout the entire interaction with the campaign page. This allows the user to ALWAYS be able to click more (or less, which is highly accommodating) tiles and pitch in. Still, on mobile, the user has an opportunity to click the pitch in button once beneath the pitch in grid and again at the end of the campaign details.
Fixes: #135, #252 Introduces: #371, #372, #373, #375 Unrelated, but known bugs: #132, #374
New technology:
- Semantic Sticky - Used on large screens (>700px, see in
../giftstart.controller.js) to attach the pitch-in grid to the viewport when a user scrolls. - Angular Moment.js NOTE: Do
bower install and update- Used to show user intelligent date for when a campaign will end, ended, and needs to be funded by. This DID use a custom update (foramStartOfandamEndOf) to handle directives not found in bower version. This should affect the current build, but might need to be extracted to it's own dependency within the GiftStarter github, then re-added as a dependency. Or brought in usingnpm - ngPluralize - Used to show intelligent feedback for number of tiles selected and number of tiles that will be gifted after purchase.
Removed/updated technology:
- Funding Bar
- Begin removing some custom, legacy logic that relies on
secondsLeft. (defined here, and seen here).secondsLeftandcampaignComplete()still being used to determine an active campaign in some areas.
Noticeable Changes:
- "Sticky" pitch in grid (large screen)
- Scrolling, right-side campaign details and group cards (large screen)
- Added Created By label (all screen sizes)
- Update Campaign Details, Edit Campaign, Payflow including saved/new cards, Group Card Signing, and Share Campaign sections.
- A user can now click pitch in tiles and pitch in button above the fold (small screens) or at any time (large screens)
- A user can add more tiles to their pitch in during pay flow
- Pitch In CTA's now say 'Piece(s)' instead of dollar amount to test if
2 Piecesis a better button click than a dollar amount. - 'Pay Now' button is now also shown directly underneath the ask to use a saved card and underneath "add a new card" to test if less information before clicking 'Pay Now' will encourage them to click pay easier.
- Completed Campaign CTAs have changed. Instead of GiftStart It and Save For Later, we are now promoting Search for a gift and Contact our Gift Concierge