Challenge Overview
Welcome to Topcoder Mobile - Connected Car iOS iPad App - UI Update Code Challenge
We just received winning design from previous Topcoder Design challenge, this time we need your help to update our latest IOS app to get new look and feel. Read more details below
Let’s discuss any questions you have on challenge forum!
Code Requirements:
- Grab base of submission on Downloadable File on Challenge Details page
- All code must be written in Swift and the project must use latest XCode version. Do not use Objective-C or Bridging approach
- Make sure your submissions look consistent across all different iPad variations (iPad, iPad Mini, iPad Air, iPad Pro)
- Need able to support Portrait view only
- App must support 2x and 3x assets and retina devices
- App must support iOS 10.x
- All source code changes must be well commented and MUST follow existing coding conventions
- Please ask in the forums if you wish to use any open-source third-party libs to ensure there
are no license violations
- FYI: this IOS App already support services to our REST API.
Design Source Files: https://drive.google.com/open?id=1tFm2KrxBuVQYLuf_DmJmGP6AQzeXhpc0
SUBMISSION REQUIREMENTS:
General Design
- For the new design look and feel, we need support the IOS app to be easy to change the theme by modify single line of configuration
- Modifiable elements are:
-- App name,
-- Client name,
-- Client logo
-- Background image,
-- link color,
-- Button background color,
-- Active state of left side navigation
-- Anything else?
- Compare different theme look here on Login page for example:
-- VW version: Screenshot: 03_1_login_ipad.png
-- Infiniti version: Screenshot: 03_2_login_ipad.png
-- GM version: Screenshot: 03_3_login_ipad.png
- For the IOS app, we need able to swipe left to show hidden menu that will able to change the theme when user click theme
- Embed the font on your submission. Grab the font from here: https://www.fontsquirrel.com/fonts/open-sans
- Background image need covered whole device screen.
- White box can use fixed width
1). Login
Screenshot: 03_1_login_ipad.png
- This is new Login page look and feel
- Content inside the box need use 2 columns layout
- On the left side, make sure Client logo and client name included as part of modifiable config
- Keep Email and password fields like existing app
- Have problem signing in can be dead link
- Follow the text color when user type the value on text input (Screenshot: 01_2_login.png)
2). Select Carrier
Screenshot: 04_1_activate_ipad.png
- This is new screen need created on the app to Select the Carrier
- Active state on the icon navigation list will use blue color
- This icon navigation list should not able to change the page
- On the header, please put photo placeholder
- Grab First and Last Name from API
- Dealer text can be text placeholder
- Logout button need work like existing
- There are 4 buttons that are able to select
- Carrier selection from left to right are: T-Mobile, Sprint, AT&T and Verizon
- After select carrier need take user to the next Customer Lookup screen and update the 1st icon
3). Customer Lookup
Screenshot: 04_2_activate_ipad.png
- label T-Mobile need automatically updated based on selected carrier
- Follow this is error message look and feel for any error validation (Screenshot: 02_4_customer_lookup.png)
- Auto suggest will be out of challenge scope (Screenshot: 04_3_activate_ipad.png
- Notice there’s checkmark icon for correct format on mobile phone (Screenshot: 04_4_activate_ipad.png)
- Remove Previous button on app, ignore storyboard look
- Need able to press Enter or click Next button take user to next screen
4). Customer Info
Screenshot: 04_5_activate_ipad.png
- Display actual data based on current application
- Follow typography for each elements
- For car information you can use static data
- Remove Previous button on app, ignore storyboard look
- Need able to press Enter or click Request PIN button take user to next screen
- Notice click the Cancel button on the left side need take user back to new Carrier Selection screen
5). Enter PIN
Screenshot: 04_6_activate_ipad.png
- Simulate pin expires for 60 seconds
- Request PIN need recall the create new PIN service
- Remove Previous button on app, ignore storyboard look
- Need able to press Enter or click Submit button take user to next screen
- Notice click the Cancel button on the left side need take user back to new Carrier Selection screen
6). Confirmation
Screenshot: 04_7_activate_ipad.png
- Display the message for successful activation
- Need able to press Enter or click Done to return to new Carrier Selection screen
- XCode Project with all source code that addresses the requirements
- Deployment guide with configuration & verification steps. Describe all config params and include steps to run
We just received winning design from previous Topcoder Design challenge, this time we need your help to update our latest IOS app to get new look and feel. Read more details below
Let’s discuss any questions you have on challenge forum!
Code Requirements:
- Grab base of submission on Downloadable File on Challenge Details page
- All code must be written in Swift and the project must use latest XCode version. Do not use Objective-C or Bridging approach
- Make sure your submissions look consistent across all different iPad variations (iPad, iPad Mini, iPad Air, iPad Pro)
- Need able to support Portrait view only
- App must support 2x and 3x assets and retina devices
- App must support iOS 10.x
- All source code changes must be well commented and MUST follow existing coding conventions
- Please ask in the forums if you wish to use any open-source third-party libs to ensure there
are no license violations
- FYI: this IOS App already support services to our REST API.
Design Source Files: https://drive.google.com/open?id=1tFm2KrxBuVQYLuf_DmJmGP6AQzeXhpc0
SUBMISSION REQUIREMENTS:
General Design
- For the new design look and feel, we need support the IOS app to be easy to change the theme by modify single line of configuration
- Modifiable elements are:
-- App name,
-- Client name,
-- Client logo
-- Background image,
-- link color,
-- Button background color,
-- Active state of left side navigation
-- Anything else?
- Compare different theme look here on Login page for example:
-- VW version: Screenshot: 03_1_login_ipad.png
-- Infiniti version: Screenshot: 03_2_login_ipad.png
-- GM version: Screenshot: 03_3_login_ipad.png
- For the IOS app, we need able to swipe left to show hidden menu that will able to change the theme when user click theme
- Embed the font on your submission. Grab the font from here: https://www.fontsquirrel.com/fonts/open-sans
- Background image need covered whole device screen.
- White box can use fixed width
1). Login
Screenshot: 03_1_login_ipad.png
- This is new Login page look and feel
- Content inside the box need use 2 columns layout
- On the left side, make sure Client logo and client name included as part of modifiable config
- Keep Email and password fields like existing app
- Have problem signing in can be dead link
- Follow the text color when user type the value on text input (Screenshot: 01_2_login.png)
2). Select Carrier
Screenshot: 04_1_activate_ipad.png
- This is new screen need created on the app to Select the Carrier
- Active state on the icon navigation list will use blue color
- This icon navigation list should not able to change the page
- On the header, please put photo placeholder
- Grab First and Last Name from API
- Dealer text can be text placeholder
- Logout button need work like existing
- There are 4 buttons that are able to select
- Carrier selection from left to right are: T-Mobile, Sprint, AT&T and Verizon
- After select carrier need take user to the next Customer Lookup screen and update the 1st icon
3). Customer Lookup
Screenshot: 04_2_activate_ipad.png
- label T-Mobile need automatically updated based on selected carrier
- Follow this is error message look and feel for any error validation (Screenshot: 02_4_customer_lookup.png)
- Auto suggest will be out of challenge scope (Screenshot: 04_3_activate_ipad.png
- Notice there’s checkmark icon for correct format on mobile phone (Screenshot: 04_4_activate_ipad.png)
- Remove Previous button on app, ignore storyboard look
- Need able to press Enter or click Next button take user to next screen
4). Customer Info
Screenshot: 04_5_activate_ipad.png
- Display actual data based on current application
- Follow typography for each elements
- For car information you can use static data
- Remove Previous button on app, ignore storyboard look
- Need able to press Enter or click Request PIN button take user to next screen
- Notice click the Cancel button on the left side need take user back to new Carrier Selection screen
5). Enter PIN
Screenshot: 04_6_activate_ipad.png
- Simulate pin expires for 60 seconds
- Request PIN need recall the create new PIN service
- Remove Previous button on app, ignore storyboard look
- Need able to press Enter or click Submit button take user to next screen
- Notice click the Cancel button on the left side need take user back to new Carrier Selection screen
6). Confirmation
Screenshot: 04_7_activate_ipad.png
- Display the message for successful activation
- Need able to press Enter or click Done to return to new Carrier Selection screen
Final Submission Guidelines
Submission Guidelines- XCode Project with all source code that addresses the requirements
- Deployment guide with configuration & verification steps. Describe all config params and include steps to run