Challenge Summary
Welcome to Woobot - Workflow Brain Concepts Design Challenge.
In this exciting opportunity, we need to design a solution for Woobot that helps integrating sensible enterprise workflows in modern communication tools such as Slack and MS Teams, through a very rich task-based user interface. Opportunities for UX design and concepts exploration are wide open.
Best of luck.
2. Workflow Editor
2.1. Trigger block
2.2. Action block
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
2. Workflow Editor
2.1. Trigger block
2.2. Action block
2.3. Logic block
2.4. Time based block
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this challenge is to design the look and feel of a desktop web application that will be used to integrate enterprise workflows (e.g. Salesforce) into messaging apps, such as Slack, MS Teams, etc.
You are provided with requirements, user stories and inspiration to come up with your own designs.
Design Goals
We are looking for a design for the next iteration of the Woobot Brain which will focus on user-created workflows. The scope of this project will be limited to the workflow aspects of the Brain, which is the aspect that allows a user to create and configure individual workflows for their instance of Woobot. Our desired solution would be a framework UI design based on our existing UI toolkit that allows a user to perform the required actions as detailed in the requirements.
We expect the user to be able to use an interaction-rich user interface that allows her dynamically creating (editing/deleting) nodes of elements, maybe using drag/drop features, open to your proposals.
Visual wise, we expect to see clean, modern, professional looking UI designs that follows Material Design Guidelines.
Supporting Documents
- Design Moodboard: Inspiration.
Business Requirements
- User should be able to create N number of workflows.
- User should be able to edit a single workflow at a time, with the primary user interface being taken up by the single workflow editor.
Workflow Editor Block Concept
A workflow can be constructed by configuring a sequence of blocks. To a limited degree, these sequences and be mixed and matched.
Block Types:
- Trigger block: starting point of the workflow.
- Logic block: used for conditional filtering and branches in the flow.
- Action block: used to identify actions to be taken, such as send a notification.
- Time block.
Screens Requirements
Overall
- Show states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc. Avoid hover states for meaningful actions since they don’t translate well for mobile scenarios.
- Please suggest how to organize this content and group them into screens, we are looking forward to see your unique proposals, be bold. For instance, requirements 1 and 2 could be grouped in a single screen, just an example. We’d like to see your proposals about flow and organization.
- Propose a navigation system that makes sense and considers all the required features below (include logout).
- Connecting enterprise workflows is out of scope (e.g. logging in Salesforce).
- Salesforce is the example we are using, but it is just one system of many different possible systems. For now, focus on the Salesforce for example.
1. Workflow Dashboard
This screen is out of scope, just for navigation consideration (maybe).
FYI:
- This screens shows available workflows for the user.
- User can create new workflows.
- User can edit existing workflows, as well as delete (after confirmation).
2. Workflow Editor
In general, user can edit/manage a single selected (or new) workflow through this interaction-rich user interface.
- User should be able to identify a single trigger mechanism.
- User should be able to attach multiple filter criteria, with complex and/or logic to combine the filter criteria into a single logical "statement".
- User should be able to attach one or more actions that can result from a triggered event that passes all the filters.
- A single workflow can be turned ON or OFF. There should be no sub-activations within the workflow. Either the whole thing is ON or the whole thing is OFF.
2.1. Trigger block
Each workflow will have a single trigger block. The trigger is essentially the starting point of the workflow and all other actions are anchored off this block. There could be several action blocks tied to a single trigger block.
The trigger could be one of the following:
- An event occurred within a connected system:
-- For example, a record is inserted, updated or deleted in the connected system.
- A scheduled event:
-- User defines an initial start and a period. The event will fire at the initial, and on the period. The period is defined as a set number of hours/days.
-- Optionally the user defines an end-date at which time the workflow will deactivate.
Showcase how to add and edit the two specific trigger scenarios (connected system and schedule event) through the necessary amount of screens.
2.2. Action block
When defining an action, the user should be presented with a user interface that allows defining multiple options for the action, such as:
- Notification text for a notification.
- Other options (future scope)
For this design exercise, focus on the notification text creation. Once a block is set to notification, it will need to capture:
- Target Connection (team).
- Target Channel.
- Notification Text.
- Additional meta-fields for record creation specific to the type of workflow (Salesforce in this exercise), example:
-- Salesforce Case: Case Number, Subject, Owner Name, Contact Name, Account Name, Opened Date, Closed Date, Status, Type, Origin.
-- Salesforce Contact: First Name, Last Name, Email, Phone, Account Name.
The concept is that the action editor can be collapsed/expanded within the workflow editor.
When adding an action, the user should be able to copy a previously defined action, even if the action was defined on a separate workflow.
Showcase how to add and edit the action blocks through the necessary amount of screens.
2.3. Logic block
- Instead of a filter, the user can add IF-ELSE conditional logic blocks that branch the workflow. An "IF" without ELSE becomes a filter.
- Actions can be added to either branches of an IF-ELSE
- Additional IF-ELSE branches can be added to existing IF-ELSE branches.
Showcase how to add/edit an IF block, an IF-ELSE block and a three-level nested IF-ELSE branches through the necessary amount of screens.
2.4. Time based block
Out of scope for this design exercise. HOWEVER, showcase how it looks integrated into the workflow and the mechanism to be added into it.
Usecase Examples
Here a few typical cases we can encounter as workflow. You can use any or simply as reference to grasp the data/flow.
A) New Lead from a Web Form:
Send a notification when a new lead is created and the "Origin" is set to "Web".
The notification should point to the "web-leads" channel, and the text should be:
New Lead from @First Name @Last Name @Email at @Company has been created for a @Lead Source - Yo @Owner ID ... it's time to pop and lock!
���
B) New Case created from Support form:
Send a notification when a new case is created and the type is "Support".
The notification should point to the "support" channel, and the text should be:
New case @Case Number created from @Case Origin with type @Case Type.
Subject: @Subject
���
C) An opportunity is open and is past it's close date:
Send a notification when an opportunity's closed date is in the past and the stage is not closed.
This type of notification should occur only once a day so we do not flood a channel.
���
D) A new lead has not been touched in 24 hours:
Send a notification once a day when a lead has a status of "New" and it has not been updated in 24 hours (the lastmodified field is older than 24 hours).
���
Branding Guidelines
- Fonts and colors open to suggestions as long as they are inline with the website and material design guidelines.
- Navigation, hierarchy and layout system should follow material design guidelines principles.
- We provide a moodboard for simple start or inspiration.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop: 1260px width. Height as much as needed.
- Consider material design grid system in your design.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me using this link: https://tc-marvel-app.herokuapp.com/challenge/30088823
- Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
- You don’t want to fail screening? Read this.
Target User
Users are application administrators of enterprise systems. For example, a Salesforce admin. Not necessarily a technical role, but the user will be familiar with their business use cases and their data model.
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- How well you implement the challenge requirements. Note you would need to implement all required functionalities and items as written in the spec.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
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.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, XD or Sketch. Layers should be named and well organized.
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.
In this exciting opportunity, we need to design a solution for Woobot that helps integrating sensible enterprise workflows in modern communication tools such as Slack and MS Teams, through a very rich task-based user interface. Opportunities for UX design and concepts exploration are wide open.
Best of luck.
Round 1
Submit your design for a checkpoint feedback.2. Workflow Editor
2.1. Trigger block
2.2. Action block
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Submit your final design plus checkpoint feedback.2. Workflow Editor
2.1. Trigger block
2.2. Action block
2.3. Logic block
2.4. Time based block
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this challenge is to design the look and feel of a desktop web application that will be used to integrate enterprise workflows (e.g. Salesforce) into messaging apps, such as Slack, MS Teams, etc.
You are provided with requirements, user stories and inspiration to come up with your own designs.
Design Goals
We are looking for a design for the next iteration of the Woobot Brain which will focus on user-created workflows. The scope of this project will be limited to the workflow aspects of the Brain, which is the aspect that allows a user to create and configure individual workflows for their instance of Woobot. Our desired solution would be a framework UI design based on our existing UI toolkit that allows a user to perform the required actions as detailed in the requirements.
We expect the user to be able to use an interaction-rich user interface that allows her dynamically creating (editing/deleting) nodes of elements, maybe using drag/drop features, open to your proposals.
Visual wise, we expect to see clean, modern, professional looking UI designs that follows Material Design Guidelines.
Supporting Documents
- Design Moodboard: Inspiration.
Business Requirements
- User should be able to create N number of workflows.
- User should be able to edit a single workflow at a time, with the primary user interface being taken up by the single workflow editor.
Workflow Editor Block Concept
A workflow can be constructed by configuring a sequence of blocks. To a limited degree, these sequences and be mixed and matched.
Block Types:
- Trigger block: starting point of the workflow.
- Logic block: used for conditional filtering and branches in the flow.
- Action block: used to identify actions to be taken, such as send a notification.
- Time block.
Screens Requirements
Overall
- Show states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc. Avoid hover states for meaningful actions since they don’t translate well for mobile scenarios.
- Please suggest how to organize this content and group them into screens, we are looking forward to see your unique proposals, be bold. For instance, requirements 1 and 2 could be grouped in a single screen, just an example. We’d like to see your proposals about flow and organization.
- Propose a navigation system that makes sense and considers all the required features below (include logout).
- Connecting enterprise workflows is out of scope (e.g. logging in Salesforce).
- Salesforce is the example we are using, but it is just one system of many different possible systems. For now, focus on the Salesforce for example.
1. Workflow Dashboard
This screen is out of scope, just for navigation consideration (maybe).
FYI:
- This screens shows available workflows for the user.
- User can create new workflows.
- User can edit existing workflows, as well as delete (after confirmation).
2. Workflow Editor
In general, user can edit/manage a single selected (or new) workflow through this interaction-rich user interface.
- User should be able to identify a single trigger mechanism.
- User should be able to attach multiple filter criteria, with complex and/or logic to combine the filter criteria into a single logical "statement".
- User should be able to attach one or more actions that can result from a triggered event that passes all the filters.
- A single workflow can be turned ON or OFF. There should be no sub-activations within the workflow. Either the whole thing is ON or the whole thing is OFF.
2.1. Trigger block
Each workflow will have a single trigger block. The trigger is essentially the starting point of the workflow and all other actions are anchored off this block. There could be several action blocks tied to a single trigger block.
The trigger could be one of the following:
- An event occurred within a connected system:
-- For example, a record is inserted, updated or deleted in the connected system.
- A scheduled event:
-- User defines an initial start and a period. The event will fire at the initial, and on the period. The period is defined as a set number of hours/days.
-- Optionally the user defines an end-date at which time the workflow will deactivate.
Showcase how to add and edit the two specific trigger scenarios (connected system and schedule event) through the necessary amount of screens.
2.2. Action block
When defining an action, the user should be presented with a user interface that allows defining multiple options for the action, such as:
- Notification text for a notification.
- Other options (future scope)
For this design exercise, focus on the notification text creation. Once a block is set to notification, it will need to capture:
- Target Connection (team).
- Target Channel.
- Notification Text.
- Additional meta-fields for record creation specific to the type of workflow (Salesforce in this exercise), example:
-- Salesforce Case: Case Number, Subject, Owner Name, Contact Name, Account Name, Opened Date, Closed Date, Status, Type, Origin.
-- Salesforce Contact: First Name, Last Name, Email, Phone, Account Name.
The concept is that the action editor can be collapsed/expanded within the workflow editor.
When adding an action, the user should be able to copy a previously defined action, even if the action was defined on a separate workflow.
Showcase how to add and edit the action blocks through the necessary amount of screens.
2.3. Logic block
- Instead of a filter, the user can add IF-ELSE conditional logic blocks that branch the workflow. An "IF" without ELSE becomes a filter.
- Actions can be added to either branches of an IF-ELSE
- Additional IF-ELSE branches can be added to existing IF-ELSE branches.
Showcase how to add/edit an IF block, an IF-ELSE block and a three-level nested IF-ELSE branches through the necessary amount of screens.
2.4. Time based block
Out of scope for this design exercise. HOWEVER, showcase how it looks integrated into the workflow and the mechanism to be added into it.
Usecase Examples
Here a few typical cases we can encounter as workflow. You can use any or simply as reference to grasp the data/flow.
A) New Lead from a Web Form:
Send a notification when a new lead is created and the "Origin" is set to "Web".
The notification should point to the "web-leads" channel, and the text should be:
New Lead from @First Name @Last Name @Email at @Company has been created for a @Lead Source - Yo @Owner ID ... it's time to pop and lock!
���
B) New Case created from Support form:
Send a notification when a new case is created and the type is "Support".
The notification should point to the "support" channel, and the text should be:
New case @Case Number created from @Case Origin with type @Case Type.
Subject: @Subject
���
C) An opportunity is open and is past it's close date:
Send a notification when an opportunity's closed date is in the past and the stage is not closed.
This type of notification should occur only once a day so we do not flood a channel.
���
D) A new lead has not been touched in 24 hours:
Send a notification once a day when a lead has a status of "New" and it has not been updated in 24 hours (the lastmodified field is older than 24 hours).
���
Branding Guidelines
- Fonts and colors open to suggestions as long as they are inline with the website and material design guidelines.
- Navigation, hierarchy and layout system should follow material design guidelines principles.
- We provide a moodboard for simple start or inspiration.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop: 1260px width. Height as much as needed.
- Consider material design grid system in your design.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me using this link: https://tc-marvel-app.herokuapp.com/challenge/30088823
- Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
- You don’t want to fail screening? Read this.
Target User
Users are application administrators of enterprise systems. For example, a Salesforce admin. Not necessarily a technical role, but the user will be familiar with their business use cases and their data model.
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- How well you implement the challenge requirements. Note you would need to implement all required functionalities and items as written in the spec.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
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.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, XD or Sketch. Layers should be named and well organized.
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.