Challenge Summary
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
PERSONA
- Confirm data captured in deal creation and rectify if missing or incorrect.
- Extensive manual checklist during deal creation.
- Poor manual data entry and validation leads to delays and fall-outs
- 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
SCREENS/FEATURES
Hover on the column headers
Context menu
- 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.
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.