Challenge Overview
Welcome to the Mjolnir Web App Prototype Challenge #2. In this UI Prototype Challenge, we need your help to create a responsive HTML5 prototype for our client’s web application. This is the continuation of a previous challenge but you don’t need to have joined the previous one in order to complete this competition. You are provided with a baseline code and new features to develop.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background Overview
Dental offices and patients meet the ultimate application to help them finding the perfect match for their needs! We leveraged the Topcoder community to come up with a fun and engaging design in earlier challenges. Now, we want to translate the design into a responsive UI prototype. This is the first out of the two challenges that we’ll be running to build out the UI prototype.
Application Users
The application will be used by two types of persons, employer (also referred to as business user) (dental practical office) and employee. Both of them are searching for matches to either hire or to be hired respectively.
Note that an application user can be both dental practical office and employee at the same time. This particular challenge focuses on the business user (employer) and part of the regular/employee user flow for the application.
Assets provided in Forums (available on registration)
- Prototype.
- MarvelApp Link.
- Design Sources
Primary Goal
- Create desktop UI Prototype (Desktop Only) based on provided designs.
- Please match the storyboards as close as possible.
- Please comment your HTML/JavaScript/CSS/etc code. We need a clear explanation of the code to help us figure all the code functions and make it easier for future developers and the client to understand what you have built.
Target Devices
- Desktop only for this challenge
Competition Task Overview
The main task of this competition is to develop a desktop HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
On this challenge we are focusing on completing the employer/business profile flow and starting the employee user role screens.
Screen Requirements
Overall
- Only screens mentioned below are in scope for the challenge - see this folder for specific screens in scope.
- Replicate the design of the approved Storyboards (PSD or Ai Files) for all pages mentioned below.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Data for UI (forms, details views, etc) should come from JSON in order to easily integrate with API responses.
- Ensure your submission clear of HTML and CSS Validation error and warning.
- Test in all the required browsers.
1. Employer Main Menu
- See Employer folder, screen 4k to 4t.
Activity
- See Employer folder, 4k page.
- Items scroll vertically.
- Clicking on the left arrow next to the Activity page title goes back to the main menu page.
Offices
- See Employer folder, 4h and 4i screens.
- Create list and grid views.
- There is an inconsistency in the search bar, make it regular (dimensions - follow 4h).
- Clicking on the grid icon must switch the view. Please create a simple list icon when toggling the views (missing from design).
- Search functionality is out of scope.
- Clicking on the left arrow next to the Offices page title goes back to the main menu page.
Settings
- See Employer folder, from 4l to 4t screens.
- Clicking on titles (Notifications, Help, etc) should expand/collapse these sections.
- Share popup should read “Click … ” instead of “Tap ...” for desktop version.
- After clicking any of the “Save” buttons (e.g. Email address - 4n) display one of the existing already coded overlays to display a confirmation notification.
- 4q overlay is triggered after clicking Help.
- 4r overlay is triggered after clicking Contact Us.
- 4s overlay is triggered after clicking Make a Suggestion.
2. Employer Benches
- See Employer folder, all 4b screens.
List View
- See 4b Benches.jpg.
- New Matches scroll horizontally.
- Benches scroll vertically.
- SOS button should exist on the bench main page only. SOS popup will also show on that page, not on this one (design misplacement).
- The “+” button will open an overlay (from existing design - sample) with title text field and cancel/add links. Once added the new bench is added to the existing list of benches.
Details View
- See 4b Expanded.
- Bench details page can allow reordering cards by drag & drop feature. Clicking the edit icon (pencil) allows dragging the cards.
- Schedule a phone call popup (triggered with red clock icon) should read “Schedule a Phone Interview”. In order to simplify dev efforts, please use a third party calendar, just skin it to match the app colors. Something like this: https://danielykpan.github.io/date-time-picker/. We wouldn't require the next two screens.
- Message button will activate an overlay (similarly done as for the + add bench overlay) with message and cancel/send links.
- “Most Ideal” tag must be position-related to the first top card. “Least Ideal” tag must be position-related to the last bottom card. Consider there could be only 5 cards, so these tags should allocate properly.
3. Employer Search
- See Employer folder, all 4c and 4d screens.
Cards View
- 4d search.jpg is the default view.
- Friends and Potential Hires tabs must be functional. They will display the same cards format, shuffle them a bit on toggling to give a realistic impression of changing.
Settings
- Clicking the settings button triggers the settings flow (all 4c screens).
- The app has slight differences depending on which profile is selected in the main menu section. In this instance the profile selected in the Users section of the app would be an Office profile as the toggle button says Friends and Potential Hires. This same person could switch to their individual profile and the toggle would change to Friends and Opportunities.
- Top section with Pedontotist, 4 to 5 years, etc, are all drop downs.
- Add a “Save Filter” button above Search button simulating the mobile app.
- Clicking on Custom Filters opens a page similar to this one. Adapt it to desktop.
4. Employer Friends
- See Employer folder, screen 4e Friends.
- Friends, endorsements and friend requests scroll horizontally.
- Messages scroll vertically.
- Action map: 1 activates the message overlay (see requirement 2); 2 activates a confirmation overlay - take from existing design/code with the message: Friendship accepted - ok button; 3 activates an overlay - take from existing design/code with the message: are you sure you want to reject this user? confirm/cancel buttons.
5. Employer Profile - viewed by Employer
- See Employer folder, screens 5c to 7b.
- This view (5c) is triggered by clicking the edit button on the main menu page.
- Pictures on top can slide through the left/right arrows.
- Heart, clock and stripe buttons will always float to the bottom of the screen no matter the scrolling (fixed).
- There are several editable features (address, chart, skills, endorsements, subscription, review services, etc). Make sure to add them.
- In 5c, below subscription it should read “Edit Subscription” instead of administrators. This button triggers 7a. For the moment, display 7b with clicking “Great, let’s go” from 7a.
- There’s a design inconsistency in 5f, overall cards with should follow 5d/e (plus button triggers the request endorsement popup).
- Share popup should read “Click … ” instead of “Tap ...” for desktop version.
6. Employer Profile - viewed by Employee
- See Employer folder, screen 5a.
- Read-only version of #5c.
- This view is triggered by clicking on a card from the Employee Dashboard (see requirement 8 below).
7. Create an employee account
- See Employee folder, from 1.4 until 1.19. Process starts when user selects “create an employee profile” option and clicks let’s start.
- Logic for employee build out process is quite the same as the existing employer/business profile.
- Once all fields are filled, the next section ‘2’ must be enabled and expanded. The ‘1’ must be replaced with a tick mark. Follow the same logic for all subsequent steps.
- The provided text in each textbox is a placeholder which should be removed as soon as the user moves focus to these fields.
- User can skip or skip to end from step 5 for employee profile.
- Remove type dropdown in 1.7.
- In step 13, school name text field must be an autocomplete.
Employer/Business Flow Fix
- See employee/business profile build out.
- When a person chooses to first set up a business office profile they must start by setting up a basic user profile first. Meaning that the confirmation popup should show up first, then move the user to the regular/employee user profile build out, then after finishing that employee profile, user would be brought back to business profile process. This flow needs to be set up in the current prototype.
8. Employee Dashboard - Profiles
- See Employee folder, screens 2.0 and 2.1.
- Same logic as in Employer dashboard. Arrows should like/dislike a card with the same fading animation.
- Opportunities tab/link on the left side must be functional.
- Clicking the burger icon will show share profile and request endorsement options.
- Opportunities tab will show cards with persons data, as on this screen.
Specific HTML/CSS/JavaScript Requirements
HTML/HTML5
- Provide comments on the page elements 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 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 on the scorecard.
CSS3
- 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 creating 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
- It is mandatory to use Angular 2.0 for this challenge. Please use Angular CLI - clean scaffolding. Tests are NOT required.
- 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.
Browsers Requirements (Latest versions of)
- Chrome
- Safari
- Firefox
- IE11 and Edge
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background Overview
Dental offices and patients meet the ultimate application to help them finding the perfect match for their needs! We leveraged the Topcoder community to come up with a fun and engaging design in earlier challenges. Now, we want to translate the design into a responsive UI prototype. This is the first out of the two challenges that we’ll be running to build out the UI prototype.
Application Users
The application will be used by two types of persons, employer (also referred to as business user) (dental practical office) and employee. Both of them are searching for matches to either hire or to be hired respectively.
Note that an application user can be both dental practical office and employee at the same time. This particular challenge focuses on the business user (employer) and part of the regular/employee user flow for the application.
Assets provided in Forums (available on registration)
- Prototype.
- MarvelApp Link.
- Design Sources
Primary Goal
- Create desktop UI Prototype (Desktop Only) based on provided designs.
- Please match the storyboards as close as possible.
- Please comment your HTML/JavaScript/CSS/etc code. We need a clear explanation of the code to help us figure all the code functions and make it easier for future developers and the client to understand what you have built.
Target Devices
- Desktop only for this challenge
Competition Task Overview
The main task of this competition is to develop a desktop HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
On this challenge we are focusing on completing the employer/business profile flow and starting the employee user role screens.
Screen Requirements
Overall
- Only screens mentioned below are in scope for the challenge - see this folder for specific screens in scope.
- Replicate the design of the approved Storyboards (PSD or Ai Files) for all pages mentioned below.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Data for UI (forms, details views, etc) should come from JSON in order to easily integrate with API responses.
- Ensure your submission clear of HTML and CSS Validation error and warning.
- Test in all the required browsers.
1. Employer Main Menu
- See Employer folder, screen 4k to 4t.
Activity
- See Employer folder, 4k page.
- Items scroll vertically.
- Clicking on the left arrow next to the Activity page title goes back to the main menu page.
Offices
- See Employer folder, 4h and 4i screens.
- Create list and grid views.
- There is an inconsistency in the search bar, make it regular (dimensions - follow 4h).
- Clicking on the grid icon must switch the view. Please create a simple list icon when toggling the views (missing from design).
- Search functionality is out of scope.
- Clicking on the left arrow next to the Offices page title goes back to the main menu page.
Settings
- See Employer folder, from 4l to 4t screens.
- Clicking on titles (Notifications, Help, etc) should expand/collapse these sections.
- Share popup should read “Click … ” instead of “Tap ...” for desktop version.
- After clicking any of the “Save” buttons (e.g. Email address - 4n) display one of the existing already coded overlays to display a confirmation notification.
- 4q overlay is triggered after clicking Help.
- 4r overlay is triggered after clicking Contact Us.
- 4s overlay is triggered after clicking Make a Suggestion.
2. Employer Benches
- See Employer folder, all 4b screens.
List View
- See 4b Benches.jpg.
- New Matches scroll horizontally.
- Benches scroll vertically.
- SOS button should exist on the bench main page only. SOS popup will also show on that page, not on this one (design misplacement).
- The “+” button will open an overlay (from existing design - sample) with title text field and cancel/add links. Once added the new bench is added to the existing list of benches.
Details View
- See 4b Expanded.
- Bench details page can allow reordering cards by drag & drop feature. Clicking the edit icon (pencil) allows dragging the cards.
- Schedule a phone call popup (triggered with red clock icon) should read “Schedule a Phone Interview”. In order to simplify dev efforts, please use a third party calendar, just skin it to match the app colors. Something like this: https://danielykpan.github.io/date-time-picker/. We wouldn't require the next two screens.
- Message button will activate an overlay (similarly done as for the + add bench overlay) with message and cancel/send links.
- “Most Ideal” tag must be position-related to the first top card. “Least Ideal” tag must be position-related to the last bottom card. Consider there could be only 5 cards, so these tags should allocate properly.
3. Employer Search
- See Employer folder, all 4c and 4d screens.
Cards View
- 4d search.jpg is the default view.
- Friends and Potential Hires tabs must be functional. They will display the same cards format, shuffle them a bit on toggling to give a realistic impression of changing.
Settings
- Clicking the settings button triggers the settings flow (all 4c screens).
- The app has slight differences depending on which profile is selected in the main menu section. In this instance the profile selected in the Users section of the app would be an Office profile as the toggle button says Friends and Potential Hires. This same person could switch to their individual profile and the toggle would change to Friends and Opportunities.
- Top section with Pedontotist, 4 to 5 years, etc, are all drop downs.
- Add a “Save Filter” button above Search button simulating the mobile app.
- Clicking on Custom Filters opens a page similar to this one. Adapt it to desktop.
4. Employer Friends
- See Employer folder, screen 4e Friends.
- Friends, endorsements and friend requests scroll horizontally.
- Messages scroll vertically.
- Action map: 1 activates the message overlay (see requirement 2); 2 activates a confirmation overlay - take from existing design/code with the message: Friendship accepted - ok button; 3 activates an overlay - take from existing design/code with the message: are you sure you want to reject this user? confirm/cancel buttons.
5. Employer Profile - viewed by Employer
- See Employer folder, screens 5c to 7b.
- This view (5c) is triggered by clicking the edit button on the main menu page.
- Pictures on top can slide through the left/right arrows.
- Heart, clock and stripe buttons will always float to the bottom of the screen no matter the scrolling (fixed).
- There are several editable features (address, chart, skills, endorsements, subscription, review services, etc). Make sure to add them.
- In 5c, below subscription it should read “Edit Subscription” instead of administrators. This button triggers 7a. For the moment, display 7b with clicking “Great, let’s go” from 7a.
- There’s a design inconsistency in 5f, overall cards with should follow 5d/e (plus button triggers the request endorsement popup).
- Share popup should read “Click … ” instead of “Tap ...” for desktop version.
6. Employer Profile - viewed by Employee
- See Employer folder, screen 5a.
- Read-only version of #5c.
- This view is triggered by clicking on a card from the Employee Dashboard (see requirement 8 below).
7. Create an employee account
- See Employee folder, from 1.4 until 1.19. Process starts when user selects “create an employee profile” option and clicks let’s start.
- Logic for employee build out process is quite the same as the existing employer/business profile.
- Once all fields are filled, the next section ‘2’ must be enabled and expanded. The ‘1’ must be replaced with a tick mark. Follow the same logic for all subsequent steps.
- The provided text in each textbox is a placeholder which should be removed as soon as the user moves focus to these fields.
- User can skip or skip to end from step 5 for employee profile.
- Remove type dropdown in 1.7.
- In step 13, school name text field must be an autocomplete.
Employer/Business Flow Fix
- See employee/business profile build out.
- When a person chooses to first set up a business office profile they must start by setting up a basic user profile first. Meaning that the confirmation popup should show up first, then move the user to the regular/employee user profile build out, then after finishing that employee profile, user would be brought back to business profile process. This flow needs to be set up in the current prototype.
8. Employee Dashboard - Profiles
- See Employee folder, screens 2.0 and 2.1.
- Same logic as in Employer dashboard. Arrows should like/dislike a card with the same fading animation.
- Opportunities tab/link on the left side must be functional.
- Clicking the burger icon will show share profile and request endorsement options.
- Opportunities tab will show cards with persons data, as on this screen.
Specific HTML/CSS/JavaScript Requirements
HTML/HTML5
- Provide comments on the page elements 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 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 on the scorecard.
CSS3
- 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 creating 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
- It is mandatory to use Angular 2.0 for this challenge. Please use Angular CLI - clean scaffolding. Tests are NOT required.
- 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.
Browsers Requirements (Latest versions of)
- Chrome
- Safari
- Firefox
- IE11 and Edge