Challenge Summary
Welcome to "GE - B2B App Homepage Design Continuation and Refinement Challenge". Recently we just completed 'B2B App Homepage Design Concepts Challenge' and we are now looking to continue iterating, refining and pushing the B2B homepage user experience!
In this challenge, we are providing the winning source from the previous challenge as your design base. Let us know if you have any questions!
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
- Homepage updates (Desktop View)
As part of your Checkpoint Submission upload your designs to Invisionapp or Marvelapp so we can provide direct feedback on your designs.
- Make sure to include the Invisionapp or Marvelapp URL/Link to your design within your "notes.txt".
- If you need an Invisionapp Project, please request one from adroc@topcoder.com
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
- Homepage Updates (Desktop, Tablet (where needed) and Phone)
As part of your Final Submission upload your submission to Invisionapp or Marvelapp so we can provide direct feedback on your designs.
- Make sure to include the Invisionapp or Marvelapp URL/Link to your design within your "notes.txt".
- If you need an Invisionapp Project, please request one from adroc@topcoder.com
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
Challenge Details
As we evolve in our journey with our new B2B application, we are seeking the best way to provide a clean, intuitive home screen that supports both the expert/frequent user and the experience of a more novice user. Users need the ability to create a personal experience based on their needs. This involves selecting the appropriate 'cards' to create a homepage that best works for them.
Design Problem
In the first challenge, the winning designer successfully created a base homepage design experience that resonated with us. We now want you to continue pushing this design forward, think about the UI details relating to the user interactions and visual cues. We want you to think about how the cards flow, stack and get bumped. Help us push and refine the experience!
Design Focus
1) Improve the homepage design
- Review the provided design and look to improve it
- Continue to push the user interface and overall user experience
- We are open to your concepts and new refinements
2) User Interactions
- We want you to think about the small details!
- We want to improve and refine this experience and capture the interaction details
- The interaction details will help us understand your design and provide guidance to the developers
- What happens when a user clicks on the shopping cart icon? What do they see?
- Should a user be able to customize the dashboard more?
- Since this application is also for new users - what visual clues might help them?
- What does the dashboard look like when the user logs into the site for the first time (no orders and no lists?)
3) Responsive Views
- We want to capture and refine the experience across devices (Desktop, Tablet, Phone)
- Priority is Desktop and Phone
- Tablet: Most of the tablet views will use the desktop designs. Only look to capture specific items that should adjust responsively for a better "tablet experience"
4) System Alerts
- We need a design concept for "system alerts" (e.g. a banner message like "Attention: empower will be down for maintenance from 9pm - 10pm ET on June 21") - We are looking for a way we can elegantly communicate upcoming system status
5) Card Arrangement
- Think through what happens when a card gets expanded and bumps another card to the next level
- Capture how a card will show/hide and add/remove - this needs to be simple.
- We need this for both Desktop and Phone
6) New Cards
- Expand on the cards with designs for "Create Case" and "Quick Cart" cards
- Design a "Wide Product" card what is more of a product tree approach to browsing products.
7) Design Updates
Header
- Capture the interactions for the navigation items (hover, click, selected)
- Switch the Cart and Account information
Order Summary and Tracking Order
- Design a way for the user to be able to set the time period of the chart
- Tracking Orders: What is the default view for tracking orders?
- For track order, when user starts typing a code, autosuggest option could appear, displaying results from open/all orders
Card Arrangement Interaction
- Full Card Flow: Think about the full flow of a card from start to finish. What are the interactions? (Example: If I do a product price search, show how to input and request the price, and how input another price search/reset)
- Featured Product Section: Continue to explore how this area can be useful to the user. Capture the different interactions. What will be shown if a user clicks the three dots on this area?
- Drag and Drop: Design the interactions that would simulate what would happen if a user drags and drop one card to another card. what is the appropriate action for this? Does the dragged card appear above the other cards (stacked)? or are the cards overwritten/disappear and replaced by the dragged card? Detail this pattern.
- Settings flyout: What will happen if a user clicks the "Edit Card" link?
- Add/Hide: How do I add Cards that I have hidden? Or add Cards in general?
- Expand/Collapse: What happens when I expand a card that has another card on the same row? Do I click on the whole title or just the arrow?
Search Products
- When a user searches a product by number and sees availability, how does he orders it/goes to see it?
- Can a user search products just by number? Maybe he wants to search by name e.g. "transformer" and then related product should be displayed
Mobile Updates:
Tap Interactions
- Tapping: Be careful of tap features on cards and other areas because a lot of times when you hover, your thumb will cover up the info you want to see being displayed by the tap.
- Think and advise us on what are the mobile interactions on a card and what is the best way to show it.
Homepage (mobile)
- Should everything be collapsed?
- Does the user have the option to hide things?
- Is it better to have actions that take them into stand alone cards? Or Swipe left/right for different cards, with a secondary nav to jump quickly to a card?
Header
- Update the menu navigation icon to the traditional hamburger icon
- Switch the Cart and Account Info
Order Summary and Tracking Order
- Default view: Capture the view when a user has not searched for an order.
- Search: It is currently not clear on how the user will be able to enter the search criteria, please provide suggestion on how user can perform tracking order searching
- Vertical bars: The vertical bars look good and the use of color for different statuses, but when this translates to mobile, the user is not going to be able to hover over the bars. Is there another solution for mobile?
Card Arrangement
- Same as the desktop questions
- How does the card setting flyout work/appear on mobile?
- How does drag-n-drop work?
- How do I Add Cards that I have hidden? Or Add Cards in general?
- Status Legend: In recent orders, we need a legend created. The desktop version has this feature but mobile is missing it.
Screen Size:
- Desktop: 1280px width with height adjusting accordingly
- Tablet: 1536px width with height adjusting accordingly (New Screen)
- Phone: 750px width with height adjusting accordingly
~
Branding Guidelines:
- Continue pushing the provided design and brand
Supporting Documents:
- See attachments (winning design from the previous challenge) and use it as your base 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 use e-commerce solutions.
- Your solution should consider global applicability.
Judging Criteria:
Your submission will be judged on the following criteria:
- How well you push the design and capture the refinement details
- Cleanliness of screen design and user flow
- Overall design and user experience
Submission & Sources 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 winning source from the previous challenge as your design base. Let us know if you have any questions!
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 initial design updates for client feedback- Homepage updates (Desktop View)
As part of your Checkpoint Submission upload your designs to Invisionapp or Marvelapp so we can provide direct feedback on your designs.
- Make sure to include the Invisionapp or Marvelapp URL/Link to your design within your "notes.txt".
- If you need an Invisionapp Project, please request one from adroc@topcoder.com
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
Round 2
Final design updates with Checkpoint Feedback included- Homepage Updates (Desktop, Tablet (where needed) and Phone)
As part of your Final Submission upload your submission to Invisionapp or Marvelapp so we can provide direct feedback on your designs.
- Make sure to include the Invisionapp or Marvelapp URL/Link to your design within your "notes.txt".
- If you need an Invisionapp Project, please request one from adroc@topcoder.com
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
Challenge Details
As we evolve in our journey with our new B2B application, we are seeking the best way to provide a clean, intuitive home screen that supports both the expert/frequent user and the experience of a more novice user. Users need the ability to create a personal experience based on their needs. This involves selecting the appropriate 'cards' to create a homepage that best works for them.
Design Problem
In the first challenge, the winning designer successfully created a base homepage design experience that resonated with us. We now want you to continue pushing this design forward, think about the UI details relating to the user interactions and visual cues. We want you to think about how the cards flow, stack and get bumped. Help us push and refine the experience!
Design Focus
1) Improve the homepage design
- Review the provided design and look to improve it
- Continue to push the user interface and overall user experience
- We are open to your concepts and new refinements
2) User Interactions
- We want you to think about the small details!
- We want to improve and refine this experience and capture the interaction details
- The interaction details will help us understand your design and provide guidance to the developers
- What happens when a user clicks on the shopping cart icon? What do they see?
- Should a user be able to customize the dashboard more?
- Since this application is also for new users - what visual clues might help them?
- What does the dashboard look like when the user logs into the site for the first time (no orders and no lists?)
3) Responsive Views
- We want to capture and refine the experience across devices (Desktop, Tablet, Phone)
- Priority is Desktop and Phone
- Tablet: Most of the tablet views will use the desktop designs. Only look to capture specific items that should adjust responsively for a better "tablet experience"
4) System Alerts
- We need a design concept for "system alerts" (e.g. a banner message like "Attention: empower will be down for maintenance from 9pm - 10pm ET on June 21") - We are looking for a way we can elegantly communicate upcoming system status
5) Card Arrangement
- Think through what happens when a card gets expanded and bumps another card to the next level
- Capture how a card will show/hide and add/remove - this needs to be simple.
- We need this for both Desktop and Phone
6) New Cards
- Expand on the cards with designs for "Create Case" and "Quick Cart" cards
- Design a "Wide Product" card what is more of a product tree approach to browsing products.
7) Design Updates
Header
- Capture the interactions for the navigation items (hover, click, selected)
- Switch the Cart and Account information
Order Summary and Tracking Order
- Design a way for the user to be able to set the time period of the chart
- Tracking Orders: What is the default view for tracking orders?
- For track order, when user starts typing a code, autosuggest option could appear, displaying results from open/all orders
Card Arrangement Interaction
- Full Card Flow: Think about the full flow of a card from start to finish. What are the interactions? (Example: If I do a product price search, show how to input and request the price, and how input another price search/reset)
- Featured Product Section: Continue to explore how this area can be useful to the user. Capture the different interactions. What will be shown if a user clicks the three dots on this area?
- Drag and Drop: Design the interactions that would simulate what would happen if a user drags and drop one card to another card. what is the appropriate action for this? Does the dragged card appear above the other cards (stacked)? or are the cards overwritten/disappear and replaced by the dragged card? Detail this pattern.
- Settings flyout: What will happen if a user clicks the "Edit Card" link?
- Add/Hide: How do I add Cards that I have hidden? Or add Cards in general?
- Expand/Collapse: What happens when I expand a card that has another card on the same row? Do I click on the whole title or just the arrow?
Search Products
- When a user searches a product by number and sees availability, how does he orders it/goes to see it?
- Can a user search products just by number? Maybe he wants to search by name e.g. "transformer" and then related product should be displayed
Mobile Updates:
Tap Interactions
- Tapping: Be careful of tap features on cards and other areas because a lot of times when you hover, your thumb will cover up the info you want to see being displayed by the tap.
- Think and advise us on what are the mobile interactions on a card and what is the best way to show it.
Homepage (mobile)
- Should everything be collapsed?
- Does the user have the option to hide things?
- Is it better to have actions that take them into stand alone cards? Or Swipe left/right for different cards, with a secondary nav to jump quickly to a card?
Header
- Update the menu navigation icon to the traditional hamburger icon
- Switch the Cart and Account Info
Order Summary and Tracking Order
- Default view: Capture the view when a user has not searched for an order.
- Search: It is currently not clear on how the user will be able to enter the search criteria, please provide suggestion on how user can perform tracking order searching
- Vertical bars: The vertical bars look good and the use of color for different statuses, but when this translates to mobile, the user is not going to be able to hover over the bars. Is there another solution for mobile?
Card Arrangement
- Same as the desktop questions
- How does the card setting flyout work/appear on mobile?
- How does drag-n-drop work?
- How do I Add Cards that I have hidden? Or Add Cards in general?
- Status Legend: In recent orders, we need a legend created. The desktop version has this feature but mobile is missing it.
Screen Size:
- Desktop: 1280px width with height adjusting accordingly
- Tablet: 1536px width with height adjusting accordingly (New Screen)
- Phone: 750px width with height adjusting accordingly
~
Branding Guidelines:
- Continue pushing the provided design and brand
Supporting Documents:
- See attachments (winning design from the previous challenge) and use it as your base 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 use e-commerce solutions.
- Your solution should consider global applicability.
Judging Criteria:
Your submission will be judged on the following criteria:
- How well you push the design and capture the refinement details
- Cleanliness of screen design and user flow
- Overall design and user experience
Submission & Sources 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.