Challenge Summary
Welcome to "IBM - BlueRideShare Graphics and Mobile Screen Redesign Challenge". In this challenge, we need topcoder community help to redesign our BlueRideShare mobile application to meet our latest guideline standards. Specifically, we require graphical assets to make the app look nicer. In addition, at the end of this challenge, we are looking for some UI improvements to the app. Join NOW!!
Round 1
- Initial design for client review :
01. Splash Screen
02. Homepage Screen
03. Search Office Result Screen
04. Profile Setup Screen
05. BlueRideShare Listing Screen
06. Launcher icon
Round 2
- All requirements as stated in challenge details with client feedback applied :
01. Splash Screen
02. Homepage Screen
03. Search Office Result Screen
04. Profile Setup Screen
05. BlueRideShare Listing Screen
06. Launcher icon
Overview
For this challenge, we want to redesign our BlueRideShare application to meet the latest design standards in our company. The BlueRideShare apps gives our employee an ability to share or join a ride with other co-worker in the same office. Please read more details below.
User Story :
1. John just being transferred to IBM regional office in SF.
2. John didn't know anything about SF city road and at the same time wants to start networking/ start relationship with his new co-worker in the new office.
3. John was being told that there is an application where he can share a ride with his co-worker to get into the office. The apps name called BlueRideShare.
4. John installed the apps in his mobile and activated it.
5. John searching for his office in the apps.
6. After found his office on the list, he then must create his rideshare profile status so everyone can knows/identify him.
7. After all set, He then can choose from the available BlueRideShare list which co-worker that offers to sharing a ride to his office and near to his place.
6. John choose one of the nearest co-worker from his place, contacting the co-worker via email, phone or message and then hurry to change his clothes because the co-worker already on the way to his place.
Supporting Documents:
- Reference Files.
Screen Requirements
01. Splash Screen
- Reference splash screen.png
- By default, the screen will appear everytime user activate the apps.
- Create a clear branding awareness in this screen. Add IBM logo and create simple logo for this app
- No Progress bar - it will be done programatically
- Think the best UI/UX concepts for this screen.
02. Homepage Screen
- Reference main activity.png
- This screen will become a dashbooard/homepage screen in the apps.
- User can start the interaction with apps from this screen.
- User will be asked to search for his work location (city).
- A more interesting background is desired. A car pooling/road/travel themed design background/and or banner would be great.
03. Search Office Result Screen
- Reference office activity.PNG
- After user submit his office query, the apps will returned a result and show the possible search result regarding all IBM regional office in the city.
- The office icon in the listing is a place holder icon and needs to be replaced, with a generic icon that represents an IBM workplace This icon is roughly 2x larger than the standard Android action bar icon size for the different screen densities.
04. Profile Setup Screen
- Reference profile setup.PNG
- After confirmed the office where user work, the next step is to validate the employee.
- Users need to create their own profile in the app for validation status.
- This profile status can be use for other apps when user wants to take a ride with them, and at the same time can be useful if user wants to give a ride to other apps user.
- Think the best UI/UX concepts for this screen.
05. BlueRideShare Listing Screen
- Reference rideshare listings activity.PNG
- New Rideshare Icon that doubles as a favorite toggle button
- The rideshare icon that is in all the entries of the list is clickable, and it will act as a way to favorite the rideshare.
- Need a slightly different icon that suggests that the entry is a rideshare and that if you press it, it will add the rideshare to your favorites to reference later on.
- Reference rideshare icon folder
- The icon's size needs to meet Android's screen density requirements
- New map marker icons:
- Currently we are using the default google map makers and it’s hard to tell what they represent without previous knowledge.
- Currently red = the IBM location, green = home location, blue = rideshare meet location.
- Need to have a map marker with an icon inside of it that represents what type of marker it is (here you can use the included graphics for the three different markers, since the icons are already used in other parts of the app. We think It would be more intuitive if the icons in the marker pins are the same as the icons on the other parts of the app.. so we included them in the reference files).
- All map markers need to support the different screen densities of android as well. And need to be in PNG format. These dimensions are specific to Google Map's for Android.
06. Launcher icon
- We need to create a better launcher icon for the app.. Something that suggests this is an IBM car pooling app!
- Create your launcher icon in PNG format for the different Android Launcher Icon screen density format (36x36, 48x48, 72x72, 96x96, 144x144).
- Create your launcher icon preview in 120x120px and 180x180px
Notes:
- Target Platform: Android
- Resolution: Android's mdpi, hdpi, xhdpi, xxhdpi screen densities need to be supported for all graphical assets (create it as vector).
- Feel free to suggest any tools/function that can bring good User Experience for this Mobile Application.
Design Guidelines
- Reference the Android Cheatsheet for Graphic Designers for Android's graphic requirements: http://petrnohejl.github.io/Android-Cheatsheet-For-Graphic-Designers/
- Click around IBM Design Language to get familiar with expected design brand!
* 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/iconography.shtml
* Interaction: http://www.ibm.com/design/language/framework/visual/color.shtml
* App Inspiration: http://www.ibm.com/design/language/inspiration.shtml
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Your design should possible to build and make sense as an 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 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.
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.