Challenge Summary
Welcome to "IBM - Reading Together Mobile Design Challenge". Reading together application is a mobile apps that give IBMers ability to find books of interest and borrow them from each other. This challenge purpose is to create mobile storyboard for the "Reading Together" application. Wireframe contains user flow and basic layout is provided for your references. At the end of this challenge, we are looking for the best UI/UX for the application. Big prizes is available in this challenge. Join us NOW!!
Round 1
00. Navigation Solution
01. Login Screen
02. Dashboard Screen
03. My Borrowing List Screens
04. Borrow Books (Titles) Screen
05. Book Details Screen
Round 2
00. Navigation Solution
01. Login Screen
02. Dashboard Screen
03. My Borrowing List Screens
04. Borrow Books (Titles) Screen
05. Book Details Screen
06. Add Boook Screen
07. Lend Book Screen
08. Alerts (Lent Books) Screen
This challenge purpose is to create the best UI/UX for our new "Reading Together" application, this application will be use by IBM employee to lend or borrow books from their colleagues. Check more details below for more information regarding the screen that requires to be create in this challenge!
Screen Requirements :
We would like you to suggest features/screens that this app should incorporate
00. Navigation Solution
- Provides us a clear navigation concept for this application.
- Please design a navigation solution that would be easy/engaging for a the application user!
01. Login Screen
- Wireframes Reference Login Page.
- By default, this screen will appear when user open the application.
- Provide us error screen scenario when user enter wrong credential to login to the apps.
- Create simple logo for the apps.
- Think and explore how this screen should be create for the apps!!
02. Dashboard Screen
- Wireframes Reference Dashboard Page.
- Dashboard will show summary of information regarding user activity related to books borrow/lend activity.
- Top section will show user summary activity.
- Bottom section of this page will show main menu of the apps.
- Click/tap magnifying glass will open search section, provide design layout for Members and Advanced search.
- Feel free to add your creativity here to make the UI/UX much more better that now.
- Think and explore how this screen should be create for the apps!!
03. My Borrowing List Screens
- Wireframes Reference My Borrowing List Page.
- There are two tabs here, "Currently Borrowing" and "Borrowing History".
- "Currently Borrowing (9)" shows list of books that app user borrow from other IBMers.
- "Borrowing History" shows list of books that app user ever borrow from other IBMers. The screen will show log information everytime user borrow books.
- Think and explore how this screen should be create for the apps!!
04. Borrow Books (Titles) Screen
- Wireframes Reference Borrow Books Page -> Titles tab.
- This screen will show all books available and can be borrowed.
- Thumbnails of the books, title, author needs to be provide in each list, but if you want to add more information, feel free to add it.
- Think and explore how this screen should be create for the apps!!
05. Book Details Screen
- Wireframes Reference Book Details Page.
- Once user found some interesting books that he/she wants to borrow, app user can click/tap the list and will be redirected to books detail screen.
- All information regarding the books, from books information until lenders history can be found from this screen.
- Think and explore how this screen should be create for the apps!!
06. Add Boook Screen
- Wireframes Reference Add Book Page.
- User can add new books if they want to let their books be borrowed by other IBMers.
- Form of this screen will be very simple, check wireframe for details.
- Think and explore how this screen should be create for the apps!!
07. Lend Book Screen
- Wireframes Reference Lend Book Page.
- This screen purpose is to marked the books if some IBMers want to lend the available books from the book owner.
- Book owner will be able to marked some information like borrower personal details and how long the borrow duration should be.
- Think and explore how this screen should be create for the apps!!
08. Alerts (Lent Books) Screen
- Wireframes Reference Alerts Page -> Lent Books(3) tab.
- This screen will show all upcoming borrow and lend deadline that will happen soon.
- Think and explore how this screen should be create for the apps!!
Devices:
Apple IOS 7+ iphones
NOTE : The app is intended for a phone form-factor, for iOS. (We may later develop a tablet version, but we want to build the phone version first)
Attachment :
- wf.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 (use IBM logo only).
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
- IBM Style Guidelines : http://www.ibm.com/design/language/index.shtml
- 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 (IBMers).
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.