Challenge Summary
Welcome to "KONIN - Online Shop Responsive Web Redesign Challenge". In this challenge, we need your help to re-design several pages and suggest us new interactions and functionality for our online shop to improve and increase customer loyalty, engagement, interactions and shopping experience. We need you to focus on the DESKTOP version for this challenge. Mobile and Tablet will have their own challenges later. Your design MUST follow best practice for a responsive web, this means the Desktop design needs to be easily adjusted to Tablet and Mobile version.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
1) Homepage
2) Automated registration Functionality
3) Out of Stock Notification Functionality
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
1) Homepage
2) Automated registration Functionality
3) Out of Stock Notification Functionality
4) Cashback Functionality
5) Subscription Functionality
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
We are a leading health technology company focused on improving people's health and enabling better outcomes across the health continuum from healthy living and prevention, to diagnosis, treatment and home care. Our company leverages advanced technology and deep clinical and consumer insights to deliver integrated solutions. The company is a leader in diagnostic imaging, image-guided therapy, patient monitoring and health informatics, as well as in consumer health and home care.
In this challenge, we want to redesign several pages from our online shop platform in order to achieve the following goals:
1. Increase subscription for subscription products
2. Make consumer use the functionality "email me when back in stock"
3. Notify and incentives consumer to buy "cash back" products
4. Automated Registration information: incentivize consumer to register during checkout thanks to the benefits they can enjoy by doing so
5. More appealing and intuitive homepage that makes the consumer want to stay and browse/buy on the site.
We are very excited to see your creativity and UI/UX skills that able to accomplish our goals in this challenge!
Challenge Goals
Create a better UI/UX Design for an online shop platform that able to increase customer loyalty and engagement, increase better interactions and successful products checkout, and last but not least, to improve customer shopping experience in our platform!
Design Consideration
- We just need to redesign the homepage, login and registration page. The cashback, subscription and out of stock notify page will follow the existing layout where we need to add only the functionality and interactions. You can either copy the existing layout as a base design/background and put the interaction functionality above it as a new layer or create the existing layout from scratch, either is fine!
- KONIN is a code name for the challenge and not the real client name. Your design must use client real name and their logo
- Looking for an engaging "chic", clean and pleasant design.
- DP here means "Decision Page"
- PDP here means "Product Display Page"
- Please see our PDF files (References Docs) to see which pages need to redesign.
- Make sure to browse and navigate around our site to get some references and see how the current site interactions and functionality works (register, login, shopping, checkout, etc)
Screen Requirements
We need to redesign the following pages and their functionality and interactions:
1) Homepage
Reference files "Homepage.pptx"
- We need two homepage version:
-- Homepage Redesign for general society
-- Personalized Homepage for Users (Male/Female/Returning Visitors/New Visitors)
- We want a more engaging "chic", clean and pleasant homepage.
- Make USPs (blue bar on top) more visible (also on mobile) as we know they are not noticed.
- The search bar can be moved and redesigned.
- An indication that is possible to scroll down (e.g. arrow)? "Most popular products" appear below the fold and are not very visible.
- We know that at the moment consumers don't really use the carousel at the top.
- Footer with more info (payments, help/contacts, returns etc.)
- Feel free to keep or redesigning the most popular product section.
- Feel free to keep and/or redesigning the banners slots at the bottom and the main carousel banner on top.
- We would like to have elements that in the future can change and be personalized according to which consumers enter the homepage (e.g. females, males, returning visitors, new visitors etc.)
- Basket icon, account icons and links nearby the navigation can be moved.
- Optional: Navigation can be redesigned (see our Dutch site version where the navigation variation already approved).
2) Automated registration Functionality
Reference files "Automated Registration.pptx"
- This screen should provide consistent customer experience by automatically registering products purchased via Shop to our site and providing the customer with links.
- Automatic registration comes with some benefits such us automatic extended warranty.
- Convey the incentives to consumers so that they are more prone to register rather than using Guest Checkout.
- We are developing a functionality by which:
-- Consumers who purchase a cashback product can get money back if they register to the site during checkout (on the Checkout Login page).
-- Consumers that purchase a product and register during the purchase get products automatically registered in the system (currently the process is manual) and can then enjoy extended warranty and further benefits.
-- The idea is to emphasize and explain them the benefits at the Checkout Login page so to increase the number of consumers that register (or if already registered that will use Login instead of the Guest Checkout functionality).
- These interactions will need to be created:
-- Login Screen – Control
-- Login Screen – Variant 1
-- Thank you page and Automatic Registration Notification
-- Guest Checkout Trigger
3) Out of Stock Notification Functionality
Reference files "Notify me when back in stock.pptx"
- "Notify me when back in stock" functionality for products out of stock on DP and PDP without the use of popups.
- On DP message indicating the product is out of stock but the consumer can be notified when it is back in stock.
- On PDP: make it clear that the product is out of stock and that consumer can be notified when it is back in stock.
- Link/CTA to prompt the consumer to leave their email to get a notification
- In-page email input field (pre-filled if the consumer is logged in)
- Confirmation message
- Redesign also the OutOfStock warning message.
- Some Notes: No need to design email notification, just the onsite functionality.
- These interactions will need to be created:
-- Product page Notification + functionality
-- Decision Page Notification
4) Cashback Functionality
Reference files "CASH BACK.pptx"
- On DP and PDP: a message indicating the product is available for cashback
- Further on PDP: display minimum cash back information and give the possibility to link back to our main site pages where a consumer can find more information.
- These interactions will need to be created:
-- Cashback in Product Page Notification
-- Cashback Promo in Banner on Product Page
-- Cashback Notification in Decision Page
5) Subscription Functionality
Reference files "Subscription_current Shop.pptx"
- On specific products a consumer can enjoy from a subscription functionality; This meaning that they will receive the subscribed product according to the frequency indicated (e.g. every 3 months) automatically without having to place an order every time.
- on DP: the message indicating the product is available for subscription
- on PDPs (parent and child):
-- Parent: possibility to buy main parent product + subscription to the accessory
-- Parent: possibility to buy main parent product + accessory (no subscription)
-- Child: possibility to buy accessory (no subscription)
-- Child: possibility to buy accessory with subscription
- Revise subscription copy to make it more clear to the consumer.
- Also, make Tabs in homepage more visible
- Some notes for this functionality:
-- Do not use popups. Design needs to be in-page.
-- No need to change other elements in the page than those specified.
- These interactions will need to be created:
-- Parent Product page with Subscription options
-- Child product page with Subscription options
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
- Your design MUST support Responsive layout!
Marvel Prototype
- We need you to upload your screens to Marvel App
- Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- 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).
Branding Guidelines
- Follow our Branding Guidelines Document
Documentation
Request the documentation in our challenge forum
- Branding Guidelines Document (Branding Folder)
- Details Requirements (PPTs folder)
- References Docs (PDF)
Target Devices
- We are targeting for Responsive Web App, make sure to adjust the web layout accordingly so that it will be easy to design responsive later.
- For this challenge, focus only on Desktop version!
- 1280px minimum width with height adjusting accordingly
Target Audience
- Direct consumers of our Online Shop (generic target)
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
- The overall design and user experience
- Cleanliness of screen design and user flow
- Support for Responsive View
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB colour 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 (might need to convert it to photoshop later) or Sketch and saved as an 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.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Round 1
Submit your initial design for a Checkpoint Feedback1) Homepage
2) Automated registration Functionality
3) Out of Stock Notification Functionality
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp 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 Updates1) Homepage
2) Automated registration Functionality
3) Out of Stock Notification Functionality
4) Cashback Functionality
5) Subscription Functionality
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
We are a leading health technology company focused on improving people's health and enabling better outcomes across the health continuum from healthy living and prevention, to diagnosis, treatment and home care. Our company leverages advanced technology and deep clinical and consumer insights to deliver integrated solutions. The company is a leader in diagnostic imaging, image-guided therapy, patient monitoring and health informatics, as well as in consumer health and home care.
In this challenge, we want to redesign several pages from our online shop platform in order to achieve the following goals:
1. Increase subscription for subscription products
2. Make consumer use the functionality "email me when back in stock"
3. Notify and incentives consumer to buy "cash back" products
4. Automated Registration information: incentivize consumer to register during checkout thanks to the benefits they can enjoy by doing so
5. More appealing and intuitive homepage that makes the consumer want to stay and browse/buy on the site.
We are very excited to see your creativity and UI/UX skills that able to accomplish our goals in this challenge!
Challenge Goals
Create a better UI/UX Design for an online shop platform that able to increase customer loyalty and engagement, increase better interactions and successful products checkout, and last but not least, to improve customer shopping experience in our platform!
Design Consideration
- We just need to redesign the homepage, login and registration page. The cashback, subscription and out of stock notify page will follow the existing layout where we need to add only the functionality and interactions. You can either copy the existing layout as a base design/background and put the interaction functionality above it as a new layer or create the existing layout from scratch, either is fine!
- KONIN is a code name for the challenge and not the real client name. Your design must use client real name and their logo
- Looking for an engaging "chic", clean and pleasant design.
- DP here means "Decision Page"
- PDP here means "Product Display Page"
- Please see our PDF files (References Docs) to see which pages need to redesign.
- Make sure to browse and navigate around our site to get some references and see how the current site interactions and functionality works (register, login, shopping, checkout, etc)
Screen Requirements
We need to redesign the following pages and their functionality and interactions:
1) Homepage
Reference files "Homepage.pptx"
- We need two homepage version:
-- Homepage Redesign for general society
-- Personalized Homepage for Users (Male/Female/Returning Visitors/New Visitors)
- We want a more engaging "chic", clean and pleasant homepage.
- Make USPs (blue bar on top) more visible (also on mobile) as we know they are not noticed.
- The search bar can be moved and redesigned.
- An indication that is possible to scroll down (e.g. arrow)? "Most popular products" appear below the fold and are not very visible.
- We know that at the moment consumers don't really use the carousel at the top.
- Footer with more info (payments, help/contacts, returns etc.)
- Feel free to keep or redesigning the most popular product section.
- Feel free to keep and/or redesigning the banners slots at the bottom and the main carousel banner on top.
- We would like to have elements that in the future can change and be personalized according to which consumers enter the homepage (e.g. females, males, returning visitors, new visitors etc.)
- Basket icon, account icons and links nearby the navigation can be moved.
- Optional: Navigation can be redesigned (see our Dutch site version where the navigation variation already approved).
2) Automated registration Functionality
Reference files "Automated Registration.pptx"
- This screen should provide consistent customer experience by automatically registering products purchased via Shop to our site and providing the customer with links.
- Automatic registration comes with some benefits such us automatic extended warranty.
- Convey the incentives to consumers so that they are more prone to register rather than using Guest Checkout.
- We are developing a functionality by which:
-- Consumers who purchase a cashback product can get money back if they register to the site during checkout (on the Checkout Login page).
-- Consumers that purchase a product and register during the purchase get products automatically registered in the system (currently the process is manual) and can then enjoy extended warranty and further benefits.
-- The idea is to emphasize and explain them the benefits at the Checkout Login page so to increase the number of consumers that register (or if already registered that will use Login instead of the Guest Checkout functionality).
- These interactions will need to be created:
-- Login Screen – Control
-- Login Screen – Variant 1
-- Thank you page and Automatic Registration Notification
-- Guest Checkout Trigger
3) Out of Stock Notification Functionality
Reference files "Notify me when back in stock.pptx"
- "Notify me when back in stock" functionality for products out of stock on DP and PDP without the use of popups.
- On DP message indicating the product is out of stock but the consumer can be notified when it is back in stock.
- On PDP: make it clear that the product is out of stock and that consumer can be notified when it is back in stock.
- Link/CTA to prompt the consumer to leave their email to get a notification
- In-page email input field (pre-filled if the consumer is logged in)
- Confirmation message
- Redesign also the OutOfStock warning message.
- Some Notes: No need to design email notification, just the onsite functionality.
- These interactions will need to be created:
-- Product page Notification + functionality
-- Decision Page Notification
4) Cashback Functionality
Reference files "CASH BACK.pptx"
- On DP and PDP: a message indicating the product is available for cashback
- Further on PDP: display minimum cash back information and give the possibility to link back to our main site pages where a consumer can find more information.
- These interactions will need to be created:
-- Cashback in Product Page Notification
-- Cashback Promo in Banner on Product Page
-- Cashback Notification in Decision Page
5) Subscription Functionality
Reference files "Subscription_current Shop.pptx"
- On specific products a consumer can enjoy from a subscription functionality; This meaning that they will receive the subscribed product according to the frequency indicated (e.g. every 3 months) automatically without having to place an order every time.
- on DP: the message indicating the product is available for subscription
- on PDPs (parent and child):
-- Parent: possibility to buy main parent product + subscription to the accessory
-- Parent: possibility to buy main parent product + accessory (no subscription)
-- Child: possibility to buy accessory (no subscription)
-- Child: possibility to buy accessory with subscription
- Revise subscription copy to make it more clear to the consumer.
- Also, make Tabs in homepage more visible
- Some notes for this functionality:
-- Do not use popups. Design needs to be in-page.
-- No need to change other elements in the page than those specified.
- These interactions will need to be created:
-- Parent Product page with Subscription options
-- Child product page with Subscription options
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
- Your design MUST support Responsive layout!
Marvel Prototype
- We need you to upload your screens to Marvel App
- Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- 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).
Branding Guidelines
- Follow our Branding Guidelines Document
Documentation
Request the documentation in our challenge forum
- Branding Guidelines Document (Branding Folder)
- Details Requirements (PPTs folder)
- References Docs (PDF)
Target Devices
- We are targeting for Responsive Web App, make sure to adjust the web layout accordingly so that it will be easy to design responsive later.
- For this challenge, focus only on Desktop version!
- 1280px minimum width with height adjusting accordingly
Target Audience
- Direct consumers of our Online Shop (generic target)
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
- The overall design and user experience
- Cleanliness of screen design and user flow
- Support for Responsive View
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB colour 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 (might need to convert it to photoshop later) or Sketch and saved as an 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.