Challenge Summary
Welcome to the Topcoder Security Groups System Storyboard Contest. The goal of this contest in to design storyboard of our completed Topcoder Security Groups wireframe. Please read the contest specification carefully and watch the forums for any questions or feedback concerning this contest. 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.
Round 1
Your submitted initial design for a review.
1). Customer - View Invitation Status(s)
2). Administrator - View User Groups(s)
3). Administrator - Send Group Invitation(s)
4). Administrator - Create New Administrator(s)
5). Administrator - View Pending Approval(s)
6). Administrator - Fetch Registration URL(s)
Notes = Any comments about your design for the Client
Round 2
All Final Screens of Topcoder Security Groups Wireframe
1). Customer - View Invitation Status(s)
2). Administrator - View User Groups(s)
3). Administrator - Create New Group(s)
4). Administrator - Update User Group(s)
5). Administrator - View User Group Details(s)
6). Administrator - Send Group Invitation(s)
7). Administrator - Create New Administrator(s)
8). Administrator - View Pending Approval(s)
9). Administrator - Access Auditing Information(s)
10). Administrator - Fetch Registration URL(s)
11). Administrator - View Customers(s)
12). Administrator - Update Customer Account(s)
13). Administrator - View Customer Account Details(s)
14). Administrator - Create Customer Account(s)
Notes = Any comments about your design for the Client
IMPORTANT
- Keep simple and clean design! And have great user experience.
- Group/package each graphics in its own folder layer with appropriate names/titles.
- Keep things consistent. This means all graphics styles should work together.
- All of the graphic should have a similar feel and general aesthetic appearance.
- Make sure your design use Windows standard fonts (Arial, Tahoma, etc)
- All text must be editable and non-graphical.
- You must provide us how every screens looks in 1100px width and more wider screens.
- Always refer Cockpit GUI Kit when you create/update UI elements.
- Click around at provided prototype to make sure your design mimic the latest design and always follow
- All pages in the submission must using single full column layout.
- Please create separate screens to explains the page flow for future developer!
DESIGN REQUIREMENT
Following pages in the wireframe need to convert into storyboard design, you might need create some more pages to explains features in pages.
Please use Dashboard.psd as base of design, remember all pages using full column layout.
1). Customer - View Invitation Status
Page Reference: Customer_User_-_4.4.8._View_Invitation_Status.html
- you need update the top menu into : "Dashboard", "Project", "Copilots" and "Group Invitation Statuses"
- The top part is filter area, you can re-use style like showing in Cockpit-Report-Graphic-Source folder
- Remember, the datepicker must using red calendar icon. - Checkboxes must using standard browser style.
- Please recreate the table using standard Cockpit table design. Please add pagination in table.
- Feel free to improve the layout in page, we looking for best placement.
- Make sure they all have consistent spacing.
- We need correct pagination in this page.
- Watch out the font typography, please show us the best practices.
2). Administrator - View User Groups
Page Reference: Administartor_User_-_4.4.12_View_User_Groups.html
- The top is filter area, you can re-use style like showing in Cockpit-Report-Graphic-Source folder
- Page Reference: Customer_User_-_4.4.8._View_Invitation_Status.html you need update the top menu into : "Dashboard", "Project", "Copilots" and "Groups"
- Checkboxes and radio button must using standard browser style.
- Feel free to improve the layout in page, we are looking for best placement.
- Make sure they all have consistent spacing.
- Show us the correct buttons style.
- Update the Delete Group using our updated Modals style like in Project-Modal-Window-Preloader folder
- Group Name is text link, click this will take to Administrator - View User Group Details page
3). Administrator - Create New Group
Page Reference: 4.4.9._Create_New_Group.html
- The top part of this page is form to create new group.
- Select/Dropdown, checkboxes and radio button must using standard browser style.
- Click search button under member handle column will show modals to search user and the search result modals.
- Click Add More members will add another 5 rows in the bottom.
- Design the information "Enter the handle if the member is already a registered member. Enter the email address of the user if the user is a new user" more properly.
- For the remove button, we like button style in Cockpit-Links-Button folder. We need you create new one for delete button use "Edit" button as base design. You might need create new icon reflecting delete functions. Click this will need show confirm modals.
- Checkboxes Access Level column will disable at first load.
- Click "User Specific" radio will enable checkboxes in Access Level column
- Click at "Create Group" will show confirmation modals.
4). Administrator - Update User Group
Page Reference: 4.4.10._Update_user_group.html
- This page basically have same layout like Administrator
- Create New Group, only already filled with some data's
5). Administrator - View User Group Details
Page Reference: 4.4.12._View_User_Groups_-_Details.html
- Update, Delete and Back to Groups button located in top side
- Group Name table is not editable. Please show us consistent layout and style.
- Under Group Member table, placed Search button to show modals to search member.
6). Administrator - Send Group Invitation
Page Reference: 4.4.13._Send_Group_Invitation.html
- We need better layout design on this page. Help us re-building the layout.
- Feel free to create some graphic to explains this send group page.
- There's box contains checkbox, this need improved.
- Search button to show modals to search member.
- Checkboxes and radio button must using standard browser style.
- Click Add More members will add another 5 rows in the bottom.
- Click Send Invite will show confirmation modal
7). Administrator - Create New Administrator
Page Reference: 4.4.14_Create_new_customer_administrator_user.html
- We need better layout design on this page.
- Select box/dropdown must using standard browser style.
- Click search button under member handle column will show modals to search user and the search result modals.
- Click create button will show information modals.
- Please create separate screens to explains the page flow for future developer
8). Administrator - View Pending Approval
Page Reference: 4.4.15_View_pending_approval_users.html
- This page have similar layout like showing in Customer - View Invitation Status
- Remember pagination structure and layout must consistent across pages
- Click search button under member handle column will show modals to search user and the search result modals.
- Notice there's Approve and Reject button placed in the bottom side.
- Click approve and Reject button will show modals.
9). Administrator - Access Auditing Information
Page Reference: 4.4.18._Access_auditing_information.html
- This page have similar layout like showing in Customer
- View Invitation Status - Select box/dropdown must using standard browser style.
- Match the content with wireframe
- Give us proper table arrangement of top filter table
10). Administrator - Fetch Registration URL
Page Reference: 4.4.20_Fetch_registration_URL.html
- After select customer name and select group and click "Fetch Registration URL" button will create new link in the bottom.
- Show us the usable functions and design layout.
11). Administrator - View Customers
Page Reference: Administartor_User_-__View_Customers.html
- Table search result in the bottom part must have 100% full width
- Checkboxes, radio must using standard browser style.
- Customer name is text link. - Notice there's radio button placed in the first column
- "Create New Customer" will show new page to create new customer
- "View Customer" and "Update Customer" will view/edit selected radio in row.
- Click "Remove Customer" will show confirmation modal
12). Administrator - Update Customer Account
Page Reference: 4.4.20._Update_customer_account.html
- Please improve layout of this page.
- Select/Dropdown must using standard browser style.
- Click "Update Customer" will show information modal
13). Administrator - View Customer Account Details
Page Reference: 4.4.22._View_customer_account_-_Details.html
- This page have similar layout like Administrator
- Update Customer Account
- Notice the button in top side "Update Customer", "Delete Customer" and "Back to Customer" buttons
- Click "Remove Customer" will show confirmation modal
14). Administrator - Create Customer Account Page Reference: 4.4.19._Create_customer_account.html
- This page to create new customer - Select/Dropdown must using standard browser style.
- Cancel button and Create customer placed in the bottom
- Click Create customer will show new modals
Target Audience
- Topcoder Customer Administrator
- Topcoder Customer Employees
- TopCoder PM and Executives.
Judging Criteria
- How well you create "Topcoder Security Groups System" pages and keep things consistent with the current Cockpit Application.
- Cleanliness of your graphics and design
- User Experience of "Topcoder Security Groups System"
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1100x1100px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
All Requested Contest Submission Requirements stated above.
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 (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.