CMS Demonstration Website Design Challenge

Welcome to "CMS Demonstration Website Design Challenge". In this challenge, we are looking for your help to create the best possible UI/UX for our 'Demonstration Site' that will appear by default whenever user installed our CMS (Content Management System) for the first time so the site doesn't look empty since it has no content yet. The site also needs to be able to feature all our CMS capability.

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 Feedback
01) Homepage Screen
02) Our Exhibitions Screen
03) Products Screen  
04) About Us Screen
05) Contact Us Screen
06) Other Screens?
- 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 the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your Final Design plus Checkpoint Updates
01) Homepage Screen
02) Our Exhibitions Screen
03) Products Screen  
04) About Us Screen
05) Contact Us Screen
06) Other Screens?
- 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 the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
BACKGROUND OVERVIEW

• Our content management system (CMS) needs to have a new 'Demonstration Site' that we will supply with the product
• The 'Demonstration Site' is a small website whose purpose is to ensure that the CMS is not empty when it is first installed
• The 'Demonstration Site' will be used to demonstrate the CMS capabilities and will be expanded over time
• The 'Demonstration Site' should beautiful and engaging

CHALLENGE GOAL

• Create the best possible UI/UX design for the stunning 'Demonstration Site' with all functionalities applied

CMS CAPABILITIES

• As noted above, the demonstration site will eventually be implemented in our Content Management System to showcase its capabilities. This challenge is strictly focussed on the design of the reference site, but for reference here is a little information about the CMS used.
• The CMS is able to build websites and manage content for use in both web and non-web channels. It can integrate applications and produce sites whose content and navigation are role based. The CMS can also detect device types and adapt the content served based on this, beyond any in-browser adaptation done through responsive design.
• When we implement the demonstration site, we will add our in-line editing and site management tools, as well as applying role or device based controls to some parts of the site.

DESIGN CONSIDERATION

• Innovative and Beautiful designs for this demonstration site, to be followed by implementation
• Best Practice for Responsive Web (we are going to focus on Mobile device in this challenge)
• Designs should be mobile-first, and visualizations for mobile must be provided. Here are some references about designing for Mobile-First approach:
  • https://www.uxpin.com/studio/blog/a-hands-on-guide-to-mobile-first-design/
  • https://medium.com/@Vincentxia77/what-is-mobile-first-design-why-its-important-how-to-make-it-7d3cf2e29d00
• The imagery used must be obtainable under a royalty-free license that will allow us to distribute it with the sample site (Pexels, Unsplash is preferable)
• Consideration should be given to choosing imagery that will be acceptable worldwide. Where people are represented in the images, a diverse range of ethnicities and genders should be shown
• For this challenge, you do not need to write realistic body text. Lorem Ipsum is acceptable.
• Make sure the site design you create is consistent - so if you choose to create a minimalist look (for example), make sure that this is reflected in your choice of colors, images and so on. You may choose whether to emphasize ceramics, lighting or other furnishings, and whether to leverage the Studio's hometown in your design somehow

CHALLENGE FORUM
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=678904

DEMONSTRATION SITE REQUIREMENTS
The 'Demonstration site' will represent a small, fictional company called "Woodburn Studio" and The brief for the content of the site is below.

Woodburn Studio - company overview

• "Woodburn Studio" is a fictional organization that exists only for the site demonstration purposes
• Woodburn Studio is a small high-end design studio that designs home furnishings such as ceramics and lighting (NOTE: this is selected because of the possibility for beautiful but fairly culturally neutral imagery)
• Its work is exhibited and sold in leading boutiques and galleries, and the Studio accepts custom commissions too. 
• They are based in Edinburgh, Scotland but their work is sold around the world. (NOTE: this information is provided in case any locale-specific content is needed)
• The Studio is a small organization, with a couple of permanent designers and a variable number of others who share their space.

Woodburn Studio - Site brief

• Since the Studio sells through galleries and boutiques, no eCommerce capability is required at this time (NOTE: We may add it in a future evolution). The site is mostly about presenting the Studio's brand and so it can be very simple
• The site should showcase their recent creations, highlight where their work is available, explain their design philosophy and make it possible for them to receive commissions

Woodburn Studio - Site Functionality
01) Homepage Screen

• Website visitors will find the homepage first. With that in mind, you need to make a solid first impression
• We need a  homepage that showcases the most recent creations and one or two highlighted events.
• The Homepage should be helping the target audience get to know about Woodburn business
• Features such as image carousels, videos, and striking imagery may be used to highlight content
• Make it informative as a marketing page to promote Woodburn Studio
• Main Navigation to access all features/pages in the demo site
• Recent Photos from Social Media (integration with social media plugin) and it’s interactions status (comment, like, etc)
• Show us your creativity for this screen!

02) Our Exhibitions Screen

• A 'where to see us' page (or similar) that lists galleries and shows where Woodburn Studio's work is exhibited
• This should include a map to locate nearby galleries
• Schedule for Woodburn exhibitions and events
• Past and Future Exhibition information?
• Upcoming or Currently Running exhibition?
• Show us your creativity for this screen!

03) Products Screen  

• Show gallery of Woodburn creations in this screen
• Ability to see details of Woodburn specific work (time created, statement of the product/work, zoom in to see details work)

04) About Us Screen

• 'About Us' page is needed in the demonstration site 
• Includes a gallery of the artists who participate in the studio, each accompanied by an artists statement
• Some brief about Woodburn vision, mission, and studio goals or manifesto

05) Contact Us Screen

• Show information about how the visitor can reach and get in contact with Woodburn Studio
• Address, Phone, Email, Social Media information needs to be put here
• Form to contact Woodburn studio directly?
• Provide information about the studio's location
• Map direction to the studio
• Information about Studio schedule (daily open/close)

06) Other Screens?

• What else? Show us your imagination and creativity for the demonstration site!!

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. You get to choose whether to choose a modern, classic, fancy or other styles - we’re interested in your creativity here!

 
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

• Open to Designers
• We have deliberately not provided any visual style guidelines or aesthetic preferences - since this is a demonstration site you can decide what kind of look you want to propose

TARGET DEVICE

• Mobile: 750px x 1334px (iPhone 8)

TARGET AUDIENCES

• Our CMS User

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 solving the problem
• The overall design and user experience
• Cleanliness of screen design and user flow
• Ease of use

 
SUBMISSION AND 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, XD, 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 colors) or modify overall colors.