TI Mobile Native iOS App Prototype Challenge

Note - This challenge has a shorter appeals phase (12h) and a fixed reviewer fee

Welcome to the TI Mobile Native iOS App Prototype Challenge.

 

The goal of this challenge is to take the provided UI Design and convert it to a native iOS application prototype. This is the first in a series of challenges to build this iOS app so now is a good time to get involved!

 

Challenge Requirements

 

In this challenge you will develop an iOS app that has all screens provided in the provided design. Note the following:

- We have provided the PSD source files in the forums

- All design assets, fonts are provided in the forums

- If there is anything not clear in the designs, please post questions in forums.

 

Screen Requirements

 

All screens and all elements in the design are in scope, refer to them and and let us know in the forums if you have any questions. The notes below are to help understand some screens/ elements better but aren’t exhaustive.

 

0-WelcomeScreen(x)

- Contains various onboarding screens

- User should be able to swipe left/right or use the on-screen dots for navigation

- These screens must be shown only the first time when the user launches the app (control via a flag)

 

01_Login

• Configure the credentials in strings.xml and mock the login flow

• If the credentials don’t match what’s provided in strings.xml, show the error as shown in 1-Login (Alt3)

• Stub all other buttons & links including Sign in using Facebook, Forgot your password, Sign Up by showing a toast message

• Use ‘Forgot your password’ NOT ‘Forget your password’

• Only Alt 3 screens are in scope, Alt 1 and Alt3 2 do NOT need to be implemented

 

01_Pre-Story

• Implement dot carousel as shown

• Must have left and right navigation using < and > links

• Clicking ‘Skip This’ or ‘Finish’ should take user to 1-Story screen

• User should be able to select multiple states and multiple race tracks

• User should at least select one state and one race track to move forward (unless they chose Skip this)

 

01_Story

• Racetracks - show multiple race tracks in down, user should be able to select one or more

• Full tile in the listview is clickable - https://cl.ly/2d0v2d1P2T2r and should navigate the user to detail screen

 

01_Story0

• Shows the race track selection dropdown

 

1_Story1

 

• Shows switching from listview to map view by clicking the icon next to search glass

• Tapping a pin on the map should show the tile as shown. Active pin is shown in a different color. You can use an open source map library (get an approval in forums if you are confused on what’s an acceptable license)

• At the bottom, it should show a count of the number of stories

 

1_Story2

• Shows how selecting a different pin on map works

 

2-Search

• You can IGNORE the ‘Recent Searches’ - it is not required

• Search Stories should simply filter the list view or map view based on text match in story title, race course name or story description

 

03_Browse_Story

• User navigates to this screen by clicking on a story tile in list view or map view

• Stub the Favorite (star button) by changing color (see Bookmarks section in spec)

• ‘Collect Rewards’ button should be disabled by default

• Clicking Take Selfie button should allow the user to select an image from gallery or click a picture using camera

 

03_Browse_Story_1

• Shows the ‘Track Story Progress’ section in expanded mode

• Slider should be implemented as shown

• Tapping on any chapter takes the user to the next screen

 

03_Story_Content

• Shows the chapter in a story

• Show any sample video playing on the first page in the chapter

• The navigation dots at the bottom are for navigating between various pages in the chapter

• The comment button opens up the comments overlay (next screen)

• Do NOT show the Aa button

 

03_Story_Content0

• Shows the comments overlay

• Adding a new comment should add it to the top

• User should be able to delete a comment by clicking …

• Alternatively, you can implement swipe right to left to delete the comment. In that case, … is not required to be shown

 

03_Story_Content1-2

• Shows another example of the Story Content

 

04_Selfie

• Shows the user taking a picture

• Once they have either selected a picture from gallery or taken a picture from camera, the user should be redirected to 4_Selfie2

• Clicking ‘Continue Story’ takes user back to ‘4-Story-Completed’ screen

 

04_Story_Completed

• Same as 03_Browse_Content with the change that ‘Collect Rewards’ button is now enabled

 

04_Story_Completed1

• Same as 03_Browse_Story1 with the change that ‘Collect Rewards’ button is now enabled

• Clicking ‘Collect Rewards’ takes user to 04_Story_Completed3

• 04_Story_Completed2 is NOT required

 

04_Story_Completed3

• Show 2 buttons ‘Back to Story’ which would take the user back to this story

• Other button should be named ‘Main Menu’ and should navigate the user back to 1-Story

 

05_Profile

• Implement various sections as shown

 

05_Profile0

• Clicking any badge on previous screen shows this popup

 

05_Profile1

• Same as 05_Profile but with achievements section expanded

 

05_Profile2_2

• Clicking any trading card on previous screen shows this popup

• 05_Profile_2_1 is NOT required

 

05_Profile2

• Same as 05_Profile but shows trading cards tab active

 

06_TI-Points

• Implement various sections as shown

• Stub the Redeem buttons by showing a toast message

• Clicking Go to Card Shop should take user to 8_Card-Shop

 

06_TI-Points1

• Same as 06_TI-Points wbut with Daily Tasks tab active

• Clicking Go to Card Shop should take user to 8_Card-Shop

• Stub the Redeem buttons by showing a toast message

07_Help

• Implement various sections as shown

 

08_Card-Shop

• Implement various sections as shown

• Order by - Points & Name (Ascending)

• Search should allow filtering cards by name

• Filter button is not needed

09_Bookmark

 

• Implement various sections as shown

• Shows some stories in the list as shown

 

09_Bookmark-1 and 09_Bookmark_2

• Implement various sections as shown

• Shows the bookmark button being toggled

 

09_Navigation

 

• Implement navigation bar as shown

• Link each option to corresponding screen

 

05_Profile

 

• Add a link called ‘Edit’ on top right

• Clicking Edit should toggle the link to ‘Save’ and make the text fields editable

• Clicking ‘Change Photo’ should allow user to pick a image from gallery or take another photo

 

General Notes

 

Note the following :

- The app will be locked to Portrait mode

- Show a progress indicator (spinner) when transitioning between screens

- Only phone is in scope. Tablet is not in scope. App should support all devices above from iOS 10.0 and above

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

- Do NOT hardcode data directly into screens. Use JSON files as appropriate. The code should allow easy integration to APIs which will be developed later.

- Please ask in the forums if you wish to use any open-source third-party libs to ensure there are no license violations

Coding Conventions

- Please follow the Swift Style Guide available here - Reviewers will be expected to ensure that submissions comply to this guide

- All public methods & member attributes in classes must have inline/ header comments for description
 

Final 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

- Demo video (Mandatory and will be scored down if not provided)