Challenge Summary
Welcome to "SiBM - DES Web Specialists Contact List App Wireframe Challenge". In this challenge, we are looking for you to help plan a great user experience for the Web Specialist Contact List application. The purpose of this challenge is to create an intuitive (wireframe) interface and interactions to search an owner and editor for any 'ibm.com' web page.
At the end of this challenge, we are looking to see easy to use "wireframe concepts" that will help us design and build the user interface and continue to improve the user experience in the next phase of this project! Think about the problem and the human experience!
Round 1
User Scenario (Non and Logged In)
01. Search Page
02. Search Result Page
03. Report Page
04. Login Page
05. Suggestion Contact Page
Round 2
User Scenario (Non and Logged In)
01. Search Page
02. Search Result Page
03. Report Page
04. Login Page
05. Suggestion Contact Page
06. Settings Page
07. Contact Page
Admin Scenario
01. Login Page
02. Dashboard page
Background Overview
The Web Specialists Contact List Application is looking to provide an intuitive interface for searching for an owner and editor of any 'ibm.com' web page. There are a lot of IBM.com pages out there managed by many IBMers around the world, and these page need to be updated periodically. The problem is, sometimes it is hard to find the person in charge/responsible for these pages.
By using this application a user will be able to search for specific information regarding a web page(s) (page owner, contact info, etc), along with suggested contacts if they found that the page doesn’t have one, as well as the ability to update information about web pages that are related/connected to themselves.
We are looking for you to research and determine the best way to present the user experience and make it easier for IBMers to have interaction with the apps. We do not want to overwhelm a user with a large amount of inputs and forms - keep it simple and easy to use.
User Flow Scenario :
Administrator :
- Administrator only available via web interface only.
- After login, administrator user can create, delete or update rules.
- Also Admin user can list all notifications generated by the tool (check log history).
User (not logged in):
- User can search for any information about IBM.com pages and report issues.
User (logged in):
- User can search for any information about IBM.com pages and report issues.
- User can additionally see information about himself/herself and update it, or provide/vote for suggestions to any web pages information.
Wireframe Guidelines:
- Provide us with your interaction and click-path thoughts and suggestions
- Produce HTML click-through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- This application must be very easy to use and intuitive. Keep that in mind when you create your solution for the layout and flow information.
- You MUST cover all requirements mentioned in challenge details below.
Screen Sizes:
Mobile : 750 x 1334px OR use iPhone 6 size ratio (half of the original size).
Desktop : 1024px and height as required
IBM Design Guidelines:
All submissions MUST follow IBM Design Language, please refer to the client website: http://www.ibm.com/design/language/index.shtml
-- Layout: http://www.ibm.com/design/language/framework/visual/layout.shtml
-- Typography: http://www.ibm.com/design/language/framework/visual/typography.shtml
-- Iconography: http://www.ibm.com/design/language/framework/visual/iconography.shtml
-- Color: http://www.ibm.com/design/language/framework/visual/color.shtml
-- Interaction: http://www.ibm.com/design/language/framework/interaction/introduction.shtml
-- App Inspiration: http://www.ibm.com/design/language/inspiration.shtml
-- Click around Client Design Brand site to get familiar with more client design brand that not stated on this challenge spec.
-- Creativity is also welcome!
NOTE:
Not all of the above guidelines are appropriate for wireframes, only those which you think would be appropriate are applicable. It is best to go through the guidelines to understand how it will impact the user experience while building your wireframes.
Feature Requests:
Below are some of the feature requests of the application, but you are not limited to this, we are open to flows and suggestions on how things could work - so feel free to expand and suggest us what would be best for this type of application!
A. Non-Logged In User (Web and Mobile)
01. Search Page
- Default page that will be open every time a user opens the app
- This page will be available for all users either they are logged in or not to the application
Mandatory page items:
--- Branding: Name of application along with logo
--- Search: One big input field (Search) to write the URL of IBM.com web pages
--- Profile: An area to indicate if user is logged in or not to the application
--- Help: A question mark or way to access help
--- Two buttons: Report wrong information (disabled on search screen), Update personal information (disable if not logged in)
- There are several rules for a user to be able perform URL searching in this page:
--- URL input field will accept string as link
--- Only one link can be added at once, If noticed 2+ inputs shows error to search for one link at once
--- Accept link with protocol (http:// , https:// ) as well as without it
--- All inputs taken as URLs
- Once a user starts to write in the input field, there will be a "Search" button appear to confirm URL is provided so user can press it, Once search submitted it gets information from tool and shows result.
02. Search Result Page
On the search result screen keep showing the search field (i.e. in case person wants to provide additional query). Below the search field and above the two buttons on bottom, there will be the following information:
--- URL submitted for the search
--- Owner of the page
--- Contact for support
- The owner of page is primary loaded from the tool but in case information is not provided then use owner from meta information
- Contacts should be links and clickable:
--- Option 1) When user click on name it opens Verse (Verse = default mail client for IBMers (more likely people have Verse installed as well on mobile)) to send a direct email
--- Generate subject like ? subject=Web page issue/question [app]
--- Option 2) Show contact page (see scenario 07. Contact Page)
--- Option 3) Show "form" to send mail directly (sent to person contact activated and admin on bcc)
- Contact information can be displayed as:
--- Confirmed contact (having regular color)
--- Suggested contact (advised by users, having lighter color) followed by "suggest" icon
--- No contact – display "Suggest contact" text with icon instead (user can click it if they logged in.
03. Report Page
- Report wrong information button is used to report incorrect information without a need to know the proper values.
- This button is visible in the application all the time (besides overlay windows) but disabled on search screen because there is no information to report as wrong (active in search result page).
- There is a new window displayed to report an issue (overlay or best UX for this)
- This window contains a textarea to write a comment and optional field for e-mail address if the user wants to be informed about results of the revision
- After submitting (button below text area), the app will be sent a notification to the Administrator. The admin view is a separate view/app
B. Logged In User (Web and Mobile)
01. Search Page - same interactions like non logged in user
02. Search Result Page - same interactions like non logged in user
03. Report Page - same interactions like non logged in user
04. Login Page
- The user needs to log-in using IBM Intranet ID
- Provide ordinary login form (IBM ID as username, password, login button, etc) as the layout content for this page.
- The application should also have a "remember me" so users do not need to log-in each time they want to use the application
- Provide error scenario when user input wrong credential or incomplete information.
05. Suggestion Contact Page
- User can click on "suggest" icon and/or "suggest contact" link and new window (overlay or best UX) will appear
- User can suggest contact (based on related role) – needs to be an IBM address.
--- if suggested himself/herself then moves to "confirmed" directly and send notification to administrator
- If there are already some contact suggestions there, user can "vote" for the suggested contact to make the contact valid.
- There will be some calculation needed to move the contact status from "suggested" to "confirmed" state (vote more than 20 amount of people, etc.)
- If there are more than 3 contact suggestions available, the one with lowest number of votes is removed from the list (the new one is kept, of course).
- When user change state from "suggested" to "confirmed" the app will send an email to the user that being suggested and to administrator of the application to notify them.
06. Settings Page
- Users will be able to review and update their data (profile, any web pages related to them, confirmation status about valid contact suggestion from another user, etc).
- User needs to be logged in using intranet name and password.
- There will be information about 4 options the user has on this screen with a short description what it is used for. If entire application is protected then option 4 is enabled automatically for all and not listed here
User has these four options:
1) Replace all records with his/her address to someone else (as suggestion) - mass replacement
2) See all records where he/she is mentioned as confirmed contact. user can remove his/her contact one by one then once removed it is possible directly suggest contact (input field) during this view user account is submitted as “confirmed” and sent notification to user
3) See all records where he/she is mentioned as suggested contact. user can either remove or confirm this information. If confirmed by himself/herself it change to "confirmed" status.
4) Search for information (as presented on slides before) but once suggest himself/herself as contact it become confirmed contact directly.
- Every time a user changes value in the app, there will be a notification send to administrator in the background.
07. Contact Page
- See 02. Search Result Page
- If a user chooses to click contact information in search result screen they will be directed to the Contact Page
- Web Version: The user will see a contact form/template that they can quickly fill out. The form will send to the activated contact and bcc the admin
- Mobile: If the user taps the contact information link in mobile version it will open their email application with a generated subject=Web page issue/question [app]
C. Administrator Screen Scenario (Web Only)
01. Login Page
- User need to log using IBM Intranet ID to perform some actions in the app
- Provide ordinary login form (IBM ID as username, password, login button, etc) as the layout content for this page.
- This application also should be able to remember user credentials so they don't need to log each time they want to use the app.
- Provide error scenario when user input wrong credential or incomplete information.
02. Dashboard page
- Administrators need to have an interface to update data on web interface only (super user).
- List of administrators is kept in tool.
- Administrators can make customized searches – i.e. above standard user they can :
* See data of any user
* See only changes performed in last X days (kind of log)
* See only data with suggestion to manipulate it – remove/confirm, but not able to change number of votes
* Create a new rules (using regular expressions) to perform search (treat all input as string, marking all input as link, etc). For example :
when providing suggestion by user it is valid for entire directory
e.g. URL searched www.ibm.com/something/filename.html and add suggestion of contact person then person is listed for all pages below www.ibm.com/something/ e.g. filename2.html as well as subdirectory/xyz
when rule created by administrator:
there are two fields to define URL belongs to it
URI format:
Source tag:
format URI can be in regular expression format i.e. ^something^ will cover www.ibm.com/something page as well as www.ibm.com/directory/something (i.e. pass the check)
there should be some easy way to put URL as string or regular expression (sometimes we do not wish to put URL as regular expression and then it needs to be exactly as written)
Source Tag is value in source code - you can check for example www.ibm.com/uk/en or www.ibm.com/social-business/uk/en to see what we mean
This is more likely related to backend coding to know what types of checks needed to do.
And also how to decide which one to use if page pass more than 1 rule.
Learn Axure:
New to Axure? Here are some quick tutorials to help you get started.
http://www.axure.com/learn
Target Audience:
- Global IBM Employees
Judging Criteria:
Your submission will be judged on the following criteria:
- User Experience.
- Completeness and accuracy of the wireframe.
- How well your wireframes provide a consistent user flow.
- Any suggestions, interactions and user flow you recommend (provide any notes or comments for the client).
Submission & Source Files:
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Generated HTML files with all the requested contest requirements stated above.
Source Files
Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.
Final Fixes
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.
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.