Challenge Summary
Welcome to the Big Blue Expense Mobile App Wireframe Design Challenge
The objective of this Challenge is to create the HTML wireframes for Big Blue Expense Mobile Application based on guidelines stated on challenge details.
For this wireframe challenge, you need focus on delivering top notch features, Ease to Use application also present best practice User Experience for mobile device application.
Round 1
Initial Big Blue Expense Mobile App Wireframe Design for our review
Round 2
Final Big Blue Expense Mobile App Wireframe Design with updated Checkpoint Submission Feedback.
Big Blue Expense Mobile application will be an interface to the existing Lotus Notes application. It will allow IBMers to handle Lotus Notes based expense requests through Mobile device.
Read this link to get familiar with Lotus Notes before you start wireframing your solution: http://en.wikipedia.org/wiki/IBM_Notes
Wireframe Design Requirements:
The idea of this project is that we have a number of existing applications, which happen to run in Lotus Notes, and the innovator wants them to be available on Mobile.
Notes:
- This application will developed under iOS Native and Android Native platforms
- Your solution need use Responsive Design Solution when viewed on Portrait and Landscape view of Mobile device
- Your wireframe submission need able to drill down for all page flow
- Show your wireframe solution on Portrait View. Use this screen size (375px x 663px)
- Feel free suggest any tools/function that can bring good User Experience for Big Blue Expense Mobile Application
Big Blue Expense Mobile App Design Flow
1. Login
- At launching the app, user will authenticate with intranet login on welcome page
- Put IBM Logo placeholder in login page
2. Predefined list of Lotus Notes Applications
- After logged in, at first launch, users will have to select from predefined list of Lotus Notes applications, some samples below:
-- ICS Expense Tracking
-- SWG Expense Pre-Approval
-- STG MD Expense Control Tool
-- STG SG Approval Tool
-- GTS Top Spend Expense DB
- Selection will be set as default, but should be switchable on next run.
3. Main Screen
- Once the user has chosen their expense tracking application, they'll be able to choose the type of request they need approved. There are 18 possible types:
1. Accounts Payable Utility
2. Capital
3. Development Expense
4. Domestic Moving & Living
5. External Consulting/Contracted Services
6. Hiring/Transfer In/Assignee In
7. ICA
8. Journal/DOU
9. Meeting
10. Miscellaneous Expense
11. Purchase Order
12. Real Estate Site Operations (RESO)
13. Recognition Events/Business Meetings
14. SG&A Expense
15. Software License
16. Subscription
17. Travel
18. Telecommunication
Check this User Example Flow for better understanding:
- User in the SWG team, and need approval for some travel type
- User would choose the "SWG Expense Pre-Approval", and then choose "Travel".
- FYI: Each type of request has different fields, depending on the information needed for that type of request.
- There are "Core" fields -- these are ALWAYS present, regardless of the type of request. Refer form (screenshot: core-fields.png)
- Then there are some fields that are specific for each type of request, for this case “Travel” type. You can re-use form sample (screenshot: other-fields.png)
- Suggest us best format for all form inputs
4. Create New Request
- This function need allow user to Create new Request how the flow look?
- Each request type will show/hide specific mandatory/optional fields and its value control, according to Notes db form of selected type.
- Action buttons in opened request: BACK, SUBMIT
5. Edit Requests
- Edit Request will show a list of all requests where user is current approver.
- List entries will be clickable and will open appropriate request.
- Action button in opened request: BACK, APPROVE, REJECT WITH COMMENT.
- We would like the application to notify the user in some way if a pending request is assigned to him.
6. Manage Requests
- This button will show a list of all user requests from the Notes app.
- List entries will be clickable and will open appropriate request.
- Action buttons in opened request: BACK
- We leave the graphical and layout details up to your imagination, but we should keep it intuitive and smooth
- As all request types have quite many fields, once opened/clicked, each new/existing request should be displayed on full page and should contain a floating toolbar with appropriate action buttons.
Target Audience
IBM Employees
Judging Criteria
- User Experience of Big Blue Expense Mobile App
- Completeness and accuracy of the wireframe as defined in the spec requirements.
- How well your wireframes provide a consistent user flow.
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
Wireframes should be built in HTML or Axure. The resulting files are not critical in this Challenge. The most important point is that all the content is listed and the pages are linked together to show page flow.
Keep your source files out from this submission folder.
Source Files
All original source files of the submitted ideas. If you would like to submit notes please include notes.txt file.
Final Fixes
As part of the final fixes phase you may be asked to modify content or user click paths.
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.