Challenge Summary
Welcome back to IBM Castle - ITM Avatar Experience Refinement 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 a follow-up challenge to the recently completed Castle Email Application and we are looking for you to improve our existing "Important to Me" Bar and Avatar design and experience. We are looking to use the avatars in the “Important to Me” Bar to display a wider variety of information to help draw the user’s attention to things they need to take care of. Read our refinement tasks within the challenge below.
We are providing the current Mobile and Desktop designs and need you to focus on creating a great “responsive” design experience!
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
Updated Avatar Design on 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
Final Submission Requirements
Updated Avatar Design on Desktop and Mobile Screen Size 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 other email 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. As we are start designing specific areas of the application we need you to track all the details as part of your submission.
Design Problem
- We are looking to use the avatars in the “important to Me” Bar to display a wider variety of information to help draw the user’s attention to things they need to take care of.
- New: In future versions of the application we will be able to place more than just users in the bar. We can place saved searches, tags, grouping if people and saved items, etc. How do we visualize something that is not a person/avatar?
- Client has stated that he exclusively uses this bar to filter through his messages. This is a more important interaction than we previously thought! When you click on an Avatar your inbox filters. So what are the key interactions/touchpoints needed?
- Think of how video games; first person shooters and MMORPGS. How do those types of games change the Avatar UI to reflect changes in your condition or health (small rings, larger rings, change of color etc.)
- We do not like the "dot" on the Avatar head (it looks like a target) - how do we improve this experience?
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)
- This is very important for showing different color changes, ring size changes etc. Please plan for this!
Downloadable Files
https://drive.google.com/folderview?id=0BxNVnWK-ZGA6Xzc4VDhEMHdtUTg&usp=sharing
General Requirements
- Remember! Our existing design has been designed responsively. Your submission must fit within the current design planning.
- As possible DO NOT introduce new design elements. Re-use existing form elements like text input, dropdown, radio, checkboxes, text area from provided storyboard design
General Requirements
- Your design submission must belong and enhance the provided IBM Castle application look and feel - one unified user experience!
- Required screen sizes:
1). Mobile Retina Portrait (750px x 1334px)
2). Desktop Standard Wide (1280px x Height up to your design)
Important: Practice good PSD source file etiquette: Check out: http://photoshopetiquette.com/files/
Design Concept Requirements
View the left side "Important to Me" Bar/Avatars
1) How do we display different Avatar states or levels of attention needed to things in ITM bar are?
- Inactive (fade?)
- Active (colored outlines, dots? What do other apps do?)
- Recently contacted (eg: sent you a message, a calendar event, etc.) How do we visualize that a person you deem important needs your attention? (Highlight the circle? Different color? Thicker outline?)
- Relationship health: You haven’t contacted a person on your favorites list in months. The system is reminding you that you should contact them or remove them from this list. How does this look?
- A contact just sent you something: how do we display different types of contact methods? Do we need to?
- Think of different notification systems from different types of apps. What are different ways that they draw your attention?
2). Maximizing Space
- New UI: how can we maximize the amount of space we give to this area when users request it? We have less space in this layout for this content but we are moving forward with it.
- Does it expand (width) on hover?
- Can users adjust the size with a slider on larger screens?
- How can we see 2-3 columns of Avatars (People important to me)
--- How can we display a layout for the left bar like we’ve had in past challenges?
--- Does this nav have a size slider?
--- Do we see recent chats, other communication in an expanded state? Or just more contacts?
3). Launching Chat
- Show us how a chat window looks. Thinking this is similar to how Google does it and how messages in Castle launch. Small window anchored to bottom of screen.
- How do I trigger a Chat from the ITM bar?
- How do I trigger a Chat from the Avatar within my Inbox?
4) Inbox Avatars (no bullets to the face!)
- What are the key interactions on the Inbox Avatar?
- I see my ITM bar on the left and additional Avatars in my Inbox - do I still see online/offline status?
- The current Castle interface places a blue circle over the Avatar when a user begins to multi-select images. When using the "multiple select" the current design puts a "target" on the Avatar... this is not ideal. Is there another design option here?
Overall
- Track where all the Avatars are being used. Think about the experience and information they are showing the user
- Review the existing Castle prototype - look at how the ITM bar is being used! What ideas still work
- We still want to keep this simple!
Target Audience
- IBM Internal Users
- IBM External Vendors
Judging Criteria
- How well you create and update the UI/UX for the ITM Bar and associated Avatars
- 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.