Challenge Summary
Welcome to the “Apparel Customization Responsive App Design Challenge”. In this challenge we are looking for you to explore and propose the best UX possible for a new interactive Apparel Customization responsive application, that will be integrated on a existing store.
We need you to provide a responsive design that works on Desktop and Mobile devices. Think mobile first when designing it.
Let us know if you have any questions.
1) Product Detail Page (Desktop & Mobile)
2) Customization Flow (Desktop & Mobile)
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 2 MarvelApp prototypes, one for mobile and one for desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1) Product Detail Page (Desktop & Mobile)
2) Customization Flow (Desktop & Mobile)
3) Product on Cart (Desktop & Mobile)
- Important: As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for an MarvelApp prototype link. You will receive 2 MarvelApp prototypes, one for mobile and one for desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
We have a online store that sells different kinds of clothes for different aged user around the world. For this existing store, we are looking for a customization tool that allow users to add labels, patches and pins to t-Shirts and Denim jackets.
Users should be able to view the details of the product like wash, available colors, size etc (please refer to the screenshots), and the customizations (Printing, Pins & Patches) relevant to the product should be displayed on the screen.
Users will have the ability to choose the right customization for the product and should be able to see how the product appears with the customization in place before checking out.
Things to think about
- We are looking for a nice clean, modern and easy experience. A user needs to be able to easily understand how to use this tool
- Think on Mobile first when designing this application, so any interactions you add such like drag, drop, texts and shapes resize, etc. Should be thinked to work well on desktop web browsers and mobile phones.
- Your design must work and feel on brand. So work and use the color palette only. Do not reinvent colors.
- You are free to use the t-Shirts and Denim Jacket files provided on the challenge attachments.
Required Screens
1) Product Detail Page (Desktop & Mobile)
- This is the detail view of a product (t-Shirts or Denim Jackets only)
- Please use the provided mockup as a template for your design.
- We are not looking to redesign this full page, just focus on how the customization tool should be launched from this screen. It will be just a button? Real time customization? Drag and Drop from a panel? Show us your best ideas and concepts.
2) Customization Tool - (Desktop & Mobile)
- This is the key screen for this challenge.
- From the Product Detail Page, users should be able to access this customization tool.
Printing - Applicable only to t-Shirts
- Users can select either from a pre-configured labels available and or add their own text and image.
- For texts, users should be prompted with font, size and color of the text and based on the font size limit the number of characters that can be printed.
- Users should also have list of suggestions for customization.
Pins & Patches - Applicable for Denim jackets
- Users will have the ability to pick up the pins and or patches to be added to the jacket.
- Users should have the ability to view the customization based on the options selected before they check-out
What other concepts can you propose to WOW our customers? Think of fashion lovers, unique users that love to customize their clothes.
3) Product on Cart (Desktop & Mobile)
- We need you to provide a screen where users can see the updated price.
- No need to design the complete checkout flow as this already exist.
- What is the best way to show the updated cost? What if a user wants to see the detailed cost of each extra added on customization tool?
Important:
- Keep things consistent. This means all graphic styles should work together.
- Please use their current branding and web colors.
- Please use Open Sans as your main font. Final font might be required to be updated on final fixes stage.
- Focus on the user experience. Do not invest time redesigning the overall layout.
- T hink mobile first.
Screen Sizes:
- This will be a responsive website. So please use these specifics screens sizes:
Desktop: 1280px width or 2560px width if you work on a retina display, height increased as needed.
Mobile: Design for iPhone 6/7: 750px width and height increased as needed.
- Make sure you create graphics in 'shape' format, so when we resize graphics everything will still look sharp!
Challenge Discussion
- Please access challenge forum using this link:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=617514
Downloads
- You can find all necessary assets on this folder.
Target Audience:
- Online Buyers from around the world.
- From teenagers to senior users.
Judging Criteria:
- How well you plan the interactive experience and capture your ideas and experience visually.
- Overall design, UI and 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 Desktop PNG/JPG Screens. PSD source files
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator as a layered AI file or Sketch.
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 checkpoint feedback.
We need you to provide a responsive design that works on Desktop and Mobile devices. Think mobile first when designing it.
Let us know if you have any questions.
Round 1
Submit your initial designs for a checkpoint feedback:1) Product Detail Page (Desktop & Mobile)
2) Customization Flow (Desktop & Mobile)
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 2 MarvelApp prototypes, one for mobile and one for desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your Final designs:1) Product Detail Page (Desktop & Mobile)
2) Customization Flow (Desktop & Mobile)
3) Product on Cart (Desktop & Mobile)
- Important: As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for an MarvelApp prototype link. You will receive 2 MarvelApp prototypes, one for mobile and one for desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
We have a online store that sells different kinds of clothes for different aged user around the world. For this existing store, we are looking for a customization tool that allow users to add labels, patches and pins to t-Shirts and Denim jackets.
Users should be able to view the details of the product like wash, available colors, size etc (please refer to the screenshots), and the customizations (Printing, Pins & Patches) relevant to the product should be displayed on the screen.
Users will have the ability to choose the right customization for the product and should be able to see how the product appears with the customization in place before checking out.
Things to think about
- We are looking for a nice clean, modern and easy experience. A user needs to be able to easily understand how to use this tool
- Think on Mobile first when designing this application, so any interactions you add such like drag, drop, texts and shapes resize, etc. Should be thinked to work well on desktop web browsers and mobile phones.
- Your design must work and feel on brand. So work and use the color palette only. Do not reinvent colors.
- You are free to use the t-Shirts and Denim Jacket files provided on the challenge attachments.
Required Screens
1) Product Detail Page (Desktop & Mobile)
- This is the detail view of a product (t-Shirts or Denim Jackets only)
- Please use the provided mockup as a template for your design.
- We are not looking to redesign this full page, just focus on how the customization tool should be launched from this screen. It will be just a button? Real time customization? Drag and Drop from a panel? Show us your best ideas and concepts.
2) Customization Tool - (Desktop & Mobile)
- This is the key screen for this challenge.
- From the Product Detail Page, users should be able to access this customization tool.
Printing - Applicable only to t-Shirts
- Users can select either from a pre-configured labels available and or add their own text and image.
- For texts, users should be prompted with font, size and color of the text and based on the font size limit the number of characters that can be printed.
- Users should also have list of suggestions for customization.
Pins & Patches - Applicable for Denim jackets
- Users will have the ability to pick up the pins and or patches to be added to the jacket.
- Users should have the ability to view the customization based on the options selected before they check-out
What other concepts can you propose to WOW our customers? Think of fashion lovers, unique users that love to customize their clothes.
3) Product on Cart (Desktop & Mobile)
- We need you to provide a screen where users can see the updated price.
- No need to design the complete checkout flow as this already exist.
- What is the best way to show the updated cost? What if a user wants to see the detailed cost of each extra added on customization tool?
Important:
- Keep things consistent. This means all graphic styles should work together.
- Please use their current branding and web colors.
- Please use Open Sans as your main font. Final font might be required to be updated on final fixes stage.
- Focus on the user experience. Do not invest time redesigning the overall layout.
- T hink mobile first.
Screen Sizes:
- This will be a responsive website. So please use these specifics screens sizes:
Desktop: 1280px width or 2560px width if you work on a retina display, height increased as needed.
Mobile: Design for iPhone 6/7: 750px width and height increased as needed.
- Make sure you create graphics in 'shape' format, so when we resize graphics everything will still look sharp!
Challenge Discussion
- Please access challenge forum using this link:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=617514
Downloads
- You can find all necessary assets on this folder.
Target Audience:
- Online Buyers from around the world.
- From teenagers to senior users.
Judging Criteria:
- How well you plan the interactive experience and capture your ideas and experience visually.
- Overall design, UI and 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 Desktop PNG/JPG Screens. PSD source files
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator as a layered AI file or Sketch.
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 checkpoint feedback.
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.