Dinnaco - Counseling Matching Application UI Prototype Challenge

Welcome to "Dinnaco - Counseling Matching Application UI Prototype Challenge". We need your help in building out our new Counseling Matching application, which will become an internal portal used by our employees to connect counselor and counselees.  A counselor is a more senior employee that mentors and formally represents the counsellees (more junior employee) during performance review meetings.  The main purpose of this app is to create a tool that can provide the best method to facilitate introductions among people across the firm. One of our key focus is on the UI/UX interactions and bringing clean and modern (creative) solutions to how this application should work. What should the user see and experience when using the application!

We ran a design challenge last week which wrapped up with some high quality submissions. Now, we would like to take the winning submission from the design challenge and build a working UI prototype using AngularJS. The design sources are provided as part of challenge forums.

This app will be designed to be a responsive web app, which will primarily be used on a desktop (1280px) - this should  be your primary focus for this challenge. However, please keep in mind this prototype needs to be responsive since it will be designed for additional devices (mobile/tablet) in the future.  Also, your prototype must work properly in all the required browsers.

All screens provided in the storyboard are in scope.

01. Login Screen
- Swiping through the carousel should change the label (e.g. FACILITATING INTRODUCTIONS)  and associated text (e.g. Sed ut…)
- Clicking on the SIGN IN button - show a modal dialog with 2 radio buttons - 'Login using SSO' and 'Login using your credentials'.
- Clicking 'Login using SSO' should log the counselee in directly and take them to 02-Dashboard screen.
- Clicking 'Login using your credentials' should show email, password fields and buttons for Cancel & Login on the same modal.
- Use dummy email & password values for now and mask the password field
- Implement null validations for email & password
- Implement validations for email field
- Pressing 'Cancel' dismisses the modal
- Pressing 'Login' with both username & password takes the counselee to 02-Dashboard screen.
- Provide dummy credentials for counselor, counselee and talent to walk through the respective flows.

02-1. Dashboard Screen
- Make sure the email and phone links on the left bar are clickable
- Clicking the 'Initiate Counselor Switching' button takes the counselee to 02-2-Dashboard Step Info screen.
- Clicking the 'Take Preference Quiz' button takes the counselee to 03-1-Preference Quiz screen
- Clicking the Learn more about the switching process - open a modal dialog with loem ipsum text

02-2. Dashboard Step Info Screen
- These are the various steps involved in switching a counselor
- Clicking on any steps should take the counselee to respective screen. E.g. 'Take Preference Quiz' should take the counselee to 03.1 screen.
- Similarly, clicking other items takes the counselee to respective screens

03-1. Preference Quiz Screen
- Only clickable action is 'Start' which takes the counselee to 03-2. screen

03-2 to 03-5. Preference Quiz Questions Screen
- Next button should only be enabled once the user has answered the current question
- Do not show 'Back' on the first question
- Keep 'Next' disabled on the last question

04. Dashboard Quiz Taken Screen
- Clicking 'Update Profile' in the sidebar takes counselee to 05. Update Profile screen
- Clicking 'Learn more about switching process' opens a modal dialog with lorem ipsum text
- Clicking 'Initiate Counselor Matching' takes user to 07. screen

05. Update Profile Screen
- Pre-fill the fields shown in screen with dummy text
- Primary Industry, Secondary Industry are single select dropdown field in edit mode, use dummy values for now. Change Secondary industry value based on primary industry chosen
- Interests & Hobbies - make it a multi-select in edit model with the mentioned values
- Clicking Edit Info opens the profile in editable mod
- Clicking 'Submit' takes the counselee to 06. Dashboard Profile Updated screen.

06. Dashboard Profile Updated Screen
- Clicking 'Initiate Counselor Switching' takes counselee to 07. Dashboard View & Rank Matches Screen
- Clicking 'Update Profile' takes the user back to 05. screen

07. Dashboard View & Rank Matches Screen
- Clicking 'Continue' will take the counselee to 08. View & Sort Matches Screen

