Challenge Summary
Welcome to the "RUX - 72HR Retail Store Responsive Web Design Challenge". In this challenge we are looking for your help to design a modern and intuitive responsive portal for a large Retail Store based in South America. You will be designing for desktop and some mobile (phone) views.
What is a RUX Challenge?
The RUX (Rapid User Experience) challenge uses the same format as our famous LUX Challenge except it is not "Live" at an event. The RUX Challenge Series provides you with an opportunity to show digital leaders from some of the largest companies in the world just how good your concept and user experience (UI/UX) design skills are.
RUX (Rapid User Experience) challenges are fast, fun, and have more chances for you to capture prize money!
FULL DESCRIPTION & PROJECT GUIDE
The goal of this challenge is to take the provided design problem, analyze the user experience and provide design concepts and visual ideas on how the new portal might look and work!
Design Problem
“Todo Hogar” (All Home) is a large retail store based in Colombia (South America) that sells household items like: Products for cleaning, home decoration, clothes and more. One of the strong points of this company is the fact that they allow new entrepreneurs to sell and promote their products in their stores.
Currently the store website lacks some functionalities like an online catalogue with cart features, support chat with live assistance, and mobile capabilities.
For this RUX challenge we will provide the current website as your starting point; treat the existing website as a wireframe! DO NOT COPY any style or layout, we are looking for a new site design = complete redesign
Things to think about:
- Even though the website is currently in Spanish, you are allowed to submit your design in English. But keep in mind that main section names on the navigation must be in spanish. (Only a few words are required in spanish, we are providing the correct names, you don’t need to worried about translating.)
- Dummy texts like “lorem ipsum” is allowed for content.
- This new portal should be easy to navigate for types of users.
- Think "Mobile First" when designing.
- Simplicity should be your focus.
- Consider: Less clicks/Taps, important information should be visible and easy to catch.
- Should be clean, open, and modern looking. This new portal should still look great in a couple of years in future.
- Every interaction and functionality you add for web portal must also work well on mobile.
- Show us new concepts and ideas for how things could be designed and function.
- We have provided a color palette that works with their current brand. Please avoid dark themes while designing. This application should feel: Clean and elegant.
- This new portal will be developed using Drupal as main content management system.
- Adobe Photoshop, Illustrator and Sketch are allowed on this challenge.
RUX Challenge Timeline and Rolling Checkpoint
- Submission Start: 01/03/2018 at 22:00 EST
- Rolling Checkpoint Start: 01/05/2018 at 10:00 EST
- Submission End: 01/06/2018 at 22:00 EST
We are offering 5 Prizes Placements
1) 1st Placement: $2000
2) 2nd Placement: $1500
3) 3rd Placement: $1000
4) 4th Placement: $750
5) 5th Placement: $500
- Plus 8 placements for Rolling Checkpoint prizes @ $50 each! (To 8 first submissions who provide an advanced solution)
Note: Important Rolling Checkpoint Details
- We will answer questions and provide Rolling Feedback as fast as possible.
- You must watch the Forum for your feedback!
*All initial qualifying checkpoint submissions will win $50 (Only first 8 potential submissions)
Required Screens
For this challenge we just need 6 screens for desktop and only 4 for mobile, plus any iterations you think necessary to complement your design proposal.
1) “Inicio” (Home) (Desktop and Mobile)
- Reference: http://www.todohogar.com.co/
- This is what users fist see when they open the website.
- Currently this screen has a carousel style with promotions and featured content. Our client is asking to add a background video on first slide.
- This slider area will be also used to add content based on holidays like: Halloween, Christmas, Summer Vacations, etc.
- Think and propose how the new navigation should be presented. The main navigations items you must include are:
- - “Inicio” (Home)
- - “Catalogo” (Catalogue)
- - “Promociones” (Promotions)
- - “Emprendedores” (Entrepreneurs)
- - “Asi Somos” (About us)
- - “Blog” (Blog)
- - “Soporte en Vivo” (Live Support/Chat)
Somewhere in main navigation should be placed the following two links:
- - “Haz tu Pedido” (Make your order) and “Inscribete” (Register)
- - Remember to keep these spanish names as your main navigations items. Important
2) “Catalogo” (Catalogue) (Desktop and Mobile) Key Screen
- Reference: http://www.todohogar.com.co/catalogo
- Currently this catalogue screens works using PDF files on a Flash viewer. This of course is not the best solution to display a wide range of products.
- We are looking to completely revamp this section. So new features we need to add on this screen:
- - Search and Filters (Categories, prices, departments, size, colors)
- - Featured products
- - Categories list view: “Hogar” (Home and decoration), “Moda” (Clothes and Fashion), “Aseo Personal” (Personal Cleanliness), “Limpieza” (Cleaning).
- - Product detail with: Description, multiple photos and videos, ratings, price, add to cart button and quantity button.
- You are allowed to use all the images you need from the current PDF catalogues.
- User still must be able to download the catalogues (current and old ones) on PDF.
3) “Emprendedores” (Entrepreneurs) (Desktop and Mobile)
- Reference: http://www.todohogar.com.co/como-entrar-al-negocio
- Form reference: http://minegocio.todohogar.com.co:8080/zoftfokles/preinscripcion.jsp
- This page is the connection point between new entrepreneurs and the retail store. Basically is a form where new entrepreneurs can apply to become part of the providers and sellers.
- This must feel professional and engaging.
4) “Asi Somos” (About us) (Desktop only)
- Reference: http://www.todohogar.com.co/asi-somos
- This page contains information related to company.
- How can this page feels attractive and engaging?
- Please add a “Contactanos” (Contact us) sub section on this page. It must include the different ways to contact the company such like: Address, Telephone numbers and contact form.
5) “Blog” (Blog) (Desktop and Mobile)
- For now there is not any Blog page on current website. So we need you to provide a blog format layout that match the new style for this web portal.
6) “Live Support/Chat” (Desktop only)
- Our client is asking to include a Chatbot screen to help users on anything they may need on the portal.
- This screen should be accessible from any screen.
- Have in mind that live support can work with an online agent and also using AI with a Chatbot.
- How this should be presented to users? Automatically on first launch? Propose the best scenario for this problem.
7) Presentation Screen - Important
- As this is a RUX challenge, we need to quickly showcase your design in a meeting.
- So design a screen with a resolution of 1920x1080 showcasing your design.
- Do not add a logo or extra notes on this screen.
- With just one screen is enough. No need to provide different presentation screens.
General Requirements
Screen Sizes
- This application is going to be developed as responsive web application:
-- Web: Desktop 1280px and Height increasing if necessary.
-- iPhone 6/7/8: Width 750px and Height 1334px
Branding References
- All branding and supporting documents are published on forum. You need to register first to access these files. Important
Submissions Requeriments
- Upload your “Source.zip”, “Submission.zip” and “Preview.jpg/png” files as usual.
- Upload your screens to Marvel App for review and to showcase the experience (ask for Marvel App prototype/project from co-pilot or PM in challenge forum. Do this with enough time in advance. Avoid last minute requests.)
Marvel Prototype - Important
- We want to use Marvel App to provide direct and fast feedback! We can also track your design updates and screen versions within Marvel App!
- No additional functionality is required! Just make sure your screen(s) are in the correct viewing order (number them 00, 01, 02, 03, etc.)
- You MUST include your Topcoder Marvel App URL within your .Notes file
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
- Simplified User Experience and innovative ideas
- Overall design and user experience
- Cleanliness of screen design and user flow
Target Audience
- “Todo Hogar” users and new entrepreneurs.
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 a layered PSD file, Adobe Illustrator as a layered AI file, and 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.
What is a RUX Challenge?
The RUX (Rapid User Experience) challenge uses the same format as our famous LUX Challenge except it is not "Live" at an event. The RUX Challenge Series provides you with an opportunity to show digital leaders from some of the largest companies in the world just how good your concept and user experience (UI/UX) design skills are.
RUX (Rapid User Experience) challenges are fast, fun, and have more chances for you to capture prize money!
FULL DESCRIPTION & PROJECT GUIDE
The goal of this challenge is to take the provided design problem, analyze the user experience and provide design concepts and visual ideas on how the new portal might look and work!
Design Problem
“Todo Hogar” (All Home) is a large retail store based in Colombia (South America) that sells household items like: Products for cleaning, home decoration, clothes and more. One of the strong points of this company is the fact that they allow new entrepreneurs to sell and promote their products in their stores.
Currently the store website lacks some functionalities like an online catalogue with cart features, support chat with live assistance, and mobile capabilities.
For this RUX challenge we will provide the current website as your starting point; treat the existing website as a wireframe! DO NOT COPY any style or layout, we are looking for a new site design = complete redesign
Things to think about:
- Even though the website is currently in Spanish, you are allowed to submit your design in English. But keep in mind that main section names on the navigation must be in spanish. (Only a few words are required in spanish, we are providing the correct names, you don’t need to worried about translating.)
- Dummy texts like “lorem ipsum” is allowed for content.
- This new portal should be easy to navigate for types of users.
- Think "Mobile First" when designing.
- Simplicity should be your focus.
- Consider: Less clicks/Taps, important information should be visible and easy to catch.
- Should be clean, open, and modern looking. This new portal should still look great in a couple of years in future.
- Every interaction and functionality you add for web portal must also work well on mobile.
- Show us new concepts and ideas for how things could be designed and function.
- We have provided a color palette that works with their current brand. Please avoid dark themes while designing. This application should feel: Clean and elegant.
- This new portal will be developed using Drupal as main content management system.
- Adobe Photoshop, Illustrator and Sketch are allowed on this challenge.
RUX Challenge Timeline and Rolling Checkpoint
- Submission Start: 01/03/2018 at 22:00 EST
- Rolling Checkpoint Start: 01/05/2018 at 10:00 EST
- Submission End: 01/06/2018 at 22:00 EST
We are offering 5 Prizes Placements
1) 1st Placement: $2000
2) 2nd Placement: $1500
3) 3rd Placement: $1000
4) 4th Placement: $750
5) 5th Placement: $500
- Plus 8 placements for Rolling Checkpoint prizes @ $50 each! (To 8 first submissions who provide an advanced solution)
Note: Important Rolling Checkpoint Details
- We will answer questions and provide Rolling Feedback as fast as possible.
- You must watch the Forum for your feedback!
*All initial qualifying checkpoint submissions will win $50 (Only first 8 potential submissions)
Required Screens
For this challenge we just need 6 screens for desktop and only 4 for mobile, plus any iterations you think necessary to complement your design proposal.
1) “Inicio” (Home) (Desktop and Mobile)
- Reference: http://www.todohogar.com.co/
- This is what users fist see when they open the website.
- Currently this screen has a carousel style with promotions and featured content. Our client is asking to add a background video on first slide.
- This slider area will be also used to add content based on holidays like: Halloween, Christmas, Summer Vacations, etc.
- Think and propose how the new navigation should be presented. The main navigations items you must include are:
- - “Inicio” (Home)
- - “Catalogo” (Catalogue)
- - “Promociones” (Promotions)
- - “Emprendedores” (Entrepreneurs)
- - “Asi Somos” (About us)
- - “Blog” (Blog)
- - “Soporte en Vivo” (Live Support/Chat)
Somewhere in main navigation should be placed the following two links:
- - “Haz tu Pedido” (Make your order) and “Inscribete” (Register)
- - Remember to keep these spanish names as your main navigations items. Important
2) “Catalogo” (Catalogue) (Desktop and Mobile) Key Screen
- Reference: http://www.todohogar.com.co/catalogo
- Currently this catalogue screens works using PDF files on a Flash viewer. This of course is not the best solution to display a wide range of products.
- We are looking to completely revamp this section. So new features we need to add on this screen:
- - Search and Filters (Categories, prices, departments, size, colors)
- - Featured products
- - Categories list view: “Hogar” (Home and decoration), “Moda” (Clothes and Fashion), “Aseo Personal” (Personal Cleanliness), “Limpieza” (Cleaning).
- - Product detail with: Description, multiple photos and videos, ratings, price, add to cart button and quantity button.
- You are allowed to use all the images you need from the current PDF catalogues.
- User still must be able to download the catalogues (current and old ones) on PDF.
3) “Emprendedores” (Entrepreneurs) (Desktop and Mobile)
- Reference: http://www.todohogar.com.co/como-entrar-al-negocio
- Form reference: http://minegocio.todohogar.com.co:8080/zoftfokles/preinscripcion.jsp
- This page is the connection point between new entrepreneurs and the retail store. Basically is a form where new entrepreneurs can apply to become part of the providers and sellers.
- This must feel professional and engaging.
4) “Asi Somos” (About us) (Desktop only)
- Reference: http://www.todohogar.com.co/asi-somos
- This page contains information related to company.
- How can this page feels attractive and engaging?
- Please add a “Contactanos” (Contact us) sub section on this page. It must include the different ways to contact the company such like: Address, Telephone numbers and contact form.
5) “Blog” (Blog) (Desktop and Mobile)
- For now there is not any Blog page on current website. So we need you to provide a blog format layout that match the new style for this web portal.
6) “Live Support/Chat” (Desktop only)
- Our client is asking to include a Chatbot screen to help users on anything they may need on the portal.
- This screen should be accessible from any screen.
- Have in mind that live support can work with an online agent and also using AI with a Chatbot.
- How this should be presented to users? Automatically on first launch? Propose the best scenario for this problem.
7) Presentation Screen - Important
- As this is a RUX challenge, we need to quickly showcase your design in a meeting.
- So design a screen with a resolution of 1920x1080 showcasing your design.
- Do not add a logo or extra notes on this screen.
- With just one screen is enough. No need to provide different presentation screens.
General Requirements
Screen Sizes
- This application is going to be developed as responsive web application:
-- Web: Desktop 1280px and Height increasing if necessary.
-- iPhone 6/7/8: Width 750px and Height 1334px
Branding References
- All branding and supporting documents are published on forum. You need to register first to access these files. Important
Submissions Requeriments
- Upload your “Source.zip”, “Submission.zip” and “Preview.jpg/png” files as usual.
- Upload your screens to Marvel App for review and to showcase the experience (ask for Marvel App prototype/project from co-pilot or PM in challenge forum. Do this with enough time in advance. Avoid last minute requests.)
Marvel Prototype - Important
- We want to use Marvel App to provide direct and fast feedback! We can also track your design updates and screen versions within Marvel App!
- No additional functionality is required! Just make sure your screen(s) are in the correct viewing order (number them 00, 01, 02, 03, etc.)
- You MUST include your Topcoder Marvel App URL within your .Notes file
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
- Simplified User Experience and innovative ideas
- Overall design and user experience
- Cleanliness of screen design and user flow
Target Audience
- “Todo Hogar” users and new entrepreneurs.
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 a layered PSD file, Adobe Illustrator as a layered AI file, and 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.