ABC Pricing Optimization Web App Redesign Challenge

AngularPSD FilesTree DiagramsColor ModesAdobe PhotoshopAdobe Illustrator

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

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to the "ABC Pricing Optimization Web App Redesign Challenge". In this challenge we are looking to refresh the style of one of our client’s internal web apps called MPO by applying a modern style to it. This time the client wants to keep the existing flows and interactions only the style is needed to be changed. 

Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!

Challenge Objectives
  • Redesign existing screens to a modern UI
  • 6 screens with in-between states
  • Desktop designs in 1366px width

Round 1

For Round 1 please provide at least the following screens along with hotspots on your prototype.
  • 01.02. User Dashboard
  • 02.01. Default Price Method List
  • 02.02. New Default Price Method Popup (only final state)
  • 02.03. Target GMP list
  • 02.04. New Target GMP (only final state)

Round 2

For Round 2 please provide all the following screens along with hotspots on your prototype.
  • 01.01. Home Screen
  • 01.02. User Dashboard
  • 02.01. Default Price Method List
  • 02.02. New Default Price Method Popup (all states)
  • 02.03. Target GMP list
  • 02.04. New Target GMP (all states)

Project Background
  • Our client who is a worldwide IT company would like to modernize the UI of one of its internal web applications, which is a price optimization tool. They are satisfied with the flow and the interaction within the current app, so they would like to keep those and would like to have a more modern style for the UI. 
  • We are providing the current screens for which you have to design. The front-end will be developed in Angular UI.
  • The MPO application is used to support price management through several functions and has many modules. The module visibility is based on user role and we will consider the superuser who has all the permissions and all modules are visible to him. We will cover a small part of the whole application in this challenge.

Screen/Function Requirements
Please prepare the following screens for your submission.
 
01. General Module
All the users have access to this module that consists of 2 screens.
 
01.01. Home Screen
The landing screen of the application is the home screen, which contains the top and left navigation. Please refer to the attached screenshot. 
MPO menus are located on the left sidebar grouped in modules. The visibility of the modules is limited by role. The sidebar can be collapsed or expanded so as the modules within.
The top menu has the profile information and 4 other menu items that are independent of the modules: About, Training, Support and Log out.
 
01.02. User Dashboard
Please refer to the attached screenshot. To create the screens, please use the data that you can see on the screenshot. 
  • The application has a separate user dashboard screen, which is quite simple and the client would like to keep the simplicity.
  • The user dashboard shows price round statuses for the user:
    • Error during submission
    • Partially Approved / Rejected / Submitted error
    • Approved
 
02. Price Admin Module
The Price Admin module contains screens/functions that let the user set up default values/master data that will be used throughout the application for different calculations and simulations. We would like you to design for the following 3 sections in the Price Admin module:
 
02.01. Default Price Method List
A price method is the logic to set or calculate prices. Depending on the price method, the required input/parameter to calculate the price is different. The price method formula determines what is required and how the price is calculated. The default price method is assigned at the geo hierarchy, pricing hierarchy level (class, family, series or model) and product hierarchy, so that a price method can be determined for each product in a pricing scenario. Please also provide a confirmation popup message for deletion as you can see on the prototype.
  • The main content of this screen contains the already created default price methods in a table. Please refer to the screenshot or prototype.
  • The following actions can be performed on the screen:
    • Create a new record aka a default price method.
    • Download a template
    • Import
    • Export
    • Delete (at the moment the user has to trigger this with the delete button on his keyboard. We might advise though to implement a delete button on the toolbar)
    • Filter based on regions, with a dropdown to select a specific region in which we are searching (values: All Regions, Americas, EMEA, Asia Pacific)
    • Help
 
