Challenge Overview
Project Overview:
Welcome to the Cx3PO – Create New Template UI Prototype Challenge! The goal of this challenge is to create the HTML5 Prototype for Create New Template using the provided "Cx3PO" base UI prototype. The prototype must follow our standards and our guidelines. Review the details below.
The main task of this project is to create the HTML5 UI Prototype based on the provided base UI prototype by using industry standard best practices.
This UI Prototype will use Responsive Design solution. You must use web HTML5 best practices so it will looks good in targeted browsers. Read more details for UI Prototype Requirements and Flow below.
As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JS code functions and make it easier for future developers and the client to understand what you have built.
NOTE: This application will be using AngularJS Framework (http://angularjs.org, http://docs.angularjs.org/guide) and Bootstrap 3 (http://getbootstrap.com/getting-started). Please follow coding standards and write clean code for AngularJS data binding instead of using plain HTML code.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background:
- Our client has a lot of devices in the field, many which are old and eligible for return or replacement.
- The client wants to get these old devices replaced with newer ones.
- One effective way they have found to communicate with the owner of these old devices is to push messages directly to their device so the end user sees it. they call one of these efforts a “campaign”.
- The Newman application is a tool which helps end users define the messages and options which are pushed to the end users they are trying to communicate with.
- There are many different types of old equipment they are looking to swap as well as many different regions that different portions of the internal client team target. because many of these campaigns are very similar in number of screens and flows and only differ on copy of messages and on buttons, the client has templates - created by super user - that the end user can interact with in the Newman app to define their campaign to swap out old equipment.
- The templates are made so that we can easily update the language on standard set of screens.
- There are two types of users of this application - contributors and super users. Super Users are able to create templates; contributors are only able to select existing templates and change the editable portions.
Dynamically Create Templates:
- The Swap Checker Penultimate template is an example of a Newman Swap campaign template. It is a set of screens that link together and provide a contributor user - a normal client user - to create a campaign quickly and easily.
- The mentioned template can be accessed from Add Campaign/ Swap App/ Created Flagged Flow, click on Create New Template Button and then select Swap Checker Penultimate template.
- As stated above, super users are admin-level Newman users who have the ability to create the templates - like Swap Checker Penultimate - via the Create Flagged Flow and Create Non-Flagged Flow editor by defining the screens, the type of screens and flow of screens that make up the template. This section describes the “Create Templates” functionality.
Creating or Modifying a template:
- Only Super Users have the ability to create or modify a template
- Templates are created on the Create Flagged Flow or Create Non-Flagged Flow screens.
- After a template has been created, whether they did it in the Flagged or non-Flagged flow, the template should be saved as an option in the template drop down for both flows.
Create New Template:
- Super Users will see a button “Create New Template” next to the “Preview” button.
- When “Create New Template” is selected, the super user is brought to a new tab “Create New Template”.
- Please refer to Create New Template 1.png & Create New Template 2.png.
- The new template is saved when the user selects the “Save” button. If the template has not been previously saved, a popup will be displayed prompting the user to enter in a valid and unique template name.
- Please refer to Create New Template 3.png .
Modify existing template:
- Super Users, like other users, can select a pre-existing template by choosing one from the dropdown. The selected template will load in the Create Flow editor.
- Super Users will have the ability to modify a template. Once the template is loaded, the super user will have the ability to add or remove screens from the template as well as modify the button flow.
- When the Super User selects the Save button, the modified template will be updated with the most recent changes.
Competition Task Overview:
The main task of this competition is to develop HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Required Pages:
1- Building a template:
- Only Super Users have the ability to create a template, meaning they will be only users with the “Create New Template” button visible and the only users who will have the ability to edit screens and button flows.
- When a super user selects to create a new template or modify an existing template, they will have some options available to them that contributors do not. These options, which appear in the Screen Editor panel, allow a super user to drag one of the six types of screens into the template.
Add Screen(s):
- The Add Screen panel present the user with 6 different types of screens which they can add to their template.
- Types of screens are: (Please check type of screens storyboard attached in forums).
-- Start Screen.
-- Blank Screen.
-- Breadcrumb Flow, Step 1.
-- Breadcrumb Flow, Step 2.
-- Breadcrumb Flow, Step 3.
-- Breadcrumb Flow, Step 4 (completed).
-- User adds one or many of these screens to their template by dragging it from the Add Screen panel into the Screen Usage panel.
- Please refer to Add Screen.png.
- Screens added to the Screen Usage section will have an ID that increments by 1; so first screen added will be ID 1, second will be ID 2, etc.
Add Button(s):
- Once the user has defined the number of screens in the template’s flow and which types of screens each page can be, they will add the buttons and next steps for each button to the screen’s to complete a valid “flow”.
- As stated above, adding buttons is only available to super users.
- When the super user selects one of the screens in the Screen Usage panel, the Live Screen Preview panel will be refreshed to “preview” that particular screen. It is at this phase that the super user can drag a button from the “Add Button” panel to the “Live Preview” Panel to add a button to the screen.
- There are three types of buttons which are named based on the width of the button.
-- Small.
-- Medium.
-- Large.
Note: in attached mockup, the buttons are all the same size in the Add Button section; this is changing. (Please refer to Add Button.png)
Beyond Screens & Buttons:
- The addition of screens and of buttons/actions is a capability only of a super user. Once these steps are completed, the template is likely saved and made available to all other users.
Using a Template:
- A contributor -would interact with a created template in the following way:
-- Contributor defines the nature of their Swap App on the Swap App page and selects a flagged flow; user is taken to Create Flagged Flow tab.
-- The contributor selects a pre-existing template from the drop down.
-- When a template is selected, the Create Flagged Flow editor is reloaded to display the “contents” of the selected template. That is:
---- Screen Usage panel is populated with the specific set of screens configured in the template.
---- The application will by default put the focus on the first defined screen (screen ID 1).
---- Due to this, the Live Preview panel, Button Usage panel & Screen Option panel will be updated to reflect the contents/options for the selected screen.
- Please refer to Using a Template.png .
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- You are allowed to use JQuery (MIT License) for this contest.
Browsers Requirements:
- Latest Firefox, Safari, Chrome & IE Browsers.
Documentation Provided:
- Storyboard Screens and PSD files can be found in forums.
- Base UI Prototype can be found in forums.
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.