Challenge Overview
Welcome to Team Mood - Mobile App Ionic Framework Code Challenge
In this challenge, we are looking for your help to create Mobile Ionic application based on the provided storyboard using Ionic framework that will run as Native application on iOS and Android devices.
As part of this challenge we need you to create documentation of your Ionic application, we are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development.
Good luck and Let us know any questions you have!
General Tasks
- In this challenge we are converting the provided Storyboard to a working Ionic Application that will run on iPhone/Android devices.
- Make sure to test this on simulator/real devices, testing only on web browser is not sufficient and won’t ensure good performance/responsiveness on device.
- Make sure your submission supported the minimum screen sizes of both iOS and Android devices
- We need lock the application to Portrait mode
- Use latest version of the Ionic framework: http://ionicframework.com/
- Get familiar with Ionic Framework:
http://ionicframework.com/getting-started/
http://ionicframework.com/docs/
- Put clear comment for all Ionic codes
- Please use proper id’s and classes in your naming conventions.
- Challenge winner will be responsible to swap any PNG icons to SVG icons later.
Challenge Assets:
GDrive: https://drive.google.com/open?id=16QZoJKB5SMp1-wDQLnsz8S9R_kaLVzpM
- You can also download the design source file on challenge details page.
- Pull icons assets as SVG & image assets as PNG
- Use the attached SF Font files
Screen Requirements:
01). App Icon
- Create standard application icon for application on Android & iOS devices.
- Refer to this site for iOS App icon Guidelines: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/
- Refer to this site for Android App icon Guidelines: https://developer.android.com/guide/practices/ui_guidelines/icon_design.html
02). Splash Screen
- Create standard splash screen after user open the application
- After some seconds need take user go to Home page explained below
- Refer to this site for iOS Launch Screen Guidelines: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/launch-screen/
- Refer to this site for Android Splash screen Guidelines: https://android.jlelse.eu/launch-screen-in-android-the-right-way-aca7e8c31f52
03). Home first time
Screenshots: 01_0_home_vote_first_time.png
- This is home screen at first time user keep open the application.
- Overlay need displayed Welcome message. Also, there are Mood information for each node/branch and below the Microphone icon
- Make sure the placement consistent with storyboard
- Click Got it Button need hide the Overlay
04). Home Vote
Screenshots: 01_1_home_vote.png
- Hello user info displayed on top
- On this screen user need able to swipe from white circle to one of those 5 different colors
- Important: You need add new Home button on the bottom of this screen. Re-use same button similar with Got it button. Click the button need take user back to Home screen.
- When user start dragging from white circle the outer circle need display the related color (Screenshots: 01_2_home_vote.png)
- User just need able to drag along the dotted line only.
- When reach the colored node, need transform the outer circle into full opacity (Screenshots: 01_3_home_vote.png)
- After some seconds need auto redirect to Home Vote Respond explained below
- Also, there’s the mood information displayed on centered.
- To build the press, swipe gesture you can use this Gesture plugin: http://hammerjs.github.io/ Or, come up with your own suggestion. Let us know for confirmation
- Click the Mic button need able to load the similar screen like this (Screenshots: 01_6_home_vote_speak_feedback.png)
- Voice Recognition need only accept the available Mood texts
- Click submit need take user back to Vote screen with selected Mood based on recorded user voice
5). Home Voted Respond
Screenshots: 01_4_home_vote.png
- After selected the mood, need displayed this respond screen
- Notice there are 3 buttons that will always placed on the bottom for Mic button, keyboard and Next button
- Check page below for more information
6). Home Vote Feedback Type
Screenshots: 01_5_home_vote_type_feedback.png
- User click the keyboard button from the Home Voted Respond need load this screen
- Cancel need take back to previous screen
- Submit need captured the typed text
7). Home Vote Feedback Speak
Screenshots: 01_6_home_vote_speak_feedback.png
- User click the mic button from the Home Voted Respond need load this screen
- Need able to capture the voice user spoke of.
- Cancel need take back to previous screen
- Submit need captured the typed text and
8). Home after vote
Screenshots: 04_1_home_higher_hierarchy.png
- User landed on this page after click the Next button from the Home Voted Respond
- My Weekly mood displayed some circles on top of page, it represent 5 working day from Monday to Friday
- Important:
- Based upon the day of voting, color the specific day circle with mood color the user has chosen on 01_3_home_vote.png. with “Today” text under that particular circle.
E.g. if its Monday and user have chosen Happy, make 1st circle as green with “Today” text under 1st circle. And rest of the circle from Tue to Fri as Grey color. This Grey color circle will show no voting or future days of week.
E.g. if its Thu and I have chosen Sad, make 4th circle as Red with “Today” text under 1st circle. And rest of the circle from Monday to Wed show some chosen colors if user has vote or Grey color if mood not selected.Friday is a future day, so for that you should show 5th circle as Grey.
E.g. if its Wed and I have not chosen any mode today, make 3rd circle as Grey with “Today” text under 3rd circle. And rest of the circle from Monday and Tuesday will show some chosen colors if user has vote or Grey color if mood was not selected. Thursday and Friday is a future day, so for that you should show 4th and 5th circle also as Grey.
- Add a “Vote My Mood” button on top in the right corner of the screen, in the same line of text “My Weekly Mood” on far right. This button should take a user to 01_1_home_vote.png home vote screen for voting.
- Notice there’s Weekly digest below the circle are
- Create auto slide for the Weekly digest area (Screenshots: 04_2_home_higher_hierarchy.png)
- Today data need displayed by default
- My Weekly and tabs on the bottom need use fixed placement
- Use JSON file to load the Team Mood cards
- Match the color of donut chart
- You can use animation on initial all chart load
- Follow the gradient color
- There’s arrow next to Today arrow, put dead link for now
9). Team
Screenshots: 05_team.png
- User access this page from Team tab on the bottom
- Search button placed on top right
- Below the My Team title there’s swipeable date.
- Selected date use the white background
- Use JSON file to load the Team cards
- Show only 5 circles for each team
- Display each cards consists of Team Name
- You can use animation on initial all chart load
- On each card display title name and on the right side need display the message icon
- The biggest mood value from team need displayed big chart than the other
- Click each card need take to Team Report
- Comment icon with some numbers
- Click on comment icon should take to Screenshots: 06_5_report_scroll.png
10). Team Report - Daily
Screenshots: 06_1_report_day.png
- This is Report day look
- Need able to swipe the date
- Each new month need displayed the month
- Selected date need use black circle
- Bar Chart need displayed in page
- Always show 5 bars to show each mood. And based upon the day, week, month selection this data will change.
- You can use animation on initial all chart load
- Notice there are arrows on the bottom for down, netral and up arrows
- Comments list placed below the chart
11). Team Report - Weekly
Screenshots: 06_2_report_week.png
- For Weekly view, you need display the line chart icon on the right side of time view
- Need able to swipe per-week
- Bar Chart need displayed in page
- Notice there are arrows on the bottom for down, netral and up arrows
- Comments list placed below the chart
12). Team Report - Weekly - List Chart
Screenshots: 06_3_report_week.png
- Click the List chart need load another line charts
- Icon on the right side need updated to bar chart
- You can use animation on initial all chart load
- Comments list placed below the chart
- Need able to select each line to display additional information (Screenshots: 06_4_report_week.png)
13). Team Report - Comments
Screenshots: 06_5_report_scroll.png
- Use this content when user scrolling the comments section
- Set Comment header fixed when reach this section
14). Profile
Screenshots: 07_2_profile.png
- This is Profile page, user landed to this page from Profile menu
- On top there’s user thumbnails
- And multiple of circle chart
- You can use animation on initial all chart load
- Let us know button need take to separate feedback screen
- List of users mood displayed in the bottom
15). Feedback
Screenshots: 07_3_app_feedback.png
- This is Feedback page
- User need able to type the content
- Cancel and submit button need take to Profile screen
16) Additional screens
Important: Not mandatory, but we will give a bonus $150 payment, if someone develops this. This is alternate way of voting. Not doing this will not affect your submission winning chances. Also, this payment will be eligible for only winners.
Screenshot: 09_4_additional_voting_concept.png
- After this you should navigate back to Screenshots: 01_4_home_vote.png with chosen selection.
- Consider this an additional screen which you can develop. If you are developing this screen, use 01_1_home_vote.png as base screen and put some kind of smiley icon as a button to toggle to this screen.
- 09_4_additional_voting_concept.png use a toggle button on this screen to take to alternate way of voting and take user to 01_1_home_vote.png
CODE REQUIREMENTS:
Ionic/Javascript
- Ionic framework and AngularJs are our main focus frameworks, you must use the ionic directives, and “think in Angular” when coding.
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
CSS
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Assets/Images
- Use SVG to make graphics look sharp on your submissions.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
- For all the image, please pull them as PNG format from provided Assets
- For all the icons, please pull them as SVG format from provided Assets
Browsers Requirements
- Native App on Android
- Native App on iOS
1. Source code zip file.
2. Packaged App in Android (APK) and iOS format
3. Compiling and building instructions.
4. List of frameworks / plugins used.
In this challenge, we are looking for your help to create Mobile Ionic application based on the provided storyboard using Ionic framework that will run as Native application on iOS and Android devices.
As part of this challenge we need you to create documentation of your Ionic application, we are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development.
Good luck and Let us know any questions you have!
General Tasks
- In this challenge we are converting the provided Storyboard to a working Ionic Application that will run on iPhone/Android devices.
- Make sure to test this on simulator/real devices, testing only on web browser is not sufficient and won’t ensure good performance/responsiveness on device.
- Make sure your submission supported the minimum screen sizes of both iOS and Android devices
- We need lock the application to Portrait mode
- Use latest version of the Ionic framework: http://ionicframework.com/
- Get familiar with Ionic Framework:
http://ionicframework.com/getting-started/
http://ionicframework.com/docs/
- Put clear comment for all Ionic codes
- Please use proper id’s and classes in your naming conventions.
- Challenge winner will be responsible to swap any PNG icons to SVG icons later.
Challenge Assets:
GDrive: https://drive.google.com/open?id=16QZoJKB5SMp1-wDQLnsz8S9R_kaLVzpM
- You can also download the design source file on challenge details page.
- Pull icons assets as SVG & image assets as PNG
- Use the attached SF Font files
Screen Requirements:
01). App Icon
- Create standard application icon for application on Android & iOS devices.
- Refer to this site for iOS App icon Guidelines: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/
- Refer to this site for Android App icon Guidelines: https://developer.android.com/guide/practices/ui_guidelines/icon_design.html
02). Splash Screen
- Create standard splash screen after user open the application
- After some seconds need take user go to Home page explained below
- Refer to this site for iOS Launch Screen Guidelines: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/launch-screen/
- Refer to this site for Android Splash screen Guidelines: https://android.jlelse.eu/launch-screen-in-android-the-right-way-aca7e8c31f52
03). Home first time
Screenshots: 01_0_home_vote_first_time.png
- This is home screen at first time user keep open the application.
- Overlay need displayed Welcome message. Also, there are Mood information for each node/branch and below the Microphone icon
- Make sure the placement consistent with storyboard
- Click Got it Button need hide the Overlay
04). Home Vote
Screenshots: 01_1_home_vote.png
- Hello user info displayed on top
- On this screen user need able to swipe from white circle to one of those 5 different colors
- Important: You need add new Home button on the bottom of this screen. Re-use same button similar with Got it button. Click the button need take user back to Home screen.
- When user start dragging from white circle the outer circle need display the related color (Screenshots: 01_2_home_vote.png)
- User just need able to drag along the dotted line only.
- When reach the colored node, need transform the outer circle into full opacity (Screenshots: 01_3_home_vote.png)
- After some seconds need auto redirect to Home Vote Respond explained below
- Also, there’s the mood information displayed on centered.
- To build the press, swipe gesture you can use this Gesture plugin: http://hammerjs.github.io/ Or, come up with your own suggestion. Let us know for confirmation
- Click the Mic button need able to load the similar screen like this (Screenshots: 01_6_home_vote_speak_feedback.png)
- Voice Recognition need only accept the available Mood texts
- Click submit need take user back to Vote screen with selected Mood based on recorded user voice
5). Home Voted Respond
Screenshots: 01_4_home_vote.png
- After selected the mood, need displayed this respond screen
- Notice there are 3 buttons that will always placed on the bottom for Mic button, keyboard and Next button
- Check page below for more information
6). Home Vote Feedback Type
Screenshots: 01_5_home_vote_type_feedback.png
- User click the keyboard button from the Home Voted Respond need load this screen
- Cancel need take back to previous screen
- Submit need captured the typed text
7). Home Vote Feedback Speak
Screenshots: 01_6_home_vote_speak_feedback.png
- User click the mic button from the Home Voted Respond need load this screen
- Need able to capture the voice user spoke of.
- Cancel need take back to previous screen
- Submit need captured the typed text and
8). Home after vote
Screenshots: 04_1_home_higher_hierarchy.png
- User landed on this page after click the Next button from the Home Voted Respond
- My Weekly mood displayed some circles on top of page, it represent 5 working day from Monday to Friday
- Important:
- Based upon the day of voting, color the specific day circle with mood color the user has chosen on 01_3_home_vote.png. with “Today” text under that particular circle.
E.g. if its Monday and user have chosen Happy, make 1st circle as green with “Today” text under 1st circle. And rest of the circle from Tue to Fri as Grey color. This Grey color circle will show no voting or future days of week.
E.g. if its Thu and I have chosen Sad, make 4th circle as Red with “Today” text under 1st circle. And rest of the circle from Monday to Wed show some chosen colors if user has vote or Grey color if mood not selected.Friday is a future day, so for that you should show 5th circle as Grey.
E.g. if its Wed and I have not chosen any mode today, make 3rd circle as Grey with “Today” text under 3rd circle. And rest of the circle from Monday and Tuesday will show some chosen colors if user has vote or Grey color if mood was not selected. Thursday and Friday is a future day, so for that you should show 4th and 5th circle also as Grey.
- Add a “Vote My Mood” button on top in the right corner of the screen, in the same line of text “My Weekly Mood” on far right. This button should take a user to 01_1_home_vote.png home vote screen for voting.
- Notice there’s Weekly digest below the circle are
- Create auto slide for the Weekly digest area (Screenshots: 04_2_home_higher_hierarchy.png)
- Today data need displayed by default
- My Weekly and tabs on the bottom need use fixed placement
- Use JSON file to load the Team Mood cards
- Match the color of donut chart
- You can use animation on initial all chart load
- Follow the gradient color
- There’s arrow next to Today arrow, put dead link for now
9). Team
Screenshots: 05_team.png
- User access this page from Team tab on the bottom
- Search button placed on top right
- Below the My Team title there’s swipeable date.
- Selected date use the white background
- Use JSON file to load the Team cards
- Show only 5 circles for each team
- Display each cards consists of Team Name
- You can use animation on initial all chart load
- On each card display title name and on the right side need display the message icon
- The biggest mood value from team need displayed big chart than the other
- Click each card need take to Team Report
- Comment icon with some numbers
- Click on comment icon should take to Screenshots: 06_5_report_scroll.png
10). Team Report - Daily
Screenshots: 06_1_report_day.png
- This is Report day look
- Need able to swipe the date
- Each new month need displayed the month
- Selected date need use black circle
- Bar Chart need displayed in page
- Always show 5 bars to show each mood. And based upon the day, week, month selection this data will change.
- You can use animation on initial all chart load
- Notice there are arrows on the bottom for down, netral and up arrows
- Comments list placed below the chart
11). Team Report - Weekly
Screenshots: 06_2_report_week.png
- For Weekly view, you need display the line chart icon on the right side of time view
- Need able to swipe per-week
- Bar Chart need displayed in page
- Notice there are arrows on the bottom for down, netral and up arrows
- Comments list placed below the chart
12). Team Report - Weekly - List Chart
Screenshots: 06_3_report_week.png
- Click the List chart need load another line charts
- Icon on the right side need updated to bar chart
- You can use animation on initial all chart load
- Comments list placed below the chart
- Need able to select each line to display additional information (Screenshots: 06_4_report_week.png)
13). Team Report - Comments
Screenshots: 06_5_report_scroll.png
- Use this content when user scrolling the comments section
- Set Comment header fixed when reach this section
14). Profile
Screenshots: 07_2_profile.png
- This is Profile page, user landed to this page from Profile menu
- On top there’s user thumbnails
- And multiple of circle chart
- You can use animation on initial all chart load
- Let us know button need take to separate feedback screen
- List of users mood displayed in the bottom
15). Feedback
Screenshots: 07_3_app_feedback.png
- This is Feedback page
- User need able to type the content
- Cancel and submit button need take to Profile screen
16) Additional screens
Important: Not mandatory, but we will give a bonus $150 payment, if someone develops this. This is alternate way of voting. Not doing this will not affect your submission winning chances. Also, this payment will be eligible for only winners.
Screenshot: 09_4_additional_voting_concept.png
- After this you should navigate back to Screenshots: 01_4_home_vote.png with chosen selection.
- Consider this an additional screen which you can develop. If you are developing this screen, use 01_1_home_vote.png as base screen and put some kind of smiley icon as a button to toggle to this screen.
- 09_4_additional_voting_concept.png use a toggle button on this screen to take to alternate way of voting and take user to 01_1_home_vote.png
CODE REQUIREMENTS:
Ionic/Javascript
- Ionic framework and AngularJs are our main focus frameworks, you must use the ionic directives, and “think in Angular” when coding.
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
CSS
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Assets/Images
- Use SVG to make graphics look sharp on your submissions.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
- For all the image, please pull them as PNG format from provided Assets
- For all the icons, please pull them as SVG format from provided Assets
Browsers Requirements
- Native App on Android
- Native App on iOS
Final Submission Guidelines
Things need to be submitted:1. Source code zip file.
2. Packaged App in Android (APK) and iOS format
3. Compiling and building instructions.
4. List of frameworks / plugins used.