Challenge Summary
Welcome to IBM - SiBM IBM(at)HD Mobile App Design Challenge!
The goal of this challenge is to design a mobile app where a user can select his country, location and region and find available help desk numbers immediately. The user will be presented with a list of help desk numbers (both numbers from within IBM offices and from outside the office). The user is able to select the required number and make a call. Users can also send the selected number to desired mobile numbers.
Round 1
Submit your design for a Checkpoint feedback:
0. Navigation.
1. Login Page.
2. Main Page.
3. Result Page.
- If you have time - please 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).
Round 2
Final design plus any Checkpoint feedback:
0. Navigation.
1. Login Page.
2. Main Page.
3. Result Page.
4. Logo and App Launch Icon.
- If you have time - please 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 help users (IBMers) to find a list of help desk numbers based on their country, location and region, user then can make a direct call or send the selected help desk number to a different mobile number of one of his colleagues.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Branding 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.
Accessibility:
- 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.
- Accessibility checklist.
Design Goals:
- How should this application be designed?
- How quickly the user can find what he wants? What should the priority features be?
- How quickly can the user understand and interact with the app?
- The application should be easy to use.
- Think simple but effective solutions! Have fun creating this - let us know how you think it should work!
Target devices:
- Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px.
Make sure you create graphical elements in “vector” format, so when resize for retina versions, graphic still look sharp! It will be great if you can also provide the landscape version.
User Story:
- Joshua is an IBMer.
- Joshua opens the application and log in using his IBM intranet ID and password.
- In Main Page Joshua will select his Geo Location, Country and City and click submit button.
- This will take Joshua to Results page where he will have a list of numbers for HR, IT and other numbers.
- Joshua will be able to Call directly using his mobile, Message the number to a colleague, Copy the number to save it in another app or Save it on his mobile.
Required Screens:
0. Navigation:
- How does the user navigate this application?
- Include navigation that you think fits with this application.
1. Login Page:
- Login Screen with IBM@HD at the top.
- To login please provide:
-- IBM Intranet ID
-- Password.
- "Remember me" to save the intranet ID.
- Please show error validation style.
2. Main Page:
- IBM@HD at the top.
- Logout and Welcome with Username is also needed at the top.
- From this view user will be able to select Geo, Country and City.
- Select Geo - List of region should appear.
- Select Country - Depending on the above selected Geo, country should list
- Select City - Depending on above selected Country, City should list.
- Submit button – When clicked the user will be redirected to Result page.
- Reset button -- to allow the user to remove the existing location settings.
- If location services are enabled, then these values are filled out by default.
- If no location services, then re-use the values entered the previous time, as the default.
- For this challenge, let's run it with fake data:
-- GEO:
# North America
# Asia.
-- COUNTRY:
# For North America: USA, Mexico, Canada
# For Asia: China, Japan, India
-- CITY:
# Just do India: Bangalore, Pune, New Delhi, Calcutta, Chennai.
- From this page we need a way to access a list of useful IBM URLs -- this might be a separate tab, or somewhere else on this screen; probably around 10-12 URLs, with headings explaining what they are (or maybe the headings are the links, etc).
3. Result Page:
- IBM@HD at the top.
- Logout and Welcome with Username is also needed at the top.
- The Result Page should contain list of number, which appropriate to their queries.
- Show these headings:
-- HR:
-- IT:
-- Other numbers:
- It should have two numbers for each heading - one regular number (to call from Mobile), and one number to call from within the IBM office (for example, T/L 23391)
- The page should contain 4 icons for each number - CALL, MESSAGE, COPY and SAVE.
- CALL - by clicking on this, to call the number from mobile using your mobile contact app.
- MESSAGE - by clicking on this, view the number details in text message of the phone and the user can add the sender.
- COPY - copy the number to re-use in another app.
- SAVE - by clicking on this, to save the contact on your mobile.
4. Logo and App Launch Icon:
- Please provide us with logo concept and app launch icon.
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
Target Users:
- The target audience for this application will be IBM employees.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
- Your design should possible to build and make sense as a 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 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.