Challenge Summary
Welcome to ABB Commodity Intelligence Market Mobile Application Design Challenge
In this challenge, we are looking for your help to create some design screen for Commodity Intelligence Market mobile application. This application purpose is to let our client easier to watch the Commodity like Metals, Plastic & Paper price in market.
We are providing wireframe that are illustrative of the concepts we want to see, but we do not want to constrain the ideas to the provided sketches. The sketches can work as wireframe on what data need to be included, you don’t need to copy paste the sketch as is.
Read more details information on challenge specification. Let’s discuss any questions you have!
1). Splash Screen
2). Login Screen
3). Dashboard Summary Screen
4). Metal Detail Screen
5). App Icon
Note: Feel free to submit more screens for early feedback
1). Splash Screen
2). Login Screen
3). Dashboard Summary Screen
4). Metal Detail Screen
5). App Icon
Design Page Requirements
1). Splash Screen
Design Reference: Design-References/01-Splash-Screen.png
- Follow exactly the provided Design-References for this task!
2). Login Screen
Design Reference: Design-References/EDISONDA_ABB_Login-smartfon-02.png
- Follow exactly the provided Design-References for this task!
- Fields need displayed are only userid and password.
- Put company logo placeholder.
3). Dashboard Summary Screen
Design Reference: Design-References/03-WF-Dashboard.png
- This is Dashboard Summary Screen look and feel.
- Display hamburger menu on the header bar
- We need put logout button in page, also can be inside a menu as we will need a menu later.
- Remember this screen will be filled with many Commodity like Metals, Plastics and paper category.
- Each category need displayed last updated information.
- Create different background for the newest updated category. Also, think about how the oldest should displayed
- Each category can have one or multiple metals/commodities listed below it.
-Each category need able to expand/collapse the section
- Display latest chart & prices for related commodities.
- Charts are only required for the detailed level on the summary screen only current price, price unit and commodity name are mandatory. Chance in value since last report, location (where the data came from), price trend chart and price changes for 1, 3, 6, and 12 months are optional and should only be including if usability permits.
- You might need create different variations of bullish/bearish arrow on the market
- “LME” is the abbreviation of London Metal Exchange
- Display per unit price e.g. USD/mt
- Percentage on the bottom screen represents 1, 3, 6 & 12 month % change in price
- Create different color to indicate the positive & negative changes.
- Ignore the red bar behind the 6,7%
4). Metal Detail Screen
Design Reference: Design-References/04-WF-Detail.png
- Back button need take user back to Dashboard screen
- Display quick short text summary
- Create all Pricing Summary. Follow sample like provided screenshot
- Create 2 chart based on on wireframe. Feel free to suggest different chart styling as long they clearly explains the values
5). App Icon
Design Reference: Design-References/05-App-Icon.png
- Use provided Icon-Generators.zip as template of your icon design
- App Icon need clearly explained about Metal Commodity Market Application
- Follow client design format!
- Your icon must not using rounded shape.
- Put the icon inside the black background
- Make sure they use vector shape format. Easy to resize.
- Create App icon variations based on the template
Design Submission Formats:
a). Mobile Retina Portrait Screen Size: 750px(w) × 13340px(h)
b). Design theme, colors, typography.
- Color Pallette: Refer to Design-References/07-Color-.png
- Fonts: Download the attached ABB_Neue_Helvetica_eText.zip
- Logo: Download the attached abb_logo_all.zip
- Icon: Follow icon style/theme based on Design-References/14-Example-Icon-1.png, 14-Example-Icon-2.png, 14-Example-Icon-3.png
- Design Guideline: Please check screens inside Design-References folder to get better understanding about our expected styleguide
d). Submission Design Presentation
- As part of your submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- If you need an MarvelApp Project, send email OR via challenge forum to this following email address: lunarkid@copilots.topcoder.com
- Important! Make sure to include a URL/Link to your MarvelApp within your "notes.txt"
Target User
- Internal Employees
Judging Criteria
- How well you create ABB Metal Commodity Market Mobile Application Design!
- Follow Client Design Guideline
- Cleanliness of your graphics and design.
- User Experience.
Submission & Source 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
- Submit JPG/PNG image files based on Challenge submission requirements stated above.
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop/Illustrator/Sketch and saved as editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
In this challenge, we are looking for your help to create some design screen for Commodity Intelligence Market mobile application. This application purpose is to let our client easier to watch the Commodity like Metals, Plastic & Paper price in market.
We are providing wireframe that are illustrative of the concepts we want to see, but we do not want to constrain the ideas to the provided sketches. The sketches can work as wireframe on what data need to be included, you don’t need to copy paste the sketch as is.
Read more details information on challenge specification. Let’s discuss any questions you have!
Round 1
Initial ABB Commodity Intelligence Market Mobile Application Design for these following pages on Mobile screen size1). Splash Screen
2). Login Screen
3). Dashboard Summary Screen
4). Metal Detail Screen
5). App Icon
Note: Feel free to submit more screens for early feedback
Round 2
Final ABB Commodity Intelligence Market Mobile Application Design for these following pages on Mobile screen size combined with Checkpoint Feedback1). Splash Screen
2). Login Screen
3). Dashboard Summary Screen
4). Metal Detail Screen
5). App Icon
Design Page Requirements
1). Splash Screen
Design Reference: Design-References/01-Splash-Screen.png
- Follow exactly the provided Design-References for this task!
2). Login Screen
Design Reference: Design-References/EDISONDA_ABB_Login-smartfon-02.png
- Follow exactly the provided Design-References for this task!
- Fields need displayed are only userid and password.
- Put company logo placeholder.
3). Dashboard Summary Screen
Design Reference: Design-References/03-WF-Dashboard.png
- This is Dashboard Summary Screen look and feel.
- Display hamburger menu on the header bar
- We need put logout button in page, also can be inside a menu as we will need a menu later.
- Remember this screen will be filled with many Commodity like Metals, Plastics and paper category.
- Each category need displayed last updated information.
- Create different background for the newest updated category. Also, think about how the oldest should displayed
- Each category can have one or multiple metals/commodities listed below it.
-Each category need able to expand/collapse the section
- Display latest chart & prices for related commodities.
- Charts are only required for the detailed level on the summary screen only current price, price unit and commodity name are mandatory. Chance in value since last report, location (where the data came from), price trend chart and price changes for 1, 3, 6, and 12 months are optional and should only be including if usability permits.
- You might need create different variations of bullish/bearish arrow on the market
- “LME” is the abbreviation of London Metal Exchange
- Display per unit price e.g. USD/mt
- Percentage on the bottom screen represents 1, 3, 6 & 12 month % change in price
- Create different color to indicate the positive & negative changes.
- Ignore the red bar behind the 6,7%
4). Metal Detail Screen
Design Reference: Design-References/04-WF-Detail.png
- Back button need take user back to Dashboard screen
- Display quick short text summary
- Create all Pricing Summary. Follow sample like provided screenshot
- Create 2 chart based on on wireframe. Feel free to suggest different chart styling as long they clearly explains the values
5). App Icon
Design Reference: Design-References/05-App-Icon.png
- Use provided Icon-Generators.zip as template of your icon design
- App Icon need clearly explained about Metal Commodity Market Application
- Follow client design format!
- Your icon must not using rounded shape.
- Put the icon inside the black background
- Make sure they use vector shape format. Easy to resize.
- Create App icon variations based on the template
Design Submission Formats:
a). Mobile Retina Portrait Screen Size: 750px(w) × 13340px(h)
b). Design theme, colors, typography.
- Color Pallette: Refer to Design-References/07-Color-.png
- Fonts: Download the attached ABB_Neue_Helvetica_eText.zip
- Logo: Download the attached abb_logo_all.zip
- Icon: Follow icon style/theme based on Design-References/14-Example-Icon-1.png, 14-Example-Icon-2.png, 14-Example-Icon-3.png
- Design Guideline: Please check screens inside Design-References folder to get better understanding about our expected styleguide
d). Submission Design Presentation
- As part of your submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- If you need an MarvelApp Project, send email OR via challenge forum to this following email address: lunarkid@copilots.topcoder.com
- Important! Make sure to include a URL/Link to your MarvelApp within your "notes.txt"
Target User
- Internal Employees
Judging Criteria
- How well you create ABB Metal Commodity Market Mobile Application Design!
- Follow Client Design Guideline
- Cleanliness of your graphics and design.
- User Experience.
Submission & Source 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
- Submit JPG/PNG image files based on Challenge submission requirements stated above.
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop/Illustrator/Sketch and saved as editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
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.