08. View & Sort Matches Screen
- By default, show the listview (not gridview) as shown in the screen design
- Sort by Best Matches sorts the data on 'Overall Matches' score in descending order
- Provide 'Sort by Name', 'Sort by Location' and 'Sort by Industry' options
- Default sort should be based on 'Overall Matches' score
- All sorts should allow both ascending & descending options
- 'Display 10' - provide additional options for 'Display 25, 'Display 50' and 'Display All'
- Implement pagination using page numbers as shown
- Allow filtering based on name, location or industry
- Marking a user as 'Favorite' by clicking the star makes that counselor as starred
- The 'View Profile' button opens the profile view. This is ths same as 'Edit Profile' screen but opened in a read-only mode and without the buttons.

09-1. View & Sort Matches - Grid View Screen
- Choosing the grid layout from the top right options will switch the view from listview to gridview
- All other functions work the same manner as listview

09-2. View & Sort Matches - Filter Screen
- Clicking on the Filter button in the top right options will open the Filter screen
- Populate dropdowns with dummy values
- Hitting Refresh button will reset all filters
- Hitting Apply will modify the Counselor list based on chosen filter criteria

10. View & Sort Matches Screen (showing top preference counselors)
- All starred counselors should show in the right sidebar
- Counselee should be able to move any counselor up/ down using the shown arrow buttons
- HItting Submit will take counselee to Screen 11.

11. Dashboard - Waiting for Approval Screen
- Allow counselee to toggle SMS & Email options
- Transition the counselee to 12. Dashboard - New Manager Assigned Screen after a 10 second timer.

12. Dashboard - New Manager Assigned Screen
- Stub the 'Next Steps with my counselor' button action for now

14. Counselor Dashboard Screen
- This is the screen a counselor will see when they login.
- For 'Update Profile' for counselors, implement the same screen 05. Update Profile
- Assume each counselee can have up to 4 counselors. Implement the 'My Counselees' section  to show dummy counselee data.
- Clicking 'Review' takes the counselor  to Review List screen.

15-1 to 15-5 Preference Quiz Screen
- Similar as 03-1 to 03-5 Preference Quiz screens

16. Update Profile Screen
- Similar as 05. Update Profile screen

17. Review List Screen
- Implement Sorting, Filtering and other operations similar to as described in Screen 08.
- Profile' opens the Edit profile view in read only mode and without the buttons
- Clicking Reject or Accept should remove that counselee from the list view

18. Review Grid Screen
- Similar to 09-1. Screen for counselors

19-1 to 19-2. Counselor Dashboard - New Counselee Approved

20-1 to 20-2. Talent Dashboard Screen
- Implement header options for Sort, Display, pagination similar to other listview screens
- Clicking Reject or Accept should remove that row from the list view
- Keep 'All Service Lines' as the only option in dropdown
- Sorting options  - Best matches, Counselor, Counselee
- Clicking the Export button (top rightmost) should load the data in a tabular view as shown in 21.

21. Export Preview Screen
- Clicking 'Save' should export all data to a CSV file

KEY CONSIDERATIONS

- The prototype must be responsive and built using HTML5 / CSS / Angular.js. Use of jQuery is permissible. Use of Angular is REQUIRED
- 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.
- 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.
- Your HTML code must be valid HTML5 and follow best practices
- 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.
- No inline CSS styles - all styles must be placed in an external stylesheet.
- 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.

 

JavaScript Libraries/Plugins

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.

Browser Requirements

Desktop (latest versions)

• - Chrome

• - Safari

• - Firefox

• - IE11

Tablet/Mobile

• - While your designs should be responsive, you do not need to focus on mobile / tablet screen sizes for this challenge. The focus of this challenge should be web app.

 

Final Submission Guidelines

1) Upload your code as a .zip file to the Submit and Review tool for this contest.
2) Upload documentation for how to run your submission (deployment guide)
3) Winner will be required to submit a pull request against the branch specified