Challenge Summary
Welcome to the Dinnaco – Team Information Design Challenge! In this challenge we are looking for your UI and UX ideas on how to present information about our client’s project team to their customers in a visually engaging and user friendly manner on a SharePoint site. This challenge has 2 parts – how our client can enter the information on the SharePoint site in the first instance, and then how that information is displayed to the teams involved.
Background
Our client uses SharePoint to display information about their project team to their customers. This information typically includes a diagram of the structure of the team, as well as key information about the individuals, their contact details and photographs.
This challenge has 2 parts:
- Part 1: To create an interface that allows our client’s team only (not the customer team) to enter the details used in the Team Information page, including diagrams, contact details and other content in a fast and intuitive way.
- Part 2: To create a ‘Team’ page that presents the information about the team and the individuals in a neat, clean, intuitive, and fresh way – viewable by our client and their customers. More information on both these parts is noted below.
It is expected that this will be developed as a single SharePoint add-in that will be displayed within a frame in the client’s SharePoint site pages. Because of this, the existing client SharePoint header and navigation menus are retained and any designs in this challenge should show only limited further menu options to fit with the clean and intuitive UI brief. The user will select ‘Team’ from the existing main menu to view this add-in. This new item should be added to main navigation.
Further detail on the purpose and functionality is set out below.
User Experience / Requirements
As the challenge has 2 parts – allowing the user to enter the information, and displaying the information – the add-in will need to have a different UI depending on the user - i.e. our client’s own team will need a different UI to that of their customer.
Let’s call our client’s own team ‘internal users’ and their customers ‘external users’.
In general, internal users will have the following user experience:
- Able to enter the team information either by manually entering data or by uploading the information from a pre-prepared file containing the same data fields
- Able to build a team structure diagram
- Able to work in a draft environment whilst preparing the information so that the external users cannot see the draft information until made live
- Able to make individual people’s information in the team live/not live (i.e. turning on/off the visibility to the external user)
- Able to review and quickly edit the information once entered (i.e. other internal team members can contribute to the information being included)
- Able to export the data into a well-designed report for offline use
- Whereas, in general, external users will have the following user experience:
- Able to view the information in the dashboards
- Other general user experience features expected:
- Sort and filter individual people’s details (name, location, role etc.)
- Custom level of detail being displayed (e.g. high level overview, summary, full details etc.)
Challenge Parts / Required Screens
Challenge Part 1 – interface to build the team information page
This part of the challenge is to build the interface that allows the users of the SharePoint site to create the team information data within SharePoint in a fast and intuitive way.
This process could be single screen or multi-screen, we want to see your ideas about how to create this in the most simple, clean and intuitive way.
This should only be available to the internal users of the site (i.e. our client, not their customers).
The information that is required to be included for each individual is as represented on "table.png". (Attached to challenge).
Potential user experience options could include:
- Entering information directly via an intuitive ‘wizard’ style interface
- Drag and drop upload of photographs including resizing and cropping
- Uploading information from a file (i.e. Excel)
- Drag and drop functionality to build a team structure diagram
- Ability to set items as ‘draft’ whilst creating and reviewing
- Ability to set items as ‘live’ once complete and ready to share with the external users
- We would love to see simple and smart ways of entering the data about the people in the team.
- This shouldn’t be an onerous task so think quick, clean and really intuitive.
Challenge Part 2 – viewing the team information
This part of the challenge is to build the screen(s) that allow the users of the SharePoint site to view the information on the team in a neat, clean, intuitive, and fresh way.
The information that is required to be included for each individual is noted above in the detailed description for Part 1.
Potential options for different views:
- Diagram – allowing users to see the hierarchy and structure of the team.
- List – allowing users to quickly see all the people in the team and find contact details
- Map – allowing users to interact with a global map to see teams in different locations around the world
- Detail - the ability to click into a user profile to view further details
- Contact – the ability to contact that user via email or other channels.
We would love to see some creative solutions on how to display this information using interactive diagrams, maps etc. The users who are viewing the information will be from a wide range of roles so the solution should cater for different people’s preferences (i.e. some people will simply prefer to see a list of people, whereas others might prefer a more interactive approach).
The size of a team ranges from 5 to 50 people so please think about how to wrap up and display different team sizes accordingly. Teams are generally organized in a hierarchy with a smaller number of leadership, medium number of work-stream leads and then a larger number of team members in each work-stream. There are often a number of subject matter experts who aren’t part of the day to day team but will be displayed on the team structure.
Branding guidelines
Our client has other applications in SharePoint that should inspire the designs in this challenge. Please do not just copy the designs but use the general theming and style as a guideline to this challenge. See "Current-Design" file attached.
Please also use the branding guidelines from provided "Current-Design" for color palettes and fonts etc.
Font is Open Sans. Use it from here: Link to Font
Specific screen sizes: Desktop 1280px width
Judging Criteria
- How well does your design align with the objectives and requirements of the challenge
- Cleanliness of your graphics and design
- Overall Design and User Experience relevant to the data
- New ideas and concepts
Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Please upload PNG images in a zip file with all requested contest requirements stated above. Number and Name your files appropriately to aid in the review process. This is very important.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics, images (sizes or colors) or modify overall colors.
Round 1
For round 1 we would like to see screens from both part 1 and part 2 but they don't need to be fully developed.Round 2
For round 2 we need all screens with feedback.Background
Our client uses SharePoint to display information about their project team to their customers. This information typically includes a diagram of the structure of the team, as well as key information about the individuals, their contact details and photographs.
This challenge has 2 parts:
- Part 1: To create an interface that allows our client’s team only (not the customer team) to enter the details used in the Team Information page, including diagrams, contact details and other content in a fast and intuitive way.
- Part 2: To create a ‘Team’ page that presents the information about the team and the individuals in a neat, clean, intuitive, and fresh way – viewable by our client and their customers. More information on both these parts is noted below.
It is expected that this will be developed as a single SharePoint add-in that will be displayed within a frame in the client’s SharePoint site pages. Because of this, the existing client SharePoint header and navigation menus are retained and any designs in this challenge should show only limited further menu options to fit with the clean and intuitive UI brief. The user will select ‘Team’ from the existing main menu to view this add-in. This new item should be added to main navigation.
Further detail on the purpose and functionality is set out below.
User Experience / Requirements
As the challenge has 2 parts – allowing the user to enter the information, and displaying the information – the add-in will need to have a different UI depending on the user - i.e. our client’s own team will need a different UI to that of their customer.
Let’s call our client’s own team ‘internal users’ and their customers ‘external users’.
In general, internal users will have the following user experience:
- Able to enter the team information either by manually entering data or by uploading the information from a pre-prepared file containing the same data fields
- Able to build a team structure diagram
- Able to work in a draft environment whilst preparing the information so that the external users cannot see the draft information until made live
- Able to make individual people’s information in the team live/not live (i.e. turning on/off the visibility to the external user)
- Able to review and quickly edit the information once entered (i.e. other internal team members can contribute to the information being included)
- Able to export the data into a well-designed report for offline use
- Whereas, in general, external users will have the following user experience:
- Able to view the information in the dashboards
- Other general user experience features expected:
- Sort and filter individual people’s details (name, location, role etc.)
- Custom level of detail being displayed (e.g. high level overview, summary, full details etc.)
Challenge Parts / Required Screens
Challenge Part 1 – interface to build the team information page
This part of the challenge is to build the interface that allows the users of the SharePoint site to create the team information data within SharePoint in a fast and intuitive way.
This process could be single screen or multi-screen, we want to see your ideas about how to create this in the most simple, clean and intuitive way.
This should only be available to the internal users of the site (i.e. our client, not their customers).
The information that is required to be included for each individual is as represented on "table.png". (Attached to challenge).
Potential user experience options could include:
- Entering information directly via an intuitive ‘wizard’ style interface
- Drag and drop upload of photographs including resizing and cropping
- Uploading information from a file (i.e. Excel)
- Drag and drop functionality to build a team structure diagram
- Ability to set items as ‘draft’ whilst creating and reviewing
- Ability to set items as ‘live’ once complete and ready to share with the external users
- We would love to see simple and smart ways of entering the data about the people in the team.
- This shouldn’t be an onerous task so think quick, clean and really intuitive.
Challenge Part 2 – viewing the team information
This part of the challenge is to build the screen(s) that allow the users of the SharePoint site to view the information on the team in a neat, clean, intuitive, and fresh way.
The information that is required to be included for each individual is noted above in the detailed description for Part 1.
Potential options for different views:
- Diagram – allowing users to see the hierarchy and structure of the team.
- List – allowing users to quickly see all the people in the team and find contact details
- Map – allowing users to interact with a global map to see teams in different locations around the world
- Detail - the ability to click into a user profile to view further details
- Contact – the ability to contact that user via email or other channels.
We would love to see some creative solutions on how to display this information using interactive diagrams, maps etc. The users who are viewing the information will be from a wide range of roles so the solution should cater for different people’s preferences (i.e. some people will simply prefer to see a list of people, whereas others might prefer a more interactive approach).
The size of a team ranges from 5 to 50 people so please think about how to wrap up and display different team sizes accordingly. Teams are generally organized in a hierarchy with a smaller number of leadership, medium number of work-stream leads and then a larger number of team members in each work-stream. There are often a number of subject matter experts who aren’t part of the day to day team but will be displayed on the team structure.
Branding guidelines
Our client has other applications in SharePoint that should inspire the designs in this challenge. Please do not just copy the designs but use the general theming and style as a guideline to this challenge. See "Current-Design" file attached.
Please also use the branding guidelines from provided "Current-Design" for color palettes and fonts etc.
Font is Open Sans. Use it from here: Link to Font
Specific screen sizes: Desktop 1280px width
Judging Criteria
- How well does your design align with the objectives and requirements of the challenge
- Cleanliness of your graphics and design
- Overall Design and User Experience relevant to the data
- New ideas and concepts
Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Please upload PNG images in a zip file with all requested contest requirements stated above. Number and Name your files appropriately to aid in the review process. This is very important.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics, images (sizes or colors) or modify overall colors.
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.