Challenge Summary
Welcome to the "GE - B2B App Features Design Refinement Challenge". This is a follow-up challenge to the recently completed B2B App Design Concept Challenge and now we are looking for your help to combine, refine and clean up the different design elements based on the provided winning designs. This challenge is focused on creating one solid application design and user experience.
In this challenge we are providing the previous winning 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, please create InvisionApp or MarvelApp and share your URL in your notes.txt document.
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, please update your InvisionApp or MarvelApp from 1st round with the latest screen creations.
The Design Problem
In the first challenge we tackled these issues. We now need to take that provided designs and complete the experience around these features.
As we evolve in our journey designing our new B2B application, we are seeking the best way to provide a clean, intuitive screen flow for key complex scenarios. These scenarios include:
1) The ability to easily filter a long list of quotes (more than 400+)
2) A criteria selection wizard to format data for an output document
3) A quote detail page which could consist of 100+ line items in several categories.
Challenge Goals
The goal of this challenge is to take the best concepts and UI/UX elements from the provided designs and merge them into one solid design that has a great, clean and consistent user experience.
Designs should be responsive by nature to allow for desktop or mobile interaction.
Screen Updates Requirements:
00. General Updates
- Use (226737-1st.zip) as your base design.
- Wizard: Use (226763-2nd.zip) as reference for the Wizard design. We prefer this approach to the Wizard but need design updates.
- Use (226783-3rd.zip) as design reference for the mobile hamburger left/right flyout navigation
Page Header: The application page header area (all screens) seems to be taking up a lot of space/uses a lot of padding. We would like to update the design to optimize the space.
Navigation: We are looking for a consistent navigation experience. Review the navigation design and make sure all graphics, design looks and works well.
Responsive: Make sure to review the Responsive design and interactions between mobile and desktop for consistency. Explore a more adaptive design approach where we optimize for mobile vs just a responsive design ���
File Prep: Make sure to prep your Source files so they are ready for a UI Prototype Challenge.
01. Quotes
02_1_all_quotes_filters.png, 02_2_all_quotes_filters_add_parameter.png, 02_3_all_quotes_column_settings.png
We really like the filters and the column settings approach.
Updates
- We need to be able to "Save Filters" (How might this work?)
- Custom Parameters should just be additional fields (not a separate flyout). Imagine the ability to add new parameters (+/-) type feature
- Saved Search: We like the "Saved Search" from design 226763-2nd.zip. Integrate this into the design/experience.
- Tooltip: How might the tooltip design look when hovering on any of the available icons/features? Assume the tooltip would appear after a few seconds to inform the user about an icon or feature.
- Need the ability for user to drag and drop to rearrange the column order
02. Quote Details
We like the grouping approach as filters on the quote detail page along with collapsing the header to gain more screen space.
Updates
- Table: The Item Description could be quite long. Please show a solution on how this might look/work.
- Drag and Drop: We are looking for better icon to enable drag and drop reordering of the line items
- for accessing more functions, would like more of a drop-down vs shift of the content to the left to show more icons. This is due to the need to have words next to icons
03. Document Generation Wizard
- Review Use (226763-2nd.zip) Desktop-17.png
- We like how the Wizard is designed in this submission and the use is informed by the left column as they go through the steps.
- We need this approach integrated into the base design 226737-1st.zip
Updates
- We need you to remove all the extra gray boxes, lines etc. and keep it a clean experience
- Step 2: We need a different design (similar to 226737-1st.zip) for the BOM Selection
- Step 3: We need additional exploration here as there could be 100 items in the list.
- Mobile: The challenging part in this screen is how to make the mobile experience have the same level of consistency with the desktop version. The mobile is using up too much space with the gray lines and should be optimized for the mobile screen/experience.
04. Mobile
Updates
- Should explore a more adaptive design approach where we optimize for mobile vs just a responsive design
- When making the updates make sure the mobile experience is also updated/makes sense
- Navigation: We like the potential of the left/right navigation options presented in 226783 (02-A-All Quotes Screen-Nav (Mobile).jpg)
- Filters: We are thinking the Filters could fly out from the right side (if it can be done responsively)
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 InvisionApp or MarvelApp and share your URL in your notes.txt document.
Branding Guidelines:
- The majority of the design styles should be pulled from the winning submission (1st placement - 226737)
- Screen designs should be consistent across the targeted screens listed above
- Focus will be on screen flow, usability, etc.
Supporting Documents:
All Supporting Documentations can be requested in challenge forum!!
- 226737-1st.zip
- 226763-2nd.zip
- 226783-3rd.zip
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)
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 use e-commerce solutions.
- Solution should consider global applicability.
Judging Criteria:
Your submission will be judged on the following criteria:
- How well does your design aligns with the objectives of the challenge
- Cleanliness of screen design and user flow
- Overall design and user experience
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
- Please upload JPG/PNG images in a zip file with all requested contest requirements stated above.
- Number your files (01, 02, 03, etc) this will help review them in order.
- Please submit documentation in pdf format with as many pages and images as required to explain your design and solution.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as layered PSD/AI files.
Final Fixes
As part of the final fixes, you may also 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 previous winning 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
Initial submission for client review1. Quote Details Page (Desktop + Mobile)
2. All Quotes Filtering Page (Desktop + Mobile)
3. Document Generation Wizard (Desktop + Mobile)
As part of your checkpoint submission, please create InvisionApp or MarvelApp and share your URL in your notes.txt document.
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, please update your InvisionApp or MarvelApp from 1st round with the latest screen creations.
The Design Problem
In the first challenge we tackled these issues. We now need to take that provided designs and complete the experience around these features.
As we evolve in our journey designing our new B2B application, we are seeking the best way to provide a clean, intuitive screen flow for key complex scenarios. These scenarios include:
1) The ability to easily filter a long list of quotes (more than 400+)
2) A criteria selection wizard to format data for an output document
3) A quote detail page which could consist of 100+ line items in several categories.
Challenge Goals
The goal of this challenge is to take the best concepts and UI/UX elements from the provided designs and merge them into one solid design that has a great, clean and consistent user experience.
Designs should be responsive by nature to allow for desktop or mobile interaction.
Screen Updates Requirements:
00. General Updates
- Use (226737-1st.zip) as your base design.
- Wizard: Use (226763-2nd.zip) as reference for the Wizard design. We prefer this approach to the Wizard but need design updates.
- Use (226783-3rd.zip) as design reference for the mobile hamburger left/right flyout navigation
Page Header: The application page header area (all screens) seems to be taking up a lot of space/uses a lot of padding. We would like to update the design to optimize the space.
Navigation: We are looking for a consistent navigation experience. Review the navigation design and make sure all graphics, design looks and works well.
Responsive: Make sure to review the Responsive design and interactions between mobile and desktop for consistency. Explore a more adaptive design approach where we optimize for mobile vs just a responsive design ���
File Prep: Make sure to prep your Source files so they are ready for a UI Prototype Challenge.
01. Quotes
02_1_all_quotes_filters.png, 02_2_all_quotes_filters_add_parameter.png, 02_3_all_quotes_column_settings.png
We really like the filters and the column settings approach.
Updates
- We need to be able to "Save Filters" (How might this work?)
- Custom Parameters should just be additional fields (not a separate flyout). Imagine the ability to add new parameters (+/-) type feature
- Saved Search: We like the "Saved Search" from design 226763-2nd.zip. Integrate this into the design/experience.
- Tooltip: How might the tooltip design look when hovering on any of the available icons/features? Assume the tooltip would appear after a few seconds to inform the user about an icon or feature.
- Need the ability for user to drag and drop to rearrange the column order
02. Quote Details
We like the grouping approach as filters on the quote detail page along with collapsing the header to gain more screen space.
Updates
- Table: The Item Description could be quite long. Please show a solution on how this might look/work.
- Drag and Drop: We are looking for better icon to enable drag and drop reordering of the line items
- for accessing more functions, would like more of a drop-down vs shift of the content to the left to show more icons. This is due to the need to have words next to icons
03. Document Generation Wizard
- Review Use (226763-2nd.zip) Desktop-17.png
- We like how the Wizard is designed in this submission and the use is informed by the left column as they go through the steps.
- We need this approach integrated into the base design 226737-1st.zip
Updates
- We need you to remove all the extra gray boxes, lines etc. and keep it a clean experience
- Step 2: We need a different design (similar to 226737-1st.zip) for the BOM Selection
- Step 3: We need additional exploration here as there could be 100 items in the list.
- Mobile: The challenging part in this screen is how to make the mobile experience have the same level of consistency with the desktop version. The mobile is using up too much space with the gray lines and should be optimized for the mobile screen/experience.
04. Mobile
Updates
- Should explore a more adaptive design approach where we optimize for mobile vs just a responsive design
- When making the updates make sure the mobile experience is also updated/makes sense
- Navigation: We like the potential of the left/right navigation options presented in 226783 (02-A-All Quotes Screen-Nav (Mobile).jpg)
- Filters: We are thinking the Filters could fly out from the right side (if it can be done responsively)
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 InvisionApp or MarvelApp and share your URL in your notes.txt document.
Branding Guidelines:
- The majority of the design styles should be pulled from the winning submission (1st placement - 226737)
- Screen designs should be consistent across the targeted screens listed above
- Focus will be on screen flow, usability, etc.
Supporting Documents:
All Supporting Documentations can be requested in challenge forum!!
- 226737-1st.zip
- 226763-2nd.zip
- 226783-3rd.zip
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)
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 use e-commerce solutions.
- Solution should consider global applicability.
Judging Criteria:
Your submission will be judged on the following criteria:
- How well does your design aligns with the objectives of the challenge
- Cleanliness of screen design and user flow
- Overall design and user experience
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
- Please upload JPG/PNG images in a zip file with all requested contest requirements stated above.
- Number your files (01, 02, 03, etc) this will help review them in order.
- Please submit documentation in pdf format with as many pages and images as required to explain your design and solution.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as layered PSD/AI files.
Final Fixes
As part of the final fixes, you may also 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.