Challenge Summary
Welcome to "Digital Thread Mobile Application". In this challenge, we need your creative skills to help us create a modern and intuitive user interface for our mobile app which will have functionality to order a product and having ability to customize the product if needed. This app will be used internally for ordering Apparel products.
The application allows internal users to access brands and their products, that can be customized, based on available options, into one mobile application. Also, based on the final product, the app should recommend other products from which go along with the product being ordered. This app would be similar to ordering apps which are provided by leading Apparel and Footwear companies. Be creative in selecting different options like coupons, social links, reviews, etc. The app will need to generate a manufacture ready pattern in a PDF form. Meaning, if an internal consumer selects a existing design, a fabric and saves it in the cart, based on what is selected, a techpack (a PDF document) must be created behind the scene, this document essentially picks various patterns that match to the selected style. This tech pack (PDF document) will be used by the factory to manufacture the garment.
00) General Requirements
01) Login page
02) Brand Landing page
03) Product search page for Customization
04) Customization Sequence
05) Final Product page
- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
00) General Requirements
01) Login page
02) Brand Landing page
03) Product search page for Customization
04) Customization Sequence
05) Final Product page
06) Cross Selling Options
07) Cart
08) My Orders
09) Social Media Sites
10) Customer Feedback
- As part of your Final submission, you must replace your checkpoint submission with the final submission into Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
The purpose of this project is to develop a mobile application that can be used by consumers, worldwide, to be able to select and or customize products of a brand and then customize them, as per the available options. Based on the final product, the app should recommend regular / customizable products from different product categories, belonging to the same collection. And then be able to purchase them thru the Checkout page. Also, consumer should be able to log back in and track their shipment. The application should also be easy for the user to navigate.
Product categories:
- Outdoor wear
- Mountainwear / Active wear
Products (please suppress any brand logo in the product. It can have a place holder for logo):
- Jackets
- Hoodies
- T-Shirts
- Bottoms
- Hats
- Shoes
- Backpacks
- Duffels
The application will also allow users to see the latest styles / collections offered by that brand. What is trending and other already customized products in that category
In addition, the mobile application will let user log in using their Facebook / Instagram / Twitter profiles and able to share the picture of the finished, customized product on their Social media sites.
Challenge Goal
Create a new look and feel that will help the consumer buy regular products and also, customize available products and let them interface with their social media apps.
Application Features
- Consolidate all regular and customizable products for a brand on single brand landing page
- Needs the ability to reset, change, or unlock user logon id
- Ability to the user to go back to the last action and also, to start from the beginning.
Design Consideration
- New, Professional, Simple, and Modern look and feel.
- Simplicity to view and add necessary information
- Mobile Native application (Follow Mobile Design Best Practice)
- Easy to navigate on a wide variety of mobile devices
- Easy to read information on small screens
- Short concise content
- Easy to use mobile search interface
- Easy to fill out forms with dropdowns and checkboxes
- Most links on pages shall link to mobile pages (exceptions will indicate with an icon that links are not mobile friendly)
- All phone numbers shall also be links that automatically call
- All email addresses shall also be links that automatically send email
- SMS Services shall be easy to use and provide user with pertinent content. All SMS services shall also be mimicked with an email service
- Easy to understand flow from page to page
- Intuitive for the user; should never be left asking "what do I do next?"
- Easy viewing for pages that may be over overcrowded with information
- Navigation/Forms: The site navigation and forms need to be quick and easy to use for users with touch screen capabilities
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
Screen Requirements
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
00) General Requirements
- Provide simple logo for the application (This will serve as a placeholder for now). Don't spend a ton of time on this, as it's not the focus of the challenge.
- User will be able to go back to previous page, or back to home page from any screen
- The navigation shall look consistent on all pages
- The navigation shall be easy to use
- The footer shall look consistent on all pages
01) Login Page
- Users login with their registered user id and password
02) Brand Landing Page
- Every time the user logs in, he should be able to see the Brand’s latest products, collections and products available for customization, grouped under different categories.
- The ability to navigate to existing products or the customizable section
- Product pics should be available, with 3D rendering. Capability to show the product 360 degrees. Check https://www.webrotate360.com/ to understand more if required.
- Ability to Zoom in and Zoom out
- Notifications
- What kinds of notifications would be useful to the user?
- Notifications and/ or alert icons on products ordered, shipped, returned, etc.
- These are just some ideas. We are looking for the best user experience here and open to your ideas.
- Search option
- Detailed requirements below
- Social Alerts (and view alert details), For example:
- Latest trending products of that brand.
- Link to Instagram / Twitter account for the brand
- We are looking for the best user experience at this Mobile App homepage.
03) Product search page for Customization
- User be able to navigate / see (3D rendering, Zoom In/ Zoom Out) all regular products and also, products available for customization, grouped under different product categories.
- Example of Jacket Customization
- Able to select different color for arm of jacket or collar or any other part
- Able to select a patch or image to be added on the jacket
- The ability to customize product should be easy and intuitive
- App, displays different customizations possible, as recommendations.
- Be able to click on a product and go to next page for initiating customization.
- Or able to browse thru existing regular products, from the brand’s site
04) Customization Sequence
- Ability to customize the available product based on a pre-designed sequence, with minimum clicks
- Ability to see all the options for each operation and select as required.
05) Final Product page
- Display the final product, based on the customization – 3D rendering
- User should be able to add the product to the cart
- User should have the option of selecting the cart to check out or to select another product to customize
06) Cross Selling Options
- The page should also load other ready to buy / customizable products of the brand, from different product categories.
- They user should be able to select another product; either ready to buy or customizable
- On selecting, ready to buy product, the customer should be taken to the brand’s site.
- On selecting, another customizable product, the user should be able to follow the above mentioned sequence again.
07) Cart
- Ability to delete existing merchandise from the cart
- Ability to purchase the customized products
- On selecting, Checkout, the user would be taken to the Check out page of the brand’s site.
- Ability to go back to home page of the mobile app, from cart
- The product should stay in the cart if not deleted or purchased
08) My Orders
- Provide the ability to search for an existing order (alphanumeric number)
- Show the latest order status & status bar (similar to shipment tracking or a pizza order status bar).
- Provide the FEDEX/UPS order tracking link
09) Social Media Sites
- Ability to log into users Facebook / Instagram / Twitter accounts and share the picture of the final product
10) Customer Feedback
- Ability for customer to provide feedback on product via ratings and comments
Branding Guidelines
01) Colors:
- Light Blue (CTAs, buttons, links, etc.): #00a8ff
- Dark Blue: #002b81
- White: #ffffff
- Various shades of Grays:
- Red (alerts): #cd0000
02) Fonts:
You can download and use the fonts directly from Google Fonts
- Oswald (Headlines, main navigation): https://fonts.google.com/specimen/Oswald
- Open Sans (Body copy, everything else): https://fonts.google.com/specimen/Open+Sans
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to (keyla.blue1@gmail.com) or ask in the forums
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload).
Target Devices
- We are targeting for Mobile application (iPhone only for now)
- Due to the varying number of screen sizes, pages will have to be designed to accommodate both larger screens of the iPhone, Android, etc.
- Screen size: 1125 x 2436px (iPhone X)
Target Audience
- Global consumers
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- Overall design and user experience
- Cleanliness of screen design and user flow
- Ease of use
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, Adobe XD or 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 colours) or modify overall colours
The application allows internal users to access brands and their products, that can be customized, based on available options, into one mobile application. Also, based on the final product, the app should recommend other products from which go along with the product being ordered. This app would be similar to ordering apps which are provided by leading Apparel and Footwear companies. Be creative in selecting different options like coupons, social links, reviews, etc. The app will need to generate a manufacture ready pattern in a PDF form. Meaning, if an internal consumer selects a existing design, a fabric and saves it in the cart, based on what is selected, a techpack (a PDF document) must be created behind the scene, this document essentially picks various patterns that match to the selected style. This tech pack (PDF document) will be used by the factory to manufacture the garment.
Round 1
Submit your initial design for a Checkpoint Feedback:00) General Requirements
01) Login page
02) Brand Landing page
03) Product search page for Customization
04) Customization Sequence
05) Final Product page
- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your Final Design plus Checkpoint Updates:00) General Requirements
01) Login page
02) Brand Landing page
03) Product search page for Customization
04) Customization Sequence
05) Final Product page
06) Cross Selling Options
07) Cart
08) My Orders
09) Social Media Sites
10) Customer Feedback
- As part of your Final submission, you must replace your checkpoint submission with the final submission into Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
The purpose of this project is to develop a mobile application that can be used by consumers, worldwide, to be able to select and or customize products of a brand and then customize them, as per the available options. Based on the final product, the app should recommend regular / customizable products from different product categories, belonging to the same collection. And then be able to purchase them thru the Checkout page. Also, consumer should be able to log back in and track their shipment. The application should also be easy for the user to navigate.
Product categories:
- Outdoor wear
- Mountainwear / Active wear
Products (please suppress any brand logo in the product. It can have a place holder for logo):
- Jackets
- Hoodies
- T-Shirts
- Bottoms
- Hats
- Shoes
- Backpacks
- Duffels
The application will also allow users to see the latest styles / collections offered by that brand. What is trending and other already customized products in that category
In addition, the mobile application will let user log in using their Facebook / Instagram / Twitter profiles and able to share the picture of the finished, customized product on their Social media sites.
Challenge Goal
Create a new look and feel that will help the consumer buy regular products and also, customize available products and let them interface with their social media apps.
Application Features
- Consolidate all regular and customizable products for a brand on single brand landing page
- Needs the ability to reset, change, or unlock user logon id
- Ability to the user to go back to the last action and also, to start from the beginning.
Design Consideration
- New, Professional, Simple, and Modern look and feel.
- Simplicity to view and add necessary information
- Mobile Native application (Follow Mobile Design Best Practice)
- Easy to navigate on a wide variety of mobile devices
- Easy to read information on small screens
- Short concise content
- Easy to use mobile search interface
- Easy to fill out forms with dropdowns and checkboxes
- Most links on pages shall link to mobile pages (exceptions will indicate with an icon that links are not mobile friendly)
- All phone numbers shall also be links that automatically call
- All email addresses shall also be links that automatically send email
- SMS Services shall be easy to use and provide user with pertinent content. All SMS services shall also be mimicked with an email service
- Easy to understand flow from page to page
- Intuitive for the user; should never be left asking "what do I do next?"
- Easy viewing for pages that may be over overcrowded with information
- Navigation/Forms: The site navigation and forms need to be quick and easy to use for users with touch screen capabilities
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
Screen Requirements
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
00) General Requirements
- Provide simple logo for the application (This will serve as a placeholder for now). Don't spend a ton of time on this, as it's not the focus of the challenge.
- User will be able to go back to previous page, or back to home page from any screen
- The navigation shall look consistent on all pages
- The navigation shall be easy to use
- The footer shall look consistent on all pages
01) Login Page
- Users login with their registered user id and password
02) Brand Landing Page
- Every time the user logs in, he should be able to see the Brand’s latest products, collections and products available for customization, grouped under different categories.
- The ability to navigate to existing products or the customizable section
- Product pics should be available, with 3D rendering. Capability to show the product 360 degrees. Check https://www.webrotate360.com/ to understand more if required.
- Ability to Zoom in and Zoom out
- Notifications
- What kinds of notifications would be useful to the user?
- Notifications and/ or alert icons on products ordered, shipped, returned, etc.
- These are just some ideas. We are looking for the best user experience here and open to your ideas.
- Search option
- Detailed requirements below
- Social Alerts (and view alert details), For example:
- Latest trending products of that brand.
- Link to Instagram / Twitter account for the brand
- We are looking for the best user experience at this Mobile App homepage.
03) Product search page for Customization
- User be able to navigate / see (3D rendering, Zoom In/ Zoom Out) all regular products and also, products available for customization, grouped under different product categories.
- Example of Jacket Customization
- Able to select different color for arm of jacket or collar or any other part
- Able to select a patch or image to be added on the jacket
- The ability to customize product should be easy and intuitive
- App, displays different customizations possible, as recommendations.
- Be able to click on a product and go to next page for initiating customization.
- Or able to browse thru existing regular products, from the brand’s site
04) Customization Sequence
- Ability to customize the available product based on a pre-designed sequence, with minimum clicks
- Ability to see all the options for each operation and select as required.
05) Final Product page
- Display the final product, based on the customization – 3D rendering
- User should be able to add the product to the cart
- User should have the option of selecting the cart to check out or to select another product to customize
06) Cross Selling Options
- The page should also load other ready to buy / customizable products of the brand, from different product categories.
- They user should be able to select another product; either ready to buy or customizable
- On selecting, ready to buy product, the customer should be taken to the brand’s site.
- On selecting, another customizable product, the user should be able to follow the above mentioned sequence again.
07) Cart
- Ability to delete existing merchandise from the cart
- Ability to purchase the customized products
- On selecting, Checkout, the user would be taken to the Check out page of the brand’s site.
- Ability to go back to home page of the mobile app, from cart
- The product should stay in the cart if not deleted or purchased
08) My Orders
- Provide the ability to search for an existing order (alphanumeric number)
- Show the latest order status & status bar (similar to shipment tracking or a pizza order status bar).
- Provide the FEDEX/UPS order tracking link
09) Social Media Sites
- Ability to log into users Facebook / Instagram / Twitter accounts and share the picture of the final product
10) Customer Feedback
- Ability for customer to provide feedback on product via ratings and comments
Branding Guidelines
01) Colors:
- Light Blue (CTAs, buttons, links, etc.): #00a8ff
- Dark Blue: #002b81
- White: #ffffff
- Various shades of Grays:
- Red (alerts): #cd0000
02) Fonts:
You can download and use the fonts directly from Google Fonts
- Oswald (Headlines, main navigation): https://fonts.google.com/specimen/Oswald
- Open Sans (Body copy, everything else): https://fonts.google.com/specimen/Open+Sans
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to (keyla.blue1@gmail.com) or ask in the forums
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload).
Target Devices
- We are targeting for Mobile application (iPhone only for now)
- Due to the varying number of screen sizes, pages will have to be designed to accommodate both larger screens of the iPhone, Android, etc.
- Screen size: 1125 x 2436px (iPhone X)
Target Audience
- Global consumers
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- Overall design and user experience
- Cleanliness of screen design and user flow
- Ease of use
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, Adobe XD or 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 colours) or modify overall colours
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.