Challenge Summary
Welcome to IBM Castle - Tags Design 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 design how "tags" and "tagging" will be used within the application. Tags are replacing the idea of folders (think of other modern email applications and how they use tags and labels etc.) We are looking for a modern "tagging" experience where users can organize and categorize their messages, calendar events and contacts!
The goal of this challenge is to design the mobile and desktop responsive screens that demonstrate how tags and tagging can be used. We need to capture all the details on how tagging will be displayed and how a user will interact with them. Tags and folders will act in a very similar way but using tagging, messages and events can be automatically categorized as the email client learns about you and your messages. We need your best ideas on how to integrate tagging into the current version of the design.
We are providing the current Mobile and Desktop designs and need you to focus on creating a great “responsive” design experience!
As part of this challenge, we are also asking that you send us an "InvisionApp" URL to make it easier to review your submission.
Round 1
Checkpoint Submission Requirements
Initial Tagging Solution Desktop/Mobile views
- Provide us with a click map for your design, with annotations for all interactions.
- 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?
- 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
Final designs 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?
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
- Readme.jpg: If needed, provide notes about your submission
General Requirements
- You need to keep your concepts within the current design style/branding of the desktop application
- Makes sure to review the latest/provided application navigation
- You must think about how to design and arrange the application on Mobile and Desktop screens.
- Click around on provided desktop prototype and screenshots to get familiar with how folders currently function. How do tags act differently?
- Where will a user access tags?
- How will a user tag a message and organize/label it?
- How will a user tag multiple messages?
- If a user is searching for specific items how will they appear based on their tags?
Design Problem
We have an idea of "tags" within the Castle Application. We currently do not have "tags" designed as part of the user interface and need to plan and design this experience. We are removing folders as tagging will allow a user to tag and categorize their content. Think about this experience and how this will help a user manage and find the things that matter to them within the Castle Application.
Note: Tags and folders have relatively similar functions. Think about how this change will affect how users interact with messages.
Must see Features
- Tagging within messages list.
--- Show how tags appear in the messages list.
--- How to multiple tags appear?
--- Assume that messages in the inbox do not need to be given a visual tag, this is the default tag.
- Tagging in an open message.
--- How can I add tags to a message
--- How are tags on a message displayed?
--- How are tags displayed on a threaded message?
- Tagging replaces folders.
--- How do “folders” appear now that they are tags?
- Tagging a Contact.
--- What’s the process of tagging a contact?
--- How do tags appear on a profile?
- Tagging an Event
--- What’s the process of tagging an event?
--- How do tags appear on the calendar?
Inspiration & Research
- Review gmail. Gmail automatically applies certain labels to help organize messages. Eg: primary, social, promotions, updates.
- Consider other applications that use tagging: do your homework and find examples!
- Users can add tags to a message to move the message under that tag.
- There will be a predetermined set of tags. Keep the same list of expected folders (inbox, drafts, sent, etc.) but these are now using the concept of tags.
- Tags will also be generated automatically by cognitive services to group different messages types together.
---- Will be based on content of an email, sentiment, etc.
---- How could this work? How would users be alerted that a new tag has been created for them?
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)
Downloadable Files
Google Drive Folder: https://drive.google.com/folderview?id=0BwfkY6SJxFPiSEl0ODRaaWEtSVE&usp=sharing
IBM-Castle-Desktop-Design_V2.zip - IBM Castle Desktop Design
IBM-Castle-OLD-Mobile-Design_V2.zip - IBM Castle Mobile Design
Design Concept Requirements
- We need you to design both Mobile and Desktop "Tagging" experiences
- Design each "step" and capture the user flow. (inbox, detail view, search, left column etc.)
- This challenge is very focused so we need all the visual details
Required screen sizes:
1). Mobile Retina Portrait (750px x 1334px)
2). Desktop Standard Wide (1280px x Height up to your design)
Important: You must practice good PSD source file etiquette: Check out: http://photoshopetiquette.com/files/
Invision Link
- 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
Target Audience
- IBM Internal Users
- IBM External Vendors
Judging Criteria
- How well you think through and plan tagging!
- Keep things consistent with the existing design brand of IBM Castle Email Application.
- Cleanliness of your graphics and design.
- Important: Practice good PSD source file etiquette: Check out: http://photoshopetiquette.com/files/
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.