Specification and Notes
For More Reference
When in doubt or in need of further clarification for how to implement a feature, see the page templates that are already in production in CSB - For Work, or refer to the Dell design library patterns (http://www.delldesignlibrary.com/).
Masthead and Footer
The Premier masthead and footer in this prototype are FPO, with exceptions noted below, as those feature designs live elsewhere.
The Premier masthead includes a tier-2 CTA within the Account menu for navigating to the ERP/PremierConnect integration experience.
Rules for selecting the tier-2 CTA:
- If the user has not yet saved and proceeded past the first step of the wizard then this CTA navigates to the authenticated learn page.
- If the user has advanced past the first step of the wizard, but has not completed all steps, then this CTA navigates to the wizard step where the user left off.
- If the user has completed all wizard steps and the ERP Manager page is now available to them, then this CTA is renamed to "PremierConnect" and navigates to the ERP Manager.
Premier Homepage
The Premier Homepage in this prototype is FPO, with exceptions noted below, as that template design lives elsewhere.
The row of content teasers that surfaces deals and other proactive announcements can now show one for ERP integration. While not evergreen, this content teaser should enter regular rotation due to the importance of surfacing PremierConnect to our users.
ERP integration with PremierConnect.
Streamline procurement, maximize efficiency, connect to Dell.
Learn MoreRules for selecting the thumbnail or button within the teaser:
- If the user has not yet saved and proceeded past the first step of the wizard then this content teaser navigates to the authenticated learn page.
- If the user has advanced past the first step of the wizard, but has not completed all steps, then this content teaser navigates to the authenticated learn page but the primary CTAs on the learn page now read "Resume Integration" instead of "Get Started" (within the fixed element bar, and at the bottom of the page).
- If the user has completed all wizard steps and the ERP Manager page is now available to them, then this CTA is no longer shown to this user as they can integrate a different ERP from within the ERP Manager.
An evergreen content teaser for ERP integration has been added to the My Tools section. For all rules and behaviors, refer to the specification for the corresponding masthead CTA.
Integrate your ERP/procurement system with PremierConnect. Manage Integration
Off-Canvas
Many links and other CTAs, such as "Learn more ..." links, will slide open an off-canvas drawer from the right that progressively discloses additional content. While this prototype doesn't include all of that content, you can select the "Learn more about PunchOut integration" link on either PremierConnect Learn page to see an example.
Note how you can close an off-canvas by selecting the link within its fixed masthead, or a CTA inline within its content, or by clicking in the tinted area outside of the canvas.
The off-canvas components implemented in this prototype do not behave as they should due to limitations of the Webflow technology:
- The page should not scroll to the top when an off-canvas opens. The off-canvas is on a layer above the page and should slide open at the current page location, top-aligned.
- The page in the background should not scroll while the off-canvas is open. The browser scroll bar should scroll only the off-canvas content.
- The user should not be able to scroll up past the top of an off-canvas, nor down past the bottom of it.
PremierConnect Learn
Business stakeholders are still defining the final content for this page, however the placeholder content in this prototype can be used as a start.
The key differences between the unauthenticated and authenticated versions of this page are the CTAs that appear within the fixed element and at the bottom of the page.
The Premier Sign In CTA would navigate to the sign in page, and then to the onboarding workflow. This prototype skips the sign in process and navigates directly to the B2B Get Started page along the happy path.
B2B Steps
This page is Recipe 1 of 2 (to be tested). In this recipe, users enter information and make selections for all of the wizard steps from a single page.
The prototype doesn't function as it should due to Webflow limitations:
- In Step 1, any fields for which we already have data should be prefilled based upon the user's credentials. The text color within the fields should therefore be Black, as if the user had entered the text, and not the color of placeholder text that you see in this prototype.
- In Step 1 the Save & Continue button should be disabled if there is no email address entered, or if we detect that what's entered is invalid.
- After Step 1, the modal that appears when you Save & Continue is a placeholder that shows how we can ask additional pre-qualification questions that would result in either a recommedation ("It would be better to speak with a GIA now") or simply pass through to the next Step. The user can Skip Question or select one of the radio buttons to enable the Save & Continue button.
- In Step 2, the Save & Continue button would become disabled again if the final radio button is selected yet there are no characters typed within the input field.
- In Step 2, the input field should use type ahead functionality to list known ERPs within a dropdown that opens beneath it. The user can either continue to type or direct-select one of the type ahead results to fill in the remainder of the field.
- In Step 3 the "Save ..." options should not appear while neither of the two catalog checkboxes are checked. Webflow has poor selection detection so this state is not always reliable within the prototype.
- In Step 4 the Purchase Order chekbox should always be checked and the user shouldn't be able to uncheck it.
- Selecting the title link or Edit button for any completed step should close all other steps that are currently open, and then open the selected step so that the user can edit their input and/or selections. The step behaves as it originally did, except now when the user selects Save & Continue, the edited step switches to its completed state but the next step doesn't automatically open; instead the next unfinished step automatically opens (if any).
- While editing a previously completed step, the "Go To PremierConnect" button at the very bottom of the page should be disabled (if it's visible).
(Recipe B) B2B Workflow 1-4 and Summary
See the specification and notes for B2B Steps (Recipe A) until one of these two recipes is eliminated.
The prototype doesn't function as it should due to Webflow limitations:
- When editing or returning to a completed step, it should be prefilled with the user's most recent input or selections.
PremierConnect - Home
This page would only be seen if the store has more than one integration either currently active, in progress or in its deactivation history. Otherwise, skip directly to the details page for the ERP integration.
The ERP list within the page is separated into two sections - the top section includes all Active and In Progress integrations, while the bottom section is for Inactive integrations that the customer has not yet removed from their history. Within each of these two sections, integrations are listed alphabetically.
In progress
Started on 09-07-2017
Inactive Integrations
Deactivated integrations remain in the customer's history so they can more easily reactivate them or create a new integration based upon them.
Select either the name link or View Details button for an integration to navigate to its integration details page.
On an Active integration, select the Deactivate CTA to trigger a modal from which the user must confirm that they want to deactivate the integration, along with details about the repercussions of this action.
On an Inactive integration, select the Remove CTA to trigger a modal from which the user must confirm that they want to permanently remove the integration from their history.
Select the "Integrate a new ERP" CTA to open a modal from which the user could either base the new integration upon an existing one (i.e. work from a clone) or start fresh from the B2B: Get Started page.