Challenge Summary
Welcome to the IBM - Big Blue Expense Mobile App Storyboard Design Challenge
We just completed Big Blue Expense Mobile App wireframe in previous IBM Challenge. This time we need your help create the storyboard design to leverage User Interface and User Experience of Big Blue Expense Mobile Application.
When you designing the application, you must stick with IBM Design Language.
Round 1
Your submitted checkpoint design solution for client review.
1. Login
2. First Launch
3. SubSequences Launches
4. Create New Request
Notes : Any comments about your solutions, make sure you capture correct flow for every page!
Round 2
Final pages of design with updated solution based on client checkpoint feedback
1. Login
2. First Launch
3. SubSequences Launches
4. Create New Request
5. Request Awaiting for my Approval
6. Manage Requests
Notes : Any comments about your solutions, make sure you capture correct flow for every page!
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.
File Downloadables
wireframe.zip - Wireframe
IBM_ciolab_ifund-graphics.ai - Client’s Logos
Design Guidelines
- Click around IBM Design Language to get familiar with expected design brand!
-- Layout
-- Typography
-- Iconography
-- Color
-- Interaction
-- App Inspiration
- You must submit iPhone 6 Portrait Screen Size for this challenge submission: 750px x 1134px. Think how your design works within smaller mobile device screen with responsive design solution
IMPORTANT!
- Please reference the provided wireframe as starting guidelines for your submission! You’re encouraged to submit better Visual Interface.
- You need capture all page flows in your storyboard design.
- This application will build as an iOS native application. Taking into account that it should allow for swipe, accelerometer, GPS, keyboard and all the advantages that comes with the performance of native apps.
- We want this application to capture CORPORATE, MODERN & Out of The Box look!
- Use shape format on your .psd so we not lose quality when resize into Standard version.
- DO NOT just color existing wireframe, we need you suggest ideas on layout and functionality within the application. If you just follow existing wireframe every submission will look same.
Big Blue Expense Mobile App Submission Requirements
1. Login
- Create login page that showing these fields:
-- Intranet ID
-- Password
- How validation error look?
- Add IBM Logo in this login page (IBM_ciolab_ifund-graphics.ai).
- Add page title “Big Blue Expense Mobile App”
- Design compelling login page that reflect application purpose
2. First Launch
- User is asked to select a Lotus Notes application when the app is launched for the first time.
- Create icon design that follow IBM Iconography style
- Icon design need reflected each page purpose.
- List of Application need displayed:
-- ICS (IBM Collaboration Solutions) Expense Tracking
-- SWG (Software Group) Expense Pre-Approval
-- STG (Systems and Technology Group) Expense Control Tool
-- STG (Systems and Technology Group) Approval Tool
-- GTS (Global Technology Service) Top Spend Expense Database
- Create confirmation message when user select the application
- Selection will be set as default, but should be switchable on next run.
3. SubSequences Launches
- This is the home page that shows the number of new requests that are have pending approval status.
- The mobile application remembers application that the user selected on first launch. Clicking on the application name on top of page will allow the users to select another application.
- How selection to change to other application works?
- Main Action buttons need displayed in homepage are:
-- Create New Request
-- Request Awaiting My Approval (Show number indicators)
-- My Request
-- Logout
4. Create New Request
- Think about how user access the main navigation?
- Once the user chosen their Lotus Notes application, they'll be able to choose the type of request they need approved. There are 18 possible request 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 (IBM Content Analytics)
8. Journal/DOU (Document of Understanding)
9. Meeting
10. Miscellaneous Expense
11. Purchase Order
12. Real Estate Site Operations (RESO)
13. Recognition Events/Business Meetings
14. SG&A (Software Grant Agreement) Expense
15. Software License
16. Subscription
17. Travel
18. Telecommunication
- After select request type, user see forms field with progress steps.
- FYI: Each type of request has different fields, depending on the information needed for that type of request. So, you need make sure your progress steps support some variations sections need displayed
- Create separate screen show each steps look.
- Create different completed/incomplete state style in progress steps
- How each forms input designed?
- Do some research for latest/up to date form fields style and function (input, dropdown, textarea, checkboxes, radio, multiselect, table, datepicker etc)
- Show main action buttons in the bottom of page.
- How “Save as Draft” flow works for each steps?
- Review Request displayed in page before user Submit the request
- Show confirmation message before user submit the form.
- After submitted, there’s information of request ID.
5. Request Awaiting for my Approval
- This screen contain of pending request that awaiting user approval
- New requests that are pending approval from the user are highlighted in page
- How you show design for NEW Request button?
- Click request row need show Request Details
- in Request Details page, user see option for Reject with Comment and Approve buttons
- Show confirmation message when user clicked both buttons
6. Manage Requests
- This page show a list of all user requests.
- Create New Request button need displayed in page
- There is an option to filter the request.
- Show different status for each Request (“Draft”, “Open”, “Approved”, “Rejected”)
- We need way to show action options when select on each request on the Request list
- Create separated screen for each details page.
- FYI for Draft status details. There’s Cancel button to cancel the request.
User Example Flow for better understanding of Application Flow:
- User logged in.
- User in the SWG team, and need approval for some travel type.
- User would choose the "SWG Expense Pre-Approval", and then choose "Travel".
- 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.
- Then there are some fields that are specific for each type of request, for this case “Travel” type.
- Submit the Request.
- Administrator check the Manage Request page and do approval or rejection on proposed request.
Target Audience
- IBM Employees
Judging Criteria
- How well you create Big Blue Expense Mobile Mobile App and keep things consistent with the existing design brand.
- Cleanliness of your graphics and design.
- User Experience for 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 image files based on Challenge submission requirements stated above.
Source Files
All source files of all graphics created in either Adobe Photoshop or Illustrator and saved as editable.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors.
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.