Register
Submit a solution
The challenge is finished.

Challenge Overview

Challenge Overview

You are provided with a native android (eclipse project) solution, and a new UI design (storyboard). You are reskinning the existing application to match the new design in this challenge.

Challenge Requirements

  • Provided in the challenge forums is a pdf document detailing the existing application flow (Solar Site Design - Existing App Design.pdf).

    • Make sure to read the pdf, it contains all information to understand how existing app works. We are only reskinning here so the functionality will remain the same.

    • We will outline below the mapping between the existing screens and new screens by referencing to the PDF file.

  • Here is an overview about the screens in scope :    

    • App icon

      • Provided a new logo, you will use “Logo In Circle” icons.

    • Splash screen

      • we don’t have new design screen for this, so you will use the same login screen with only the logo being rendered in the middle/center of the screen.

    • Login

      • Screenshots :

        • 01.Login

        • 01.Login-pass-reset-corect.jpg

        • 01.Login-pass-reset-failed.jpg

        • 01.Login-pass-reset-success.jpg

        • 01.Login-pass-reset-empty.jpg

      • It corresponds to screens in page (13) in the pdf

      • Reset password screens are new ones, you will implement them without logic in this challenge.

    • Register

      • Screenshots :

        • 02.Registration

      • It corresponds to screens in page (14, 15) in the pdf

    • Dashboard (Navigation)

      • Screenshots :

        • 04.Navigation

      • It corresponds to screen in page (19).

      • We are replacing the dashbaord in existing design with a hidden menu.

      • The user can tap on menu icon to toggle menu. Or can Drag right/left to expand/close the menu.

    • Site Surveys Listing

      • Screenshots :

        • 03.Home-no-site-surveys

        • 03.Home

      • It corresponds to “My Reports” screen in page (53) in the pdf.

        • “All” tab will list all submitted surveys.

        • “Drafts” tab in new design corresponds to “Incomplete” tab in existing design.

        • “Submitted” tab in new design corresponds to “Report History” tab in existing design.

        • “New Site Survey” button corresponds to “New Site” tab in existing design.

          • Tabbing on the button will start “New Site Survey” flow.

        • Tabbing in an entry in the listing will take user to survey details screen (14.Survey-details.jpg)

      • Error styling in this screen should follow same error styling in the Registration screen.

    • New Site Survey

      • It corresponds to screens displayed in pages (21 - 36) in the pdf.

      • Screenshots :

        • 05.Step-1-project-data

          • Corresponds to screen in page 22 in the pdf.

        • 06.Step-2-installation-data

          • Corresponds to screen in page 29 in the pdf.

        • 07.Step-3-design-information

          • Corresponds to screen in page 33 in the pdf.

        • 08.Step-4-flat-roof-design-copy

        • 08.Step-4-ground-mount-design

        • 08.Step-4-pitch-&-flat-roof-design

        • 08.Step-4-upload_videos_photos

        • 08.Step-4-pitch-roof-design

          • The above 4 screenshots correspond to the screens in page 36 in the pdf.

          • Note that if there is more than one structure type selected then the screenshot (08.Step-4-pitch-&-flat-roof-design) will be used to list all structure types selected. Meaning it will be stacked in top of each other in a single screen.

        • 08.Step-4-pitch-roof-design-confirmation-modal

          • This model is displayed when successfully submitting a survey.

        • 08.Step-4-pitch-roof-design-modal-draft-success

        • 08.Step-4-pitch-roof-design-modal-draft-Fail

        • 08.Step-4-pitch-roof-design-modal-draft

          • The above two screenshots are displayed when user click on ‘save as draft’ button in header.

        • 08.Step-4-pitch-roof-design-upload-modal

          • This modal styling will be displayed for any option in the app that asks user to upload image/video or select them from library.

          • It corresponds to screens in pages (23, 24, 25 and 26) in the pdf.

          • On successful upload a thumbnails will be displayed
            (08.Step-4-upload_videos_photos)

    • Survey Details screen

      • Screenshots :

        • 14.Survey-details.jpg

      • This is new screen, it will display a readonly survey information.

    • Quick Referral

      • Screenshots :

        • 09.Quick-referral

        • 09.Quick-referral-sign-modal

        • 09.Quick-referral-confirmation-modal

      • It will follow same design elements and styling as other screens, including the error styling.

    • Calendar Survey

      • Screenshots :

        • 10.Survey-calendar-changed-day

        • 10.Survey-calendar-current-day

      • It corresponds to screen in page (50) in the pdf.

      • The dots in some dates mean there are scheduled date or visited sites scheduled under that date.

      • Orange highlight cell represents a selected date.

      • By default, the current day cell should be highlighted.

      • Current day cell borders will be highlighted with orange color.

      • Tabbing on a scheduled/visited sites will take user to Survey details page.

    • Map Survey

      • Screenshots :

        • 11.Map-survey

      • It corresponds to screen in page (55) in the pdf.

      • Tabbing on a marker will take user to survey details page.

    • Contact

      • Screenshots :

        • 12.Contact

      • It corresponds to screen in page (57) in the pdf.

      • Tabbing on Email support will open default email app with recipient populated.

      • Tabbing on call support will start a phone call.

    • Settings

      • Screenshots :

        • 13.Settings

  • Only portrait orientation is required.

 

Notes

  • You will port the provided solution to Android Studio.

  • There are missing fields in some screens in the design. You will add these missing fields.

  • For fields that are new in the design or don’t have a corresponding fields in the API you will keep it in the screen but we won’t manipulate it’s values in the backend. When API is extended in future we will easily update the call.

  • The app will use google maps.

  • Back button changes :

    • It should appear in the left side in the header

    • Those screens that can be access from the navigation (menu) need not have back button (can be removed)

    • Only sub-screens need to have the back buttons (Home > Site Survey Details), and these sub-screens need not show the menu icon (hamburger icons)

    • Drag in/out (swipe in/out) to show/hide menu.

  • Most of the buttons in the design use Capital letter for first character and small for rest. Follow this naming convention across all screens.

  • Please register account in Solar Site Design website and you can use it to interact with the API 
    http://www.solarsitedesign.com/users/login

Supported OS and Devices

  • Android 4.1.x Jelly Bean and above (4.1.x - 5.0).

  • Screen resolution should cover Normal and Large screens with hdpi and xhdpi.

Documents

Provided in challenge forums :

  • Existing Eclipse Project.

  • Screens requirements document : Solar Site Design - Existing App Design.pdf

  • Storyboard design and Screenshots


Final Submission Guidelines

Submission Deliverable    

  • Android Studio project with all code address the requirement.

  • Detailed Deployment Guide

ELIGIBLE EVENTS:

2015 topcoder Open

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30048688