Challenge Summary
Welcome to the Topcoder Web Arena Plugins Management Storyboard Design Challenge.
For some previous months we keep improving User Interface and User Experience in topcoder web arena application.
On this challenge, we need Studio Designers help to suggest ideas/solutions how Plugin Management page should designed for topcoder web arena.
Round 1
Your initial design solution for client review:
Topcoder Web Arena Plugins Management Page
Make sure all pages have correct flow! Use correct file numbering.
Round 2
Final design + updates from checkpoint feedback:
Topcoder Web Arena Plugins Management Page
Make sure all pages have correct flow! Use correct file numbering.
The next generation of the Arena, also known as web arena, is being built as a pure web application (HTML5, Javascript - AngularJS, and CSS3).
For this challenge we need your ideas/solutions how Plugin Management page should designed based on guidelines below.
Notes:
- Get familiar with completed new look for topcoder web arena. (Black-Theme.zip)
- Your design result for this challenge must look as one design sets of topcoder web arena
- Use Setting-Page.zip as base of submission.
- Create separate screens clearly to explain us the flow of your solutions.
- All new design should consistent with existing topcoder web arena design application theme brand
Plugins Management Design Requirements
What is Plugins?
- Plugins are add-ons that members can add to the web arena, they add custom functionality built by users to the web arena by allowing members to inject javascript to their arena which directly manipulates the dom of the page and respond to events.
- We need to design the user experience for plugin creation and management. We want members to be able to share plugins, so a member can create a plugin that is private or public. A private plugin can only be seen and used by the author. For public plugins, all information including code, can be seen by any members, but can only be edited by the author. Any member can add a public plugin to their profile.
- Adding a plugin to a member profile will cause it to be loaded in a <script> tag when the arena is loaded.
- You need create new tab on Setting page as base of this challenge submission.
Plugin management screen
This is the landing page for all things related to plugins. This should be a dashboard where member can:
- Create new plugins
- View list of plugins associated with the member's profile
- Open any plugin in a detail view to see details of the plugin
- Remove plugins from the member's profile
- Search for plugins including any plugin created by the member and public plugins created by other members
- Add plugins to the member profile
Plugin creation and editing
To create a plugin, the user need to provide the following information:
- Plugin name: Single line text
- Plugin visibility: Single select of "Private" or "Public". Private is the default
- Description: Plain text area for member to describe the plugin functionality
- Code: Javascript code editor
- Status: Toggle On / Off. Clicking this adds / removes the plugin from the profile.
Plugin search
Display a list of plugins with the following columns:
- Plugin name: name of the plugin provided by the author. The name should be clickable, and should take to the plugin detail view described below
- Plugin author: handle of the author of the plugin. Should include rating circle, should be colored based on member rating, and clicking on it should display the member information. - Similar to how it looks in the Active Members widget, and pretty much everywhere else on the site.
- Plugin description: first characters of the description, as many as can be fitted without breaking a line, followed by ...
- Status: Toggle On / Off. Clicking this adds / removes the plugin from the profile. All columns above should be sortable
- Search result should use standard pagination
- Member should be able to search in the plugins list by: name and author
- Member should be able to filter the plugins list by author and status
Plugin detail
The plugin detail view is where users go to learn more about the plugin, it should display:
- Plugin name: name of the plugin provided by the author
- Plugin author: handle of the author of the plugin. Should include rating circle, should be colored based on member rating, and clicking on it should display the member information. Similar to how it looks in the Active Members widget, and pretty much everywhere else on the site.
- Plugin description: text area with the full description of the plugin
- Status: Toggle On / Off. Clicking this adds / removes the plugin from the profile.
- Code: Javascript code with code highlighting. If the member is the author of the plugin, they should see an edit button that clicking will take them to the "Plugin creation and editing" screen with the fields populated to the selected plugin.
Plugin toolbar
- Plugins can tell the arena to render any number of buttons in the UI. These should not be extra buttons in the header bar, these should be smaller buttons in a new toolbar, perhaps floating on the right side of the arena, or below the header. We can limit the number of buttons if necessary, or we can have scrolling on this plugin toolbar.
Safe mode
- Plugins can potentially interfere with the basic functionality of the arena, rendering it unusable. We need to have a way for member to recover their profile in case this happens, for that we need a checkbox or a button in the login screen where members can elect to open the arena in "safe mode", i.e. no plugins loaded.
Plugin Management Design References
Wordpress Plugin Management Page
Firefox Add-On page
Chrome Extensions page
Target User
- topcoder Members
Judging Criteria
- How well you think and plan out Plugin Management flow
- Cleanliness of your graphics and design
- User Experiences is our priority! Your solutions must ease to use!
- Is your solution possible to build? Do some research related Web latest features!
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 and saved as layered PSD file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics.
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.