Challenge Overview
CHALLENGE OVERVIEW
Welcome to the "SiBM - DES Web Specialists Contact Responsive App Prototype Challenge". The goal of this challenge is to create responsive HTML5 Prototype for our web specialist contact application using the provided wireframes and storyboards. The prototype must follow our standards and our guidelines. Review the details below.
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. We will allow documentation updates during final fixes (but still required).
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Competition Task Overview
The main task of this competition is to develop a Responsive HTML5 prototype based on the provided storyboard designs. Both Desktop and Mobile view are required for this challenge. It is very important that you pay attention to the responsiveness of your code to make sure it works in different devices.
Key Requirements:
- We would like to ensure prototype is responsive (consider leveraging Bootstrap, Foundation, Pure, etc.) - it needs to work in desktop and mobiles.
- Test in all the required browsers (see the list below)
- Ensure your submission is clear of validation errors and warnings (HTML, CSS, JS).
- You are provided with a wireframe and storyboards.
- Screens/layout in wireframes and storyboards might be different, wherever the screens/layout are different, storyboards takes precedence - please follow that! (Wireframe should be helpful with the flow).
- NOTE: We have provided storyboards for mobile and desktop and also wireframes that show the flow of the application in challenge forum!!
User Flow Scenario
Administrator:
- The administration is used via full web interface (i.e. mobile version should be working but not priority, so some features can be omitted)
- After login, the administrator user can create, delete or update rules.
- Also, Admin user can list all notifications generated by the tool (check log history).
User (not logged in):
- User can search for any information about IBM.com pages and report issues.
User (logged in):
- User can search for any information about IBM.com pages and report issues.
- User can additionally see information about himself/herself and update it, or provide/vote for suggestions to any web pages information.
Required Pages/Interactions
There are 2 user roles (Admin and User) that use this application and we need both roles to be created. Please create the following screens and interactions in the prototype :
General Requirements
- Make sure navigation and menu working in all devices
- Provide hover condition for all links and button in web devices
- For all input form in any screens (URL, email address, etc), please provide error condition if user entry wrong value
- IMPORTANT!! There are several differences between web and mobile screens, there are several areas that becomes hidden in mobile but available in web screen.
A. User Screens (Desktop and Mobile)
01. Search Screen
- WF references:
--- Mobile - Search "Non-Logged In" and "Logged In."
--- Web - Search "Non-Logged In Web" and Search "Logged In Web."
- Storyboard references:
--- Mobile - Mobile-NonLogin Folder -> 00.Search.jpg, 01.Search-Error.jpg (Non logged in User)
--- Mobile - Mobile-Logged Folder -> 02.Search.jpg, 03.Search-Error.jpg (Logged In User)
--- Desktop - Desktop User Folder -> 02.Search.jpg, 03.Search-Error.jpg (both for non and logged in user)
- Default page that will be open every time a user opens the app
- This page will be available for all users either they are logged in or not to the application
- Provide error condition if user entry wrong/invalid input or perform search query that break the rules.
- The "Search" button appear only after user finish enter the URL text in the available searchbox and once search submitted it gets information from tool and shows the result.
- There are several differences layout content between web and mobile, where several content on the web not included in the mobile parts, please be aware of it.
02. Search Result Screen
- WF references:
--- Mobile - Confirmed Contact (Non-Logged In) and (Logged In) & Web - Confirmed Contact (Non-Logged In) and (Logged In)
--- Mobile - Suggested Contacts (Non-Logged In) and (Logged In) & Web - Suggested Contacts (Non-Logged In) and (Logged In)
--- Mobile - No Contact (Non-Logged In) and (Logged In) & Web - No Contact (Non-Logged In) and (Logged In)
--- Mobile - Suggested Owners (Non-Logged In) and (Logged In) & Web - Suggested Owners (Non-Logged In) and (Logged In)
- Storyboard references:
--- Mobile - Mobile-NonLogin Folder -> 03.Result-Confirmed.jpg, 05.Result-Suggested.jpg (Non logged in User)
--- Mobile - Mobile-Logged Folder -> 05.Result-Confirmed.jpg, 06.Result-Suggested.jpg (Logged In User)
--- Desktop - Desktop User Folder -> 04.Search-Confirmed.jpg, 05.Search-Suggested.jpg (both for non and logged in user)
- Search should be a very simple screen that will show the most relevant result based on user criteria (there can be more than 1 result for URL but only the most relevant (based on created rules in administration) is used to display result)
- If the user does not find the correct result, they should be able to perform another search quickly from the top area.
- There are several differences in the content layout between web and mobile, where some of the web content is not included in the mobile view - please be aware of it.
- There are two types of contacts: "Owner" and "Contact person", they are independent (no relation between them) - in wireframes are shown cases when "Owner" is confirmed and "Contact person" has different status but the same statuses can apply for "Owner" as well (see "Suggested Owners" content to see how it looks like when both "Owner" and "Contact person" are not validated yet)
- This screen will have different content variation when showing the result depending on the owner/contact information completeness in the system:
--- If the search result have confirmed/validated "Owner" and/or "Contact person" in the system, then it will show "Confirmed Contact" content (for particular contact type).
--- If the search result have one or both of "Owner" and/or "Contact person" with the contact information not yet valid in the system, then it will show "Suggested Contact" content (for particular contact type).
--- If the search result don't have any "Owner" and/or "Contact person" then it will show "No Contact" content (for particular contact type).
- The differences between "non-logged in" and "logged in" user held in the ability for user to suggest and vote for suggested "Owner" and "Contact person". There will be a button to suggest these information for logged in user.
- A Confirmed/Valid owner and contact will be defined by the number of votes give to them by other user that suggest the owner and contact information.
- If user thinks the information is not correct, they can report the web page information to admin for revision.
03. Report Screen
- WF references:
--- Mobile - Report (Non-Logged In) and (Logged In)
- Storyboard references:
--- Mobile - Mobile-Logged Folder -> 07.Report.jpg (both for Non-Logged In and Logged In User)
--- Desktop - Desktop User Folder -> 07.Report.jpg (both for non and logged in user)
- If user thinks the information in the search result page is incorrect, they can report it to admin and ask for revision.
- This feature is available both for non-logged in and logged in user, the storyboard only provide screen for logged in user, please replicate the screen for non logged in user.
- Simple comment form to enter user report and a submit button to send the report.
- Ability to choose whether user want to get (periodically) notification about the report status or not.
- In web parts, this screen created as modal window in search result screen.
04. Login Screen
- WF references:
--- "Mobile - Login" and "Web - Login."
- Storyboard references:
--- Mobile - Mobile-Logged Folder -> 00.Login.jpg, 01.Login-Error.jpg (both for Non-Logged In and Logged In User)
--- Desktop - Desktop User Folder -> 00.Login.jpg, 01.Login-Error.jpg (both for non and logged in user)
- The user needs to log-in using IBM Intranet ID
- Provide ordinary login form (IBM ID as username, password, login button, etc.) as the layout content for this page.
- The application should also have a "remember me" so users do not need to log-in each time they want to use the application
- Provide error scenario when user input wrong credential or incomplete information.
05. Suggestion Contact Screen
- WF references:
--- "Mobile - Suggest Contact (Logged In)"
- Storyboard references:
--- Mobile - Mobile-Logged Folder -> 08.Suggested-Contact.jpg (Logged In User)
--- Desktop - Desktop User Folder -> 08.Suggest.jpg (Logged in user)
- This screen is only available for logged in user, user can access it from the "suggest" button/navigation in search result page.
- User will be able to recommends any IBM user as an owner and contact for particular IBM.com webpages including themselves as the owner and/or contact information.
- If there are already some contact suggestions there, user can "vote" for the suggested contact to make the contact confirmed/valid.
- There will be some calculation needed to move the contact status from "suggested" to "confirmed" state (vote more than 20 amount of people, etc.)
- If there are 3 contact suggestions already available and suggest new (4th) the one with lowest number of votes is removed from the list (the new one is kept, of course).
- In web parts, this screen created as modal window in search result screen.
06. Contact Screen
- WF references:
--- Mobile - Contact Details (Non-Logged In) & (Logged In)
--- Web - Contact Details (Non-Logged In)
- Storyboard references:
--- Mobile - Mobile-Logged Folder -> 09.Contact-Details.jpg (Logged In User)
--- Desktop - Desktop User Folder -> 06.Contact-Details.jpg (Logged in user)
- The user can navigate to see details information of owner/contact and reach them by contacting via mail (verse) by clicking the mail button.
07. Settings Screen
- WF references:
--- "Mobile - Suggest Contact (Logged In)"
- Storyboard references:
--- Mobile - Mobile-Logged Folder -> 10.MyProfile.jpg, 11.Edit-Profile.jpg, 12.Replace-All.jpg, 13.My-Confirmed-Contacts.jpg, 14.Replace-Contacts.jpg, 15.My-Suggested-Contacts.jpg (Logged In User)
--- Desktop - Desktop User Folder -> 09.My-Profile.jpg, 10.Replace-Contact.jpg (Logged in user)
- This screen is only available for logged in user, a user can access it from the "Update My Profile" button/navigation in the search page.
- The user can see their current profile and edit it if necessary.
- From this screen, they will be able to see their all records history in the apps which divide into three differents areas:
--- Replace All, Replace all records that connected to the user with someone else (mass replacement)s
--- My Confirmed Contacts, Manage all user records where the user mentioned as confirmed contacts (user can remove himself/herself or replace for single contact by another person)
--- My Suggested Contacts, Manage all user records where the user mentioned as suggested contacts (user can confirm himself/herself as contact or remove from suggestion list)
B. Admin Screens (Desktop Only)
08. Dashboard Screen
- WF references Admin - Dashboard
- Storyboard References - Desktop-Admin Folder -> 00.Dashboard.jpg, 01.Search-Result.jpg
- Default page for admin whenever they open the application
- This page will provide the admin a quick and easy navigation to check all apps features and apps information status.
- There is a list of recent application activity with clear icons to indicates the activity status. Admin can view latest activities or all activities (just ones that require attention). Items are removed from the list after the action is completed.
- Quick and simple search form to find information about IBM.com pages, please provide the search result page.
- Administrators need to have an interface to update data on web interface only (super user).
- List of administrators is kept within the tool.
- User can search using URLs, users, or rules :
--- If a URL, user name, or rule is entered, will find any rule that refers to the URL, any rule that has that rule-part, or any rule that involves that user's name.
--- If a user name is entered, will also find that user's profile.
09. Webpage Details Screen
- WF references Admin - Webpage Details (Confirmed Contact) (Suggested Contact) (Suggested Contact)
- Storyboard References - Desktop-Admin Folder -> 03.Webpage-Details.jpg
- Admin can access this page from search result and Admin can view details information about any IBM.com webpages in this page.
- There are three slightly different types of information that will be presented depending on the completeness of the information:
--- Confirmed Contact
--- Suggested Contact
--- No Contact
10. Users Details Screens
- WF references Admin - User Details
- Storyboard References - Desktop-Admin Folder -> 04.Manage-User-Details.jpg
- View users (found by search)
- View a user's profile (which shows where he is listed as owner, contact, or suggested contact)
- Contact users
- Confirm the user as a suggested contact, or remove them
11. Manage Rules Screens
- WF references Admin - Manage Users and Admin - Rule Create
- No Storyboard preferences - Reuse existing storyboard.
- Administrator will be able to manage all rules for the search criteria from this screen
- All rules that have been created will be appear on this screen so admin can easily check the rules.
- Administrator also will be able to create new rules for the search criteria by click "Create New Rules" button
- Admin can do the following things from this page :
- View rules
- Add new rules
- Edit rules
- Remove rules
- Filter the list.
12. Admin - Activity (Wrong Info Report)
- WF references Admin - Manage Webpages
- No Storyboard preferences - Reuse existing storyboard.
- All report from users will be available here
- The administrator can check all detail reports from the user regarding wrong information for owner/contact information in any IBM.com pages.
13. Get Help
- No wireframe references
- List of FAQ or tutorial to help and explaining any features in the apps to the administrator.
Target Audience
- Global IBM Employees
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- 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
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- 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)
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any 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.
- You are allowed to use JQuery (MIT License) for this contest.
Browsers Requirements:
- Android Mobile Browser
- Mobile Safari on iOS
- Internet Explorer 9+ on PC
- Firefox on Mac / PC
- Chrome on Mac / PC
- Safari on Mac
- Chrome on iOS / Android
Documentation Provided:
- Storyboard and Source files
- Wireframes
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.