Challenge Summary
Welcome to the "Daimler Trucks Coverage Level Comparison Module Design Challenge"!! We are in need of a well organized, user friendly and intuitive multi-section comparison module. The module is fitting into an existing site and will need to include the current site’s branding and some key pieces of functionality. We look forward to seeing your designs!
Round 1
UX/ UI concept for:
- Desktop
- Tablet
- Mobile
Round 2
UX/ UI concept for:
- Desktop
- Tablet
- Mobile
Challenge Details
Design a clean, user friendly and simple comparison table/graph module. The comparison module is fitting within a specific area of the current site. It needs to retain and use the current branding, colors, fonts and design guidelines on the site. We've attached a spreadsheet that outlines all of the comparison sections. They broken up into numerous sub-sections. What is the best way to organize and display these sections? What is the best functionality and interactivity around these sub-sections? Do they function as accordions, collapsible panels, or something more visually exciting? We are open to you ideas and concepts, but remember this must remain user friendly.
The current site is fully responsive, we will need to see how your designs work on desktop, tablet and mobile. We've supplied you with PSD templates to get you started for each of these sizes and screens. Use these templates as your base to build your designs on.
You can view the current site at: www.aftermarketserviceproducts.com, the tab we are designing for is "Engine Coverage" and we want to replace the "Choose your coverage level" section.
The site currently uses Bootstrap as a framework and we would like to continue to use that. We've included a PSD file of Bootstrap UI elements that you can pull from and use as reference. The most important thing is that your designs MUST MATCH the current site.
Elements to Explore
- How to rework the current module to more user friendly and better UX
- The user needs to be able to compare the information in the 4 different sections: EW1, EW2, EW3 and EW4
- What is the best design and user experience that works across desktop, tablet and mobile. We are looking for a responsive design, NOT a unique and different visual experience for each screen size. Use the existing site as your guide and how it reconfigures the content.
Elements to Retain
- The new module/ section should feel integrated into the existing site. Please use design styles and colors from the existing site. This is VERY IMPORTANT. We are NOT looking for a new design language or style.
- You can use imagery and additional assets currently included on the site.
Design Requirements
- Please design for Desktop, tablet and mobile. We need 3 seperate files; one for each screen (Screen size already set in the provided PSDs).
- We have supplied you with PSDs of each screen size to get your started. Use these as your base for your designs.
Target Audience
- Existing and potential customers
Deliverables
Desktop Layout
- UX and UI design for the comparison module that works on desktop
- Module should remain the same width but the height can change
Tablet Layout
- UX and UI design for the comparison module that works on tablet devices
- Think how the user will use the module with taps as opposed to clicks. How does this affect your tap/ button areas and text sizes?
Mobile Layout
- UX and UI design for the comparison module that works on mobile devices
- Think how the user will use the module with taps as opposed to clicks. How does this affect your tap/ button areas and text sizes?
Branding Guidelines
- Use the PSD and current site as your branding guidelines. Your new comparison module/ section should fit seamless into the rest of the experience and site.
Supporting Documents
- Data set and content: This is the content that needs to be included in your designs for each of the 4 sections; EW1, EW2, etc.
- PSDs: Use these to get started with. The area for the widget has been marked.
Judging Criteria
- How well does your design align with the objectives of the challenge
- Cleanliness of your graphics and design.
- Overall Design and User Experience.
Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Please upload PNG images in a zip file with all requested contest requirements stated above. Number and Name your files appropriately to aid in the review process. This is very important.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics, images (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.