Challenge Summary
Welcome to IBM - Notice Something Do Something Mobile App Design Challenge! "Notice Something... Do Something" is basically IBM's equivalent of the popular IFTTT (If This Then That) service. Think of "Notice Something... Do Something" as a simple assistant that spends it's time watching for something specific to happen and when it does, takes an action on your behalf. The combination of an event to watch for and an action to take is called a recipe. You can create your own or use recipes that others have shared.
It will most likely tie into RSS feeds from internal IBM applications, such as Connections, and output emails, Connections posts, and send notifications.
Round 1
Submit your design for a Checkpoint feedback:
0. Navigation
1. Login
2. Home page
3. Browse Recipes
4. Channels
- If you have time - please provide us with a click map for your design.
- Notes.jpg: Any comments about your design for the Client
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Final design plus any Checkpoint feedback:
0. Navigation
1. Login
2. Home page
3. Browse Recipes
4. Channels
5. My Recipes
6. Create Recipes
- If you have time - please provide us with a click map for your design.
- Notes.jpg: Any comments about your design for the Client
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Details:
The goal of this challenge is design this “Notice Something…Do Something” mobile application, it will be equivalent of IFTTT but for internal IBM data. IFTTT lets you define events that you want detected, and actions to be executed when those events occur -- so basically tying together two Web services that wouldn't typically work together. The application will be delivered via iOS 8.
You are provided with wireframe screens to explain what we are looking for, along with icons for various IBM applications, some of which could be used for the action and trigger icons.
Recipes Examples:
Here are some examples of possible recipes so you can understand what a recipe mean.
1 Send yourself an email anytime your manager updates their blog (Watch your IBM Connections wall for any post by your manager, then send you an email notification)
2 Get a notification on your mobile device every time your approval is requested (Watch for an approval request, then send a in-app notification to your mobile device)
3 Automatically add to my calendar any vacation days I define in Vacation Planner. (Watch when I define vacation day in Vacation Planner, then add to my personal calendar)
4 Post to a team support blog every time an outage to one of your applications has been detected by Uh-Oh. (Watch for when Uh-Oh detects an outage to one of your applications, then post a message to a team
support blog.)
5 Automatically check-in to a check-in service (such as the IBM Employee Check-in and Broadcast service) every time you arrive at the office.
Design Guidelines:
- All submission MUST follow IBM Design Language, refer 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.
- Orientation : Portrait.
- Make sure create all your graphic in 'vector' format (buttons, icons, etc), so when resize for bigger versions, graphic still look sharp!
Screen Size:
- Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px.
Use Case Scenario:
- David is an IBM employee.
- David logs in to the application using his Intranet ID and Password.
- David sees existing recipes.
- David chooses to use a recipe, and he can customizes it for himself.
- David can start from the list of channels to create a new recipe.
- David can edit his existing recipes, or removes one that they are no longer using.
- David can enables/disable recipes.
Required Features:
0. Navigation
- Provides us with a clear navigation concept for this application.
- Please design a navigation solution that would be easy/engaging for the application user!
1. Login
Please refer login.html
- User should be able to see App logo and name.
- User should be able to enter his Intranet ID and password. Note -- there should be no "Remember Me", "Forgot My Password", or "Sign Up" functionality on this page.
- Please include validation error design for login.
2. Homepage:
Please refer home.html
- Please note create new recipe icon at the top.
- Please include search design when you click on search icon at the top.
- User will be able to view a list of all new recipes and most used recipes:
-- Recipe icons (one for the trigger and one for the action)
-- Recipe title.
-- Recipe creator.
- Notice navigation icons at the bottom of home page:
-- Browse
-- My Recipes
-- Channels
-- Logout
- Clicking on a recipe will show you recipe details page (detail.html); user can customize the recipe:
-- Recipe Title
-- Trigger name and icon
-- Any options for the trigger (for example, blog address, wiki page, etc)
-- Action name and icon
-- Any options for the action (such as email address, title, body, for an action that sends email)
-- Use button
(See the Recipe examples above for ideas about potential triggers & actions, as well as the associated options)
3. Browse Recipes
Please refer browse_recipes.html
- User will be able to return home by clicking on home icon at the top left.
- Please include search design when you click on search icon at the top.
- User will be able to filter recipes, please notice the filter options when the user clicks on filter icon.
- User will be able to browse existing recipes:
-- By Channel
-- By Dat.
- User can also choose to use a recipe that he finds, and customize it (detail.html):
-- Recipe Title
-- Trigger icon & name
-- Trigger options
-- Action icon & name
-- Action options
-- Use button
(See the Recipe examples above for ideas about potential triggers & actions, as well as the associated options)
4. Channels:
Please refer channels.html
- User will be able to return home by clicking on home icon at the top left.
- Please include search design when you click on search icon at the top.
- User will be able to view all channels from this view.
- Clicking on a channel will show you:
-- Channel name
-- Channel description
-- Popular recipes using channel
-- Channel Triggers
-- Channel Actions
5. My Recipes
Please refer my_recipes.html
- User will be able to return home by clicking on home icon at the top left.
- Please include search design when you click on search icon at the top.
- User will be able to view All/Enabled/Disabled recipes.
- Clicking on a recipe will take user to recipe detail view, were user will be able to:
-- Edit Recipe:
--- Choose Trigger
--- if user clicks on back button next to choose trigger he will be able to select channel for another triggers.
-- Remove Recipe:
--- A confirmation message will be shown.
-- Update Recipe:
--- Recipe Title
--- Trigger icon & name
--- Trigger options
--- Action icon & name
--- Action options
--- Update button
- User can also enable/disable recipes.
(See the Recipe examples above for ideas about potential triggers & actions, as well as the associated options)
6. Create Recipes
Please refer create_recipe.html
- User can create new recipes:
-- By choosing a channel for his trigger.
-- Then user needs to choose a trigger.
-- After a trigger is selected, user will enter options for the trigger
-- Then user needs to click on Create trigger button.
-- Then user will need to select a channel for his action
-- Then user needs to choose an action
-- After action is selected, user will set any options for that action
-- At the end user needs to click on create action button.
- When recipe is made (create_and_activate.html)
-- Enter recipe title.
-- Gives choice to make public, private or to share recipe to IBM Connections (IBM's internal social media platform).
-- At the end user needs to click on create recipe button.
(See the Recipe examples above for ideas about potential triggers & actions, as well as the associated options)
Target Users:
- IBM Employees.
Judging Criteria:
- How well you create the App and keep things consistent with the existing design brand.
- Cleanliness of your graphics and design.
- User Experience for Mobile 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 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.