Actian Documentation Web Portal - Responsive Design Challenge

Welcome to the Actian Documentation Web Portal - Responsive Design Challenge.

Actian is the hybrid data management, integration, and analytics Company that enables Enterprises to seamlessly manage and connect operational and analytic data for superior performance, insights, and business outcomes. Activate your data^TM - Learn more about Actian’s products here and follow us on Twitter.

In this challenge, we are looking for the TopCoder Community to design the new docs.actian.com portal UI and UEX frontend optimized for the Developer / IT-Practitioner.

For this design challenge, we are looking to focus on a new and modern design direction for this application and to create an effective design. This challenge is focused on a new design that will focus on refining the experience.

We are really excited to see your designs for this challenge.
Good Luck!

Round 1

Submit your initial designs for Checkpoint Feedback
01 Search
02 Documentation Page
03 Documentation Page Features
04 Page Content Management

You must upload your submission to MarvelApp so we can provide direct feedback on your designs.
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Your Final designs for all the required designs with all Checkpoint Feedback implemented.
00 General, Navigation, Header & Footer
01 Search
02 Documentation Page
03 Documentation Page Features
04 Page Content Management
05 Contact Us Form

You must upload your submission to MarvelApp, for the final submission - you can reuse the prototype that you shared for checkpoint
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

We need help from the TopCoder Community to design the new docs.actian.com portal UI and UEX frontend optimized for the Developer / IT-Practitioner. Developers and IT-Practitioners do a lot of reading of technical documentation, and companies such as example 1, example 2, and example 3 have set the bar high for documentation UI/UEX best practices.

We are looking for help from the TopCoder Community in creating our own unique experience that Developers will love.

Branding Guidelines:
The UI must be Actian brand compliant.
- Please see Actian colors and styles used on actian.com for more information.
- Please do not use the Actian logo in any of the designs, but rather include a generic blanked out image of an X that is of similar size and proportions as the Actian logo as your placeholder.
- Actian’s logos and marks are subject to Actian’s Trademark Guidelines https://www.actian.com/trademark-guidelines

Reference:
The following sites have set the bar high for documentation UI/UEX best practices (please DO NOT COPY):
- example 1
- example 2
- example 3

Design Considerations:
- This will be a responsive design!
- The header, footer, search and side navigation (s) must be optimized for a simple user experience.
- Have the size of the design as follows:
- Desktop: 1366px width and height as required
- Mobile: 750 x 1334px

Design Problem:
- We have number of products and respective product versions, so users need a visual guided tour upon first visit to the site to orientate themselves to all that this rich user interface has
to offer e.g. show them where to select their product, select their version, and any other key user interactions you feel are important for them to know about.

The Solution:
- The design must clearly demonstrate end-user experience and interaction incl. responsive design, search, changing products, changing product version numbers etc. See http://docs.actian.com/#page/Welcome%2FWelcome_to_the_Actian_Documentation_Portal.htm for the list of Actian products and product versions to be supported.
- Code snippets display functionality will leverage the following Open Source project.

Suggested Screens:
It is anticipated that around 10 screens will be needed to showcase the responsive design and functionality described below, across desktop, tablet, and mobile.

00 General, Navigation, Header & Footer: 
- The header, footer, search and side navigation(s) must be optimized for a simple, intuitive user experience.
- The design must clearly demonstrate end-user experience and interaction incl. responsive design, search, changing products, changing product version numbers etc. See http://docs.actian.com/#page/Welcome%2FWelcome_to_the_Actian_Documentation_Portal.htm for the list of Actian products and product versions to be supported
- Product version specific documentation selection
- “Tabs” for other related product documentation i.e. PDF version of the online docs, link to product specific support forums, link to product downloads, Actian Blog etc.
- Icon links to additional resources and support i.e. Actian GitHub, Stack Overflow, YouTube, Twitter, Facebook and LinkedIn

01 Search:
- As with the current documentation experience, Search functionality is a critical element of the interaction design and user experience.
- We are looking for a brand-compliant stylized view of search results is also required, and should assume a federated search experience across all related resources for the product(s) so the UI should show results from not only the search within the documentation portal, but also from across the other support resources including Actian GitHub, Stack Overflow, YouTube and Blog.
- Looking for your thoughts on how this can be shown in your designs!

