Challenge Summary
Welcome to the IBM - Mood Marbles Mobile Design Concepts Challenge. This challenge is focused on creating fun design concepts/visual solutions for a mobile application.
The goal of Mood Marbles is to gather overall team sentiment in projects (primarily for developers). Team members can choose a marble color to depict how they feel about the status of the project each day. For example, green = great, yellow = ok, red = not good/urgent. They can also input a comment after selecting a color to indicate a call-to-action to move towards a “green” status. The average color of the whole team and individual members can be viewed for any given day, week, or month to view the trend of team members’ sentiments.
We are looking for design concepts on how the Mood Marbles mobile application could work. What should the user see and experience when using the application? How can the "Mood Marble" experience be fun and engaging?
Round 1
Submit your design for a Checkpoint feedback:
1. Login or Signup.
2. Main Dashboard (PM and Team Member views) = priority!
3. Team Dashboard.
- Provide us with a click map for your design along with all priority screens.
- Readme.jpg: Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Final design plus any Checkpoint feedback:
1. Login or Signup.
2. Main Dashboard (PM and Team Member view).
3. Team Dashboard.
4. Project Dashboard.
5. Other.
- Provide us with a click map for your design.
- Readme.jpg: Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Details
The goal of this challenge is to design the Mood Marble; Mood Marble is a tool that lets IBMers choose a marble color to depict how they feel about the status of the projects each day. For example, green = great, yellow = ok, red = not good/urgent. They can also input a comment after selecting a color to indicate a call-to-action to move towards a “green” status.
Design 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
- 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!
Accessiblity
- Make sure when you are planning your concepts you are also designing for accessibility
- Since this application will be very visual (colors) - think about color blindness and the need for contrast/labels
- You will notice the color accessibility suggestions within the IBM Design Language
- Accesibility checklist
Screen Size
- Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px.
Application Users
Below are the two main users of the app and a list of functions they can perform:
1) Team Admin/Project Manager:
- Create and name teams
- Invite new team members (email/search).
- Accept or reject applications to join a team or project.
- Delete/remove team members.
- Send alerts to remind team members to update their status - use the mood marble!
- Create and manage multiple teams.
- View status of overall team and individual members.
2) Team Member:
- Accept invitation to join team.
- Request joining an existing team.
- Mark specific team as default team.
- Suggest adding new team member to admin.
- Update status by selecting marble color and input comments.
- Leave a project or team.
- Can be part of multiple projects and teams.
- View personal status and overall team status.
Notes: Team admin/PM and team members can view trend or average temperature of selected periods: day, week, and month. Make sure to capture this in your concepts!
Suggested Screens
The following are suggested screens from us, please feel free to add other screens and features that will work with the main goal of the application.
1 - Login or Signup
- Signup and login with email or username.
- Password.
- Submit.
2 - Main Dashboard (PM and Team Member view) (priority screen)
- Marble interaction - how does this work? How is it engaging?
- Overview of statuses.
- Overview of stentiment (how do you show this...?)
- Can filter by project or team.
3 - Team Dashboard (priority screen)
- View overall team and individual members’ statuses.
- Team admin privilege: Send alerts to remind team members to update status.
4 - Project Dashboard
- View overall status of project.
- View status of individual team members within project.
- View Project sentiment (how do you show this...?)
5 - Other items
App icon
- Show us what the App icon could look like - what is your concept for this?
Appliation loading screen
- Show us what the application loading screen could look like - what is your concept for this?
Notes:
- The suggested method of visualizing statuses is to use green, yellow, and red marbles. However, feel free to customize it if you think there is a better way.
- Keep in mind that users should be able to view statuses by day, week, and month.
- Realize that a culmination of red/yellow marbles might show orange sentiment etc - take this into consideration in your concepts!
- Please show differences (if any) in screen views between a team admin and a team member.
Important
- Keep things consistent. This means all graphic styles should work together.
- All graphics should have a similar feel and general aesthetic appearance.
- The application should be designed for iOS and use the IBM design language!
Target Users
The target audience for this application will be technical IBM users:
- Team Admin/Project Manager.
- Team Member.
Judging Criteria
- Cleanliness of your graphics and design.
- User Experience of Mood Marbles Mobile.
- Did you use the IBM design language?
- Creativity and ease-of-use is key to the success as it must be engaging to the employee.
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 original 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.