Design System Portal Design Concepts Challenge

Welcome to the Design System Portal Design Concepts Challenge. In this challenge, we are looking for help to come up with design concepts for a few screens that will be used by designers and developers for referring to the design system/guidelines of the company.

CHALLENGE OBJECTIVES

• UI/UX design concept for web screens
• Design for 5 unique screens
• How well your design solves the problem and provides a seamless user experience.

Round 1

Submit your initial designs and any notes you might have for checkpoint review.
1. Homepage
4. Contribute - Process Page

• 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 initial designs plus checkpoint feedback implemented for the final review.
1. Homepage
2. All Stories
3. Story Details Page
4. Contribute - Process Page
5. Template Page

• 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

PROJECT OVERVIEW
The main purpose of this challenge is to design a design system portal that will be used internally by the companies “designers and developers”, they will used this design system framework, so this way they ll not need to be creating any design from scratch and developers can easily grab the code as required to start building their products.

Having a design system in place will help the team to deliver products aligned to the client’s standards efficiently.

TARGET AUDIENCE

• Designers and Developers
• Product Owners

SCREENS / FEATURES REQUIREMENTS
For this challenge, we are looking for you to redesign the existing design guidelines portal that is used by the designers and developers.

1. Home page:
The existing landing page is not engaging to the user (developers and designers are the end-users here), so we want your help to make it more engaging and useful to the designers and developers.

Featured Stories

• We want you to include a ‘Featured Stories’ section, these are kind of testimonials about the latest projects that utilized the design system.
• This way we show the users how useful the design system is and how it has been utilized by the project teams within the company.
• We are open to you thoughts on how many stories we need to display in this page but please do not crowd the page with too many testimonials. You can include a link say “View All” that will lead the user to “2. All Stories” page.
• For each of the story or for one of the main story, you can think of adding a title , description and an image associated with that project.
• Clicking on these will lead the user to Story/Testimonials details page.

Design and Developemnt Tools

• This page could also list the tools that is being used by the designers and developers. Just include the tool name and tool logo.

Main Navigation

• Have a simple navigation for the overall site, where should we show the navigation.
• Make sure it is easily accessible and placed in a prominent location.
• We want it to include these items “Create, Build, Learn, Contribute and Contact”
  • Create will have information about the design system / it is specifically for the designers
  • Build will allow the developers to grab any codes as required
  • Learn will be used by the product owners, it will help them get familiarize with the figma and overall design system
  • Contact will allow the user to contact the team
• NOTE: You are not required to design a page for all the above navigation items, however you will be creating one template page that will used across the above four sub-pages (please see details in 4. Template Page).
• This design system will be used internally within the company, so if you have any other thoughts on what would make this landing page more useful for designers and developers - do your research and feel free to include it in your concepts.

2. All Stories

• This need to show the list of all the stories/testimonials that have been created in the past
• Looking forward to you thoughts on how best it can be shown, assume there could be many testimonials - so it could be simple table or a come up with a better to display them.
• Do you think having a filter will be helpful?

3. Story Details Page:
Featured Story will include the below details

• Project Name
• Concept Description
• Images from the project
• What tools, frameworks were used? (description)
• How the design system was useful? (description)
• Process (this will be a description on the how the project was approached)
• Include quotes from the actual interviews (for example: “Using the design system helped us save time and deliver the project well ahead of our scheduled delivery - Jim, UX Designer” ).

4. Contribute - Process Page

• This page will show a process for the designers and developers to contribute to the design system
  • We need to show visually the process for making a contribution to the design system, below is the content that will be used in this page, we want you think through and come up with ideas/concepts on how to convey this visually.
  • Explain what a design system is for and how helpful it can be for the team
  • Include the process map as mentioned above / we want to make this appealing and easy for users to understand.
  • Contribute: Have the title as “Design System Contribution Model”
  • Below is the overall process, so how you show it visually in the page matters.
    • We will have two way to get the users contribution, one is through designers and the other one is from developers
• Designers:
  • Show these process along with the links
  • Check if the component you are looking to add already exists in our design system and adheres to our design guidelines (we need to show links to the design system and design guidelines)
  • Check our roadmap, if the component that you are coming up with is in our plans (show link to roadmap)
  • If the above component doesn’t exist in our design system then proceed to create a new figma branch in our design system and complete the form (link to the form)
  • How best to show the form, perhaps as a modal window?
  • Form need to include the textfield to enter the link to the component in figma and allow user to add description.
• Developers:
  • Show these process along with the links
  • Check if the component you are looking to add already exists in our design system and adheres to our design guidelines (we need to show links to the design system and design guidelines)
  • Check our roadmap, if the component that you are coming up with is in our plans (show link to roadmap)
  • If the above component doesn’t exist in our design system then proceed to create a new figma branch in our design system and complete the form (link to the form)
  • How best to show the form, perhaps as a modal window?
  • Form need to include the textfield to enter the link to the component in figma and allow user to add description.
• Design Council:
  • Show these process along with the links
  • Once the designers and developers have contributed it will be reviewed and evaluated by the design council team to check if the submission can be added to the design system
  • If approved, it will be added to the backlog to be added to the design system.
  • Looking forward to see how you will show the above process map.

• This will be the sub-page, when the user clicks on any of the item in the main navigation - we show this page.
• Use dummy content for this page.
• We will have secondary navigation, for example: selecting create from the main navigation will include all items relevant to the design, so it will include “Getting Started, Design System Principles, Logo, Color, Typography, Spacing, Resources”
• Within the above secondary navigation, we will have tertiary navigation. For example: Clicking on “Industrial Principles” will show “Purpose, Design Variations, Touch Zones, Spacing and padding, Eamples”

~
JUDGEMENT CRITERIA

• Creativity: Impactful; the solution is different or unique from what is already out there and can be implemented.
• Exploration: Out of the box; consider the screen requirements and guidelines as a draft or start point. Provide alternate experiences or workflows to achieve what we are proposing in the requirements and satisfy the user goals.
• Aesthetics: Hi-fidelity design; provide a top-notch finished-looking visual design.
• Branding: Client-Provided; We have client’s branding guidelines that need to be followed.

DEVICE SPECIFICATIONS

• Desktop: 1366px width and Height as required

BRANDING GUIDELINES

• Need to follow the client branding guidelines.
• Your design must be modern, easy to use, comply with accessibility.

MARVEL PROTOTYPE

• 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)

SUBMISSION AND SOURCE FILES
Submission File

• 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

Source Files
All source files of all graphics created in either Adobe XD, Figma, or Sketch.