Challenge Summary
Welcome to IT Network - Sharepoint Intranet Portal Design Challenge.
We need your help to come up with a design solution for a Sharepoint Intranet Portal that will provide transparency into our IT team and how to connect with them and also, to be helpful and provide announcements, links, and information to the company in the form of a knowledge-base articles, how tos, and blog posts.
Best of luck!
1. Home (Desktop and Phone)
2. Team Directory
3. Knowledgebase/How To List View
5. Tools/Links
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1. Home (Desktop and Phone)
2. Team Directory
3. Knowledgebase/How To List View
4. Knowledgebase/How To Details View
5. Tools/Links
6. Tech News
7. Create IT Request
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this challenge is to design the look and feel of a MS Sharepoint Intranet Portal. You are provided with basic user stories, branding book and the existing portal design as references for you to come up with your own unique solutions.
Project Goals
Our users will come to our intranet portal page when they are experiencing some form of technological difficulty. Our goal is to create a page that empowers the user to seek out their own answer to the problem using our provided resources. We'd also like our users to have plenty of opportunities to reach us directly in the event that they can't find what they are looking for.
Important! DO NOT JUST SKIN the existing Sharepoint portal reference. That is definitely not the right approach. We want unique and attractive design solutions.
Screens Requirements
Overall
- Follow the attached template psd file (re-use the same header). The rest is open to imagination.
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
1. Home (Desktop and Phone)
This page gathers a summary of all the sections and works as a hub for all the features.
Having an announcements section front and center is the most important part. In addition we'd like to provide contact information and either a link to request a support ticket.
The home page can also be used to provide snippets and highlights to all the other pages on the portal and links to frequently used tools and areas of the IT portal.
Make sure to support a fluid transition to mobile considering “mobile-first” best practices.
2. Team Directory
The Team Directory page will be used to list employees that work of the IT department and their titles and contact info. Sharepoint offers a presence indicator which is basically a green, red, or yellow notification that tells the user whether the employee is online.
3. Knowledgebase/How To List View
This page should show a list of knowledge base articles about how to solve for various technical problems that employees at the company may encounter.
This page should provide searching and filtering by category functionality.
There should also be a listing of popular or recent articles for which lorem ipsum can be used in the designs.
4. Knowledgebase/How To Details View
The knowledgebase article page provides a single view of a knowledge base article.
The article should have a thumbnail, title and content, as well as categories and created dates listed with them. Use dummy text as content, photos, and common format items such as bullet lists, quotes, etc.
5. Tools/Links
This page includes a list of applications including details and information about the various apps within the company. This page should make use and reference to the Okta solution (see attachment ~ okta-redacted.png) a drive users to Okta to launch their applications. After clicking an app it would open externally, that’s out of scope, so just place links/buttons/icons.
6. Tech News
The tech news page is a aggregate page which shows news and links to publicly available information that is useful to our employees from a technological level.
There should be a list of news with title, thumbnail, small brief and action button. Details view is not in scope since the news come from external sources such as techcrunch, the verge, and so on.
7. Create IT Request
User should be able to submit their tickets through this system. Create a page/form that supports the following fields: name, type of problem (dropdown box), and description.
If the form is small enough it can be included as part of other pages either in the rail or as a popup, otherwise it can be a separate page. We are open to suggestions.
Branding Guidelines
- Follow the provided branding book for colors, typography and styling overall.
- Use a logo placeholder.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop: 1280px min width. Height as much as needed.
- Mobile (homepage only): 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com) and/or Adroc (adroc@topcoder.com).
- Make sure to create hot zones (clickable spots) to navigate through your solution in a way that makes sense for the final user.
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Target User
The employees of the company are the users of the site. They use computers daily and have a solid understanding of technology. They are willing to help themselves solve their own problems if the information is easy to find. The site will also be used by individuals within the IT department. They may find articles and send links out to people to help them navigate the site better in the future.
Judging Criteria
- Interpretation of the user experience.
- Is the website/application easy to use/intuitive?
- Cleanliness of your graphics and design.
- Are mobile-first considerations appropriately applied to the design concept?
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.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator or Sketch. Layers should be named and well organized.
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.
We need your help to come up with a design solution for a Sharepoint Intranet Portal that will provide transparency into our IT team and how to connect with them and also, to be helpful and provide announcements, links, and information to the company in the form of a knowledge-base articles, how tos, and blog posts.
Best of luck!
Round 1
Submit your design for a checkpoint feedback.1. Home (Desktop and Phone)
2. Team Directory
3. Knowledgebase/How To List View
5. Tools/Links
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final design plus checkpoint feedback.1. Home (Desktop and Phone)
2. Team Directory
3. Knowledgebase/How To List View
4. Knowledgebase/How To Details View
5. Tools/Links
6. Tech News
7. Create IT Request
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this challenge is to design the look and feel of a MS Sharepoint Intranet Portal. You are provided with basic user stories, branding book and the existing portal design as references for you to come up with your own unique solutions.
Project Goals
Our users will come to our intranet portal page when they are experiencing some form of technological difficulty. Our goal is to create a page that empowers the user to seek out their own answer to the problem using our provided resources. We'd also like our users to have plenty of opportunities to reach us directly in the event that they can't find what they are looking for.
Important! DO NOT JUST SKIN the existing Sharepoint portal reference. That is definitely not the right approach. We want unique and attractive design solutions.
Screens Requirements
Overall
- Follow the attached template psd file (re-use the same header). The rest is open to imagination.
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
1. Home (Desktop and Phone)
This page gathers a summary of all the sections and works as a hub for all the features.
Having an announcements section front and center is the most important part. In addition we'd like to provide contact information and either a link to request a support ticket.
The home page can also be used to provide snippets and highlights to all the other pages on the portal and links to frequently used tools and areas of the IT portal.
Make sure to support a fluid transition to mobile considering “mobile-first” best practices.
2. Team Directory
The Team Directory page will be used to list employees that work of the IT department and their titles and contact info. Sharepoint offers a presence indicator which is basically a green, red, or yellow notification that tells the user whether the employee is online.
3. Knowledgebase/How To List View
This page should show a list of knowledge base articles about how to solve for various technical problems that employees at the company may encounter.
This page should provide searching and filtering by category functionality.
There should also be a listing of popular or recent articles for which lorem ipsum can be used in the designs.
4. Knowledgebase/How To Details View
The knowledgebase article page provides a single view of a knowledge base article.
The article should have a thumbnail, title and content, as well as categories and created dates listed with them. Use dummy text as content, photos, and common format items such as bullet lists, quotes, etc.
5. Tools/Links
This page includes a list of applications including details and information about the various apps within the company. This page should make use and reference to the Okta solution (see attachment ~ okta-redacted.png) a drive users to Okta to launch their applications. After clicking an app it would open externally, that’s out of scope, so just place links/buttons/icons.
6. Tech News
The tech news page is a aggregate page which shows news and links to publicly available information that is useful to our employees from a technological level.
There should be a list of news with title, thumbnail, small brief and action button. Details view is not in scope since the news come from external sources such as techcrunch, the verge, and so on.
7. Create IT Request
User should be able to submit their tickets through this system. Create a page/form that supports the following fields: name, type of problem (dropdown box), and description.
If the form is small enough it can be included as part of other pages either in the rail or as a popup, otherwise it can be a separate page. We are open to suggestions.
Branding Guidelines
- Follow the provided branding book for colors, typography and styling overall.
- Use a logo placeholder.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop: 1280px min width. Height as much as needed.
- Mobile (homepage only): 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com) and/or Adroc (adroc@topcoder.com).
- Make sure to create hot zones (clickable spots) to navigate through your solution in a way that makes sense for the final user.
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Target User
The employees of the company are the users of the site. They use computers daily and have a solid understanding of technology. They are willing to help themselves solve their own problems if the information is easy to find. The site will also be used by individuals within the IT department. They may find articles and send links out to people to help them navigate the site better in the future.
Judging Criteria
- Interpretation of the user experience.
- Is the website/application easy to use/intuitive?
- Cleanliness of your graphics and design.
- Are mobile-first considerations appropriately applied to the design concept?
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.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator or Sketch. Layers should be named and well organized.
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.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.