Challenge Summary
Welcome to the Seto Social Storyboard Updates Challenge.
On This challenge we need you make some updates to some provided screens and then create the missing screens to help complete the new application experience. We have provided existing storyboard to help complete and build the new screen. We also attached existing prototype to help you experience how application works.
Challenge Focus:
- Update the existing screens
- Create and design the user experience and interactions for some new screens
Round 1
Initial Design of Seto Social Seto Social Storyboard Updates contains these screens
1. Layout Updates
2. Search Result
2.1 Search Result List View
2.1 Search Result Grid View
3. Corporate Address Book
3.1 Corporate Address Book Default
3.2 Corporate Address Book Edit View
Notes : Any comments about your solutions?
Round 2
Final Design of Seto Social Seto Social Storyboard Updates contains these screens:
1. Layout Updates
2. Search Result
2.1 Search Result type 1
2.2 Search Result type 2
2.1 Search Result List View
2.1 Search Result Grid View
3. Corporate Address Book
3.1 Corporate Address Book Default
3.2 Corporate Address Book Edit View
3.3 Corporate Address Book Modal Windows
Notes : Any comments about your solutions, make sure you capture correct flow for every page!
File Attachments
SPP_UI_TopCoder.pdf : Wireframe Sketch of expected solution
old-prototype.zip : reference of existing prototype (HTML/CSS/JS)
old-sb.zip : existing storyboard design (Use this as base updates)
Challenge Details
Seto Social application is a social profile system that will aggregate the employee’s related information and social activities and make it available to all users.
On this challenge we’re looking your help to update existing storyboard and create new screen as explained below. As possible re-use existing UI elements when update this storyboard submission.
Design Requirements
These requirement below just simple guidelines, Refer attached SPP_UI_TopCoder.pdf for details expected solutions. Pay attention for every single required updates.
1. Layout Updates
wireframe: SPP_UI_TopCoder.pdf > page 1
1.1 Header
- Update header and footer for every pages on storyboard
- Header and footer appear on every pages
- Keep placeholder in place of company logo so we can add it easily later
- Username and Gear icon placed on top right
- Use 16px x 18px for Gear icon size
- Gear icon drop down menu containing these items:
-- “My Account”
-- “Sign Out”
-- “Help”
-- “Feedback”
- How Gear Icon flyout designed?
- Corporate Address Book displayed as page title
- Search input area placed below “Username” & “Gear” icon.
1.2 Search Input
The new search input area contains of:
- Left down arrow allows user to select a category to search by.
- Common search categories displayed on list, they are:
-- Name
-- Nickname
-- Global ID
-- Email
-- Cost Center Organization/Department
- For common search items, need add checkboxes on the left side
- Selected search categories will appear on input field. The content in search field changes to checked filter criteria
- Show listing of recent search. How this click flow works? explain in some separated screens.
1.3 Advance Search
- Advance Search option placed below the input field
- Click on advanced search and the arrow toggles downward and a layer appears above the content.
- Open layer pushes the content on the page down (accordion style)
- Includes less frequently used selection criteria.
- Close advanced search by clicking advanced search again
1.4 Footer
- Footer consist of a link back to my.seto.com in the left side
- On the right side of footer need displayed copyright and legal link, and Terms link
2. Search Result
old screenshots: 6.png & 7-0.png
You need create some variations of Search Result, here they are:
2.1 Search Result type 1
wireframe: SPP_UI_TopCoder.pdf > page 3
On this type, search result consist of:
- Display “Search” term information and pagination on top area
- Notice pagination also placed on the bottom table
- Pagination design requirement:
-- Pagination shows first 3 pages, indicates pages in between with ... then jumps to final page. -- Arrows page forward and back.
-- When moves beyond page 1,2.3 it shows page 4,5,6. Page back from page 4 shows page 1,2,3 again.
-- Current page show as bold text
- Table header allow user to sort the column. where’s the proper place to put “Click to sort”?
- Match table header content.
- Table columns divided by:
-- Photo and Business Card Info
-- First Name
-- Last Name
-- Location
-- Organization
2.2 Search Result type 2
wireframe: SPP_UI_TopCoder.pdf > page 4
This is alternate version of search result
- Display “Search” term information on top area
- There’s a bar contains of “View” and “Sort by” option below the “Search” term information
- View dropdown need show “20”, “40”, “60” and “100” option
- Sort By dropdown need show “First Name”, “Location”, “Email” and “Organization”
- Notice there’s no table header on this type
- Columns divided by:
-- Photo
-- Name
-- Social Profile Informations divided on 2 columns
- Pagination placed below the table. Read pagination requirement explained above
2.1 Search Result List View
wireframe: SPP_UI_TopCoder.pdf > page 8
This is Search Result (List View type)
- Display “Search” term information on top area
- List and Grid View toggle on left side
- Pagination is different for this type, only need show current page information, with left and right arrow to navigate pages.
- Table header allow user to sort the column. where’s the proper place to put “Click to sort”?
- Match table header content.
- Table columns divided by:
-- First Name
-- Last Name
-- GID (not have sort function)
-- Location
-- Phone (not have sort function)
-- Email
2.1 Search Result Grid View
wireframe: SPP_UI_TopCoder.pdf > page 9
This is Search Result (Grid View type)
- Display “Search” term information on top area
- List and Grid View toggle on left side
- Pagination on the right side
- Sort By option show above table grid view
- Match how layout look use 5 x 5 format
- Grid view content show Photo and User First and Last Name
3. Corporate Address Book
On this task, you need create some screens explain the Corporate Address Book flow
3.1 Corporate Address Book Default
wireframe: SPP_UI_TopCoder.pdf > page 5
old screenshot: old-sb/images/1-1.png & 1-2.png
This is default look of Corporate Address Book page
Address Book page content divided by 2 column:
Left column
- Personal Information
- Contact Information
- Corporate Information
- Profile
Right Column
- Hierarchy (This is “Organization” section in old page)
- Linked In
- Chatter
Design Task for this page:
- Page designed with timeline layout
- You need create timeline design with icons for each section. Notice there's a border with some icons tied to each section.
- Use 96px x 96px for Profile image size.
- “Hear name Spoken Aloud” button will open the small player. How this designed?
- Small player will contains of “Fast Backward”, “Play” and “Stop” button
- Match content for each fields
- Compare and re-use element from old profile page look
- You can re-use sample content from old screenshot: old-sb/images/1-1.png & 1-2.png
- IMPORTANT: You need create different screen use this completed design that will allow user have the ability to hide/show each section/area.
3.2 Corporate Address Book Edit View
wireframe: SPP_UI_TopCoder.pdf > page 6
old screenshot: old-sb/images/4.png
This is Corporate address Book page look when user logged in and have ability to edit fields
- Edit pencils and title change display only users own profile
- Edit pencils should all be in line on the right and there should be a clear way to tell which box it is tied to.
- Employee Full Name input should allow for maximum 60 characters
- Organization Name input should allow for maximum 50 character
- For Employee Full Name name, we're thinking to display, about 45 characters by default then when user hover on it, will reveal full name. How your design show that?
- We prefer inline editing of fields and ability to save (save button next to field)
- Play and record spoken name happens in a tiny player that pops up.
- Recording auto starts when player opens
- Small player will contains of “Fast Backward”, “Play”, “Stop” and “Record” button
- Our Intention is to repurpose edit modules from original manage page (refer to old-sb/images/4.png)
- Create separate screen showing edit fields for ALL section
3.3 Corporate Address Book Modal Windows
wireframe: SPP_UI_TopCoder.pdf > page 7
User will see modal windows when edit in Profile section
- This modal only show up for Profile section, how you design them?
- Modal windows will contains text area for “Mission and Key Responsibilities”, “Professional Interests”, “My Skills” and “My Portfolio”
Target Audience
- Seto Social Application Internal Users
Judging Criteria
- How well you create screen flow that demonstrate new look and features.
- User Experience of the application.
- Consistency with existing design brand
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 image files based on contest submission requirements stated above.
Source Files
All source files of all graphics created in either Adobe Photoshop or Illustrator and saved as editable files.
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.