Challenge Summary
Welcome to the HP DMT Special Deals Platform UI Redesign Challenge.
In this challenge we are looking to redesign a module of the special pricing platform of our multinational IT supplier client HP, based on their current design system.
HP & Topcoder
HP is excited to include the Topcoder Design Community within their design process and existing design tools. HP is looking to run a series of challenges with the Topcoder Design Community and leverage the power of Figma to keep everything organized and provide consistency across the design system and assets.
In this challenge Topcoder is offering a $50 bonus to any designer who submits using Figma as their design tool! (*design must be a valid submission). We are also offering an additional $100 bonus to any designer who wins a final placement and also submits using Figma (for a total of $150) This will cover a year's subscription to Figma.
Note: Using Figma as a design tool for this challenge is highly encouraged and Topcoder is offering a bonus. If you want to use your preferred design tool you can but realize that future challenges in this series will require Figma only.
Sales support employees of HP who are responsible for special deals for their customers.
Name: Sorina
Occupation: Deal Creator
Goals: Confirm data captured in deal creation and rectify if missing or incorrect.
Frustrations:
Wants: The ability to validate configs in an optimized environment that includes improved decision-making support tool and analysis capability to improve margin and win-rate of the deal.
Creativity: 4
1: barely new ideas 10: a utopic product with features not proven to be able to be fully implemented
Aesthetics: 8
1: low-fidelity design, wireframe or plain sketch 10: top-notch finished looking visual design
Exploration: 4
1: strictly follow an existing reference or production guideline 10: open to alternative workflows/features not listed here that would help the overall application
Branding: 10
1: don’t care at all about the branding just functionality 10: without a properly branded product there is no success
Please make sure your design includes the following screens/sections. Our client is open to your suggestions about the structure of the screens as long as the screens deliver the same content and allows for the same functionality that is shown on the attached samples.
The client’s design team has provided a sample of one of the screens (that is not in scope) to show you how they imagine the redesign with their design library elements. Please note, that you only have to design the popups, not the UI below them.
1. Customer Lookup (ref. screen: #1)
When a new deal is being created the user has to add a customer to the deal, which he can perform through the Customer Lookup function. Please refer to the reference screen for the filter fields. Once the search has finished the results appear on the right panel with the matching customers. Please provide an instance of this screen for the case when there are no matching results as well.
The user has to double click on the customer or highlight the record and click OK. Please note that there are further functions available in the context menu (right click) of the search results. You can see these on the reference screens. Please provide the below interactions.
Put Customer on Current Deal: Please provide the modal that comes up when the user selects this option from the context menu.
2. Reseller Lookup (ref. screen: #2)
The user can add resellers (partners like distributors (reseller A) or retail partners (reseller B)) to the deal. To do that they have to search for the partner(s) in the database. Please refer to the reference screen for the filter fields. Once the search has finished the results appear on the right panel with the matching companies. The user can select one or more records and add them to the bottom list. The client is open to alternative layouts or solutions for this process. Once the reseller(s) has been selected the user clicks the OK button to add the reseller(s) to the deal. Please note, that the user can add Reseller A and Reseller B types of resellers, which have slightly different search fields (check the reference screens). In addition, please provide an instance of this screen for the case when there are no matching companies as well.
3. Exclude PLs for Resellers (ref. screen: #3)
The resellers added to the deal have access to different product lines by their contracts. The user has a chance to limit the deal for each reseller by product line on this screen. Firsty, he has to select the reseller on the top table, The PLs at the bottom are a reflection of the products added to the deal. By ticking the exclusion box for one of the product lines (PL), the reseller selected will no longer have access to that PL (will not be able to order that PL). The user can set the excluded PLs for each reseller in the top list.
4. Product Lookup (ref. screen: #4)
The user can perform a search for the product(s) to be added to the deal based on the product number or product description on this popup, which has 3 main tabs: Product Search, Hierarchy Search and Browse Hierarchy.
The bottom list can be shown or hidden by the user. Products can also be removed from the bottom list. Once the list of products is finalized, the user has to click on the Add List to Deal button to end the flow on this popup.
Please include a key for all the tabs to remind the users of which products or hierarchies might qualify for the deal. Also a Verify Products button should be included on all tabs, but the further function is not in scope.
5. Copy Deal (ref. screen: #5)
The user can create a new deal based on an existing one, so the deal data would automatically be carried over to the new deal. If he wants to change some of the data, he can do that on this screen.
The below items have been attached.
In this challenge we are looking to redesign a module of the special pricing platform of our multinational IT supplier client HP, based on their current design system.
HP & Topcoder
HP is excited to include the Topcoder Design Community within their design process and existing design tools. HP is looking to run a series of challenges with the Topcoder Design Community and leverage the power of Figma to keep everything organized and provide consistency across the design system and assets.
In this challenge Topcoder is offering a $50 bonus to any designer who submits using Figma as their design tool! (*design must be a valid submission). We are also offering an additional $100 bonus to any designer who wins a final placement and also submits using Figma (for a total of $150) This will cover a year's subscription to Figma.
Note: Using Figma as a design tool for this challenge is highly encouraged and Topcoder is offering a bonus. If you want to use your preferred design tool you can but realize that future challenges in this series will require Figma only.
CHALLENGE OBJECTIVES
- To create the UI of 8 screens of a responsive web application in desktop format.
- To provide a better user experience and a seamless flow to complete user goals.
- To explore the best and most convenient way to handle the amount of data on the screens while using the client’s Figma library and following UI/UX best practices.
Round 1
Please provide the following screens for checkpoint along with your clickable Marvel prototype with hotspots.- 2. Reseller Lookup
- 3. Exclude PLs for Resellers
- 4. Product Lookup
- 6. Opportunity Lookup
Round 2
Please provide the following screens with checkpoint feedback incorporated for final review along with your clickable Marvel prototype with hotspots.- 1. Customer Lookup
- 2. Reseller Lookup
- 3. Exclude PLs for Resellers
- 4. Product Lookup
- 5. Copy Deal
- 6. Opportunity Lookup
APPLICATION OVERVIEW
- The Eclipse Suite provides the capability to create and approve special pricing discount requests and manage the associated workflows and systemic distribution of approved prices. The suite consists of several modules for different purposes.
- When there is a deal that HP would like to win due to for instance competition on the market, their customers can request for special pricing of products. In this case HP’s sales support employees will enter the deal details into the Eclipse application. The details will be passed through different team members, who will analyze the price requests if they can authorize the deal or not. If the deal gets authorized a quote will be created for the customer.
- In this challenge we are going to cover some screens of the Deal Manager module, which has a purpose of requesting and approving special pricing deals.
- The screens in scope are popup screens from the more complex base screens that are not in scope for this challenge.
AUDIENCE
Sales support employees of HP who are responsible for special deals for their customers.
PERSONA
Name: SorinaOccupation: Deal Creator
Goals: Confirm data captured in deal creation and rectify if missing or incorrect.
Frustrations:
- Extensive manual checklist during deal creation.
- Poor manual data entry and validation leads to delays and fall-outs
Wants: The ability to validate configs in an optimized environment that includes improved decision-making support tool and analysis capability to improve margin and win-rate of the deal.
DESIGN GOALS & PRINCIPLES
- An improved user experience throughout the screens in scope.
- The client’s design library, which is based on Material Design, should be used to recreate the UI.
- Make use of the Usability Heuristics for user interface design
- Create a UI that adheres to the Usability principles and Web Content Accessibility Guidelines
EXPLORATION SCORE
Creativity: 4
1: barely new ideas 10: a utopic product with features not proven to be able to be fully implemented
Aesthetics: 8
1: low-fidelity design, wireframe or plain sketch 10: top-notch finished looking visual design
Exploration: 4
1: strictly follow an existing reference or production guideline 10: open to alternative workflows/features not listed here that would help the overall application
Branding: 10
1: don’t care at all about the branding just functionality 10: without a properly branded product there is no success
SCREENS/FEATURES
Please make sure your design includes the following screens/sections. Our client is open to your suggestions about the structure of the screens as long as the screens deliver the same content and allows for the same functionality that is shown on the attached samples.The client’s design team has provided a sample of one of the screens (that is not in scope) to show you how they imagine the redesign with their design library elements. Please note, that you only have to design the popups, not the UI below them.
1. Customer Lookup (ref. screen: #1)
When a new deal is being created the user has to add a customer to the deal, which he can perform through the Customer Lookup function. Please refer to the reference screen for the filter fields. Once the search has finished the results appear on the right panel with the matching customers. Please provide an instance of this screen for the case when there are no matching results as well.
The user has to double click on the customer or highlight the record and click OK. Please note that there are further functions available in the context menu (right click) of the search results. You can see these on the reference screens. Please provide the below interactions.
Put Customer on Current Deal: Please provide the modal that comes up when the user selects this option from the context menu.
2. Reseller Lookup (ref. screen: #2)
The user can add resellers (partners like distributors (reseller A) or retail partners (reseller B)) to the deal. To do that they have to search for the partner(s) in the database. Please refer to the reference screen for the filter fields. Once the search has finished the results appear on the right panel with the matching companies. The user can select one or more records and add them to the bottom list. The client is open to alternative layouts or solutions for this process. Once the reseller(s) has been selected the user clicks the OK button to add the reseller(s) to the deal. Please note, that the user can add Reseller A and Reseller B types of resellers, which have slightly different search fields (check the reference screens). In addition, please provide an instance of this screen for the case when there are no matching companies as well.
3. Exclude PLs for Resellers (ref. screen: #3)
The resellers added to the deal have access to different product lines by their contracts. The user has a chance to limit the deal for each reseller by product line on this screen. Firsty, he has to select the reseller on the top table, The PLs at the bottom are a reflection of the products added to the deal. By ticking the exclusion box for one of the product lines (PL), the reseller selected will no longer have access to that PL (will not be able to order that PL). The user can set the excluded PLs for each reseller in the top list.
4. Product Lookup (ref. screen: #4)
The user can perform a search for the product(s) to be added to the deal based on the product number or product description on this popup, which has 3 main tabs: Product Search, Hierarchy Search and Browse Hierarchy.
- Product Search Tab: The user can search by a product number or description on this tab. Based on the selection on the right (Search in prod hierarchy or Search in price list) the search results will be shown on the right. Please provide both options. The user has to select the product and either directly add to the deal or start to gather products to be added in the bottom list.
- Hierarchy Search Tab: The user can search by Hierarchy ID or free text on this tab. The search results will be shown on the right. The user has to select the hierarchy level and either directly add to the deal or start to gather more to be added in the bottom list.
- Browse Hierarchy Tab: The user can start to drill into the product hierarchy on this tab and filter the hierarchy as well to be able to find the right model easier. Please check the reference screen for further details on the filtering. On this tab the user can add groups of products (different hierarchy levels) to the list at by moving an upper level to the list (e.g. Workstation Monitors.). The hierarchy consists of five levels, from top to bottom: class, type, series, model and PN. The Price Products button is also needed for this screen, but the function is not in scope.
The bottom list can be shown or hidden by the user. Products can also be removed from the bottom list. Once the list of products is finalized, the user has to click on the Add List to Deal button to end the flow on this popup.
Please include a key for all the tabs to remind the users of which products or hierarchies might qualify for the deal. Also a Verify Products button should be included on all tabs, but the further function is not in scope.
5. Copy Deal (ref. screen: #5)
The user can create a new deal based on an existing one, so the deal data would automatically be carried over to the new deal. If he wants to change some of the data, he can do that on this screen.
- Select Deal type - dropdown (values: al, Value, Volume)
- Country - dropdown (list of countries)
- Business Model - dropdown (numerous options, check the reference screens for reference)
- Language - dropdown (Languages applicable for the selected country. If only one language is available, the field would be auto filled and become disabled.)
- Price List - dropdown - (List of price lists applicable for the selected country. If only one is available, the field would be auto filled and become disabled.)
- Currency - dropdown - (Currencies applicable for the selected country. If only one currency is available, the field would be auto filled and become disabled.)
- Price Term Code - dropdown - (List of Price term codes applicable for the selected country. If only one is available, the field would be auto filled and become disabled.
Please note, if the user changes the deal type, all the below fields will become empty, so provide the flow accordingly. We need an OK and a Cancel button on the popup. The OK button would remain disabled until all the fields get filled in.
6. Opportunity Lookup (ref. screen: #6)
Some deals are based on requests the resellers make in another system. The user can enter a Request ID or and Opportunity ID and import data of the company made the request. The user can compare the customer data in Eclipse and the third party system, and if he decides, he can override the customer data in Eclipse with the new data by checking override field by field. Please note that the screen name has been changed from ‘SFDC Opportunity Lookup’ to ‘Opportunity Lookup’
6. Opportunity Lookup (ref. screen: #6)
Some deals are based on requests the resellers make in another system. The user can enter a Request ID or and Opportunity ID and import data of the company made the request. The user can compare the customer data in Eclipse and the third party system, and if he decides, he can override the customer data in Eclipse with the new data by checking override field by field. Please note that the screen name has been changed from ‘SFDC Opportunity Lookup’ to ‘Opportunity Lookup’
BRANDING GUIDELINES
- Follow the design library (attached)
- Use the attached font
DESIGN ASSETS
The below items have been attached.
- Figma Design library
- Reference screens
- Sample screen design by HP design team
- Glossary of terms
FORM FACTOR
- Desktop - 1920 x 850 px (ideal scenario)
- Please note that the minimal resolution that the app needs to support is 1440 x 640 px.
FINAL DELIVERABLES
- All original source files
- Create files in Adobe XD, Sketch or Figma.
- If you used Figma, include your Figma link in your Declaration.txt as 'Figma URL'.
- UPDATE We need you to upload your screens to Marvel App
• Please request for marvel app in the challenge forum• Include your Marvel app URL in your Declaration.txt. Label it “MarvelApp URL”
- For this challenge it is crucial that you add hotspots to the screens, otherwise you may run the risk of your submission will not be reviewed by the client.
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.