Challenge Summary
In this challenge, we are looking for the topcoder community to come up with design concepts for the chatbot maintenance tool. The main purpose of this tool is to manage Talk Scripts.
We are sharing the wireframes to help you get started.
Really excited to get started with this design challenge.
Round 1
Submit your initial designs for a checkpoint feedback- As a part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Make sure to include a URL/comment the link to your marvelapp while uploading your submission
- Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final designs with all checkpoint feedback implemented.- As a part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Make sure to include a URL/comment the link to your marvelapp while uploading your submission
- Make sure all pages have the correct flow! Use correct file numbering. (00, 01, 02, 03)
~
Challenge Details
The purpose of this challenge is to come up with a refreshing UI and provide the best user experience to the users.
Design Considerations
- We are looking for a simple, easy-to-use, Informative design.
- Branding is open to designers.
- We have shared the wireframes that will help.
- Have your designs of size, 1366px width, and height as required.
Required Designs
Below screens are in scope for this challenge.
01 Logs
- Show the log information.
- We will also need to show log information on "who accessed the tool and when it was accessed, who accessed the scripts, check-in/check-out, publish talk scripts".
02 User Management:
- Users are imported from the SFDC system. SFDC might have 100’s of users not all needed
- Users are assigned Admin or Designer role
- Admin has access to all screens, while designer only to their list and the talk script designer
- Only role management is in scope for this challenge.
03 The landing page
- List the talk scripts available, with status, publish date.
- Provide options to edit, create, set future to publish dates or publish now
04 Talk Script designer
The designer has to ensure the editor has
- Toolbar
- Canvas
- Drag and drop
- Property windows for the nodes [in the provided reference diagram is shown within the node, in design it should be via a property window]
- Set global failure messages
- Set future to publish date
- Publish now
Example:
Assume that a user is trying to raise an insurance claim for death, so they will be going through this chatbot process (we have shared a flow on how the claims process will happen)
User Story:
This user story is about a person (Jack) who is looking to claim insurance for the death of his father.
- Jack opens the website and is directed to the chatbot to initiate insurance claims.
- Chatbot asks Jack to give consent to the agreement shared with yes or no options
- Jack says yes and proceeds further
- Chatbot asks him his policy number
- On entering policy number, chatbot retrieves the necessary data from the back-end
- Chatbot asks if it is for sickness or injury registration
- Jack says Sickness and is asked whether the person was hospitalized (with yes or no) options and jack select yes.
- Chatbot asks him to enter the "Date of Admission" and "Date of Release"
- Chabot asks if Surgery was done (with yes or no options)
- Jack says yes then it asks for the "Type of Product" (with 4 options - "Cancer, Medical, FAMIX, Death")
- Jack chooses "Death", after which the Chabot asks for a detailed inquiry.
Admin User Story:
- John is the admin who is responsible for creating the talk script for the above chatbot flow
- John opens the app and looks to create a new talk script
- He finds the toolbar and finds the interface easy to use/understands that he had to Drag & drops the items to start creating the chatbot flow
- On the toolbar, John finds different kinds of icons
- - - Multi option question node
- - - Entry field question node
- - - Message node
- - - Link nodes
- He could see the start node is placed by default in canvas
- He then drags & drops a question item from the toolbar
- He opens the properties
- John selects the Option question, inputs the text to be displayed on the chat interface
- John set 2 options Yes and No
- Now John has two paths for that / one is “yes” and the other one is “no”
- - - Yes: In this node, he adds the next node “policy number” , a question with an entry field
- - - No: He adds a “Stop” node
- He opens the properties window of the “policy number” node and then selects [the alias Name] the sfdc.object member variable name policy_number.
- With an entry field, he can set a counter to re-ask the question to obtain the customer input.
- Based on validation and the conditions, the customer will be asked x number of times [ retry count ] before terminating the chat
- He then drags & drops a question node, then selects type as Option and inputs the text as “Sickness or Injury” and enters 2 options one is “Sickness” and another one is “Injury”
- The user continues adding and configuring nodes
- If the user needs to link to another talk script the link node can be used.
- The reference diagrams depict this flow.
Canvas:
- This is the main area where the chatbot flow is managed.
- An admin will create the flow based on the chatbot user flow, to help you understand how the flow is created, please go through the admin user story above:
We have provided you a reference flow/diagram to help you understand, the designer is free to use their thoughts to come up with a very user-friendly design. The audience is non-technical business users.
05 Configuration Management:
- Version Management per script
- - - The talk Script will support versioning
- - - The Talk script will be created via the editor, drag and drop canvas with the palates.
- - - Talks scripts can be published. This results in creating a major version.
- - - To edit a talk script a, user checkouts a script.
- - - Please confirm if our understanding is correct
- - - Talk script [version 1.0] ==> check out ==> edit ==> Checkin/Publish ===> Talk script [version 2.0]
- Release Control per script (Publish based on Date setting auto-update). A script can be set to be Published in future times. Like publish the script version 3.0 on 1st of Jan 2020
References:
https://www.sensely.com/: Sensely was the tool used by the client as a chatbot.
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.
- Focus on User Experience / how the user interacts within the dashboard.
MarvelApp Prototype
- We need you to upload your screens to the Marvel App
- Please send your Marvel app request to csystic@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL in notes /comments while uploading (in your marvel app prototype, click on share and then copy the link & share it within your notes while you upload).
Target Audience
- Internal employees (Admins and Normal Users) who will manage the Chatbot question and answers.
Judging Criteria
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- The overall design, UI and user experience
- Consistency across the UX/UI
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 for your submission files
- Submit Marvelapp as part of your submission.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator, XD, or Sketch!
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
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.