Challenge Overview
Welcome to Folla Mobile App UI Prototype Challenge. The main task of this project is to create the Folla Mobile App UI Prototype based on the provided PSD Storyboard design.
This challenge is focused on creating the HTML5 mobile prototype (targeting iPhone) with the focus eventually being a hybrid application.
NOTE: This application is using Bootstrap (http://getbootstrap.com/getting-started) or feel free suggest us other hybrid frameworks like AngularJS or ionic Framework
As part of this challenge we need you to document your HTML5/CSS3/JavaScript code (using best practices). We are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development. As this challenge is a FAST challenge we will allow documentation updates during final fixes if needed.
Final Submission Guidelines
Challenge Details
We are looking to get this prototype done for a Dreamforce presentation! So your submission might be the prototype we use in San Francisco!
- All pages need use fluid layout when transform into Landscape or Portrait view. (Portrait is the priority!)
- Provided storyboard is Retina version, your submission need support Standard version too
- As possible we need all pages on this prototype linked with each other. Let us know if you need clarification about the flow.
- Match similar fonts in your submission.
- Pay attention to the detail - let us know if need any clarifications
- See 00_click_paths.png for the interactions/click-path
Notes:
- We want to be able to save/bookmark the prototype to the iPhone home screen and open the prototype with fullscreen and no browser bars. Make sure to implement your prototoype so it works this way.
- Home screen should include the application icon.
Files Downloadable
storyboard.zip - Storyboard Design
UI Prototype Page Requirements
0. Index page
- Create index.html contains links for these 2 flows:
-- User
-- Manager
- Depending on who is logging in the Dashboard with contain different features
I. Flow For User Role
1. Login
Reference screenshot: 01_login.png
- Page background should fill the screen
- Landscape: Plan for how this looks in landscape view
- Appirio Folla logo placed on top of screen
- There’s icons for username and Password fields
- Show placeholder text for both input. Password field can swapped into asterisk character
- Forgot Password link always placed in the bottom of page
- Sign In button take user to Dashboard page
2. Dashboard
Reference screenshot: 03_dashboard.png, 04_1_satisfaction.png, 04_2_satisfaction.png
- This is default Dashboard page look
- Search button placed in the right side of header bar
- Tap Search button, need show search input.
- While search input show, other content need to show overlay background
- Search input need ability to use voice command. See the icon in the right side of input
- Cancel button need hide the search input
- When user on search input need show native keyboard screen (screenshot: 03_2_dashboard.png)
- Build autocomplete function when user start typing (screenshot: 03_3_dashboard.png)
- Divide autocomplete result by Job roles
- Match typography for autocomplete result
- The user see's their projects and can tap and select their "fun factor" for the day
- 04_1_satisfaction.png appears the when user taps the face/fun factor icon
- 04_1_satisfaction.png: Fun Factor: When selecting your fun factor the icon changes (screenshot: 04_2_satisfaction.png)
- 04_1_satisfaction.png: Fun Factor: Below the fun factor select the user can input text
- 04_1_satisfaction.png: The native keyboard need automatically show when user open this screen
- Cancel button will close the screen selection
- Submit button will capture user satisfaction icon and background based on the selection (screenshot: 05_1_dashboard.png, screenshot: 05_2_dashboard.png, screenshot: 05_3_dashboard.png, screenshot: 05_4_dashboard.png, screenshot: 05_5_dashboard.png)
- There are 3 tabs on the Dashboard (Active, Past, All)
- Show Active tab by default
- Match active state style for tab
- Each row will display Project Type with icon, Project title, Project rating and My Average
- Past and All tabs can use same data for now
- Each row it tapable and will take the user to Project Detail page
- Project icon types, create some files you are labeled differently (Sales Cloud, Service Cloud, Workday HR, Workday Financials, Mobile, Crowd, Acceleration Practices)
3. Project Details
Reference screenshot: 06_1_project_details.png
- This is the Project Details page
- Top left arrow button will take the user back to Dashboard page
- History icon placed in the right side of header bar and takes the user to the History page
- Project information placed below the header
- There’s Project type icon, title and other information
- Please show different icon color variation
- Also, there’s configurable line/pulse chart
- Project details show 2 column/grid layout of the project team
- Each boxe will show user thumbnail, wrapped by css rounded style
- User thumbnail is clickable and take user to Member Details page
- User Fun Factor/Satisfaction icon is placed on top right of the thumbnail
- Tap icon above the thumbnail need show floating information (06_1_project_details.png)
- Rate button placed below.
- Blue rate button means the team member is not rated yet. Tap this button show up Rate screen (screenshot: 07_1_rate.png)
- Cancel and Submit button will take the user back to detail page
- This is Rate screen, user can toggle star button (screenshot: 07_2_rate.png)
- If user tap on the last star button, previous star button need automatically selected
- User can type on textarea
- Native keyboard show up by default
- Grey Rated button mean user already rated.
- Show correct background color based on User Satisfaction icon
- Text need editable and wrapped if filled with more text
- When user tap the history icon that placed on top right of header need show HIstory screen (screenshot: 08_1_history.png)
- Arrow button need take user to Project Detail page
- There is a dropdown menu to select the date. tap this need show the Calendar (screenshot: 08_2_history.png)
- When user select another date need hide the calendar and show dropdown bar
- Notice the list show overlay background when calendar show up
- Match calendar styling for current day
- Make sure user can tap the prev and next arrows or swipe to access another months
- Show list of user with feedback information
- User thumbnail is clickable and take user to Member Details page
- User can also swipe left and right will go to previous and next date's history
4. Member Details
Reference screenshot: 09_member_details.png
- Back arrow button will take the user to Project Details page
- Match Member information with text, line chart and new bar chart
- Pulse/Line and bar chart need filled whole screen and configurable
- Match different bar chart color.
- Match number of bar between group.
- Each bar need have possibility to set these color ranges from high to low:
-- Dark Green
-- Light Green
-- Blue
-- Yellow
-- Red
- There is a dropdown menu to show up the calendar
- Ratings by team members show up below user information
- Match information for each row
5. My Rating
Reference screenshot: 10_1_my_rating.png, 05_6_nav.png
- My Rating appears/is reached from the left navigation
- Menu and search button placed on header area
- Match user information and pulse/line chart
- Show 3 tabs for the content are
- When user tap on each row, need show additional area for “View Rating History” and “View Project Details” links (screenshot: 10_2_my_rating.png)
- Click “View Rating History” take user to this screen (screenshot: 11_user_rating_history.png)
- Click “View Project Details” take user to this Project Details page
- Back button need take user to My Rating page
- Need show dropdown arrow to let user change the calendar
6. My Satisfaction
Reference screenshot: 12_my_satisfaction.png, 05_6_nav.png
- My Satisfaction appears/is reached from the left navigation (we should change the title into My Fun Factor)
- Show correct User satisfaction information below header bar
- Need show bar chart with correct coloring
- Show list of all Fun Factors
II. Flow For Manager Role
7. Login
- Re-use login page from User role
- But, Sign In button need take user to Manager Dashboard
8. Manager Dashboard
Reference screenshot: 13_manager_dashboard.png
- Basically you can re-use dashboard page from User role
- The differences for Manager role, there’s User Fun Factor/Satisfaction icon that placed in the right side
- Also, My Avg updated into Avg Rating
- Rows will take the user to the Project Details page
9. Manager Project Details
Reference screenshot: 14_manager_project_details.png
- Basically you can re-use Project Details page from User role
- The differences for Manager role, there’s User satisfaction icon that placed in the right side
- Also, below the project information, there’s bar for satisfaction slider
- And, no need display Rate/Rated buttons
- Tap on each rows need take to Project Details page
- Tap on user thumbnail need take to Member Details
10. Manager Member Details
Reference screenshot: 15_member_details.png
- Basically you can re-use Member Details page from User role
- No differences with Member Details page from User role
11. Manager Member Satisfaction
Reference screenshot: 16_members_satisfaction.png
- Manager arrives here from the Fun Factor/Satisfaction bar on the project details page
- Need show bar chart with correct coloring
- Need show dropdown arrow that will open the calendar
- Show list of all satisfaction
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.
- All elements should be Pixel Precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
CODE REQUIREMENTS:
HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- 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.
Javascript
- All JavaScript must not have a copyright by a third party. 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.
Browsers Requirements
- Safari Browsers on iPhone (Landscape & Portrait View)