Key Information

Register
Submit
The challenge is finished.

Challenge Overview

In this challenge we are converting the provided Storyboard to a working (Mobile Layout) ionic/HTML5/AngularJS/CSS prototype.

Challenge Requirements

General Notes

  • - Use JSON to load data for the application, this includes the chart data. The structure is up to you.

  • - Should use ionic directives (ion-list, ion-item, etc.) as much as possible.

  • - You need to follow the ionic best practice in this contest.

  • - The converted prototype should exactly match the provided design/storyboard.

  • - Your design needs to be responsive, so in different screen sizes the application can adjust the layout accordingly.

  • - Note we are not building a Cordova app in this contest, so just use the ionic library directly

  • - All pages need use fluid layout when transform into Landscape or Portrait view.

  • - All pages on produced prototype should be linked to each other. Let us know if you need clarification about the flow, it is clarified in the InvisionApp.

InvisionApp - Clickable Prototype

  • - We have created a clickable prototype from design in InvisionApp, you can try it here to understand the flow between items and screens
    https://invis.io/7Q4M9Z2P5

  • - Note that mobile gestures (i.e. swipe left/right) will not work on the desktop browser, you need to open the link in your mobile to experience it.

Screens Requirements

The following will list required screens, refer to invisionapp prototype to understand the interaction, transitions and navigations between screens.

  1. Splash Screen

    • - It should be same as screenshot (00.jpg) without the text slider and bottom skip button.

  2. Get Started Screen

    • - Screenshot : 00.jpg

    • - Implement slider, it should use gesture to swipe left/right.

  3. Login Screen

    • - Screenshot : 01.jpg, 02.jpg

    • - Simulate invalid login as in “02.jpg” screenshot.

  4. Find Customer Screen

    • - Screenshot : 03.jpg, 07.jpg

    • - Text inside search input field is placeholder, placeholder should remain display on input field focus.

    • - Use “Search” button in mobile keyboard  to navigate to Search Results screen.

    • - Implement scrolling horizontally for the recently viewed area.

  5. Speech to Text Screen

    • - Screenshots : 04.jpg, 05.jpg, 06.jpg

    • - You are not implementing speech to text ionic functionality in this challenge.

    • - Simulate the speech to text functionality by tapping on the blue area same as done in Invisionapp.

    • - After editing the text, use “Search” button in mobile keyboard to navigate to Search Results screen.

  6. Search Results Screen

    • - Screenshot : 08.jpg, 08 1.jpg, 09.jpg, 10.jpg, 11.jpg

    • - Clicking on phone number or icon will open dialog as in “08 1.jpg” screenshot.

    • - Use loading bar same as in screenshot “14.jpg” to simulate loading data.

    • - Implement scrolling horizontally for the recently viewed area.

    • - In invisionapp we show that when you tap on phone number/icon a dialog open up, we want same dialog when tapping on the email icon/address.

    • - Tapping on search will open up keyboard to perform searching

      • - Simulate search by reload the list.

    • - Implement ionic infinite scrolling.

    • - Implement ionic pull to refresh.

    • - Implement location distance slider in 09.jpg

    • - Sort By list area should be scrollable.

  7. User Profile

    • - We have 4 screens in this Profile section

      • - Profile screen : 12.jpg

        • - Use loading bar same as in screenshot “14.jpg” to simulate loading data.

        • - Chart

          • - It is up to you to find proper charting library to address this requirement.

          • - The black bar below the chart will change the range on the chart so you only need to implement tap styling on that bar, you don’t need to re-render chart.

        • - Swiping left will take user to Accounts Screen.

        • - Tapping on phone icon will open up a dialog same as in Search Results Screen.

        • - Tapping on Email icon will open up a dialog same as in Search Results Screen.

      • - Accounts Screen : 13.jpg

        • - Use loading bar same as in screenshot “14.jpg” to simulate loading data.

        • - Implement ionic infinite scrolling.

        • - Implement ionic pull to refresh.

        • - Swiping to right takes user to profile screen.

        • - Swiping left takes user to Services screen.

      • - Services Screen : 14.jpg, “14 1.jpg”, “14 2.jpg”, “14 3.jpg”

        • - Use loading bar same as in screenshot “14.jpg” to simulate loading data.

        • - Implement ionic infinite scrolling.

        • - Implement ionic pull to refresh.

        • - Swiping to right takes user to Accounts screen.

        • - Swiping left takes user to Sales screen.

      • - Sales Screen (Referral and Opportunities) : “15.jpg”, 17.jpg

        • - This is multi tab screen.

        • - Implement ionic infinite scrolling.

        • - Implement ionic pull to refresh.

        • - Swiping right takes user to Services screen.

  8. Referral Details Screen

    • - Screenshot : 16.jpg

    • - The description content area should be scrollable, make title and name section should be fixed position.

  9. Create Service Request Screen

    • - Screenshot : 21.jpg

    • - Service Type is a pick list.

  10. Create Referral Screen

    • - Screenshot : 22.jpg, “22 1.jpg”

    • - Product Of Interest is pick list.

  11. History Screen

    • - Screenshot : 23.jpg, 24.jpg

    • - It is multi-tab screen, switching between tabs should be implemented.

    • - This screen has same content and functionality as Search Results screen.

  12. Menu Screen

    • - Screenshot : 25.jpg

    • - Should work same as in invisionapp.

 

Specific HTML/CSS/JavaScript Requirements

  • - You must use HTML5 and CSS3, it is is preferred if you use Sass.

  • - 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 lay out 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 stylesheet.

  • - 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 Libraries/Plugins

Ionic framework and AngularJs are our main focus frameworks, you must use the ionic directives, and “think in Angular” when coding.

Browser Requirements

- Chrome, Firefox and Safari  on iPhone 5, 5s, 6 and 6+ (Landscape & Portrait View)

- Android Browser

Documents

Storyboard and Screenshots are provided in challenge forums.

References



Final Submission Guidelines

Submission Guidelines:

A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.

ELIGIBLE EVENTS:

2016 TopCoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30051183