BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$100‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to the HP DMT Special Deals Platform UI Redesign Challenge 2.

In this challenge we are looking to continue the redesign of 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. 

HP’s Review Process
In this challenge HP is requiring you use Figma as your design tool and you use the provided Figma template for organizing and naming conventions. Using the template will improve your ability to create a clean and straightforward source file that HP can follow and use within their design team. The template is attached to the challenge.

IMPORTANT: In this challenge Topcoder will be screening your design submission to check if it complies with the Template and HP Design Library requirements. It is important that you understand and follow the rules and requests of this challenge. Failing to use Figma and the template means your design will not be reviewed by the customer.   

Topcoder Figma Bonus:
Topcoder will award five (5) $150 bonuses (this will cover a year's subscription to Figma) as part of a random drawing at the end of the challenge. To qualify for the prize you must pass screening and submit to the final round of the challenge. At the end of the challenge Topcoder will use a randomizer to pick from the selected eligible submitters and award the bonus prizes. 
 

Round 1

Please provide the following screens for checkpoint along with your clickable Figma prototype with hotspots.
  • 1. View Audience
  • 2. Table Component Concept
  • 5. Export Deal
  • 6. Cancel Deal 

Round 2

Please provide the following screens with checkpoint feedback incorporated for final review along with your clickable Figma prototype with hotspots.
  • 1. View Audience
  • 2. Table Component Concept
  • 3. Create New Customer
  • 4. Advanced Copy Deal
  • 5. Export Deal
  • 6. Cancel Deal 
  • Only members that register for this challenge will see this description.

Note: Using Figma as your design tool for this challenge is required and Topcoder is offering a bonus. If you don't use Figma your design will fail screening and your design will not be shown to the customer.
 

CHALLENGE OBJECTIVES

  • To create the UI of 6 screen flows 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.

 

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: Sorina
 
Occupation: 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. Please note, that you only have to design the popups, not the UI below them.
 
1. View Audience (ref. screen: #1)
The user can check the audience of resellers that has already been added to the deal. This results in a read-only list with the audience for reseller A and B separated. 
 
2. Table Component Concept (ref. screen: #2)
Since the application uses tables massively, there is also a throughout filtering, sorting function and others, for which we are looking for your ideas. Please show the below functions on the above View Audience table:

Hover on the column headers
On hover on a table header an icon will be shown, clicking on which the user will be shown the context menu. If there is any sorting or filter is already active in the column, a filter icon is shown until the filter or the sorting is cleared.

Context menu
From the context menu the user will be able to choose from the following options. Please show the result as well of the following functions:
  • Sort by: This option has further options to select from.
    • Ascending: This option will sort the column contents in ascending order.
    • Descending: This option will sort the column contents in descending order.
  • Customize columns: This option opens a popup where the user can set the visibility and the order of the columns. Example has been given in the reference file, which has to be recreated based on the current design library.
  • Filter data grid: This option results in a popup with advanced filtering options. Example has been given in the reference file, which has to be recreated based on the current design library with modification to the buttons, as the client would like to have the Filter and Cancel buttons at the bottom of the popup in a form of buttons instead of icons.
  • Freeze columns: The user can select the number of columns to be frozen or reset functionality. This option has further options to select from.
    • Unfreeze
    • 1
    • 2
    • 3
    • 4
  • Best fit: This option has further options to select from. The user can resize the  selected column/columns based on the sublevels, so that all the contents of the field will be visible.
    • This column
    • All columns
    • Wrap text: Example has been given in the reference file, which has to be recreated based on the current design library.
  • Show/Hide search panel: This option displays an in-table search bar on top of the table, on the right side (if possible), where the user can enter keywords that will be looked up in all the fields of the table. The results should be highlighted. This panel should be lightweight, think of it as the Google search form, so less buttons, more icons.
  • Clear sorting: If any sorting is active, this option resets the table contents to the original order.
  • Export: This function exports the contents of the table.
 
3. Create New Customer (ref. screen: #3)
If the customer the user would like to add to the deal is not yet in the database, it is possible to add them. The screen consists of textboxes and dropdowns (please refer to the reference screens for the fields). Company name is the only required field so if that is missing the record cannot be saved. If the customer has been added to the database, the user gets a success message.
 
4. Advanced Copy Deal (ref. screen: #4)
Besides the copy deal function that has been covered in the first challenge of this series, the user can opt for an advanced copy deal, which means that he can select if he would like to copy the bundles, configs, resellers, comments and attachments from the original deal. These options are available only if the original deal had any of those (e.g. if there are no attachments in the original deal, this opinion is disabled). When any of these options are checked (expect the products), the user can open a list, in which he can further check or uncheck the individual records to be copied. After the deal has been copied a message appears with further information about the success or possible errors. For content please check the reference screens.
 
5. Export Deal (ref. screen: #5)
The application can generate an Excel file with the data of the deal. The user can select which data they would like to include in the export from a collapsible/expandable list. They also have to select the pricing date ranges from three options: all, last date ranges, current date ranges. Lastly, they have to specify the location (if they would like to change the default location, that would happen on the OS default dialog) and the name of the file to be exported and if they would like to open the generated file.
After the user clicks OK, a progress bar is showing how the process goes. After the app has finished a success message appears.
 
6. Cancel Deal (ref. screen: #6)
If for any reason a deal has to be cancelled, the cancellation has to be submitted and explained through the system. For now, this popup handles only cancellation, however, it is suitable for other status updates as well. The user has to select the status update type, which in this case will be ‘Deal Cancelled’. Based on this selection will the status update reason dropdown be populated, from which the user can select multiple items. The selected items will as well be copied to the status update comments / instructions field, where the user can enter further text. Moreover, the user has to set if he would like to send email notifications about the status change and has to specify the recipients. He can either select from the 4 options in the list on the popup, out of which one is ‘other’, where the user has to add an internal email address (for external addresses an error message will be shown). Additionally, the user can select the sales reps to send the notification one by one. Once the cancellation request has been submitted, the user has to confirm it on a modal, as the action is irreversible. At the end of the flow, the user gets a confirmation of the successful cancellation.
 

BRANDING GUIDELINES

 
  • Follow the design library (attached). Don’t detach the components from the library.
  • Use the attached font
 

DESIGN ASSETS


The below items have been attached.
  • Figma Design library
  • HP Simplified font
  • Reference screens
  • Glossary of terms
  • Figma template and naming conventions
 

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.
 

JUDGING CRITERIA

  • Keeping as true as possible to the provided library.
  • Integrating all elements of the existing UI while improving UX (if needed).
  • Creating a clean and cohesive design.
  • Showing and implementing knowledge of UX/UI standards.
  • Recreating all given screenshots.
  • Showing the ability to integrate given feedback and using given templates.
 

FINAL DELIVERABLES

  • All original source files
    • Create files only in Figma.
  • Figma Prototype - 
    • Use hotspots to create a flow where possible.
    • Include your Figma URLs both prototype and view only rights in your Declaration.txt

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.

Stock Photography

Stock photography is not allowed in this challenge. All submitted elements must be designed solely by you. See this page for more details.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2021 Topcoder(R) Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Figma

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30174723