Challenge Summary
Welcome to the “RWF - Responsive Widget Framework Design Challenge”. In this challenge, we are looking for the Topcoder design community help to create a responsive widget framework storyboard that allows the user to add/edit/delete, arrange and configure the widget appearance based on our provided requirements.
At the end of this challenge, we are looking for a modern, clean and a responsive design that captures the possible interactions a user might have with controlling and managing the widgets.
Round 1
Submit your design for client review and checkpoint feedback
- Dashboard interactions
- Widget Setting interactions
Round 2
Final Designs
All requirements as stated in challenge details with checkpoint feedback applied
Challenge Details
We are looking to create a mobile friendly (responsive) website that uses a widget framework. In this challenge we are asking you to focus on a couple of screens but to also try and capture what the possible user interactions might be. The user has a dashboard of widgets and the ability to move them around and mange different preferences for each widget. Think of modern UX design and how cool this dashboard could look and work.
General Requirements / Interaction
- The screens needs to be responsive on Desktop and Mobile. Mobile widgets and Charts will be static - so the controls will only be on the Desktop view.
- Widgets should be auto-positioned on the dashboard to fit the grid in the most aesthetic layout (isotope style)
- Users should be able to re-arrange the widgets on the dashboard, show us the design interaction for this behavior.
- Users can change the size of the widgets (based on the grid)
- Users can drag and drop widgets (Desktop view)
- User can change the type of chart that is shown on the widget
- How does the user change the preferences of the widgets? (Is is above the widgets, modal window?, pop-up? - what is a good modern interaction for this?)
- The grid width is upon to your judgement. Make sure the 1x1 grid width can be applied to mobile device.
Dashboard Screen
- The dashboard screen is a full page where the user see's their widgets
- Review screenshot in dashboard-reference folder for an example of the dashboard appearance, treat the screenshot as your references only, do not copy the layout styles!
- Each widget in the dashboard can change in size, it can have ratio 1x1, 1x2, 2x1 or 2x2 based on pre-defined grid, so show us variation of widget appearance in the dashboard.
- The user can change the Widget size
- The dashboard would have the ability to add/edit/delete and select particular widgets to be shown in the dashboard. (The idea of Dashboard preferences and Widget preferences)
- Widget content elements should be different from each other, content and chart examples for the widget can be found on this link http://www.fusioncharts.com/explore/charts/. There are many chart designs that can be shown in the dashboard, however, we will need only the FusionCharts XT (contains 11 basic chart design, please create the chart design).
- The dashboard will needs to be responsive, reducing widget size down to 1x1 on smartphones in a vertical layout.
- Mobile layout will be read only.
- Widgets will need to be dynamic - there may be roll-over dialogs to show more details (Show how this might look)
- Your dashboard design should have at least 12 different widget creations.
Note: - IF you use a chart from FusionCharts XT you must give them credit in your chart image (label it: http://www.fusioncharts.com/) small in the bottom corner
Widget Setting Screen
- The widget configuration will be based upon widget type (I.e. From a pre-defined list of widgets).
- As part of the widget configuration, selecting the widget type will determine which other settings are applicable for the widget.
- Create an intuitive transition design between the display of the widget and the configuration of the widget.
- There should be some ability to preview the widget during configuration would be beneficial.
Sample Widget Settings:
Title: [input box] (insert widget title)
Chart Type: [select box] ex: Pie Chart
Render as: [select box] ex: Percentage
Item Number: [input box]
Buttons: Refresh, Return (what makes sense?)
* This is an example - think about the fields you might need - each widget might have different controls.
Branding Guidelines
- Font: Open to designer
- Colors: Open to designer = professional and modern - explore some nice, sharp color palettes
- Desktop : 1024px width and height as required.
- Mobile : 320px width and height as required.
Target Audience
Our target audience is a business analysts from professional company that cames from various fields like retail, field mobility, transportation and logistic that care about supporting their mobility . This application will help them see and measure how their various applications, systems or technology is performing.
Judging Criteria
- I would like you to focus on creating a modern user experience and interactions. We have all seeing "widgets" at this point - how can this be clean, sharp and modern in a responsive layout?
- Cleanliness of your graphics and design (very important!)
- User Experience!
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 JPG/PNG images in a zip file with all requested contest requirements stated above.
Source File
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.