Challenge Summary
Welcome to IBM – Smarter Parking Mobile App Design Challenge! Smarter parking system would help IBMers with the challenge of finding a parking space inside office premises.
Round 1
Submit your design for a Checkpoint feedback:
0. Navigation.
1. Dashboard.
2. Map View.
3. Get Directions View.
4. Settings View.
- 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 submit plus any Checkpoint feedback:
0. Navigation.
1. Dashboard.
2. Map View.
3. Get Directions View.
4. Settings View.
5. Feedback View.
6. Login View.
- 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 people find available parking spaces in a large, crowded parking lot or garage.
We are looking for the [topcoder] design Community to help us with planning our new smart parking application!
Supporting Documents:
- Wireframe (wireframe.zip)
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 to create your entire 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.
Required Screens:
- There are two separate users of this app -- the end user and the admin.
- The admin user will need to login.
0. Navigation:
- How does the user navigate this application?
- Include navigation that you think fits with this application
- Focus on the priority items and how things should be sized
1. Dashboard
Please refer to dashboard__admin_.html & dashboard__end_user_.html
- When either user opens the app, they should see information about their last-selected city and building.
- The user can change what building they are interested in -- they'll enter a city name, and then the IBM locations in that city will show up, and they can pick one.
- The "City" and "Building" fields are auto-suggest input fields. A list of matching cities/buildings will be displayed as the user types in the field.
- The user can see building information and call building manager if they click on the phone number as shown in wireframe.
- The information users can see is either "Red" (no spaces available), "Yellow" (a few spaces available), or "Green" (lots of spaces available).
- There will be 2 or 3 buttons at the bottom depending on user:
-- Save Location. (for both users)
-- Get Directions. (for both users)
-- Change Availability (for admin user only):
--- Admin user can manage indicators as shown in manage_indicators__admin_.html
- Clicking on “Save Location” will show a modal (popup).
2. Map View:
Please refer to map__admin_.html & map__end_user_.html
- You can access this view from navigation.
- You can use google maps here.
- Each location icon has a color code that represents their parking space availability:
-- Green: signifies that the building has lots of spaces available
-- Yellow: signifies that the building has a few spaces available.
-- Red: signifies that the building has no space available.
- Clicking on an icon will display the building's detailed information
- clicking on search icon will display search options.
3. Get Directions View:
Please refer to get_directions__admin_.html & get_directions__end_user_.html
- You can access this view from navigation and from clicking on “Get Directions” button in dashboard.
- You can use google maps here.
- This view will give directions to user.
4. Settings View:
Please refer to settings_-_location_list__admin_.html & settings_-_location_list__end_user_.html
- You can access this view from navigation.
- From this view the user will see a list of locations.
- User can:
-- Add new location.
-- Edit location.
-- Delete location.
- For Add Location:
-- The "City" and "Building" fields are autosuggested input fields. A list of matching cities/buildings will be displayed as the user types in the field.
-- If user selects to be notified then he has to fill notification options:
--- 
Notification start time.
--- Notification end time.
--- Repeat notification.
- For Edit Location:
-- If user selects to be notified then he has to fill notification options:
--- 
Notification start time.
--- Notification end time.
--- Repeat notification.
- Notice Save and Cancel buttons at the top.
5. Feedback View:
Please refer to feedback__admin_.html & feedback__end_user_.html
- You can access this view from navigation.
- Here we will have an input form for the user to write his feedback or report a bug.
- Notice submit button at the top.
6. Login View:
Please refer to admin_login.html
- You can access this view from navigation.
- Admin User should be able to see App logo as text based.
- Admin User should be able to enter his Intranet ID and password.
- Please include validation error design for login.
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.
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.