Challenge Summary
Welcome to the Chaos Direct - UI Design Update Contest. Chaos has multiple websites/applications that are going through a "branding and design" update. In this contest we need you to analyze the brand new Praxair corporate website (see it here) and update and apply any new design elements to their "Praxair Direct" B2B e-commerce application."
Round 1
Initial Reskin and Design Direction for Client Review
- Home
- Search Results
- Product Detail page
- Store locator
Round 2
Final Design
- Home
- Category Landing Page
- Search Results
- Product Detail page
- Store locator
- Shopping Cart (show 5 products)
- Specialty Page
Plus any Milestone feedback or updates
Contest Details
Chaos is looking to update the user interface and design (reskin) their "Praxair Direct" application. For this contest you need to review the new Praxair corporate site and apply the design ideas and elements to their "Praxair Direct" B2B e-commerce application.
Design Goals
- Update the Praxair Direct site to "work with" and belong to the same corporate family as "praxair.com"
- Analyze the different design elements and decide what are the best design items/elements to update "Praxair Direct"
- The overall goal is to eventually update the site CSS - so be careful to not redesign the functionality - you just need to reskin the application.
Design Notes
- Note the navigation design changes - how will this work on Praxair Direct
- Note the page "grid" layout - how will this work with the Praxair Direct functionality
- Remember Praxair Direct is an e-commerce site and Praxair.com is a corporate site - some changes might be simple like header, color and font treatments.
Reskinning Requirements:
1. Major Design Elements
Make sure to capture the "major" design elements/changes that can be applied to all page
- Header
- Content Grid
- Footer
- Fonts
- Site colors
- Button Colors
- Hyperlink Colors
- Section colors
- Icon updates
- Search updates
1. Page Layout
- The new pages should work within the Praxair brand
- The new site pages should have improved usability
- Functionaly must stay the same
- Make sure to analyze the design elements and adjust colors and fonts appropriately
2. Navigation
Top Navigation
- Refer to the Praxair.com header, and flyout navigation usage
- How would this navigation be integrated into Praxair Direct? What items should not be integrated?
Main Navigation
- Main navigation should work/looks similar to Praxair.com (but for an e-commerce site)
- How should the cart look in the new design?
- How are the sub-menu accessed and organized?
Breadcrumb
- This site - reference site on breadcrumb usage/best practices
3. Slideshow
- Make sure to update based on the new Praxair.com
4. Quick Tools
- How should the Quick Tools be updated into the new design?
5. Featured Products
- How should Featured Products be updated and modernized?
- Product Links should clearly visible.
6. Footer
- Update the footer to match/work with the Praxair.com design
- Keep the footer links
Required Pages
- Home
- Category Landing Page
- Search Results
- Product Detail page
- Shopping Cart (show 5 products)
- Specialty Page
- Store Locator
IMPORTANT
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Target User
- Current Customer
- Potential Customer
Judging Criteria
- How well you update/reskin the overall Praxair Direct site design to match/work with Praxir.com
- Cleanliness of your graphics and design
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 for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on other winning placements.
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.