Challenge Summary
Welcome to the “Clorox Responsive Web Intranet UI Design Challenge”. In this challenge we are looking for your creativity and professionalism to design and conceptualize the UI/UX for a responsive web employee intranet. You will be focused on creating how this intranet should look and feel.
Let us know in the forum if you have questions!
- 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 prototype for Desktop and Mobile.
- 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)
- Important: As part of your final submission, you must update your submission to MarvelApp.
- Use the same MarvelApp prototype you received in checkpoint.
- 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
Clorox is transforming its employee intranet and wants to apply UX best practices to create a dynamic, intuitive hub of information, collaboration, tools and resources for its 8,700 global employees. Clorox is a global company that makes and markets consumer and professional products, including cleaning and laundry products, natural personal care items, health and wellness products, and other consumable household items.
Read the challenge specification carefully and watch the challenge forums for any questions or feedback concerning this challenge. Feel free to ask any questions in the challenge forum.
Key Items to Focus on
- NOTE: Clorox uses Sharepoint. So make sure that your designs are compatible and can be developed using Sharepoint. https://products.office.com/en-us/sharepoint/collaboration
- We are looking for a clean and professional look and feel.
- Make your design stand out on a first view!
- Focus on general navigation between all required screens and functionalities
- Easy and intuitive use for tech and non tech users. Apply best practices in UX design.
- Clorox is still not settled on its logo and branding. We are providing you with some of the logo ideas they are thinking about as inspiration for your design work.
- The focus should be on desktop while designing the screens, yet this application should work well on both desktop and mobile environments.
- Do not over complicate things, make the overall web design easy to use.
Very excited to see your design for this challenge!
Required Screens
1) Homepage (Desktop & Mobile) Sample Content
- After a successful login, the user will get into this screen.
- We need to allocate the following features in a very easy and intuitive way for easy access and navigation.
2) News Article Index (Desktop)
- This page shows an archive of news and stories
- Search and filter is required
3) News Article (Desktop & Mobile)
- Design the “News Article” layout
- Have in mind that articles can show: text, videos, photo galleries, links.
- Your sample screen for this challenge should have all these elements. Important!
4) Teams (Desktop)
- Template of team resource pages on the intranet (Key Contacts, Tools, Videos/Photos, Announcements, Training and References) Each Clorox Corporate Team has its own local landing page and should contain these elements.
5) Personal Info - Profile Page (Desktop)
- This will be the profile page of all users. We need to accommodate the following information in a very user friendly and professional look:
6) Human Resources Landing Page (Desktop & Mobile)
- Redesign of current human resources landing page (learning and development links, compensation documents, time off policies and procedures, job aids, training videos)
7) Strategy Landing Page (Desktop & Mobile)
- Think of this as a learning page, where users can access information to better understand the company’s strategy:
Target Device and Size
- Web Standard: 1280px width and height adjusted and increased if necessary.
- Mobile: To test the mobile screens, please use iPhone standard 750px width by 1334px height
Target Users
- The Clorox Company employees.
Branding Documentation
- You are free to propose a color palette for this project. Make it an elegant and professional look.
- For the logo, you are free to use any of the logos contained on this folder:
https://drive.google.com/open?id=1p2-RxgDMkjuicXCqWtOQKg4TpEVIHHPE
Judging Criteria
- User Experience of the application
- Completeness and accuracy of your UI Design
- How well your design provide a consistent user flow
- How clean and modern your design is
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.
- Submit Marvel App for your design.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator, Sketch or XD.
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.
Stock Photography
Stock photography is allowed in this challenge. See this page for more details.
Let us know in the forum if you have questions!
Round 1
Submit your initial designs for checkpoint review. (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 prototype for Desktop and Mobile.
- 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 plus checkpoint feedback implemented. (Desktop & Mobile)- Important: As part of your final submission, you must update your submission to MarvelApp.
- Use the same MarvelApp prototype you received in checkpoint.
- 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
Clorox is transforming its employee intranet and wants to apply UX best practices to create a dynamic, intuitive hub of information, collaboration, tools and resources for its 8,700 global employees. Clorox is a global company that makes and markets consumer and professional products, including cleaning and laundry products, natural personal care items, health and wellness products, and other consumable household items.
Read the challenge specification carefully and watch the challenge forums for any questions or feedback concerning this challenge. Feel free to ask any questions in the challenge forum.
Key Items to Focus on
- NOTE: Clorox uses Sharepoint. So make sure that your designs are compatible and can be developed using Sharepoint. https://products.office.com/en-us/sharepoint/collaboration
- We are looking for a clean and professional look and feel.
- Make your design stand out on a first view!
- Focus on general navigation between all required screens and functionalities
- Easy and intuitive use for tech and non tech users. Apply best practices in UX design.
- Clorox is still not settled on its logo and branding. We are providing you with some of the logo ideas they are thinking about as inspiration for your design work.
- The focus should be on desktop while designing the screens, yet this application should work well on both desktop and mobile environments.
- Do not over complicate things, make the overall web design easy to use.
Very excited to see your design for this challenge!
Required Screens
1) Homepage (Desktop & Mobile) Sample Content
- After a successful login, the user will get into this screen.
- We need to allocate the following features in a very easy and intuitive way for easy access and navigation.
- Global navigation menu
- News article headlines, images and links
- Global quick links
- Customizable personal quick links
- Personal Reminders & Notifications
- Cloey (Name of the Chatbot)
- Twitter Feed
- Stock ticker
- Search
- Poll
2) News Article Index (Desktop)
- This page shows an archive of news and stories
- Search and filter is required
3) News Article (Desktop & Mobile)
- Design the “News Article” layout
- Have in mind that articles can show: text, videos, photo galleries, links.
- Your sample screen for this challenge should have all these elements. Important!
4) Teams (Desktop)
- Template of team resource pages on the intranet (Key Contacts, Tools, Videos/Photos, Announcements, Training and References) Each Clorox Corporate Team has its own local landing page and should contain these elements.
5) Personal Info - Profile Page (Desktop)
- This will be the profile page of all users. We need to accommodate the following information in a very user friendly and professional look:
- Benefits
- Compensation
- Notifications & Reminders
- Custom news feed
- Personal non-work links
6) Human Resources Landing Page (Desktop & Mobile)
- Redesign of current human resources landing page (learning and development links, compensation documents, time off policies and procedures, job aids, training videos)
7) Strategy Landing Page (Desktop & Mobile)
- Think of this as a learning page, where users can access information to better understand the company’s strategy:
- Videos
- Training Courses
- Learning Modules
- Stories
- Quizzes
Target Device and Size
- Web Standard: 1280px width and height adjusted and increased if necessary.
- Mobile: To test the mobile screens, please use iPhone standard 750px width by 1334px height
Target Users
- The Clorox Company employees.
Branding Documentation
- You are free to propose a color palette for this project. Make it an elegant and professional look.
- For the logo, you are free to use any of the logos contained on this folder:
https://drive.google.com/open?id=1p2-RxgDMkjuicXCqWtOQKg4TpEVIHHPE
Judging Criteria
- User Experience of the application
- Completeness and accuracy of your UI Design
- How well your design provide a consistent user flow
- How clean and modern your design is
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.
- Submit Marvel App for your design.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator, Sketch or XD.
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.
Stock Photography
Stock photography is allowed in this challenge. See this page for more details.
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.