Challenge Summary
Welcome to "CultureWorks - Tone Analyzer App Design Concepts Challenge". In this challenge, we need your creative skills and help us create the best UX/UI screens for our new Tone Analyzer app that will help our user to analyze their written communication tone using IBM Watson Tone Analyzer tools. The tools will be created as two parts, as a browser extension and the other as a web app.
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!
Web Browser Extension Design
01) Web Browser Extension Icon
02) Web Browser Extension Login Screen
03) Web Browser Extension Option Screen
Web Application Design
04) Homepage Screen
05) Tone Profile Screen
06) New Document Screen
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Web Browser Extension Design
01) Web Browser Extension Icon
02) Web Browser Extension Login Screen
03) Web Browser Extension Option Screen
Web Application Design
04) Homepage Screen
05) Tone Profile Screen
06) New Document Screen
07) Upload Document Screen
08) Setting Screen
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
We are in need to create a tool for users to aggregate written communications for analysis of the overall tone using IBM's Watson Tone Analyzer. The user/employees will need to collect their own emails and analyze them. The user will use web browser extension as a tool to read and collect their email and the readout should be a dashboard and have an export option.
This tool will allow people to understand his or her tone in written communications. It will aggregate selected communications and provide the user with a tone profile dashboard, which may also be exported to PDF. The tone profile will give individuals awareness of how he or she typically communicates with others. The tone is analyzed by sending the written text through the Watson Tone Analyzer APIs, then it is aggregated to present a holistic score per person.
Challenge Goal
Create the best UX/UI for our Tone Analyzer app (Web Browser Extension and Web App) that able to build awareness of tone in written communications to create a more empathetic workplace.
Use Case
- Individual wants to get a Tone Profile for himself or herself
- Individual wants to get a Tone Profile for corporate communications (ie – function/team lead collects comms for the whole function/team)
Design Consideration
- Needs to focus on the best practice of dashboard design to presenting important information
- This tool must be easily accessible, and it must be simple (low effort) for an individual to collect their own communications to generate the tone profile.
- The tool is individual specific and could contain sensitive information so it may be required to authenticate or something for security reasons.
- The output should be easy to consume and understand.
- The ultimate goal is that the individual walks away with an understanding of how they use tone in communications so they can take action on improving that going forward.
- Depending on complexity, users may be able to redo their score at other times if they would like to use other communications as well.
- Needs to consider for a Responsive website (We are focusing on Desktop for now, with an option for mobile development in the future - out of scope)
- Easy to understand flow from page to page, users can go back and exit throughout.
- Intuitive for the user; should never be left asking "what do I do next?"
- Simple, clean, modern, crisp, professional.
- Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)
Tone Analyzer App Functionality
- The web browser extension should allow the user to connect and navigate them to a web app for these workflows:
-- View profile of historical communications from
-- Edit content in an online document that serves as the catch-all for communications written outside of the tools listed above
- The web browser extension will be able to scan emails after authentication to create the Tone profile, this should only include:
-- Email message that is written “from” the user (note – replies in the thread need to be ignored)
-- The Email messages need to be more than 80 words
-- Upload of a zip folder containing doc, docx and txt files
-- Time period no greater than last 1 year
-- Ability to regenerate profile to include most recent emails
-- Should be able to PDF export the dashboard (only key charts, not all detailed charts are needed in export)
-- Possible functionality depending feasibility – the ability to filter / view data (options could be who sending email to, others?)
-- The web browser extension should allow users to view Tone score of an email directly from the browser and then see changes to tone after updating any text
-- Option to upload a logo to the web app
Target Devices
- Desktop, 1366px minimum width with height adjusted accordingly
- Web Browser Extension (Chrome)
Branding Guidelines
- Clean, Simple, Professional look and feel.
- Design style, font, and colors are open to Designer.
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=636913
Screen Requirements
General Requirements
- The Tone Analyzer application will be separated into two parts, the web browser extension, and the web application.
- The following pages need to be designed/considered in your concepts. Please note that the screen functionality details listed below are only suggested functionality for consideration.
- Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
- Keep it as simple as possible
Web Browser Extension Design
01) Web Browser Extension Icon
Refer to Page 6 from Tone Analyzer Dashboard Requirements.pdf
- Need to create “Tone Analyzer” Icon App that will be used as an extension button in the web browser, Text Area field, and for branding purpose
- Create 5 different size for the icons: 16x16px, 32x32px, 48x48px, 96x96px, and 128x128px
- The Icon needs to be able reflecting our application purpose
- You can read more details and see some example of web browser extension and the icon requirements from these links:
-- https://developer.chrome.com/apps/manifest/icons
-- https://developer.chrome.com/webstore/images#iconsize
-- https://chrome.google.com/webstore/category/extensions
- A sample of web browser extension (only for references): https://www.grammarly.com/
02) Web Browser Extension Login Screen
No Wireframe References
- User need to authenticate themselves before able to use the Tone Analyzer app
- User needs to login in order to use the extension
- Ordinary login form (username/password/submit/remember me) to connect with their Tone Analyzer account
- Need to see some error login scenario
03) Web Browser Extension Option Screen
Refer to Page 7 from Tone Analyzer Dashboard Requirements.pdf
- After logged-in, the user will need to give permission so the Tone Analyzer app can be doing the following things:
-- Scanning user historical email content from the email page that they currently opened in the browser to create their Tone Profile
-- Help user by analyzing the message score when creating new email content draft
- Once permission granted, the user will be able to select those two features mentioned above.
- If the user chooses a feature to scan their historical email, the app will start to scan user historical emails to create their Tone profile (show a progress bar for this):
-- The app extension should be able to scanning historical emails based on the following criteria:
--- The email was written by the user (note – replies in the thread need to be ignored)
--- The email messages need to be over than 80 words
--- The email that has a zip folder which containing doc, docx and txt files
--- The email time period is no greater than last 1 year
--- Most recent emails
--- Possible functionality depending feasibility – ability to filter / view data (for ex: who sending email to, etc?)
-- Provide settings option to manage the email scanning criteria above
-- Once scanning complete, the extension will provide a button that redirects a user to the web app which allows users to view their tone profile result
-- User is allowed to re-scan the historical emails to update the profile and when doing rescan, the user will be given an option to keep or replace the old/previous profile data with the new profile data
- If the user chooses for the app help to analyze their written email draft:
-- The user will need to write down the email content draft to the email compose form from their default email web page or they can go to the web app (the extension need to provide button/link so they can navigate to the web app) and write down the content in a text area provided in “new document” screen.
-- Once the user finish write down their written email draft (either in their email compose form page or via web app form page), they will be able to ask the app extension or the web app to analyze the draft content and provide the content score result (as a popup), whether it met the tone that they want to see in the content. If the score not met their criteria, the user can edit/refine the content draft again and repeat the process until the score result met their tone expectation.
Web Application Design
04) Homepage Screen
Refer to Page 3 from Tone Analyzer Dashboard Requirements.pdf
- This screen will become a marketing page for the user, explaining the application purpose, ability, benefit of using the application, and any available features that will increase user loyalty to use the app
- Show user logged history? Previous profile, etc?
05) Tone Profile Screen
Refer to Page 4 from Tone Analyzer Dashboard Requirements.pdf
- Create a Tone profile dashboard design that showing the result of Tone analysis after analyzing the user emails
- The dashboard needs to have at least the following content:
-- Profile Summary
-- Overall Tone Details
-- Key Callouts Detail
-- Tone Over Time Detail
-- Drill Down Detail
- Please see "Dashboard Tone Profile Content.pdf" for more information about the content details needed in the dashboard
- Needs to have a chart that showing aggregate Tone along with the label to explain the emotional tone definitions
- Needs to highlight some of the important information from the analysis result to the user (how many documents/emails/etc that were analyzed, most used, least used, used together, most changed, etc)
- Would also love to see some data content based on time (week, month, year)
- Ability to see more details from the dashboard to get more insight about the Tone result
- Will need some filter available in the dashboard (filter by Tone emotion, month, document, etc)
- Export Tone Profile result to PDF
- We need creative ways to show the data visualization. Please be creative, do not just following the content reference we provide in this challenge!
06) New Document Screen
Refer to Page 5 from Tone Analyzer Dashboard Requirements.pdf
- The web application will have an ability to add/edit new content (new email draft created by the user) via an online form that serves as the catch-all for communications written outside of the emails.
- Add new document - allow the user to enter manual content into textbox or textarea field and show a real-time tone analysis.
- Once the user entered the written content/message draft to the form, the user will be able to analyze the docs and the app will provide the following results:
-- The text field/text area will show analysis of their message content result for the new email draft (same like what happened to the compose email UI form using the extension) via popup. If the result does not satisfy the user, they can repeat the action (edit the content message) and ask the app to analyze it again.
-- Need to provide a way where the user can submit the result to create Tone profile or update the existing Tone Profile that previously created. The entered text will be applied to user's profile after submitted (very optional - not our high priority right now, as this is more intended for live edits)
07) Upload Document Screen
No wireframe references
- Upload documents - allow the user to upload a zip file or any text documents to create or update the profile. Upload documents should allow multiple documents in a zip to be uploaded.
- Once the user finishes uploading the document, they will start the analysis process (maybe add some progress bar here for the interactions?) and once it’s finished, the user will be redirected to the result tone dashboard screen to see their Tone Profile result.
08) Setting Screen
No Wireframe References
- Ability to update user profile and password
- Ability to set email permission (can be multiple email accounts like Outlook, Gmail, etc)
- Ability to upload a logo for the web app (customize app/features)
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it within your notes/comment this link while you upload).
Documentation
- Tone Analyzer Dashboard Requirements.pdf
- Dashboard Tone Profile Content.pdf
Target Audience
- Global employees of all levels
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- The overall design and user experience
- Cleanliness of screen design and user flow
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
- Submit JPG/PNG image files based on Challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop, Illustrator (Need to be converted into photoshop later), XD or Sketch and saved as an editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
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!
Round 1
Submit your initial Design for a Checkpoint FeedbackWeb Browser Extension Design
01) Web Browser Extension Icon
02) Web Browser Extension Login Screen
03) Web Browser Extension Option Screen
Web Application Design
04) Homepage Screen
05) Tone Profile Screen
06) New Document Screen
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your final Design plus Checkpoint UpdatesWeb Browser Extension Design
01) Web Browser Extension Icon
02) Web Browser Extension Login Screen
03) Web Browser Extension Option Screen
Web Application Design
04) Homepage Screen
05) Tone Profile Screen
06) New Document Screen
07) Upload Document Screen
08) Setting Screen
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
We are in need to create a tool for users to aggregate written communications for analysis of the overall tone using IBM's Watson Tone Analyzer. The user/employees will need to collect their own emails and analyze them. The user will use web browser extension as a tool to read and collect their email and the readout should be a dashboard and have an export option.
This tool will allow people to understand his or her tone in written communications. It will aggregate selected communications and provide the user with a tone profile dashboard, which may also be exported to PDF. The tone profile will give individuals awareness of how he or she typically communicates with others. The tone is analyzed by sending the written text through the Watson Tone Analyzer APIs, then it is aggregated to present a holistic score per person.
Challenge Goal
Create the best UX/UI for our Tone Analyzer app (Web Browser Extension and Web App) that able to build awareness of tone in written communications to create a more empathetic workplace.
Use Case
- Individual wants to get a Tone Profile for himself or herself
- Individual wants to get a Tone Profile for corporate communications (ie – function/team lead collects comms for the whole function/team)
Design Consideration
- Needs to focus on the best practice of dashboard design to presenting important information
- This tool must be easily accessible, and it must be simple (low effort) for an individual to collect their own communications to generate the tone profile.
- The tool is individual specific and could contain sensitive information so it may be required to authenticate or something for security reasons.
- The output should be easy to consume and understand.
- The ultimate goal is that the individual walks away with an understanding of how they use tone in communications so they can take action on improving that going forward.
- Depending on complexity, users may be able to redo their score at other times if they would like to use other communications as well.
- Needs to consider for a Responsive website (We are focusing on Desktop for now, with an option for mobile development in the future - out of scope)
- Easy to understand flow from page to page, users can go back and exit throughout.
- Intuitive for the user; should never be left asking "what do I do next?"
- Simple, clean, modern, crisp, professional.
- Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)
Tone Analyzer App Functionality
- The web browser extension should allow the user to connect and navigate them to a web app for these workflows:
-- View profile of historical communications from
-- Edit content in an online document that serves as the catch-all for communications written outside of the tools listed above
- The web browser extension will be able to scan emails after authentication to create the Tone profile, this should only include:
-- Email message that is written “from” the user (note – replies in the thread need to be ignored)
-- The Email messages need to be more than 80 words
-- Upload of a zip folder containing doc, docx and txt files
-- Time period no greater than last 1 year
-- Ability to regenerate profile to include most recent emails
-- Should be able to PDF export the dashboard (only key charts, not all detailed charts are needed in export)
-- Possible functionality depending feasibility – the ability to filter / view data (options could be who sending email to, others?)
-- The web browser extension should allow users to view Tone score of an email directly from the browser and then see changes to tone after updating any text
-- Option to upload a logo to the web app
Target Devices
- Desktop, 1366px minimum width with height adjusted accordingly
- Web Browser Extension (Chrome)
Branding Guidelines
- Clean, Simple, Professional look and feel.
- Design style, font, and colors are open to Designer.
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=636913
Screen Requirements
General Requirements
- The Tone Analyzer application will be separated into two parts, the web browser extension, and the web application.
- The following pages need to be designed/considered in your concepts. Please note that the screen functionality details listed below are only suggested functionality for consideration.
- Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
- Keep it as simple as possible
Web Browser Extension Design
01) Web Browser Extension Icon
Refer to Page 6 from Tone Analyzer Dashboard Requirements.pdf
- Need to create “Tone Analyzer” Icon App that will be used as an extension button in the web browser, Text Area field, and for branding purpose
- Create 5 different size for the icons: 16x16px, 32x32px, 48x48px, 96x96px, and 128x128px
- The Icon needs to be able reflecting our application purpose
- You can read more details and see some example of web browser extension and the icon requirements from these links:
-- https://developer.chrome.com/apps/manifest/icons
-- https://developer.chrome.com/webstore/images#iconsize
-- https://chrome.google.com/webstore/category/extensions
- A sample of web browser extension (only for references): https://www.grammarly.com/
02) Web Browser Extension Login Screen
No Wireframe References
- User need to authenticate themselves before able to use the Tone Analyzer app
- User needs to login in order to use the extension
- Ordinary login form (username/password/submit/remember me) to connect with their Tone Analyzer account
- Need to see some error login scenario
03) Web Browser Extension Option Screen
Refer to Page 7 from Tone Analyzer Dashboard Requirements.pdf
- After logged-in, the user will need to give permission so the Tone Analyzer app can be doing the following things:
-- Scanning user historical email content from the email page that they currently opened in the browser to create their Tone Profile
-- Help user by analyzing the message score when creating new email content draft
- Once permission granted, the user will be able to select those two features mentioned above.
- If the user chooses a feature to scan their historical email, the app will start to scan user historical emails to create their Tone profile (show a progress bar for this):
-- The app extension should be able to scanning historical emails based on the following criteria:
--- The email was written by the user (note – replies in the thread need to be ignored)
--- The email messages need to be over than 80 words
--- The email that has a zip folder which containing doc, docx and txt files
--- The email time period is no greater than last 1 year
--- Most recent emails
--- Possible functionality depending feasibility – ability to filter / view data (for ex: who sending email to, etc?)
-- Provide settings option to manage the email scanning criteria above
-- Once scanning complete, the extension will provide a button that redirects a user to the web app which allows users to view their tone profile result
-- User is allowed to re-scan the historical emails to update the profile and when doing rescan, the user will be given an option to keep or replace the old/previous profile data with the new profile data
- If the user chooses for the app help to analyze their written email draft:
-- The user will need to write down the email content draft to the email compose form from their default email web page or they can go to the web app (the extension need to provide button/link so they can navigate to the web app) and write down the content in a text area provided in “new document” screen.
-- Once the user finish write down their written email draft (either in their email compose form page or via web app form page), they will be able to ask the app extension or the web app to analyze the draft content and provide the content score result (as a popup), whether it met the tone that they want to see in the content. If the score not met their criteria, the user can edit/refine the content draft again and repeat the process until the score result met their tone expectation.
Web Application Design
04) Homepage Screen
Refer to Page 3 from Tone Analyzer Dashboard Requirements.pdf
- This screen will become a marketing page for the user, explaining the application purpose, ability, benefit of using the application, and any available features that will increase user loyalty to use the app
- Show user logged history? Previous profile, etc?
05) Tone Profile Screen
Refer to Page 4 from Tone Analyzer Dashboard Requirements.pdf
- Create a Tone profile dashboard design that showing the result of Tone analysis after analyzing the user emails
- The dashboard needs to have at least the following content:
-- Profile Summary
-- Overall Tone Details
-- Key Callouts Detail
-- Tone Over Time Detail
-- Drill Down Detail
- Please see "Dashboard Tone Profile Content.pdf" for more information about the content details needed in the dashboard
- Needs to have a chart that showing aggregate Tone along with the label to explain the emotional tone definitions
- Needs to highlight some of the important information from the analysis result to the user (how many documents/emails/etc that were analyzed, most used, least used, used together, most changed, etc)
- Would also love to see some data content based on time (week, month, year)
- Ability to see more details from the dashboard to get more insight about the Tone result
- Will need some filter available in the dashboard (filter by Tone emotion, month, document, etc)
- Export Tone Profile result to PDF
- We need creative ways to show the data visualization. Please be creative, do not just following the content reference we provide in this challenge!
06) New Document Screen
Refer to Page 5 from Tone Analyzer Dashboard Requirements.pdf
- The web application will have an ability to add/edit new content (new email draft created by the user) via an online form that serves as the catch-all for communications written outside of the emails.
- Add new document - allow the user to enter manual content into textbox or textarea field and show a real-time tone analysis.
- Once the user entered the written content/message draft to the form, the user will be able to analyze the docs and the app will provide the following results:
-- The text field/text area will show analysis of their message content result for the new email draft (same like what happened to the compose email UI form using the extension) via popup. If the result does not satisfy the user, they can repeat the action (edit the content message) and ask the app to analyze it again.
-- Need to provide a way where the user can submit the result to create Tone profile or update the existing Tone Profile that previously created. The entered text will be applied to user's profile after submitted (very optional - not our high priority right now, as this is more intended for live edits)
07) Upload Document Screen
No wireframe references
- Upload documents - allow the user to upload a zip file or any text documents to create or update the profile. Upload documents should allow multiple documents in a zip to be uploaded.
- Once the user finishes uploading the document, they will start the analysis process (maybe add some progress bar here for the interactions?) and once it’s finished, the user will be redirected to the result tone dashboard screen to see their Tone Profile result.
08) Setting Screen
No Wireframe References
- Ability to update user profile and password
- Ability to set email permission (can be multiple email accounts like Outlook, Gmail, etc)
- Ability to upload a logo for the web app (customize app/features)
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it within your notes/comment this link while you upload).
Documentation
- Tone Analyzer Dashboard Requirements.pdf
- Dashboard Tone Profile Content.pdf
Target Audience
- Global employees of all levels
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- The overall design and user experience
- Cleanliness of screen design and user flow
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
- Submit JPG/PNG image files based on Challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop, Illustrator (Need to be converted into photoshop later), XD or Sketch and saved as an editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.