02 Documentation Page:
- Showcase documentation content in place, please illustrate documentation content using extracts from the official Actian documentation for Actian Vector 5, rather than using any generic non-Actian content.
- All Actian Vector 5 documentation can be found here, which are subject to Actian’s Terms of Use.
- Visual designs and prototypes should ideally cover all of the following key sections from the Vector 5 documentation so that the designs and eventual prototype feel more realistic (if these direct links are not working for you, you may need to login first or browse for them using the Vector documentation menu):
- Installing Actian Vector
- Starting Actian Vector
- Creating a Database & loading data
- Loading data with the Spark Connector
- Run a reporting query
- Calling Vectorwise
- Reporting on DBT-3 Database Benchmark
- Limits
- Copyright
- Using this site

03 Documentation Page Features:
- Ability to “share this page” via social media and to print this page per the current docs.actian.com functionality
- Ability to scroll left/right to previous/next section
- Ability to change the font type/size (there are a lot of people that have visual impairments that will appreciate this ability)
- Ability to collapse/expand the side navigation to make more space for the important content (important on smaller screens and support responsive design)
- Avoid using subpages for subtopics. Each topic should deliver all the main subtopics on a long HTML page, and use one page section anchors to jump to the relevant subsection (you can still have the links to this content in side index navigation). This allows developers to CRTL+F or command+F to quickly scan the documentation for key information without needing to click through every subsection page relating to the topic.

04 Page Content Management:
- A page template needs to be constructed that can accept data from Atlassian Stash/GIT repositories and render it.

05 Contact Us Form:
- Provide an online form screen for users to contact Actian. The form should include
- - - Reason for contact (Options should include: General inquiry, Sales inquiry, Partner inquiry, Education inquiry, Press inquiry, Other)
- - - Name
- - - Email
- - - Comments (the comments text box editor should include support for adding code snippets)
- - - And the following placeholder text
>>>> Your feedback may be used by Actian for product improvements.

And the following placeholder text with checkboxes that users could select
>>>> You consent to the use of your feedback in documentation, forums, messages, and other posts.
>>>> Please send product updates related to Actian products
>>>> Please send general communications about Actian and Actian products, including events and product marketing

- - - A CAPTCHA, as well as include the links to Actian Terms of Use, Privacy Policy, Trademark Guidelines

Judging Criteria
Your submission will be judged on the following criteria:
- 25% Visual appeal of the responsive design across all user interfaces
- 25% Extent to which the design satisfies the visual, functional, and interactive requirements of the responsive design across all user interfaces
- 25% Creativity in creating a unique, developer-friendly reading, search, and navigation Experience
- 25% Overall user experience

Target Audience
- Developers and IT-Practitioners

Additional terms and conditions for all participants
By participating in this Competition, You acknowledge and agree that
1. You must comply with all applicable laws in submitting a Competition Submission, and you represent that you are authorized to submit the Competition Submission.
2. Actian Corporation (“Actian”) is free to use, disclose, distribute or otherwise exploit Residual Knowledge. Residual Knowledge means information that is retained in the unaided memories of Actian’s employees and contractors who have had access to any Competition Submissions submitted by You. An employee’s or contractor’s memory will be considered unaided if the employee or contractor has not intentionally memorized the information for the purpose of retaining and subsequently using or disclosing it; and
3. You are not entitled to any compensation from Actian or any of the benefits which Actian may make available to its employees, and You are not authorized to make any representation, contract or commitment on behalf of Actian.
4. Employees and direct and indirect subcontractors of Actian Corporation and its subsidiaries and other affiliates, and employees and direct and indirect subcontractors of Actian’s partners (including TopCoder and its affiliates) are not eligible to participate in the challenge.
5. You may only use data that is open and that can be shared with anyone in the world and which is freely available and to which you have rights to use the data in submitting such data.
6. You may only use graphic designs elements including and not limited to fonts, artwork, designs and templates, that you have the rights to use and where these rights can be transferred to Actian Corporation without any additional fees

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.
- Links to graphic designs elements including and not limited to fonts, artwork, designs and templates used in your submission

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a layered PSD file, or Adobe Illustrator as a layered AI file!

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.