Challenge Summary
Welcome to the Seto Social Profile Storyboard Contestt.We just completed wireframe in previous contest. Right now we need you create the storyboard design of the Seto Social Profile Application. In the end of this contest, we're looking for clean, professional, and have great User Experience of the application.
If you have any question, please raise in the forum, Let's discuss anything!.
Round 1
Your submitted design solution for client review.
1. Login
2. My Profile
3. Album
4. Manage
Notes : Any comments about your solutions, make sure you capture correct flow for every page!
Round 2
Final pages of storyboard
1. Login
2. My Profile
3. Album
4. Manage
5. Create Profile
6. Public Profile
7. Help
8. Administrator
Notes : Any comments about your solutions, make sure you capture correct flow for every page!
Contest Details
The purpose of this project is to build a social profile system that will aggregate the employee’s related information and social activities and make it available to all. This wireframe contest is our first step to build the application, so we expected the wireframe capture the best layout and show any great User Experience that will help the app functionality.
IMPORTANT
- Please reference the provided wireframe(stone_social_wireframe.zip). You need capture all page flow in your stoyboard design.
- The design should be grey scale with one green color for links and highlighting. The design should be highly customizable using CSS.
- Design theme should be clean and professional. This is for company application.
- Suggest us how the page layout should looks?
- Place logo placeholder somewhere on the top side.
- If possible create some icons/graphic to help explains the information.
- All design elements need consistent across the application
- For any form elements like radio, checkboxes, text input, text area make sure they just use standard browser style.
- There must be a clear way to navigate through the application from screen to screen and the screens themselves should flow together in a logical manner.
Submission Requirements
1. Login
You need show these following logic
-- Case 1 : Login Success
-- Case 2 : Login Success but does not exist profile
-- Case 3 : Login as Administrator
-- Case 4 : Login Fail
2. My Profile
- This is default page of the application
- Header will consist top menu and Search button
- "Name Pronuncation" will show "Play", "Pause" and "Stop" button.
- You might need create icons for "Photo Album" and "Views". Or "Following" and "Followers" also need icon?
- Click "Following" and "Followers" will modals design.
- "Launch Google Chat" should prominent.
- How you make "Interest", "Expertise" and "Skills" more better?
- Main content placed on the center side.
- How the social networks boxes looks?
- Feel free to improve the layout on your design
- Watch the typos, make sure your design represent
3. Search
- This page triggered from Search button on topside.
- It show search filter by default
- User can search by selected checkboxes.
- Any ideas to leverage the User Experience but still present the same content
- Show us how the search result table looks?
- Right now it show list view, are we need the grid view as well?
- Design how clean pagination looks.
- You only need create 1 sample of Search Result.
4. Album
- This page can accessed from top menu "My Album"
- It will show some sample albums in page.
- There will be "total photos", "like" and "comments" information there. How this should looks?
- Click one album will take user see all photos inside it.
- Create how Details Album should looks.
- There will be like and comments area in the bottom
- Select one photo will take to Photo Details
- This page also show like and comments area in the bottom
5. Manage
- Manage page using tab design.
- Manage page is place where user can modify their profile informations like stated below:
a. Update Profile
- Basic Information placed on top side
- How uploaded and not uploaded picture looks?
- Is the bottom content need better layout?
- Match form elements on "Personal Bio", "Professional Certifications", "Professional Memberships", "Educations" and "Language Spoken"
- "Expertise", "Skills" and "Interest" will have ability to add/remove data
b. Manage Photo Album
- This page looks like Album page, with ability to add and edit album
- Click "Add New" Will show upload page, user have ability to add/remove photos
- How uploading progress looks like?
- After upload done, it need show summary and options to add more photos.
- Click "Edit" will show the Albums on edit ability
- User can delete the album. How modal confirmation looks?
- Select the album can make user edit the album name and album photos
- User can also delete selected photo
c. Manage Name Pronuncation
- How this page should looks?
- What happens after user do recording?
- Need displayed some saved record there?
- How icons should looks?
d. Manage Profile Preference
- This page show table consist of their social network options to hide/show
5. Create Profile
- This how Profile page looks before details information created
- Design the warning message properly.
- Design Active/Inactive state style for progress steps
- Create Profile will divided by 4 steps:
a. Basic Informations
- This page will be like "Update Profile' but all forms need clear of any filled text.
b. Social Network
- User can checked on/off the available social network
- Before checked on, row will be disable
- Checked on the checkboxes the click "Request Permission" will show the modal
- How "Allow Access" reflected on row?
c. Photo Album
- This page will looks like Add Album page
d. Name Pronuncation
- This page will looks like Manage Name Pronuncation
6. Public Profile
- This is Public Profile looks. What makes difference with User Profile Page?
8. Administrator
- After logged in as Administrator, it show these following menu/options:
a. Help
- How the Topics and Main Content should looks?
b. Config Update Frequency
- Configure Update Frequency have ability to do inline edits.
c. Create Profile Fields
- Show us how error page looks
- And create separate preview page
d. View Log
- This page show filter on top side
- Put placeholder when show the log
- Design how datepicker should looks
e. View Audit Report
- This page show filter on top side
- Put placeholder when show the report
f. Accounts
- This page will looks like Search page
- But notice in the table, there's option to clear out/remove the profile
- how confimation modals looks?
g. Public Profile
- You need mimic public profile page.
Target Audience
Current Customer.
Potential Customer.
Judging Criteria
- User Experience
- How well you create the storyboard designs
- Cleanliness of your graphics and design.
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.
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.