Challenge Summary
Welcome to the Seto Social Profile Wireframe Contest. The objective of this contest is to create the HTML wireframes for new Seto - Social Profile based on provided conceptualization.
In the end of this contest we are looking for a process flow and layout design of the pages mentioned below that are part of the whole application. This application must be user friendly, intuitive, and easy to use.
Round 1
Your submitted solution for client review.
A. Employee Functionality
1. Login
2. Profile Page
3. Create Profile
4. Update Profile
5. Manage Photo Album
6. Manage Name Pronouncation
7. Update Profile Preferences
8. Search Profiles
9. View Profile Search Result
10. Launch Google Chat
11. Follow employee
12. Manage comment on photo
13. Get Help
14. Unfollow Employee
Any comments about your wireframe, make sure all pages have correct flow!
Round 2
Final pages of wireframe contains these functionality
A. Employee Functionality
1. Login
2. Profile Page
3. Create Profile
4. Update Profile
5. Manage Photo Album
6. Manage Name Pronouncation
7. Update Profile Preferences
8. Search Profiles
9. View Profile Search Result
10. Launch Google Chat
11. Follow employee
12. Manage comment on photo
13. Get Help
14. Unfollow Employee
B. Administrator Functionality
1. Configure Update Frequency
2. Create Profile Fields
3. View Log
4. View Audit Report
Any comments about your wireframe, make sure all pages have correct flow!
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.
Seto Social Profile Application Wireframe Requirements:
General
- Your wirefame solutions must useful. So, it can save a web designer so much time and energy!. All pages/elements must linked each others. Show us correct flow.
- The application will build as website application.
- Your wireframe must represents all pages and flows from Conceptualization_Document.docx. You should use that as a guide, but if there is better way to display information, feel free to reflected on your storyboard design.
A. Employee Functionality
1. Login
- Please create error validation version of login page
- Create separate page of "Forgot password"
- How the layout looks when user logged out.
2. Profile Page
Reference: Conceptualization_Document.docx. (page 22)
- This is default page after user logged in, this is homepage for employee profile
- It should contains number of times profiles has been visited
- It will show some informations like stated in concept document. Need your help figure out the best placement to display them.
3. Create Profile
- If a profile does not exist then employee has a choice of creating profile.
- Show us how the form/ way to fill the data presented
- Some fields will be entered by the user (Check Conceptualization_Document.docx. (page 23) for fields need inputted)
4. Update Profile
- User can update his profile data
- All fields described in “Create Profile” use case can be updated by the user.
- The application will support inline editing of all fields.
- The application will support autosuggest feature while editing or adding new text.
- The changes are saved to database.
- Profile for employees who are no longer in the LDAP, but were previously in LDAP, should indicate on the profile that the person is no longer in LDAP. However data from the profile should not be deleted.
5. Manage Photo Album
- User can also create a photo album
- User can upload photos to the above created photo album
- User can remove photos from photo album.
- User can view the list of photo albums
6. Manage Name Pronouncation
- User can record their name pronunciation
- User can play and review their recorded name pronunciation
- User can remove their recorded name pronunciation
- The public profile will contain link to name pronunciation widget. The user reviewing the profile can play the name and learn the correct pronunciation of name
7. Update Profile Preferences
- User can choose to show/hide their Facebook posts from their public profile page.
- User can choose to show/hide their Twitter tweets from their public profile page.
8. Search Profiles
- Employee can click on linkable skills or expertise area or location to get list of profiles
- Employee can also enter free text to search for profiles
9. View Profile Search Result
- How the Search Result looks
10. Launch Google Chat
- User should be able to see associated Customer Information
11. Follow employee
- User can follow another employee on Chatter
12. Manage comment on photo
- User can comment on photos published by other employees on their photo albums.
- User can also preview the comments before publishing it for public view.
- User can remove or edit their comments on photos.
13. Get Help
- How to presented help, so it will more useful to user
14. Unfollow Employee
- How to presented help, so it will more useful to user
B. Administrator Functionality
1. Configure Update Frequency
- Configure update frequency – an option to update frequency of updates from various social services
2. Create Profile Fields
- Admin can create a new text field for employee to provide additional data about themselves.
- The field will be visible next time employee logs into their profile in edit mode.
3. View Log
- Admin can select a time range to view the log line items
- Admin can save the report using the default browser save as option
4. View Audit Report
- Admin can select a time range to view the audit line items
- Admin can save the report using the default browser save as option
Target Audience
Internal User.
Judging Criteria
- User Experience
- Completeness and accuracy of the wireframe as defined in the attached requirements.
- How well your wireframes provide a consistent user flow
- How well you implement the required data and any suggestions, interactions and user flow you recommend (provide any notes or comments for the client)
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
Wireframes should be built in HTML or Axure. The resulting files are not critical in this contest. The most important point is that all the content is listed and the pages are linked together to show page flow. Keep your source files out from this submission folder.
Source Files
All original source files of the submitted ideas. If you would like to submit notes please include notes.txt file.
Final Fixes
As part of the final fixes phase you may be asked to modify content or user click paths.
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.