CMS Demonstration Website Design Challenge - Part 2

Welcome back to "CMS Demonstration Website Design Challenge - Part 2". Previously we ran a successful challenge to create the mobile version for our responsive CMS Demonstration website using the Mobile First approach. We are now continuing with a follow-up challenge to create the best possible UI/UX for our Desktop/Web part using our mobile design as references. 

This 'Demonstration Site' will appear by default whenever our 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 need 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 as much as possible for a Checkpoint Feedback

• 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 (All requirements) plus Checkpoint Updates

• 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 for the Desktop/Web version of our CMS  'Demonstration Site' based on the Mobile design version while still maintaining the level of design consistency at the maximum level. 

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
• Consistency between Mobile and Web/Desktop version needs to be the same 
• Best Practice for Responsive Web (we are going to focus on Desktop/Web device in this challenge)
• The imagery used must be obtainable under a royalty-free license that will allow us to distribute it with the sample site (Pexel, 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=681921

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
00) General Requirements

• Please make sure all content from the mobile design exist in your Desktop/Web design
• Make sure the navigation available in the desktop/web (reference 08_Menu_A@2x.png - 08_Menu_B@2x.png)
• Need to have a search feature in the demo site (reference 09_Search_A@2x.png - 09_Search_B@2x.png)
• Utilize the fix section feature where each content section fit into user screen so we can minimize scrolling (reference 10_Fit_Page_A@2x.png - 10_Fit_Page_H@2x.png) 

01) Homepage Screen

• Refer to 01_Homepage_A@2x.png - 01_Homepage_D@2x.png
• Website visitors will find the homepage first. We need to make a solid first impression to the visitor.
• We need a  homepage that showcases the most recent creations and one or two highlighted events
• Make it informative as a marketing page to promote Woodburn Studio (Hero images/Carousel, Features, etc)
• Do we need to provide a 2nd carousel like in the mobile for the ‘recent creations’? Or showing all the creation at once in desktop (no carousel) will be more feasible since we already have one carousel for Hero images?
• The Homepage should be helping the target audience get to know about Woodburn business
• 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)? Mobile version didn’t have this, should we have one?
• Show us your creativity for this screen!

02) Our Exhibitions Screen

• Refer to 02_Exhibitions_A@2x.png - 02_Exhibitions_E@2x.png
• 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 that held our exhibition
• Review from customer/visitor
• Schedule for Woodburn exhibitions and events
• Past and Future Exhibition information
• Upcoming or Currently Running exhibition
• We’re gonna need sub screens for the Galleries, Gallery details, Events Schedule, and Events Schedule Details

03) Products Screen  

• Refer to 03_Products_A@2x.png - 03_Products_F@2x.png
• Show gallery of Woodburn creations in this screen
• Ability to filter products based on type, etc
• Ability to see details of Woodburn specific work (time created, statement of the product/work, zoom in to see details work)

04) Our Projects Screen

• Refer to 04_Our_Projects_A@2x.png - 04_Our_Projects_B@2x.png
• Show recent projects that Woodburn currently doing 
• Ability to see details of project information

05) Blog Screen

• Refer to 05_Blog_A@2x.png - 05_Blog_B@2x.png
• Show list of the latest blog post in this screen
• Ability to see the blog content details

06) Contact Us Screen

• Refer to 06_Contact@2x.png
• 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)

07) About Us Screen

• Refer to 07_About_Us@2x.png
• 'About Us' page is needed in the demonstration site 
• Includes a gallery of the artists who participate in the studio, each accompanied by an artist statement
• Some brief about Woodburn vision, mission, and studio goals or manifesto

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 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/comments this link while you upload)

 
BRANDING GUIDELINES

• Follow our Mobile Design Storyboard

DOCUMENTATION

• Mobile Design Storyboard 

TARGET DEVICE

• Web/Desktop: 1366px width with height adjusted accordingly

TARGET AUDIENCES

• Our CMS User

JUDGING CRITERIA

• Your submission will be judged on the following criteria:
  • Level of Consistency between Desktop and Mobile version
  • 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 (preferable because of mobile use this version), 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.