BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$100‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to Topcoder Mobile - Connected Car UI Design Concepts Challenge

For this challenge we need you to create concept design for Topcoder Mobile - Connected Car application that will be used to activate Topcoder Mobile data plan on new customer car. Your submission need designed Tablet and Desktop screen sizes.

Check required screens and more details information on challenge specification below. Let’s discuss any questions you have!

Round 1

Initial Topcoder Mobile - Connected Car UI Design Concepts on Desktop screen size for these following screens:
1. Login
2. Customer Lookup
3. Step 1: Send PIN via SMS
4. Step 2: Enter PIN Number
5. Step 3: Activation Success/ Confirmation

 

Round 2

Final Topcoder Mobile - Connected Car UI Design Concepts on Desktop & Tablet screen size plus Checkpoint Feedback
1. Login
2. Customer Lookup
3. Step 1: Send PIN via SMS
4. Step 2: Enter PIN Number
5. Step 3: Activation Success/ Confirmation
Additional Steps/ Screens/ UI elements to show
About the application
The goal of this project is to create a Tablet and Desktop Web application that allows a new car customer to activate a Topcoder Mobile data plan.

Both apps will provide the same or similar user interface for taking an existing Topcoder Mobile Customer’s primary number and linking the SIM associated with the new car to customer’s account.

Design Inputs
  • Topcoder Mobile and Car Branding
    • Need the ability to customize based on the different car brand (GM, VW, Infiniti)
    • Colors and logo switching. Style sheet based updates
  • Car Dealer app to confirm Topcoder Mobile customer and "activate" the car to use the buys Topcoder Mobile phone number and account information

Submission Requirements
Please check Flow Diagram to help the designers understand what about the application flow

1. Login
2. Customer Lookup
  • Car Dealer looking up the customer info using these data:
    • Topcoder Mobile Phone Number
    • Email address
    • VIN number
  • Enter VIN number of the car. Check here for VIN reference: https://en.wikipedia.org/wiki/Vehicle_identification_number. We are open to some ideas here. On iPad maybe the user is take a picture of the VIN, maybe scanning a QR code? Maybe there is just a "lookup" based on the customers name to match them to cars they've purchased.
  • Include dual branding here:
    • Topcoder Mobile + GM
    • Topcoder Mobile + VW
    • Topcoder Mobile + Infiniti

3. Step 1: Send PIN via SMS
  • Once the Topcoder Mobile info and VIN has been successfully verified the car dealer is able to proceed with the activation steps
  • Maybe through the step process we can include some info about the customers car? Model, image, VIN, etc.? Something to add a bit more visual interest and to visually "confirm" this is the correct car/customer.
  • Customer data has E-mail, Phone, FirstName, LastName, Street, City, State, Zip
  • Step 1 might just be as simple as pressing a "send PIN" button with some kind of verification message/ status. Maybe a countdown clock?

4. Step 2: Enter PIN Number
  • The customer will receive a PIN number on their phone that they will need to tell the car dealer app
  • The screen in the app should have changed and moved to step 2, which shows some large input fields to enter a 4 digit pin number

5. Step 3: Activation Success/ Confirmation
  • Upon success entry of the 4 digit PIN, the app should advance to step with a confirmation/ success message
  • The customer would have received a confirmation SMS message that a "new line has been added to their account". They will also receive this same message via email
  • The app will automatically return the user back to the "Customer Lookup" screen upon completion.

Additional Steps/ Screens/ UI elements to show
1. Customer Lookup Error
  • We would like to show an error message here "Email doesn't match the email on file with Topcoder Mobile"
  • This would require the user to re-enter the email
  • MIght need error validation for VIN number or Topcoder Mobile credentials

2. Step Cancel
  • The user can cancel the activation process at any stage
  • This essentially takes the user back to the Customer Lookup screen

3. Logout
  • What user see after logged out of the application

Submission Design Presentation
  • As part of your submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
  • If you need an MarvelApp Project, send email OR via challenge forum to this following email address: lunarkid@copilots.topcoder.com
  • Important! Make sure to include a URL/Link to your MarvelApp within your submission notes

Design Submission Formats:

a). Screen Sizes:
  • Desktop Screen Size: 1280px(w) × Height up to your design
  • Tablet Portrait Screen Size: 768px(w) × 1024px(h)
b). Design theme, colors, typography. Target User
  • Car Dealers
Judging Criteria
  • How well you create Topcoder Mobile - Connected Car UI Design Concept!
  • Capture all required flow and screens.
  • Unique theme for Different Company
  • Cleanliness of your graphics and design.
  • User Experience.

Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
  • Submit JPG/PNG image files based on Challenge submission requirements stated above.
  • MarvelApp share url/link for review and to provide feedback

Source Files
All source files of all graphics created in one of these following software design application:  
  • Adobe Photoshop
  • Adobe Illustrator
  • Sketch

Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.

 

Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2018 Topcoder(R) Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar
  • AI files created in Adobe Illustrator or similar
  • Sketch

You must include all source files with your submission.

Submission limit

5 submissions

ID: 30062602