Challenge Summary
Welcome to “BPS Web Application Wireframe Challenge”. In this challenge we are looking for your help to come up with wireframes and user flows for a web application focused on the visualization of NEEDS, IDEAS, and DEMANDS in a “train map” style visualization. You will be focused on creating the concepts for desktop devices only.
We need to see intuitive and easy to use "wireframe concepts" that will let us design and build the final user interfaces on the next stage of this project. Think on what are the best UI/UX practices when creating this wireframe.
1) Landing Page
2) Create a Need, an Idea, and Demand Forms
3) Train Stop Visualization
Feel free to add any screens which are necessary to explain your concept
1) Landing Page
2) Create a Need, an Idea, and Demand Forms
3) Train Stop Visualization
Feel free to add any screens which are necessary to explain your concept
Background Information
A global medical technology company is looking for a wireframe that conceptualizes the user flows for a web application focused on the visualization of NEEDS, IDEAS, and DEMANDS in a “train map” style visualization.
This company is advancing the world of health by improving medical discovery, diagnostics and the delivery of care. It leads in patient and healthcare worker safety and the technologies that enable medical research and clinical laboratories. The company provides innovative solutions that help advance medical research and genomics, enhance the diagnosis of infectious disease and cancer, improve medication management, promote infection prevention, equip surgical and interventional procedures and support the management of diabetes
For this challenge you will be focused on just 3 key screens for Desktop Web devices. We will be launching a UI Design Challenge after this one, so have that in mind when creating your wireframes.
Translation of Terms
Needs - A business user has identified a gap, problem or business opportunity that is
not being met today.
Ideas - The Idea is created once the Global Process Leader – GPL reviews the Need
and validates it is aligned with the corporate strategy and is worth pursuing based on
benefits.
Demand - A Demand is created when the Idea is accepted and then will be assessed,
managed and forecasted, for products and services.
Required Screens / Functionalities
1) Landing Page
- This screen shows the Processes (L1), Sub-Process Steps (L2), and Activities (L3-L4) that are on your plate with a break down of what has been completed and what is left of the assignments, and the order of operations of the assignments. A visual task map of what needs to be done.
- When needs or ideas are approved by a manager it automatically shows up on the appropriate person’s Landing Page visualization.
- There should also be some sort of high-level dashboard indicating the number of Needs, Ideas, and Demands and their status level, specific to the user. This dashboard could be a part of the Landing Page or possibly a separate screen.
-Typically, a user will have rights to various queues of workstep processes and activities. Instead of showing all the tasks assigned to them in a single list, we will have various queues listed. Based on the queue selected, we will show the user the list of tasks. The user should be able to filter the tasks based on the selected queue workstep and/or activity.
- A Search feature should also be included which will allow the user to do a general search, based on keywords, and identification numbers.
- See supporting material at the bottom of this spec, for more information: See 14 E2E Metro Maps -Edited.pdf & Idea to Realization Taxonomy Table. Note: this table reads from top to bottom to show the flow through the Levels, but it also reads from left to right because it also flows from Initiate to Plan to Execute to Close)
2) Create a Need and Idea Forms
- Users fill out forms which are passed through a chain of managers for approval.
- Example PI Integrator creates a need by completing a form, the GPL can accept or reject. - If accepted, they fill out a form and it becomes an Idea and that goes to the appropriate BRM who can also Accept or Reject, if they accept then they fill out a form to send it to the Functional BRM.
- The Functional BRM can Accept or Reject. If they accept, they fill out a form with
attributes to support the new idea and then it covers into a demand that will be
assessed managed and forecasted. The demand goes to the appropriate person in IT.
- If in any of the steps, someone Rejects, then the process stops up to that point and a rejection email is sent to everyone who was a part of that flow up to that point. The reason for a rejection should be mentioned.
- Each form should have a way to Reassign a request that was made to the wrong department, and have it directed to the right one.
- See supporting material at the bottom of this specs, for more information. Idea-Creation-Form-Flow.pdf and BD-Form-Flow-Sketch.jpeg
3) Train Stop Visualization
- A visualization of NEEDS, IDEAS and DEMANDS in a “train map” style visualization.
- There are 4 levels in the map:
- The top level being L1 (Ideas to Realization) - L4.
- A viewer should be able to zoom in and out and see the different levels of detail.
- Also there should be a way to tell if the workflow is going smoothly or if there is a slowdown or stoppage in workflow.
- The map should indicate these things.
- This is a visualization of the table in the Landing Page
Supporting Material
- Access all supporting material on this folder:
https://drive.google.com/open?id=1IbK8wy0eP3u0Iwv-RPcUeahpvW04xDY-
Inside you will find the following:
- BD Form Flow (Needs, Ideas & Demands)
- L1-L4 Process Taxonomies (Idea to Data Realization Taxonomy)
- How To Create an Idea Article
- Trainline Visualization Sample
- Idea Creation Form Workflow
- BD Metro Maps
Target Users
- Final company users looking to propose ideas
Tools Sketch / HTML:
- We are asking to work with Axure: http://www.axure.com/support
- You can also work with static images but you must include a fully navigable prototype in HTML.
NOTE: If you are designing in sketch it is mandatory that you create the flow using Marvel App / Invision as we are expecting to see a clickable wireframes in this challenge.
- You are also allowed to submit pure HTML wireframes
Judging Criteria
- User Experience of the application/portal
- Completeness and accuracy of your wireframes
- How well your wireframes provide a consistent 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
Wireframes should be built in HTML or Axure
Source Files
All original source files of the submitted ideas. If you would like to submit notes please include notes.txt file.
Final Fixes
As part of the final fixes phase you may be asked to modify content or user click paths
We need to see intuitive and easy to use "wireframe concepts" that will let us design and build the final user interfaces on the next stage of this project. Think on what are the best UI/UX practices when creating this wireframe.
Round 1
Submit your initial wireframes for checkpoint review.1) Landing Page
2) Create a Need, an Idea, and Demand Forms
3) Train Stop Visualization
Feel free to add any screens which are necessary to explain your concept
Round 2
Submit your final wireframes plus checkpoint feedback implemented.1) Landing Page
2) Create a Need, an Idea, and Demand Forms
3) Train Stop Visualization
Feel free to add any screens which are necessary to explain your concept
Background Information
A global medical technology company is looking for a wireframe that conceptualizes the user flows for a web application focused on the visualization of NEEDS, IDEAS, and DEMANDS in a “train map” style visualization.
This company is advancing the world of health by improving medical discovery, diagnostics and the delivery of care. It leads in patient and healthcare worker safety and the technologies that enable medical research and clinical laboratories. The company provides innovative solutions that help advance medical research and genomics, enhance the diagnosis of infectious disease and cancer, improve medication management, promote infection prevention, equip surgical and interventional procedures and support the management of diabetes
For this challenge you will be focused on just 3 key screens for Desktop Web devices. We will be launching a UI Design Challenge after this one, so have that in mind when creating your wireframes.
Translation of Terms
Needs - A business user has identified a gap, problem or business opportunity that is
not being met today.
Ideas - The Idea is created once the Global Process Leader – GPL reviews the Need
and validates it is aligned with the corporate strategy and is worth pursuing based on
benefits.
Demand - A Demand is created when the Idea is accepted and then will be assessed,
managed and forecasted, for products and services.
Required Screens / Functionalities
1) Landing Page
- This screen shows the Processes (L1), Sub-Process Steps (L2), and Activities (L3-L4) that are on your plate with a break down of what has been completed and what is left of the assignments, and the order of operations of the assignments. A visual task map of what needs to be done.
- When needs or ideas are approved by a manager it automatically shows up on the appropriate person’s Landing Page visualization.
- There should also be some sort of high-level dashboard indicating the number of Needs, Ideas, and Demands and their status level, specific to the user. This dashboard could be a part of the Landing Page or possibly a separate screen.
-Typically, a user will have rights to various queues of workstep processes and activities. Instead of showing all the tasks assigned to them in a single list, we will have various queues listed. Based on the queue selected, we will show the user the list of tasks. The user should be able to filter the tasks based on the selected queue workstep and/or activity.
- A Search feature should also be included which will allow the user to do a general search, based on keywords, and identification numbers.
- See supporting material at the bottom of this spec, for more information: See 14 E2E Metro Maps -Edited.pdf & Idea to Realization Taxonomy Table. Note: this table reads from top to bottom to show the flow through the Levels, but it also reads from left to right because it also flows from Initiate to Plan to Execute to Close)
2) Create a Need and Idea Forms
- Users fill out forms which are passed through a chain of managers for approval.
- Example PI Integrator creates a need by completing a form, the GPL can accept or reject. - If accepted, they fill out a form and it becomes an Idea and that goes to the appropriate BRM who can also Accept or Reject, if they accept then they fill out a form to send it to the Functional BRM.
- The Functional BRM can Accept or Reject. If they accept, they fill out a form with
attributes to support the new idea and then it covers into a demand that will be
assessed managed and forecasted. The demand goes to the appropriate person in IT.
- If in any of the steps, someone Rejects, then the process stops up to that point and a rejection email is sent to everyone who was a part of that flow up to that point. The reason for a rejection should be mentioned.
- Each form should have a way to Reassign a request that was made to the wrong department, and have it directed to the right one.
- See supporting material at the bottom of this specs, for more information. Idea-Creation-Form-Flow.pdf and BD-Form-Flow-Sketch.jpeg
3) Train Stop Visualization
- A visualization of NEEDS, IDEAS and DEMANDS in a “train map” style visualization.
- There are 4 levels in the map:
- The top level being L1 (Ideas to Realization) - L4.
- A viewer should be able to zoom in and out and see the different levels of detail.
- Also there should be a way to tell if the workflow is going smoothly or if there is a slowdown or stoppage in workflow.
- The map should indicate these things.
- This is a visualization of the table in the Landing Page
Supporting Material
- Access all supporting material on this folder:
https://drive.google.com/open?id=1IbK8wy0eP3u0Iwv-RPcUeahpvW04xDY-
Inside you will find the following:
- BD Form Flow (Needs, Ideas & Demands)
- L1-L4 Process Taxonomies (Idea to Data Realization Taxonomy)
- How To Create an Idea Article
- Trainline Visualization Sample
- Idea Creation Form Workflow
- BD Metro Maps
Target Users
- Final company users looking to propose ideas
Tools Sketch / HTML:
- We are asking to work with Axure: http://www.axure.com/support
- You can also work with static images but you must include a fully navigable prototype in HTML.
NOTE: If you are designing in sketch it is mandatory that you create the flow using Marvel App / Invision as we are expecting to see a clickable wireframes in this challenge.
- You are also allowed to submit pure HTML wireframes
Judging Criteria
- User Experience of the application/portal
- Completeness and accuracy of your wireframes
- How well your wireframes provide a consistent 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
Wireframes should be built in HTML or Axure
Source Files
All original source files of the submitted ideas. If you would like to submit notes please include notes.txt file.
Final Fixes
As part of the final fixes phase you may be asked to modify content or user click paths
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.