Challenge Summary
Welcome to "IBM - Borrow Me Mobile Apps Design Challenge". This challenge purpose is to create the look and feel for our new mobile application called "Borrow Me" where the application user will be able to get some help from other users when they want to borrow items/things for their needs. At the end of this challenge, we are looking for the best UI/UX design for the application. Join us NOW!!
Round 1
00. Navigation Solution
01. Splash/Login Screen
02. Confirm Your Location Screen
03. Dashboard Screen
04. New "Borrow" Request Screen
Round 2
00. Navigation Solution
01. Splash/Login Screen
02. Confirm Your Location Screen
03. Dashboard Screen
04. New "Borrow" Request Screen
05. View "Borrow" Request Screen
06. Alert Screen
07. Settings Screen
In this challenge, we need your help to create storyboard for our "Borrow Me" application. This new application purpose is to let apps user get some help from other user that use the same apps when they need to borrow items/things for some urgent activity/purpose. Check below for more details!
User Scenario
- Fred is a front end developer at IBM branch office in New York and currently develop new application for his office. He needs to present his apps tomorrow first time in the morning in the regular meeting with his colleagues.
- The application is almost finished and just needs to get tested in various of real mobile devices.
- Fred already tested his apps in his own devices, but he still needs to test it again in several devices to ensure his apps really suitable and ready to launch. Unfortunately, the devices that are usually being used to test the apps are broken and need to get repaired.
- Fred asks several of his colleagues whether they have similar devices he needs to test the apps but unfortunately none of them have it.
- Fred then hears about this "Borrow Me" application, internal app, and uses it to get help from all his IBM colleagues regarding his problem.
- After logging in using his credentials in the app and confirming his primary work location, Fred then puts the borrow request on the app.
- In a short time, Fred receives email from IBM staff from another branch office, near to his location and only few blocks away, that the device(s) are available there and can be borrowed.
- Fred goes to the location, borrows the devices he needed, goes back to his office, tests his apps, and when everyting is done, returns the borrowed item(s) to the owner(s).
- Fred now really confidence to face the meeting tomorrow.
Devices:
Apple IOS 7+ iphones
NOTE : The app is intended for a phone form-factor, for both Android and iOS. (We may later develop a tablet version, but we want to build the phone version first)
Attachment :
- Wireframes.zip, Please do not change the basic flow of the screens -- the wireframes represent how we want the app to work.
- client_logo.zip, contains set of client logo that needs to be put in the screens as sponsor (Note: you only need to use the IBM logo).
- color-palette.zip, references for your starting point, feel free to expand the color choices.
Screen Requirements :
00. Navigation Solution
- Provides us a clear navigation concept for this application.
- Please design a navigation solution that would be easy/engaging for the application user!
01. Splash/Login Screen
Wireframes page 1.
- Create simple logo for this apps.
- Once user activates the application, there should be a splash screen to welcome the app user.
- Splash screen needs to be interesting, have some "company" feeling yet still fun to be use. it also needs a loading bar or similar design to notify user that the app is loading.
- In the login page, app user needs to enter their IBM account first to be able use the application properly. We also needs to make sure the client logo appear somewhere in this page. Note that the terminology to use for login is "Intranet ID" and "password", and the button is "Log in". Do not include a "Remember Me" checkbox or "forgot password" -- these are not supported.
- Provide us with error login scenario.
- Explore how this screen needs to be create!
02. Confirm Your Location Screen
Wireframes page 1.
- Upon successfull login, user needs to confirm their working location first within the apps.
- By default, the app will check employee database and show recorded location address for user primary work location. If the location is correct, user should choose yes.
- If user chooses No, they will need to enter their working location manually, user will need to enter their city and then choose in which IBM office they are currently working.
- After confirmed their working location, user also needs to confirm whether they want to receive alerts (borrow requests) from other user or not. If they choose yes, they will receive alerts/notification everytime other user near their locations needs help/borrow something.
- Confirm location and Alerts Notification can be managed via settings screen.
- Explore how this screen needs to be create!
03. Dashboard Screen
Wireframe Page 2.
- This screen will show all user activity summary in the application.
- There will be a big button to create new "borrow" request, it will bring the user to new screen to input the detail request.
- User will be able see their active request in this screen, what kind of items/things needs to be borrow, due date, how far the user willing to travel to get the item, etc.
- User can view, edit or delete their request from the list. If user receive the items from other user, they can/need marked the items as received (show us some graphics that able to presented this state) and after return the items user will be able to delete their borrow request. Apps also will automatically delete any borrow request when due date is passed.
- When someone loans an item, the app will show a pop-up asking whether the user wants to send a BlueThx (internal thank you app) to the person who loaned them the item?
- The BlueThx message would say "Thank you for loaning me <item name>". We would not give this person an opportunity to edit the text of the BlueThx.
- What can be presented in this screen again? list of active borrow request from other user? Items received list? etc?
- Explore how this screen needs to be create!
04. New "Borrow" Request Screen
Wireframe Page 3.
- This screen will appear when the user wants to create new "borrow" request in the apps.
- Between create new borrow request or edit existing request, this screen will be used as the layout, only in Edit, the title of this screen will change from "New Request" to "Edit Request".
- Provide a form to enter "title", "location", "willing to travel?", "Need by", "Needed Until", and "Additional Notes".
- When user chooses "Yes" for willing to travel, the app will ask how long of a distance that user is willing to take to get the items.
- Needs preview button to show how the post will looks like before user submits the new request.
- Explore how this screen needs to be create!
05. View "Borrow" Request Screen
Wireframe Page 4.
- This screen will appear when user clicks "preview" button from new request screen or if other user(s) saw the request from alert/notification.
- This screen will show detailed "borrow" request from user that needs help on some items/things.
- Provide the same content element as shown in the wireframes.
- Highlight the status and contact section!
- Status "Open" means the user still needs the help, "Item Received" means user already gets the borrowed item, while "Request Closed" means the request is solved or expired (when a request is closed, it gets deleted from the views). If any user follows a notification and the item has been received, there will be a message that says "This request has been filled". If a closed, there will be a message says "This request has been closed." (and maybe some kind of visual indicator, such as an icon, or a strikethru)
- Contact can be various, from email, chat apps id, phone number, etc.
- User that create this borrow request will be able to update the request, there should be 3 states of updates that user can apply to the list, "Open", "Item Received", "Item Returned/Close". Other user will only able to view read only list and not able to update it.
06. Alert Screen
No Wireframe References.
- In the entire screens of this app, user will needs to have some layout to notify them if there is new "borrow" request appear. Similar like new notification in fb or a popup?
- Also, there should be a new screen for seeing all of the active "borrow" request in the apps.
- Explore how this screen needs to be created!
07. Settings Screen
Wireframe Page 5.
- User will be able to search active "borrow" requests from this screen.
- User will be able to set whether they want to receive alerts/notification from other users or not.
- Explore how this screen needs to be created!
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
Design Guidelines
- Font and colors : Open to designers, but please stick to Helvetica Neue or similar fonts, and colors from the attached color palette, or similar colors.
- Orientation : Portrait.
- For iOS use 640 x 1136 px resolution (iPhone 5)
- Make sure create all your graphic in 'vector' format (buttons, icons, etc), so when resize for bigger versions, graphic still look sharp!
Design Considerations
- The application should be easy, fun and ease to use.
- Think simple but effective solutions! Have fun creating this - let us know how you think it should work!
Target Audience
- Internal Employees from Client Company.
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 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.