Challenge Overview

The goal of this challenge is to take the provided Storyboard and convert it to a native Android application prototype.

There is no backend interaction in this challenge, we will have a follow-up challenge to connect the application with backend.

Challenge Requirements

Screen Requirements

• Logo

  • file name :SolarArg_v2.jpg

• Splash Screen

  • Screenshot : 00-Splash-Screen.jpg

• Welcome Screen

  • Screenshots :

    • 01-0Welcome-Screen.jpg

      • Change “About Us” title to “About the app”

    • 01-1Welcome-Screen-Continued.jpg

  • The banner is a playable youtube video. Tabbing on the video should play it in full screen as in 42-Learn-about-Solar2.jpg

  • Tabbing on ‘Read More’ button in ‘01-0Welcome-Screen.jpg’ takes user to ‘01-2Welcome-Screen-Continued.jpg’

  • ‘Login with facebook’ and ‘Login with guest’ will take user to Home Screen, the functionality of FB login is out of scope of the challenge.

    • These two buttons will be pinned at the bottom (not part of scrollable view).

• Home Screen (Dashboard)

  • Screenshots :

    • 03-Home-Screen-(A).jpg

    • 03-1Home-Screen.jpg

    • 38-Home.jpg

    • 39-Home.jpg

    • 46-Home.jpg

    • 47-Home.jpg

  • The top section will display user photo with full name. The background also is a blurred effect version of the user photo.

    • Clicking on the camera icon at the top right corner of the banner allows user to change the photo.

• My House Design Screens

  • This will be a wizard or steps screens.

  • Tabbing on progress steps bar will allow user to navigate back to completed screens.

  • Profile Screens

    • Screenshots :

      • 04-0My-House-Design.jpg

      • 04-1My-House-Design.jpg

      • 04-2My-House-Design.jpg

      • 04-3My-House-Design.jpg

      • 04-4My-House-Design.jpg

      • 04-5My-House-Design.jpg

      • 04-6My-House-Design.jpg

      • 04-7My-House-Design.jpg

    • The application should load the current user location in Lat/Long fields from the GPS of the phone.

    • Phone number is automatically determined from the phone

    • Street address, city, state are automatically determined from the GPS data and suitable mapping tool.

    • Use google maps to display user current location. and allow the user to pinch / zoom the google map

    • Dragging cursor marker in the map, which then updates the lat/long data values.

    • Implement proper validation for the fields.

    • Remove “phone number” from 04-5My-house-design.jpg screen.

    • Moving the drop pin will update the lat/long values and override those obtained from the GPS. If the user moves the drop pin, provide the user the option to return to the GPS coordinates.

  • Design Inputs Screens

    • Screenshots :

      • 06-My-House-Design-XX.jpg

        • 06-My-House-Design-(A1).jpg

        • 06-My-House-Design-(A2).jpg

        • 06-My-House-Design-(B).jpg

        • 06-My-House-Design-(C).jpg

        • 06-My-House-Design-(D).jpg

      • 06-3My-House-Design.jpg

      • 06-4My-House-Design.jpg

      • 06-5My-House-Design.jpg

        • Change “What is your door length” to “What is the width of your front door”

  • Take House Picture Screens

    • Screenshots :

      • 07-0My-House-Design.jpg

      • 07-1My-House-Design.jpg

      • 07-2My-House-Design.jpg

      • 07-3My-House-Design.jpg

    • This screen will use sample of taken home photos.

  • Take Picture Screens

    • Screenshots :

      • 08-0My-House-Design.jpg

      • 08-1My-House-Design.jpg

    • Implement the camera image photo flow.

    • Taken image should be rendered in Confirmation step.

  • Confirmation Step Screen

    • Screenshots :

      • 09-0My-House-Design.jpg

        • delete “Not Quite Good” text

        • Change button to “Retake Photo”

      • 09-1My-House-Design.jpg

      • 09-2My-House-Design.jpg

        • Update this screen to reflect changes above.

      • 09-3My-House-Design.jpg

  • Thank You Screen

    • Screenshots :

      • 17-My-House-Design.jpg

        • Change wording “Pressing continue will automatically generate customized PV system options for you. The accuracy of the result depends on the accuracy of your input date. Would you like to continue to go back to change your responses?”

      • 18-My-House-Design.jpg

      • 19-0Design-Review.jpg

        • Change “Congratulations, your information has been submitted to our server for automatic processing.”

        • Change “Please wait while our server considers possible design scenarios optimized exclusively for you.”

    • Animated progress bar should be implemented. This will represent data being submitted and sent to backend for further processing.

  • View Design Options Screens :

    • Screenshots :

      • 19-1Design-Review.jpg

      • 19-2Design-Review.jpg

      • 19-3Design-Review.jpg

      • 24-Design-Review.jpg

      • 25-Design-Review.jpg

      • 26-Design-Review.jpg

      • 27-Design-Review.jpg

      • 28-Design-Review.jpg

      • 29-Design-Review.jpg

      • 30-Design-Review.jpg

      • 31-Design-Review.jpg

    • User can navigate between designs by clicking Next icon (top header) or by clicking on the numbers grid.

    • The numbers grid can contain between 1 to 10 designs, the grid should be always centered.

  • Choose your installer Screens

    • Screenshots :

      • 32-Design-Review.jpg

      • 33-Design-Review.jpg

      • 34-Design-Review.jpg

      • 35-0Design-Review.jpg

  • Schedule Installation Screens

    • Screenshots :

      • 35-1Design-Review.jpg

      • 35-2Design-Review.jpg

    • Date picker widget and sliders should be fully functional.

    • Tabbing on hour/minute cells will allow updating the hour/minute.

    • Up/down arrows to the right of “PM” cell will toggle the cell value between PM/AM.

  • Congratulations Screen :

    • 36-Design-Review.jpg

    • 37-Design-Review.jpg

• Learn About Solar Screens

  • Screenshots :

    • 40-Learn-about-Solar.jpg

    • 41-Learn-about-Solar.jpg

    • 42-Learn-about-Solar2.jpg

    • 43-Learn-about-Solar2.jpg

    • 44-Learn-about-Solar.jpg

    • 45-Learn-about-Solar.jpg

  • Tabbing on any video will play the video in full screen as shown in 42-Learn-about-Solar2.jpg

• Example House Design Screens

  • Screenshots :

    • 48-Home.jpg

      • Change text “We know you are busy and may not be in a position to take a picture of your house. To let you continue to explore the features and capabilities, we’ve provided a “generic house” that will be used for the design process. This lets you experiment with your custom inputs on an example house.

    • 49-Home.jpg

    • 50-Home.jpg

    • 51-Home.jpg

    • 52-Home.jpg

    • 53-Home.jpg

    • 54-Home.jpg

  • User can navigate between screens by swiping finger left/right.

Note the following :

• The screen resolution should match the storyboard resolution.

• The implementation must be a native application, native controls must be used wherever possible.

• The back button should go back in history (i.e. as if you were pressing back in the browser). If there is no more history (i.e. you're at the first page), pressing back closes the app.

Project Structure

You will use Android Studio project for this application. Follow Android Studio project structure best practices.

Technology Overview

• The target platform is Android.

• You will support Android version 4.1.x - 5.0.

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

• You are allowed to use any supporting open source libraries. Please clearly document use of all such libraries.

• Use of  PhoneGap is NOT allowed. We are building native application.

Documents

Provided in challenge forums : the Storyboard and Screenshots

Final Submission Guidelines

Deliverable

• Android Studio Project with all source code that addresses the requirements.

• Deployment guide with verification steps.