Challenge Summary
Welcome to "FAST!! RoundUp Connect - One Page Dashboard Homepage Design Challenge". In this challenge, we are looking for you to create the best possible UI/UX for our connect dashboard homepage using Google Material Design guidelines. Please use the provided wireframe and moodboard which contains our basic branding requirements. At the end of this challenge, We are looking for the [topcoder] design Community to help us planning the look and feel of our application.
IMPORTANT: We've got FAST Checkpoint/1st Round phase for this challenge, so jump in now and let's start designing!!
Background Overview
Project CONNECT is a global initiative tasked with creating a new corporate intranet for all of RoundUp. This new site would combine what you find today in existing company sites – AND provide a whole lot more to help you get your work done. We are just in the beginning stages of design but would like to get concepts for a potential homepage.
Using Google Material Design patterns, we would like you to explore a design concept for our home page using the provided wireframe and accompanying moodboard.
Design Notes
- This is going to be a web application.
- Please reference and use best practices for Google Material Design in your concepts.
- Please follow the wireframes and use a 3 column layout.
- Desktop Size: Minimum 1280px width and height as required.
- Please consider responsiveness while designing your solution.
- Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp!
- Feel free to suggest any tools/functions that can bring good User Experience for this tool.
Screen Requirements
Your dashboard needs to include the following features:
1) Header and Footer
- The dashboard should have header and footer.
- Use header and footer to give user a quick way to access any features in the dashboard or ability to navigate to other pages
- Put the title of application in the header.
- Show company branding like logo or some alert notification in the header.
- Access to Settings, or change profile account, or Report a concern.
2) Search bar
- The dashboard should have ability to search any data in the application.
- User will be able to get some help to find any information in the apps.
- Do we need Auto complete when user start searching something?
3) Profile Status
- Show the user profile summary information in this area
- Basic profile information such as profile picture, name, work area, title, and their status in company
- Their profile should be editable
4) Main Navigation
- There should be an area where user can navigate other features/main pages from the dashboard
- This area needs to be easy to find and accessible by the user.
- Anticipate your design to be able handle navigation with many children links.
5) Launch Pad
- Show us some log history summary of internal application that user access for period of time
- This is a user's "Quick Links" in which the user can edit and set the Tools and Pins that they use most frequently to appear on their dashboard.
- List of the application, show the following informations: Time stamp, application name, apps icon, etc
6) News Feed
- This area should be mandatory and can be accessible easily by the user.
- The news feed will show all information about company situation, it will retrieve new data from database for period of time, so the news content will always up to date.
- User will be able to set the what kind of news that they want to see and can save the news for later watching..this is the view in "My News"
- There will be many type of news presented here, from articles, video, audio streaming, until gallery of pictures.
- This is a key area we want to see how you handle in your concepts
- Main Feature will be a carousel item...and will display the sub features in order.
7) Notification
- This area will be useful for user to know the latest situation of any activity that needs their follow up.
- There will be a filter in this area so user can easily find any notification that they want to see.
- New notification should be highlighted/bold so user knows that they will aware of new notification
- Provide some icons where applicable for the notification (check wf)
- Alerts should be called out differently than Notifications as they require immediate action.
8) Pins
- This area will be used by user to put any interesting apps,news,information where they can find it easily. Similar to "bookmarks" in your browser.
- A user is able to create and edit the Pins that appear in this menu.
9) Widgets
- The dashboard will have widgets which will contain dynamic content that the user can select and customize to appear on their home page.
- From Twitter widget connect, team widget, company stock quote widget, 3rd part news media widget to expense and time reports will be available here
- Not all widget will be shown by default, needs some way where user can manage which widget will be active and which will be hidden. (Don't need to show the Widget manager for this challenge)
10) Main Navigation (Hamburger Nav)
- Please reference the provided navigation states in the provided wireframe
- We need to see this main navigation executed in Google Material Design patterns.
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
- User Moodboard concept as a starting point for your design and use Google Material Design Patterns in your concept explorations.
Branding Guidelines
- Moodboard
- https://material.google.com/
- Material Design Inspiration Board
Documentation
- Branding Guidelines/Moodboard
- Wireframes
Target Audience
- Internal employees
Judging Criteria
We will be judging on:
- How well you execute the design according to the wireframe and Google Material Design.
- How well you plan the user experience and capture your ideas visually.
- How well you implement the challenge requirements.
- Completeness and accuracy of the designs.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
Submission and 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 and saved as 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 and instructions.
IMPORTANT: We've got FAST Checkpoint/1st Round phase for this challenge, so jump in now and let's start designing!!
Round 1
Initial Dashboard Homepage for client ReviewRound 2
All requirements like stated in challenge details with client feedback appliedBackground Overview
Project CONNECT is a global initiative tasked with creating a new corporate intranet for all of RoundUp. This new site would combine what you find today in existing company sites – AND provide a whole lot more to help you get your work done. We are just in the beginning stages of design but would like to get concepts for a potential homepage.
Using Google Material Design patterns, we would like you to explore a design concept for our home page using the provided wireframe and accompanying moodboard.
Design Notes
- This is going to be a web application.
- Please reference and use best practices for Google Material Design in your concepts.
- Please follow the wireframes and use a 3 column layout.
- Desktop Size: Minimum 1280px width and height as required.
- Please consider responsiveness while designing your solution.
- Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp!
- Feel free to suggest any tools/functions that can bring good User Experience for this tool.
Screen Requirements
Your dashboard needs to include the following features:
1) Header and Footer
- The dashboard should have header and footer.
- Use header and footer to give user a quick way to access any features in the dashboard or ability to navigate to other pages
- Put the title of application in the header.
- Show company branding like logo or some alert notification in the header.
- Access to Settings, or change profile account, or Report a concern.
2) Search bar
- The dashboard should have ability to search any data in the application.
- User will be able to get some help to find any information in the apps.
- Do we need Auto complete when user start searching something?
3) Profile Status
- Show the user profile summary information in this area
- Basic profile information such as profile picture, name, work area, title, and their status in company
- Their profile should be editable
4) Main Navigation
- There should be an area where user can navigate other features/main pages from the dashboard
- This area needs to be easy to find and accessible by the user.
- Anticipate your design to be able handle navigation with many children links.
5) Launch Pad
- Show us some log history summary of internal application that user access for period of time
- This is a user's "Quick Links" in which the user can edit and set the Tools and Pins that they use most frequently to appear on their dashboard.
- List of the application, show the following informations: Time stamp, application name, apps icon, etc
6) News Feed
- This area should be mandatory and can be accessible easily by the user.
- The news feed will show all information about company situation, it will retrieve new data from database for period of time, so the news content will always up to date.
- User will be able to set the what kind of news that they want to see and can save the news for later watching..this is the view in "My News"
- There will be many type of news presented here, from articles, video, audio streaming, until gallery of pictures.
- This is a key area we want to see how you handle in your concepts
- Main Feature will be a carousel item...and will display the sub features in order.
7) Notification
- This area will be useful for user to know the latest situation of any activity that needs their follow up.
- There will be a filter in this area so user can easily find any notification that they want to see.
- New notification should be highlighted/bold so user knows that they will aware of new notification
- Provide some icons where applicable for the notification (check wf)
- Alerts should be called out differently than Notifications as they require immediate action.
8) Pins
- This area will be used by user to put any interesting apps,news,information where they can find it easily. Similar to "bookmarks" in your browser.
- A user is able to create and edit the Pins that appear in this menu.
9) Widgets
- The dashboard will have widgets which will contain dynamic content that the user can select and customize to appear on their home page.
- From Twitter widget connect, team widget, company stock quote widget, 3rd part news media widget to expense and time reports will be available here
- Not all widget will be shown by default, needs some way where user can manage which widget will be active and which will be hidden. (Don't need to show the Widget manager for this challenge)
10) Main Navigation (Hamburger Nav)
- Please reference the provided navigation states in the provided wireframe
- We need to see this main navigation executed in Google Material Design patterns.
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
- User Moodboard concept as a starting point for your design and use Google Material Design Patterns in your concept explorations.
Branding Guidelines
- Moodboard
- https://material.google.com/
- Material Design Inspiration Board
Documentation
- Branding Guidelines/Moodboard
- Wireframes
Target Audience
- Internal employees
Judging Criteria
We will be judging on:
- How well you execute the design according to the wireframe and Google Material Design.
- How well you plan the user experience and capture your ideas visually.
- How well you implement the challenge requirements.
- Completeness and accuracy of the designs.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
Submission and 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 and saved as 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 and instructions.
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.