02.02. New Default Price Method Popup
On this screen, the user adds a new association of a pricing method and a geo hierarchy, pricing hierarchy, and product hierarchy combination. There are six price methods supported in MPO which are: Fixed, Cost Plus, Multiplier, Street Price Dealer Margin, Street Price List Price and LP=SP-VAT. Please refer to the screenshot or prototype. The flow is as follows
  • First, the user browses in a tree structure for the geo setting concerned, e.g. “United States - US”, and adds it to the selection.
  • Then he searches the pricing hierarchy the same way and selects one setting, e.g. “Business Desktop PCs - 23J0”
  • The product hierarchy setting is the next, the task is similar: selecting a setting from a tree structure, like “TA - Mobile Workstations”
  • The price method will be selected for the above segment from a dropdown, e.g. “Fixed Value”. 
  • Target GPM (Gross Profit Margin) is also to be added which is a percentage value, like “10%”
  • After everything has been selected/filled in the user can save the new default price method.
  • Please provide a success message popup as well to close the creation of the new setting.
 
02.03. Target GMP list
This admin screen is used to define the financial Target GPM% to display for reference in price setup and analytics. The financial Target GPM% is set at the geo hierarchy and product hierarchy level. Please refer to the screenshot or prototype (use the same method/location for actions throughout the app, even if this screen, for instance, has a different solution). 
  • Similarly to the default price method setting and creation, the user can see a list of target GPM associations in a table. Please refer to the screenshot or prototype.
  • The following actions can be performed on the screen:
    • Create a new record aka a target GMP.
    • Download a template
    • Import
    • Export 
    • Delete (at the moment the user has to trigger this with the delete button on his keyboard. We might advise though to implement a delete button on the toolbar)
    • View import results
    • Search with a dropdown to select based on what we are searching 
    • Help
 
02.04. New Target GMP
On this screen, the user adds a new association of a target GMP and a geo hierarchy, and Product Hierarchy combination. Please refer to the screenshot or prototype. The flow is as follows
  • First, the user browses in a tree structure for the geo setting concerned, e.g. “EMEA - 02”, and adds it to the selection.
  • The product hierarchy setting is the next, the task is similar: selecting a setting from a tree structure, like “TA - Mobile Workstations”
  • Target GPM (Gross Profit Margin) is also to be added which is a percentage value. 
  • After everything has been selected/filled in the user can save the new default price method.
  • Please provide a success message popup as well to close the creation of the new setting.
Challenge Assets
  • We provide a Marvel prototype with screens and flows of the existing UI of the MPO app.
  • Existing screenshots of the required screens.
  • Sample data is also provided in an editable format, so you can copy the text.

Branding Guidelines
Please consider the below guidelines during your design process:
  • Consider the attached branding.
  • Stock photos and stock icons are allowed from the approved sources, as long as you declare them.

Judging Criteria
Your submission will be judged on the following criteria:
  • How well the brand has been applied to the screens.
  • How close the experience it is to the current state while applying the modern design.

Final Deliverables
  • All original source files.
  • Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator, Sketch or Adobe XD
  • Marvel prototype

Marvel Prototype
We need you to upload your screens to Marvelapp.
  • Please send your marvel app request to pere.viktoria@gmail.com
  • To be able to showcase your design to the client please provide hotspots on your prototype.
  • You MUST include your Marvel app URL in your declarations.txt (in your marvel app prototype, click on share and then copy the link).

Submission & Source Files
Final Deliverables
For submission you have to upload a zip file that contains the following 4 files:
 
  • Source.zip – All original source files.
All source files of all graphics created in vector format in either Adobe Illustrator or any similar software should be saved as editable files. 
  • Submission.zip – PNG/JPG files
Submit JPG/PNG image files based on the Challenge submission requirements stated above. 
  • preview.png – Your preview image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72 dpi and place a screenshot of your submission within it.
  • declarations.txt – All your declarations and notes
This file must contain your notes if any, fonts used, links to the stock images and icons used and the link to your Marvel project.
 

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.

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:

2020 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

  • Layered PSD files created in Adobe Photoshop or similar
  • AI files created in Adobe Illustrator or similar
  • Sketch
  • Adobe XD

You must include all source files with your submission.

Submission limit

5 submissions

ID: 30113998