ACME - Feature Request Form - Responsive Web Design Challenge

Welcome to the “ACME Feature Request Form - Responsive Web Design Challenge”! In this challenge, we are looking for you to create the UI design for feature request form for both admin and user view.

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 the following screen requirements for checkpoint feedback:
01) Admin View
02) User View

• 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 the following screen requirements with checkpoint feedback applied:
01) Admin View
02) User View

• 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.)
• If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2

• Create 2 scenarios for both desktop and responsive mobile.
• Create elegant, clean, and simple user-centered design with modern design aesthetics.
• Best practice of color usage, visual comparison, and drill-down charts to highlight comparison
• The overall design and user experience should be engaging and easy to use.

• Our customer is a telecommunication company that is looking for a different design approach for their current feature request form.

• Creativity: Impactful; the solution is different or unique from what is already out there and can be implemented.
• Exploration: Flexible; follow the provided screen requirements section and propose improvements or different paths that positively impact the user goals.
• Aesthetics: Hi-fidelity design; provide a top-notch finished-looking visual design.
• Branding: Strict; carefully follow the provided guidelines and stick to them.

• Intuitive experience for end users to fill out the form request.
• Allow a different variety of questions to be added/shown for user view.
• Show response recorded from the form in a meaningful way, eg using charts and summary tables.
• Design shall be compatible with PrimeNG Sapphire Template Angular 11.

• Admin: company admin who manages the master data of the application, including questionnaire.
• End User: users who will respond to the questions on the questionnaire.

• Name: Bob Stevenson
• Occupation: Admin
• Role: Manages master data (add/update/delete). Master data includes the focus areas, questionnaire and the feature details.
• Pain Points: Basic table that needs lots of effort to analyze.
• Wants: Easy to use, smart and informative form response.
• Proposed Solution: Build an interactive and smart form response table.

• Bob logs into the system (out of scope) and can manage master data, as well as Bob can see all the responses submitted by end users grouped by focus area with each question and answer from users.

• Name: David Harrison
• Occupation: User
• Role: identifying features in scope using the form questionnaire.
• Pain Points: Limited and outdated form questionnaires which are not easy to fill out.
• Wants: Easy to use and informative form questionnaire.
• Proposed Solution: Build an easy to use and informative form questionnaire.

• David wants to identify the scope (features) with the help of this questionnaire.
• He sees the list of questions in an interactive way. He responds to the question with a yes or no (could be checkmark, text, radio button), and if his answer is yes, the system shows the feature that shall be in scope.
• He completes all the required questions and then submits them to the system.

• Refer to sheet “Master Data”.
• This is a segregated table which has the Master Data - Focus Area, Questionnaire, and corresponding Features.
• The questions should be grouped based on the focus area with the option to expand all rows.
• Show how admins can navigate between each screen.

• Refer to sheet “User View”.
• Think on how to present this view to the user.
• If the user answers ‘yes’, then potential scope shall appear on the right hand side with details like feature title, feature description, acceptance criteria, and resources.
• If user answers ‘no’, then right hand side shall remain blank
• ‘Push to JA’ is a toggle option (could be a check mark or radio button) that shall be given for each feature that appears on the right. 
• Show how users can navigate between each screen.

• Web: 1366 x 768px, with height adjusting accordingly. 
• Responsive Mobile: 375 x 812px, with height adjusting accordingly. 

• Adobe XD
• Figma
• Sketch

• We need you to upload your screens to Marvel App
• Please request for marvel app in the challenge forum
• 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 on this link while you upload)

• Submit JPG/PNG image files based on Challenge submission requirements stated above
• MarvelApp link for review and to provide feedback
• Declaration files document contains the following information:
  • Stock Photos Name and Links from allowed sources
  • Stock Art/Icons Name and Links from allowed sources
  • Fonts Name and Links source from allowed sources