Challenge Summary
Welcome to the "GE - B2B Quote App Design Refinement Continuation Challenge". In this challenge, we are looking for your help to refine the B2B Quote Application process by cleaning up the page design elements and simplifying the UI interactions. This challenge is focused on creating one solid application design and user experience.
In this challenge, we are providing the existing application screen designs and need you to analyze the proposed updates and help us create a unified experience. This application will be used by GE partners to configure, quote, & order our products globally.
Note: Additional GE Challenge Rules
- Please refer to GE Official Rules applicable to this challenge (attached to the challenge)
- To the extent there is any conflict between these Official Rules and additional Topcoder Terms and Conditions of Use referenced off the Website, these Official Rules govern.
- Winners from this challenge need print, sign and send back to us the IP Rights document from GE before eligible for the prizes
1. Quote Details Page (Desktop + Mobile)
2. All Quotes Filtering Page (Desktop + Mobile)
3. Document Generation Wizard (Desktop + Mobile)
- 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.)
1. Quote Details Page (Desktop + Mobile)
2. All Quotes Filtering Page (Desktop + Mobile)
3. Document Generation Wizard (Desktop + Mobile)
- As part of your final 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.)
Design Problem
As we evolve in our journey designing our B2B Quote application, we are seeking the best way to provide a clean, intuitive screen flow for the following scenarios:
01. Sort/Re-order Line Items
02. Quick Action to Add Notes to Multiple Lines
03. Consolidate Headers to Reduce Vertical Space, Scrolling, Screen Real Estate, Etc.
UI Updates:
01. Quote Details Page (Desktop + Mobile)
- Desktop: 03_1.png to 04_4.png
- Mobile: 09_1.png to 09_5.png
Sort/re-order line items
- Right now in the application, if we want to move items from the list, from one slot to another, we need to drag and drop the items. We need a way to easily and quickly re-order items without it being necessary to drag and drop the items (i.e. move item in row #90 to #2 without dragging up to top), Maybe some "Jump to" line item interactions? Etc
- Force a "re-sequence" (i.e. if there are lines 1 to 5, deleting #4 will list them as 1-2-3-5, which is intentional – but need a way to force back to 1-2-3-4)
- Re-order in groups (i.e. re-order all Panelboards items from 1 through x at top, then all Transformers items from x+1 to y, etc)
- Apply this changes to Mobile version too
Quick action to add Notes to multiple lines
- We need an interaction created so Notes can be attached to line items to provide instructions or details (i.e. "Panelboard #1 comes with a warranty for 90 days")
- We also needs to have some ability to Add Notes to multiple line items at one time (today they must copy/paste into a text editor each time)
- Remove Notes from multiple line items at one time
- Ability to edit Notes that appear across multiple line items at once
- Ability for user to use "templates"/"favorites" to insert commonly used Note text.
- Apply this changes to Mobile version too
Consolidate Headers to Reduce Vertical Space, Scrolling, Screen Real Estate, Etc.
- Currently several levels of navigation across pages – see UX use case page 3
- "Quick Action" icons on main page not consistent across pages (i.e. note Pricing screen has commands in blue bar instead of icons)
- Propose a new navigation that able to save screen real estate.
- Apply this changes to Mobile version too
02. All Quotes Filtering Page (Desktop + Mobile)
- Desktop: 01_1.png to 02_4.png
- Mobile: 06_1.png to 08_3.png
Consolidate Headers to Reduce Vertical Space, Scrolling, Screen Real Estate, Etc.
- Currently several levels of navigation across pages, there are 3 kind of navigations in the header area right now – see UX use case page 3
- Propose a new navigation that able to save screen real estate.
- Apply this changes to Mobile version too
03. Document Generation Wizard (Desktop + Mobile)
- Desktop: 05_1.png to 05_5.png
- Mobile: 10_1_1.png to 11.png
Consolidate Headers to Reduce Vertical Space, Scrolling, Screen Real Estate, Etc.
- Currently several levels of navigation across pages, there are 3 kind of navigations in the header area right now – see UX use case page 3
- Propose a new navigation that able to save screen real estate.
- Apply this changes to Mobile version too
IMPORTANT:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
- Upload your files to Marvel App and share the Preview URL in your notes.txt document.
Challenge Goals
- The goal of this challenge is to refine the B2B Quote Application UI/UX elements to be more simple, easy to use, and have consistent user experience.
- Designs should be responsive by nature to allow for desktop or mobile interaction.
Marvel App
- For this challenge - as part of your submission, you must upload your design to MarvelApp so we can provide direct and specific feedback to your designs.
- Please request an MarvelApp link from the Copilot through the challenge forum.
Branding Guidelines:
- The majority of the design styles should be pulled from the provided screen design
- Screen designs should be consistent across the targeted screens listed below
- Focus will be on screen flow, usability, etc.
Screen Size
- This app will be responsive and design elements should easily translate to working on different device sizes.
- Desktop: 1280px width with height adjusting accordingly
- Mobile : 750px x 1334px (iPhone 6)
Documentation
- GE Font Files & Branding (Upload to Challenge)
- Use Case Doc (Upload to Challenge)
- Example Screens (Upload to Challenge)
-- The client does not have original source files. We will need to recreate the screens as best as possible. Luckily the screens are pretty simple :)
Post Challenge Task Opportunity
We are interesting in having a few designers work an additional tasks for this same application. It would be taking your knowledge that you've learned from this challenge as well as past B2B focused challenges and continue to refine the UX/UI. Adroc and tgerring will be reaching out to individual designers, after the completion of this challenge.
Stock Artwork
We are allowing stock photos and stock icons for this challenge
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN
Target Audience
- The application will be used by external customers who are familiar with these processes in our legacy application.
- Demographics widely range from those well versed in web applications to those that do not typically user-commerce solutions.
- Solution should consider global applicability.
Judging Criteria
Your submission will be judged on the following criteria:
- Overall design and user experience
- How well does your design align with the objectives of the challenge
- Cleanliness of screen design and user flow
- Design Consistency
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 or Illustrator. 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 challenge, we are providing the existing application screen designs and need you to analyze the proposed updates and help us create a unified experience. This application will be used by GE partners to configure, quote, & order our products globally.
Note: Additional GE Challenge Rules
- Please refer to GE Official Rules applicable to this challenge (attached to the challenge)
- To the extent there is any conflict between these Official Rules and additional Topcoder Terms and Conditions of Use referenced off the Website, these Official Rules govern.
- Winners from this challenge need print, sign and send back to us the IP Rights document from GE before eligible for the prizes
Round 1
Submit your design for a checkpoint feedback.1. Quote Details Page (Desktop + Mobile)
2. All Quotes Filtering Page (Desktop + Mobile)
3. Document Generation Wizard (Desktop + Mobile)
- 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
All requirements like stated in challenge details with client feedback applied1. Quote Details Page (Desktop + Mobile)
2. All Quotes Filtering Page (Desktop + Mobile)
3. Document Generation Wizard (Desktop + Mobile)
- As part of your final 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.)
Design Problem
As we evolve in our journey designing our B2B Quote application, we are seeking the best way to provide a clean, intuitive screen flow for the following scenarios:
01. Sort/Re-order Line Items
02. Quick Action to Add Notes to Multiple Lines
03. Consolidate Headers to Reduce Vertical Space, Scrolling, Screen Real Estate, Etc.
UI Updates:
01. Quote Details Page (Desktop + Mobile)
- Desktop: 03_1.png to 04_4.png
- Mobile: 09_1.png to 09_5.png
Sort/re-order line items
- Right now in the application, if we want to move items from the list, from one slot to another, we need to drag and drop the items. We need a way to easily and quickly re-order items without it being necessary to drag and drop the items (i.e. move item in row #90 to #2 without dragging up to top), Maybe some "Jump to" line item interactions? Etc
- Force a "re-sequence" (i.e. if there are lines 1 to 5, deleting #4 will list them as 1-2-3-5, which is intentional – but need a way to force back to 1-2-3-4)
- Re-order in groups (i.e. re-order all Panelboards items from 1 through x at top, then all Transformers items from x+1 to y, etc)
- Apply this changes to Mobile version too
Quick action to add Notes to multiple lines
- We need an interaction created so Notes can be attached to line items to provide instructions or details (i.e. "Panelboard #1 comes with a warranty for 90 days")
- We also needs to have some ability to Add Notes to multiple line items at one time (today they must copy/paste into a text editor each time)
- Remove Notes from multiple line items at one time
- Ability to edit Notes that appear across multiple line items at once
- Ability for user to use "templates"/"favorites" to insert commonly used Note text.
- Apply this changes to Mobile version too
Consolidate Headers to Reduce Vertical Space, Scrolling, Screen Real Estate, Etc.
- Currently several levels of navigation across pages – see UX use case page 3
- "Quick Action" icons on main page not consistent across pages (i.e. note Pricing screen has commands in blue bar instead of icons)
- Propose a new navigation that able to save screen real estate.
- Apply this changes to Mobile version too
02. All Quotes Filtering Page (Desktop + Mobile)
- Desktop: 01_1.png to 02_4.png
- Mobile: 06_1.png to 08_3.png
Consolidate Headers to Reduce Vertical Space, Scrolling, Screen Real Estate, Etc.
- Currently several levels of navigation across pages, there are 3 kind of navigations in the header area right now – see UX use case page 3
- Propose a new navigation that able to save screen real estate.
- Apply this changes to Mobile version too
03. Document Generation Wizard (Desktop + Mobile)
- Desktop: 05_1.png to 05_5.png
- Mobile: 10_1_1.png to 11.png
Consolidate Headers to Reduce Vertical Space, Scrolling, Screen Real Estate, Etc.
- Currently several levels of navigation across pages, there are 3 kind of navigations in the header area right now – see UX use case page 3
- Propose a new navigation that able to save screen real estate.
- Apply this changes to Mobile version too
IMPORTANT:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
- Upload your files to Marvel App and share the Preview URL in your notes.txt document.
Challenge Goals
- The goal of this challenge is to refine the B2B Quote Application UI/UX elements to be more simple, easy to use, and have consistent user experience.
- Designs should be responsive by nature to allow for desktop or mobile interaction.
Marvel App
- For this challenge - as part of your submission, you must upload your design to MarvelApp so we can provide direct and specific feedback to your designs.
- Please request an MarvelApp link from the Copilot through the challenge forum.
Branding Guidelines:
- The majority of the design styles should be pulled from the provided screen design
- Screen designs should be consistent across the targeted screens listed below
- Focus will be on screen flow, usability, etc.
Screen Size
- This app will be responsive and design elements should easily translate to working on different device sizes.
- Desktop: 1280px width with height adjusting accordingly
- Mobile : 750px x 1334px (iPhone 6)
Documentation
- GE Font Files & Branding (Upload to Challenge)
- Use Case Doc (Upload to Challenge)
- Example Screens (Upload to Challenge)
-- The client does not have original source files. We will need to recreate the screens as best as possible. Luckily the screens are pretty simple :)
Post Challenge Task Opportunity
We are interesting in having a few designers work an additional tasks for this same application. It would be taking your knowledge that you've learned from this challenge as well as past B2B focused challenges and continue to refine the UX/UI. Adroc and tgerring will be reaching out to individual designers, after the completion of this challenge.
Stock Artwork
We are allowing stock photos and stock icons for this challenge
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN
Target Audience
- The application will be used by external customers who are familiar with these processes in our legacy application.
- Demographics widely range from those well versed in web applications to those that do not typically user-commerce solutions.
- Solution should consider global applicability.
Judging Criteria
Your submission will be judged on the following criteria:
- Overall design and user experience
- How well does your design align with the objectives of the challenge
- Cleanliness of screen design and user flow
- Design Consistency
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 or Illustrator. 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.