Challenge Summary
Welcome to the IBM Castle - Awesome Bar UX Design Concepts Challenge.
This challenge is part of the IBM Castle Challenge Series. Competitors who win challenges in this series will compete in a leaderboard and earn points towards additional cash prizes.
This is fun design challenge where we want to tackle future cognitive concepts on how "Search" will work withing our application. We want to use the provided "search input area" as a cognitive "Awesome Bar" that allows a user to not only search but to also create calendar events, create email messages, find a person, create a tag, send files to someone in their network etc. The Awesome Bar will pick up on what you are trying to do and make suggestions that the user can act on.
Note: These design challenges will be FAST and we will be providing FAST feedback! We will stay on schedule as there is no room to move our delivery dates!
Round 1
Awesome Bar Desktop Screen Size
- Provide us with an Invision link of your design!
- If you need an Invision Project please request one from adroc@topcoder or jmlodik@topcoder.com
- Provide us with a click map for your design, with annotations for all interactions.
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
- Readme.jpg: If needed, provide notes about your submission
Round 2
Awesome Bar on Desktop, Tablet and Mobile Screen Sizes after combined with Checkpoint Feedback
- Provide us with an Invision link of your design!
- If you need an Invision Project please request one from adroc@topcoder or jmlodik@topcoder.com
- Provide us with a click map for your design, with annotations for all interactions.
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
- Readme.jpg: If needed, provide notes about your submission
Challenge Details
This modern email application (you are) designing will eventually be used throughout IBM and will replace email, calendar, contact applications created by outside vendors. It is very important that you pay attention to the details and think about the overall experience. We need you to consider each step and interaction in your concept. This challenge is focused on improving how the user interacts with the top search/input bar and how it behaves when it starts to have cognitive functionality.
Design Problem
We want to design and build an application "Awesome Bar"!
- At the top of our application, we have an input field where a user can essentially trigger any action in the application. We want to explore this experience and how it might look to the user and what the potential (Awesome!) experience could be.
- Start typing and the awesome bar will use cognitive services to complete tasks (eg: create a calendar event, find a person, tag a message).
- We are looking for detailed experiences in this challenge!
Accessibility
Accessibility and 508 compliance is extremely important for this project. Please see below:
- 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)
- Please watch font sizes and color contrast!
Downloadable Files
https://drive.google.com/folderview?id=0BwfkY6SJxFPiUmE0Z01vQU9WdjQ&usp=sharing
Review: AwesomeBar-Simple-Wire.jpg
General Requirements
- While this is a design concepts challenge. We do need you to focus on the small details of your solution.
- This will be similar to a "Type Ahead/Auto Suggest" experience but with a lot more functionality.
- Think of the interactions within a modern application design (drag and drop from your desktop, responsive features) and how this area will work with different interactions (click, tap etc)
Research
- Do your research!
- Looking for ideas on how this could work.
- Refer back to the current Castle prototype.
- Different filtering types.
--- Different options pop up as you search.
--- Like google calendar, when you trigger certain words at certain points, different things show up that you could take action on(?)
Check out Slack and how the input/typing field works and how you can drag and drop into it.
- Check out Slack and how you can use things like "/", "#" ,"@" - it provides a user a list of commands (this type of interaction would be expected)
- The awesome bar will be more predictive than slack but this is another way to grasp the idea.
- So if you could search from the bar or you could type a verb/use some syntax/ set something etc and have it make a calendar entry... or just start typing and it shorthands out an email with recipients and starts into the body... or ask a question and it present similar questions/proposed answers.
Check out Google Calendar phone app
- Create a new event and begin typing. See how the input bar begins to suggest ways to complete your request? The awesome bar will function similarly to this.
- Play around with this, it’s a good approximation of the types of interactions we will expect within the awesome bar.
Required screen sizes
1). Mobile Retina Portrait (750px x 1334px)
2). Tablet Portrait (768px x 1024px)
3). Desktop Standard Wide (1280px x Height up to your design)
Important: Practice good PSD source file etiquette: Check out: http://photoshopetiquette.com/files/
- Remember! Our existing design has been designed responsively. Your submission must fit within the current design planning.
- Your design submission must belong and enhance the provided IBM Castle application look and feel - one unified user experience!
Awesome Bar Scenarios
User Stories
- As a user I start to type into the Awesome Bar: "Schedule a meeting with Jason" - while typing this it is providing a suggestion on the right side of what your are trying to do (Search, Event, Contacts etc.). You click enter and it opens a New Event window where it pre-populates the existing information.
- As a user, I want to send a file to Jason so I drag and drop a PDF file into the Awesome Bar. The Awesome bar asks me who I want to send this file to and do I want to email, chat or text the file. I type Jason (where it auto-suggests the correct Jaons) and Email where it then opens a New Message window with the attachment already in the window. Another option here is I start typing "Send file to Jason" and the Awesome bar opens a dialog for me to choose how I want to send the file and provides me with a file picker to select the file to send.
- As a user, I want to search for Jason and as I type in the Awesome Bar "Jason" it is providing me with recent Jason's Contact information, Messages, Tags, Files that relate back to my relationship with Jason. I am able to pick the item (Jason's Contact information) to explore more. This would also work if I was typing in "Find me files from Jason" - the Awesome bar would be providing me options of related files etc.
- The Awesome Bar will also understand where you are in the application. If you are in "Calendars" it is more likely to know you want to create an Event and if you are in "Contacts" it will know you are more likely to want to search/find/edit Contact information.
- As a user I want to email Jason (and I know the existing key commands) so in the Awesome bar I start typing @jason and the Awesome Bar suggests to me a few Jason I might be trying to contact and if I want to email, chat or text Jason. I select email and it creates a new message.
- As a user, I want to invite Jason, Michael, Angela to a meeting. I type "Meeting with Jason, Michael and Angela at 8am ". The Awesome Bar provides suggestions on the correct Jason, Michael, and Angela (as I am typing) and creates a New Event. It also alerts me that Angela has a conflict at 8am and if I would like to pick another time.
Interaction and Screen Requirements
We need Mobile, Tablet and Desktop Views!
How does this work with both Click and Tap experiences
Required: Submit an InvisionApp link as part of your submission.
See the Checkpoint Requirements
- We would like to see how to create a New Event
- We would like to see how to Create a New Message
- We would like to drag and drop files to the Awesome Bar
- We would like to search for a user and related content/files etc.
- We would like to create a Group and add users to the Group
- Provide additional examples that you think of!
Target Audience
- IBM Internal Users
- IBM External Vendors
Judging Criteria
- How well you merge the provide concepts from different submission
- Keep things consistent with the existing design brand of IBM Castle Application.
- 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 Challenge 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.