Challenge Overview
Welcome to the "Mjolnir Web App Prototype Challenge #1". In this UI Prototype Challenge, we need your help to create a responsive HTML5 prototype for our client’s web application. We are planning to create this portal as a responsive website, but for now, we are going to focus on Desktop/Web version only. We’re already building an Ionic app for the client for mobile and tablet form factors.
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) flow for the application.
Assets provided in Forums (available on registration)
- MarvelApp Link
- Design Sources
- You can find it in Challenge Forum -> UI Prototype Documents.
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.
You should use angular-cli for setting up a clean/lean scaffolded project. We don’t desire tests.
Screen Requirements
Overall
- 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.
The following screens for employer role are in scope.
1. Home/Landing
- See marvelapp screens, from 0.0 Landing to 0.5 Landing.
- Video from top background should loop infinitely.
- When scrolling, a fixed header takes place (e.g. link).
- Get Started button opens the signup page.
- Clicking Login should navigate the user to login screen.
- Clicking Sign Up for Free should navigate the user to sign up screen (3a Sign Up Alternate)
2. Login
- It should be the same as signup, removing Full Name field (just email/password) and replacing “create your account” with “Sign in”.
3. Register
- See marvelapp screens, from 03a Sign Up to 03c Select Profile Type.
- The page height is 100vh (maximum possible browser height).
- Video loop SHOULD NOT match the current home video loop. Instead, the video will start playing until it is about half done and then the signup fields fade in. After the video is finished it stops on that last frame and stays still right there without looping. The initial user experience is so important at that video with the fade in is very powerful.
- All content is going to scroll vertically on the right side. Left column stays fixed with the sliding welcome carousel.
- Left side holds welcome screens. They rotate automatically each X seconds. People can have the ability to click through the slides on this same page by clicking on the dots. They should slide onto the screen from the left as each bubble/dot is pressed.
- All fields are mandatory.
- User should not be able to move to next screen until they chose at least one option - Now the fun begins button must be disabled and carousel navigation to move to next step must also be disabled until user has selected at least one option.
- Select the business profile by default.
4. Create Business Account
- See marvelapp screens, from 03d to 03f Office Build2.
- User can skip or skip to end from step 7 for employer profile.
- The provided text in each textbox is a placeholder which should be removed as soon as the user moves focus to these fields
- 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.
- 3f- Office Build 2: User can select one or more checkboxes. User can also enter details in the ‘Other’ textbox.
- 3f- Office Build 3: Similar logic to above.
- 3f- Office Build 4: User can click on ‘Profile Picture’ or any of the + buttons to select a photo from local system. Once all photos from + signs have been uploaded, it should add another + button below the row of + signs.
- 3f- Office Build 5: All fields are mandatory.
- 3f- Office Build 7, 3f- Office Build 8, 3f- Office Build 10: Clicking Skip should take user to next screen. Clicking Skip to End should take user to the last step in the registration process.
- 3f- Office Build 9: Clicking Skip should take user to next screen. Clicking Skip to End should take user to the last step in the registration process. User should be able to add title by clicking on respective nodes. When user clicks +, it should add a new node with ‘Add Title’ below the selection
- 3f- Office Build 11: Clicking Skip should take user to next screen. Nothing happens on ‘Click here to link’ buttons.
- 3f- Office Build 12: Add a step 12 below the 11th. Clicking on step 12 activates the copy modal. Clicking ‘Start from Scratch’ should take user to 3d - Office User-First Modal.
5. Dashboard - Profiles
See marvelapp screens, from 4a Profiles to 4a Profiles Multitask button.
- Arrows should like/dislike a card. It requires a animation that fades-in incoming cards (from bottom), and fades-out outgoing cards (on top).
- Opportunities tab/link on the left side must be functional.
- Clicking the Heart icon will show share profile and request endorsement options.
6. Notifications
Offline Mode
- When user receives a notification and he is not online, they will gather in the form of a list that comes out of the bell icon.
- Notifications overlay pop out from the top right bell icon. Notifications should have immediate actions available for the user. Notifications are split/grouped by categories. We’re missing one type of notification, create a mockup one for "Request for a Phone Interview".
Online Mode
- When user receives a notification and he is online (using the webapp), the notifications will sum up to the bell icon (+1) and the content will slide in the form of a bubble to call user’s attention.
- Notifications will pop out to online users on this manner (all types of notifications).
- Notification item pending discussion, create a demo for this type of notification too.
- Document how to access these different types of notifications.
7. Main Menu
- See marvelapp screens, from 4f, 4g and 4j.
Profile Switch
- Show profile switching. A user can switch between business and employee accounts.
- User should be able to scroll through many offices. Highlighted default card corresponds to user card, the user can click on the profile they want to highlight.
- FYI: Most people will only have a user card here as most people will be users. The next group will have a user card and an office card but probably nothing else. That because this group is the single dentist practice group, which is most dentists that own a practice. The last group will be group practices, which will have a user card and then multiple office cards
Create Office Overlay
- Show create new office overlay. Activated from 4g menu office.jpg, clicking on the + button.
Any other employer screens/ employee screens not listed above are NOT in scope.
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) flow for the application.
Assets provided in Forums (available on registration)
- MarvelApp Link
- Design Sources
- You can find it in Challenge Forum -> UI Prototype Documents.
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.
You should use angular-cli for setting up a clean/lean scaffolded project. We don’t desire tests.
Screen Requirements
Overall
- 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.
The following screens for employer role are in scope.
1. Home/Landing
- See marvelapp screens, from 0.0 Landing to 0.5 Landing.
- Video from top background should loop infinitely.
- When scrolling, a fixed header takes place (e.g. link).
- Get Started button opens the signup page.
- Clicking Login should navigate the user to login screen.
- Clicking Sign Up for Free should navigate the user to sign up screen (3a Sign Up Alternate)
2. Login
- It should be the same as signup, removing Full Name field (just email/password) and replacing “create your account” with “Sign in”.
3. Register
- See marvelapp screens, from 03a Sign Up to 03c Select Profile Type.
- The page height is 100vh (maximum possible browser height).
- Video loop SHOULD NOT match the current home video loop. Instead, the video will start playing until it is about half done and then the signup fields fade in. After the video is finished it stops on that last frame and stays still right there without looping. The initial user experience is so important at that video with the fade in is very powerful.
- All content is going to scroll vertically on the right side. Left column stays fixed with the sliding welcome carousel.
- Left side holds welcome screens. They rotate automatically each X seconds. People can have the ability to click through the slides on this same page by clicking on the dots. They should slide onto the screen from the left as each bubble/dot is pressed.
- All fields are mandatory.
- User should not be able to move to next screen until they chose at least one option - Now the fun begins button must be disabled and carousel navigation to move to next step must also be disabled until user has selected at least one option.
- Select the business profile by default.
4. Create Business Account
- See marvelapp screens, from 03d to 03f Office Build2.
- User can skip or skip to end from step 7 for employer profile.
- The provided text in each textbox is a placeholder which should be removed as soon as the user moves focus to these fields
- 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.
- 3f- Office Build 2: User can select one or more checkboxes. User can also enter details in the ‘Other’ textbox.
- 3f- Office Build 3: Similar logic to above.
- 3f- Office Build 4: User can click on ‘Profile Picture’ or any of the + buttons to select a photo from local system. Once all photos from + signs have been uploaded, it should add another + button below the row of + signs.
- 3f- Office Build 5: All fields are mandatory.
- 3f- Office Build 7, 3f- Office Build 8, 3f- Office Build 10: Clicking Skip should take user to next screen. Clicking Skip to End should take user to the last step in the registration process.
- 3f- Office Build 9: Clicking Skip should take user to next screen. Clicking Skip to End should take user to the last step in the registration process. User should be able to add title by clicking on respective nodes. When user clicks +, it should add a new node with ‘Add Title’ below the selection
- 3f- Office Build 11: Clicking Skip should take user to next screen. Nothing happens on ‘Click here to link’ buttons.
- 3f- Office Build 12: Add a step 12 below the 11th. Clicking on step 12 activates the copy modal. Clicking ‘Start from Scratch’ should take user to 3d - Office User-First Modal.
5. Dashboard - Profiles
See marvelapp screens, from 4a Profiles to 4a Profiles Multitask button.
- Arrows should like/dislike a card. It requires a animation that fades-in incoming cards (from bottom), and fades-out outgoing cards (on top).
- Opportunities tab/link on the left side must be functional.
- Clicking the Heart icon will show share profile and request endorsement options.
6. Notifications
Offline Mode
- When user receives a notification and he is not online, they will gather in the form of a list that comes out of the bell icon.
- Notifications overlay pop out from the top right bell icon. Notifications should have immediate actions available for the user. Notifications are split/grouped by categories. We’re missing one type of notification, create a mockup one for "Request for a Phone Interview".
Online Mode
- When user receives a notification and he is online (using the webapp), the notifications will sum up to the bell icon (+1) and the content will slide in the form of a bubble to call user’s attention.
- Notifications will pop out to online users on this manner (all types of notifications).
- Notification item pending discussion, create a demo for this type of notification too.
- Document how to access these different types of notifications.
7. Main Menu
- See marvelapp screens, from 4f, 4g and 4j.
Profile Switch
- Show profile switching. A user can switch between business and employee accounts.
- User should be able to scroll through many offices. Highlighted default card corresponds to user card, the user can click on the profile they want to highlight.
- FYI: Most people will only have a user card here as most people will be users. The next group will have a user card and an office card but probably nothing else. That because this group is the single dentist practice group, which is most dentists that own a practice. The last group will be group practices, which will have a user card and then multiple office cards
Create Office Overlay
- Show create new office overlay. Activated from 4g menu office.jpg, clicking on the + button.
Any other employer screens/ employee screens not listed above are NOT in scope.
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
Final Submission Guidelines
- UI Prototype source code.
- Documentation instructions to run your submission.
- A complete list of UI prototype deliverables can be viewed at UI Prototype Tutorial.