FY18 Premier: B2B Onboarding

Note: This prototype replaces traditional comps and redlines as reference for building these pages. It should not be used for code reference, and is not comprehensive in terms of all states and interactions. To view the redlines for this prototype it's best to use Chrome browser with the Prism Redlining Tool plugin extension.

Prototype interactions from any page:

To return to this page, select either the Logout link in the upper right corner of a page or use the prototype navigation at the very bottom of a page.
From any unauthenticated page select the Login link in the upper right corner to navigate to the Premier Homepage.
In the masthead select the Dell logo to navigate to the Premier Homepage.
In the masthead select Account > ERP Integration to contextually navigate to either the unauthenticated or authenticated version of the PremierConnect Learn page.
The breadcrumb is fully functional.
All navbars are interactive.

Premier Learn - Unauthenticated

Select the PremierConnect link in the left nav to navigate to the unauthenticated PremierConnect Learn page.

PremierConnect Learn - Unauthenticated

Select "Learn more about PunchOut integration" to open an off-canvas. See Specification and Notes for off-canvas functional issues.
Select the "Learn more about Premier" link in either the fixed element bar or at the bottom of the page to navigate to the Premier Learn page.
Select the "Premier Sign In" button in either the fixed element bar or at the bottom of the page to bypass the sign in page and navigate to the B2B: Get Started page (Recipe 1 of 2).

Premier Homepage - Authenticated

Inline with the content teasers for deals, select the content teaser for ERP integration to navigate to the authenticated version of the PremierConnect Learn page.
Inline with My Tools, select the content teaser for ERP integration to navigate to the authenticated version of the PremierConnect Learn page.

PremierConnect Learn - Authenticated

Select "Learn more about PunchOut integration" to open an off-canvas. See Specification and Notes for off-canvas functional issues.
Select the Get Started button in either the fixed element bar or at the bottom of the page to navigate to the B2B Get Started page (Recipe 1 of 2).

B2B: Get Started

Select the Begin Integration button to navigate to the B2B: Steps page (i.e. single-page wizard).

B2B: Steps

Select Save & Continue within any step to advance to the next step.
After Step 1, a modal will appear. Either select a radio button to enable the Save & Continue button or select the Skip Question to close the modal and advance to Step 2.
Within Step 2, the Save & Continue button is enabled by either selecting an ERP radio button, or selecting the final radio button and entering a custom ERP.
Within Step 3, one of the catalog checkboxes must be selected in order to reveal the Save & Continue option (click directly on the boxes and not the labels).
After completing all steps, select the Go To PremierConnect button to navigate to the PremierConnect - Home page.

(Recipe B) B2B: Workflow 1

Select Save & Continue to trigger the company profile modal, which would only be seen if other data suggests its use.
Within the modal, either select a radio button to enable the Save & Continue button or select the Skip Question to advance to Step 2.

(Recipe B) B2B: Workflow 2

From this point forwards in Recipe B you can select one of the completed steps within the progress bar to return to a prior step.
The Save & Continue button is enabled by either selecting an ERP radio button, or selecting the final radio button and entering a custom ERP.

(Recipe B) B2B: Workflow 3

One of the catalog checkboxes must be selected in order to reveal the Save & Continue option (click directly on the boxes and not the labels).

(Recipe B) B2B: Workflow 4

Whether or not you select further checkboxes, select the Save & Finish button to navigate to the B2B: Workflow Summary page.

(Recipe B) B2B: Workflow Summary

In addition to the progress bar, you can select either the header link or Edit button for a completed step to return to that step.
Select the Go To PremierConnect button to navigate to the PremierConnect - Home page.

PremierConnect - Home

Select the name link or View Details button for the SAP integration to navigate to the Integration Details page.

PremierConnect - Integration Details

Specification and Notes

Change Log

09-12-2017
09-11-2017
09-08-2017
09-07-2017
09-05-2017
09-05-2017
09-05-2017
09-05-2017
09-05-2017
09-01-2017
08-31-2017
08-30-2017
08-29-2017
08-29-2017
08-28-2017
08-25-2017
08-24-2017
08-22-2017
08-16-2017
08-16-2017
08-16-2017
08-09-2017
08-09-2017
08-07-2017
08-07-2017
07-31-2017
07-31-2017
07-31-2017
07-28-2017
07-28-2017
07-19-2017

Added the Integration Details page.
Added section headers to the PremierConnect - Home page along with one example of a Canceled integration.
Added the PremierConnect - Home page, which would be seen only when a store has more than one ERP integration (otherwise skip to integration details).
On the Recipe B Workflow pages, revised the progress bar labels to include explicit step names in addition to the numbers.
In Step 2 of the B2B: Steps page, changed the selection method to a single list of radio buttons with a progressive disclosure for the final option.
In Step 3 of the B2B: Steps page, the Save & Continue button starts disabled rather than being completely hidden.
Added (Recipe B) B2B: Workflow pages 1, 2, 3, and 4.
Added (Recipe B) B2B: Workflow Summary page.
Added links to the bottom of the Steps and Workflow pages for switching between Recipes A and B.
Added preset ERP options to Step 2 of the B2B: Steps page.
Added a modal to B2B: Steps when advancing past Step 1, which asks an optional question to assist with pre-qualification.
Added off-canvas to both PremierConnect Learn pages (select "Learn more about PunchOut ..."). See Specification and Notes for off-canvas functional issues.
Updated the content (but not layout) on both PremierConnect Learn pages.
The help options become a fixed element in the right rail of Recipe 1.
Corrected font colors throughout per the new accessibility standards from the Design Systems team.
Added the B2B Steps page. At this stage this is Recipe 1 of 2.
Added the B2B Get Started page. At this stage this is Recipe 1 of 2.
Added a section to the very bottom of each page for navigating between prototype scenarios. More links to come.
Added a page for specifications and notes.
Began noting prototype interactions on the Index page.
Replaced the Rewarding Automation carousel on the PremierConnect Learn pages with video content teasers.
Added the authenticated learn page.
Revised the primary CTAs on the learn pages.
Added the authenticated Premier Homepage.
Users can also select Feedback in the footer to return to this page.
Removed Recipe A (moving forward with Recipe B) of PremierConnect Learn page per stakeholder feedback.
Added Premier unauthenticated learn page.
Added tier 2 menu to authenticated masthead (select Account > ERP Integration).
Added learn page Recipe B. The original page is now designated Recipe A.
Revisions to learn page Recipe A based upon content strategist feedback.
Created this prototype.