Challenge Summary
Welcome to "SiBM - DES Web Specialists Contact List App Design Challenge". In this challenge, we are looking for you to design the user interface and overall "experience" for our Web Specialist Application. This application will be a Responsive application that will help any IBMer find the owner of an any IBM.com web page. The application needs to be simple and easy to use. We are providing you with wireframes that capture the application flow and functionality.
Round 1
A. User Screens (Desktop and Mobile)
01. Search Screen
02. Search Result Screen
03. Report Screen
04. Login Screen
B. Admin Screens (Desktop Only)
08. Dashboard Screen
Round 2
A. User Screens (Desktop and Mobile)
01. Search Screen
02. Search Result Screen
03. Report Screen
04. Login Screen
05. Suggestion Contact Screen
06. Contact Screen
07. Settings Screen
B. Admin Screens (Desktop Only)
08. Dashboard Screen
09. Manage Web Screen
10. Webpage Details Screen
11. Users Details Screens
12. Manage Rules Screens
13. Admin - Activity (Wrong Info Report)
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 pages need to be updated periodically. The problem is, sometimes it is hard to find the person in charge/responsible for these pages.
A user will be able to search for specific information regarding a web page(s) (page owner, contact info, etc.). A user will also be able to suggest contacts for pages that do not have owners as well as update web pages that are related/connected to themselves.
We are looking for you to focus on the human "experience" of doing these searches and what is the best way to present the UI/UX. Keep it simple and easy to use.
User Flow Scenario
Administrator:
- The administration is used via full web interface (i.e. mobile version should be working but not priority, so some features can be omitted)
- After login, the 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.
Branding Guidelines
All submission MUST follow IBM Design Language (if you haven't learned it yet - now is a great time!): 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
- We need to make sure that there are not any trademark violations. So make sure to use the correct logo. IBM(R), Bluemix (TM), and copyright statements should be checked. The list of copyright and trademarks are here: http://www.ibm.com/legal/us/en/copytrade.shtml
- There should not be any references to SiBM in any of your design
Accessibility:
- Make sure when you are planning your designs you are also thinking about accessibility (http://www-03.ibm.com/able/access_ibm/disability.html).
- You can view the accessibility checklist here.(http://www-03.ibm.com/able/guidelines/web/ibm508wcag.html)
Design Goals:
- How does a user experience this application?
- Think of how it will help them find owners of IBM web pages
- How quickly can the user understand and interact with the app?
- This should be a modern Responsive design based on the IBM Design Language
Target devices:
- Screen Resolutions:
-- Desktop: 1280px width and height as required.
-- Mobile: 750px width and height as required.
- Consider your layout for responsiveness since we are targeting responsive apps.
- Make sure that you create graphical elements in VECTOR format, so graphics retains quality when resized.
- Notice the 'menu' option on mobile version in top right corner. Menu should be displayed on side in 'standard' way - see for example www.ibm.com/us-en/ or www.ibm.com/middleware/ how menu is displayed. This menu should be available on all pages on mobile version.
Supporting Documents:
- Wireframes (wireframe.zip).
Required Screens
Refer to wireframes before you start designing your solution.
A. User Screens (Desktop and Mobile)
01. Search Screen
- WF references:
--- Mobile - Search "Non-Logged In" and "Logged In."
--- Web - Search "Non-Logged In Web" - Search "Logged In Web."
- 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
- The search screen needs to be very simple, with only several elements appear on the screens:
--- Branding: Name of application along with logo (create a simple one)
--- 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/FAQ: A questions/quick tutorial to help user about the apps functionality
--- Two buttons: Report wrong information (disabled on search screen), Update personal information (hidden if not logged in)
- Provide error condition if user entry wrong/invalid input or perform search query that break the rules.
- 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.
- There are several differences layout content between web and mobile, where several content on the web not included in the mobile parts, please be aware of it.
02. Search Result Screen
- WF references:
--- Mobile - Confirmed Contact (Non-Logged In) and (Logged In) & Web - Confirmed Contact (Non-Logged In) and (Logged In)
--- Mobile - Suggested Contacts (Non-Logged In) and (Logged In) & Web - Suggested Contacts (Non-Logged In) and (Logged In)
--- Mobile - No Contact (Non-Logged In) and (Logged In) & Web - No Contact (Non-Logged In) and (Logged In)
--- Mobile - Suggested Owners (Non-Logged In) and (Logged In) & Web - Suggested Owners (Non-Logged In) and (Logged In)
- Search should be a very simple screen that will show the most relevant result based on user criteria (there can be more than 1 result for URL but only the most relevant (based on created rules in administration) is used to display result)
- If the user does not find the correct result, they should be able to perform another search quickly from the top area.
- There are several differences in the content layout between web and mobile, where some of the web content is not included in the mobile view - please be aware of it.
- There are two types of contacts: “Owner” and “Contact person” they are independent (no relation between them) - in wireframes are shown cases when “Owner” is confirmed and “Contact person” has different status but the same statuses can apply for “Owner” as well (see "Suggested Owners" content to see how it looks like when both “Owner” and “Contact person” are not validated yet)
- This screen will have different content variation when showing the result depending on the owner/contact information completeness in the system:
--- If the search result have confirmed/validated “Owner” and/or “Contact person” in the system, then it will show "Confirmed Contact" content (for particular contact type).
--- If the search result have one or both of “Owner” and/or “Contact person” with the contact information not yet valid in the system, then it will show "Suggested Contact" content (for particular contact type).
--- If the search result don't have any “Owner” and/or “Contact person” then it will show "No Contact" content (for particular contact type).
- The differences between "non-logged in" and "logged in" user held in the ability for user to suggest and vote for suggested “Owner” and “Contact person”. There will be a button to suggest these information for logged in user.
- A Confirmed/Valid owner and contact will be defined by the number of votes give to them by other user that suggest the owner and contact information.
- If user thinks the information is not correct, they can report the web page information to admin for revision.
03. Report Screen
- WF references:
--- Mobile - Report (Non-Logged In) and (Logged In)
- If user thinks the information in the search result page is incorrect, they can report it to admin and ask for revision.
- This feature is available both for non-logged in and logged in user
- Simple comment form to enter user report and a submit button to send the report.
- Ability to choose whether user want to get (periodically) notification about the report status or not.
- In web parts, current wireframe will provide this screen as modal window in search result screen, determine and re-think the best possible UI/UX for this screen for web.
04. Login Screen
- WF references:
--- "Mobile - Login" and "Web - Login."
- The user needs to log-in using IBM Intranet ID
- Simple application logo at the top area of the page
- 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 Screen
- WF references:
--- "Mobile - Suggest Contact (Logged In)"
- This screen is only available for logged in user, user can access it from the "suggest" button/navigation in search result page.
- User will be able to recommends any IBM user as an owner and contact for particular IBM.com webpages including themselves as the owner and/or contact information.
- If there are already some contact suggestions there, user can "vote" for the suggested contact to make the contact confirmed/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 3 contact suggestions already available and suggest new (4th) the one with lowest number of votes is removed from the list (the new one is kept, of course).
- In web parts, current wireframe will provide this screen as modal window in search result screen, determine and re-think the best possible UI/UX for this screen for web.
06. Contact Screen
- WF references:
--- Mobile - Contact Details (Non-Logged In) & (Logged In)
--- Web - Contact Details (Non-Logged In)
- The user can navigate to see details information of owner/contact and reach them by contacting via contact form or mail (verse).
- 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. The user also can vote the owner/contact for any web pages that they being suggested.
- 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]
07. Settings Screen
- WF references:
--- "Mobile - Suggest Contact (Logged In)"
- This screen is only available for logged in user, a user can access it from the "Update My Profile" button/navigation in the search page.
- The user can see their current profile and edit it if necessary.
- From this screen, they will be able to see their all records history in the apps which divide into three differents areas:
--- Replace All, Replace all records that connected to the user with someone else (mass replacement)s
--- My Confirmed Contacts, Manage all user records where the user mentioned as confirmed contacts (user can remove himself/herself or replace for single contact by another person)
--- My Suggested Contacts, Manage all user records where the user mentioned as suggested contacts (user can confirm himself/herself as contact or remove from suggestion list)
B. Admin Screens (Desktop Only)
08. Dashboard Screen
- WF references Admin - Dashboard
- Default page for admin whenever they open the application
- This page will provide the admin a quick and easy navigation to check all app features and information.
- There should be a list of recent application activity with clear icons to indicates the activity status.
- Quick and simple search form to find information about IBM.com pages.
- Administrators need to have an interface to update data on web interface only (super user).
- List of administrators is kept within the 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).
09. Manage Web Screen
- WF references Admin - Manage Webpages
- Admin will be able to manage all web pages along with owner/contact information from this page
- Provide filter and sort area where admin can manage which web pages should appear on this page.
10. Webpage Details Screen
- WF references Admin - Webpage Details (Confirmed Contact) (Suggested Contact) (Suggested Contact)
- Admin can view details information about each IBM.com webpages from this screen.
- There are three slightly different types of information that will be presented depending on the completeness of the information:
--- Confirmed Contact
--- Suggested Contact
--- No Contact
11. Users Details Screens
- WF references Admin - User Details
- Administrator can manage user details from this screen
- Administrator can remove user from the system, edit their profile, contacting user, remove user from the web pages they owned or as the confirmed/suggested contact
12. Manage Rules Screens
- WF references Admin - Manage Users and Admin - Rule Create
- Administrator will be able to manage all rules for the search criteria from this screen
- All rules that have been created will be appear on this screen so admin can easily check the rules.
- Administrator also will be able to create new rules for the search criteria by click "Create New Rules" button
- In Create New Rules page, there will be a set of form area where administrator needs to fill in to define new search rules.
13. Admin - Activity (Wrong Info Report)
- WF references Admin - Manage Webpages
- All report from users will be available here
- The administrator can check all detail reports from the user regarding wrong information for owner/contact information in any IBM.com pages.
Target Audience
- Global IBM Employees
Judging Criteria
Your submission will be judged on the following criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Creativity and ease-of-use are the keys to success as it must be engaging to users.
- Does your design make sense for a responsive application?
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 for your submission files.
Source Files
All source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI 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. We may ask you to update your design or graphics based on checkpoint feedback.
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.