Challenge Overview
Welcome to Hepius - Call Transcription and Sentiment Analysis - UI Prototype Challenge, in this challenge we are looking for you help to create a desktop tool for the employees of one of the largest healthcare companies who sell related devices worldwide for different healthcare providers to be able to monitor and analyse their customer calls in order to enhance their services.
The purpose of this project is to develop a desktop tool that will be used by the client’s employees to analyse two party customer calls (between an agent and a customer) and make decisions based on the insights.
Customer calls will be automatically transcribed and analysed by utilizing Microsoft Azure Cognitive services. As a result the key topics of the recording will be identified so as sections of the conversation will be classified into categories e.g. positive or a negative interaction.
The tool will allow its users to see the results of the analysis along with an opportunity to listen to the recording and parts of it as well.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Requirements:
The scope of this challenge is to take the UI designs we did for Hepius Call Transcriptions and create a frontend prototype to later we integrate with Backend API.
Note: All data can be hardcoded, we DON'T NEED json implemented in this challenge.
#1: Login
#2: Dashboard
#2.1: Number Of Calls, Average Call Duration and Topics
#2.2: Data
#2.3: Sentiment Analysis
#2.4: Call Records
#2.5: Agents, Customer and Topics tables
#3: Call Record Details
#3.1: Record Detials
#3.2: Topic Identified
#3.3: Sentiment Analysis Trends
#3.4: Sentence
- Please check forum.
Important:
- You can use latest Angular
- To charts, you need to use D3.js
- Focus on Desktop screen size only.
- Components must re-usable. The component should be derived based on the configuration. Configuration file to contain the required configurations required to render the page
- Use Linter, Jest and other best practice library to maintain your code quality.
- Your submission must follow Angular Coding Guidelines
- Put clear comment/documentation for all components
- Create README.txt file that explains how to deploy your submission, structure, and commands
- Create clear documentation to set up your submission locally
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
- We are recommends combination of Angular and Bootstrap for this challenge. Make sure to follow the best practices for the technology
- 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.
- 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.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
Web Browsers Requirements
- IE11
- Microsoft Edge
- Firefox latest version
- Safari latest version
- Chrome latest version
- Source Code
- README file, contains how to deploy the submission and server environment
Final Submission:
- For each member, the final submission should be uploaded to Online Review Tool
The purpose of this project is to develop a desktop tool that will be used by the client’s employees to analyse two party customer calls (between an agent and a customer) and make decisions based on the insights.
Customer calls will be automatically transcribed and analysed by utilizing Microsoft Azure Cognitive services. As a result the key topics of the recording will be identified so as sections of the conversation will be classified into categories e.g. positive or a negative interaction.
The tool will allow its users to see the results of the analysis along with an opportunity to listen to the recording and parts of it as well.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Requirements:
The scope of this challenge is to take the UI designs we did for Hepius Call Transcriptions and create a frontend prototype to later we integrate with Backend API.
Note: All data can be hardcoded, we DON'T NEED json implemented in this challenge.
#1: Login
- You can hardcoded the login function, but please provide a way to test fail login. (add how test in README file)
- Forgot password is deadlink
- Click in Sign In if successful go to Dashboard
#2: Dashboard
- All card/widget need be created with reusable components, so similar cards will share the same component, ex:
- Number Of Calls, Average Call Duration and Topics have the same layout: title, tabs, menu
- Data and Sentiment Analysis have only title.
- Switch button on top right need show/hide the first row
- If click in Logout button need back to login page
- Logo and Profile name are deadlink
#2.1: Number Of Calls, Average Call Duration and Topics
- Buttons on top Hour, Day and Month need functional and change X-axis from graph
- Graph need be created with d3js
- When click in dot menu will show popup with range select, this will represent currently selected date Hour, Day or Month
#2.2: Data
- Graph need be created with d3js
#2.3: Sentiment Analysis
- Pie Chart need be created with d3js.
- Label need part of chart. (You ref. this: http://bl.ocks.org/dbuezas/9306799, but keep design like storyboard)
#2.4: Call Records
- Create search filter, but not need implement function
- When click in Filter need to show filter options (https://marvelapp.com/1f795116/screen/56776865)
- All filters field needed to be created and save values when click in Filter or Clear values when click in Clear. (Not just need save values to vars, not need create any call function for now)
- Sort, just show asc and desc icon, not need implement sort function.
- Length of Call, need be: Play icon, Text and Placeholder image
- Pagination, just show active, disabled and normal status, not need to implement function.
- Implement hover status: https://marvelapp.com/1f795116/screen/56776863
- When click on any item in table need go to Call Record Details
#2.5: Agents, Customer and Topics tables
- Same like Call Records, search and filter will be the same, just need change table area.
#3: Call Record Details
- Reuse cards/widget modules when possible
- If click in back icon need back to dashboard page
- Export button is deadlink
#3.1: Record Detials
- Is a simple table with 2 columns
#3.2: Topic Identified
- Icons on right, show active icon in center. Make deadlink
- Sound wave can be placeholder for now
- Audio control on bottom need create layout, but not need by functional, just create HTML/CSS.
#3.3: Sentiment Analysis Trends
- Graph need be created with d3js
#3.4: Sentence
- Search on top, reuse style from search in dashboard, so if we change the layout/style will refresh in both fields
- Please check forum.
Important:
- You can use latest Angular
- To charts, you need to use D3.js
- Focus on Desktop screen size only.
- Components must re-usable. The component should be derived based on the configuration. Configuration file to contain the required configurations required to render the page
- Use Linter, Jest and other best practice library to maintain your code quality.
- Your submission must follow Angular Coding Guidelines
- Put clear comment/documentation for all components
- Create README.txt file that explains how to deploy your submission, structure, and commands
- Create clear documentation to set up your submission locally
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
- We are recommends combination of Angular and Bootstrap for this challenge. Make sure to follow the best practices for the technology
- 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.
- 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.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
Web Browsers Requirements
- IE11
- Microsoft Edge
- Firefox latest version
- Safari latest version
- Chrome latest version
Final Submission Guidelines
- A complete list of UI prototype deliverables can be viewed at UI Prototype Tutorial- Source Code
- README file, contains how to deploy the submission and server environment
Final Submission:
- For each member, the final submission should be uploaded to Online Review Tool