FAST - Invoice and Purchase Tracker iOS Native Mobile App Design Challenge

Welcome to the “FAST - Invoice and Purchase Tracker Mobile App Design Challenge". This mobile app will be used by Employees and Suppliers to check invoice and purchase status, making their job easier. If any issue happens, employees and suppliers can solve it by submitting a case directly using this mobile app.

Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!

Round 1

Submit your initial designs for checkpoint feedback
Employee and Supplier View
02) My Dashboard

Employee View - Key Interaction
06) Check Claim Status
09) Check Purchase Status
10) Initiate Stop Payment

Supplier View - Key Interaction
11) Supplier - Check Invoice Status
12) Supplier - Check Remittance Details

• As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
• Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your final designs with all checkpoint feedback implemented
Employee and Supplier View
01) Login
02) My Dashboard
03) Navigation
04) Notifications
05) Chat bot

Employee View - Key Interaction
06) Check Claim Status
07) Check Invoice/Payment/Stop Payment Status
08) Check SFDC Case Status
09) Check Purchase Status
10) Initiate Stop Payment

Supplier View - Key Interaction
11) Supplier - Check Invoice Status and Remittance Details
12) Supplier - Check SFDC Case

• As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
• Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
• If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2

• This is a FAST challenge and no extension will be granted. Meeting with the client is already scheduled and can NOT be postponed.
• Provide complete scenarios for both Employees and Supplier from start to finish.

• Create 12 iOS Native Mobile App UI screens.
• Provide a seamless flow to complete user goals.
• Native mobile app.
• Right now the wireframe flow is redundant and we need to simplify it. Provide the best solution and logical journey (fewest taps possible) to simplify the invoice and purchase tracker process with mobile best practices implemented.
• Provide Marvel with clickable hotspot to present your design.

• Our client is a multinational company which produces medical, pharmaceutical and consumer packaged goods. 
• Their employees will use this mobile app to check claim status, invoice/payment/stop payment status, SFDC case status, purchase requisition status, and to initiate stop payment.
• Their suppliers will use this mobile app to check invoice status and remittance details.
• Navigating between the screens should be seamlessly easy and intuitive for both users.

• This app will be used worldwide.
• Non-technical, Employee’s and Supplier’s who need an easy to use mobile app to track invoice and payment status.

• Name: Bob Smith
• Occupation: Employee 
• Goals: Check invoice and purchase status, solve issues if arise. 
• Frustrations: I process lots of invoices that need to be checked and look into payment issues that need to be solved everyday which are not integrated in one system.
• Wants: 
  • Easy to use mobile app to track invoices status and process the payment.
  • A simple way to check claim status, invoice/payment/stop payment status, SFDC case status
  • Intuitive way to initiate stop payment.
• User Story: 
  • S1: Bob login to this app using his credentials
  • S2 and S12: After successfully logging in, he lands on a Dashboard which contains news and alerts from his company. He can read the news if he found it interesting (out of scope for this challenge). Bob also can scroll down or hide alerts and news and focus on a list of Invoices, Claims, and Purchase Requisitions. He also sees a chatbot on the dashboard hovering. From the dashboard, Bob also can trigger “Check Status” and “Stop Payment Request”.
  • S3: Bob clicks on the hamburger menu and sees the action menu available for this app (check wireframe).
  • S4: He taps on the notification icon and checks invoices and claims status that was assigned to him. 
  • S5: When Bob tap “Check Status”, he sees dropdown with following option:
    • “Invoice/Payment” go to S6
    • “SFDC Case” go to S8
    • “Claim” go to S8
    • “Purchase Requisition” go to S9
  • S6: He notices that invoice #12235 to status is pending approval. He either can tap on invoice #12235 from notification and then bring to this screen and need to enter PO number with additional fields to see invoice status. Upon entering, Bob taps submit so he can see invoice status with a link to see remittance details.
  • S7a: He tap view remittance details and notice details about bank number and account is empty.
  • S7b: He then submits the edit and waits for the information to be approved.
  • S8: Bob select “SFDC Case” or “Claim” from the check status dropdown. He enter claim or case number to see the details. Below claim details, Bob taps on a link to see information about call center details (go to S14).
  • S9: Bob select “Purchase Requisition” from the check status dropdown. He enters invoice number and clicks on submit. He then can see the amount paid and date of payment. 
  • S10: Bob then notices the invoice status is now “paid” or “encashed” and wants to stop payment request. He can either input an invoice and check number, or click on the notification to start the process.
  • S11: To stop payment request Bob needs to fill out invoice number, check number, justification request, and additional field (supplier number, paper check number, or supplier contact details).
  • S13: Bob can also ask Chatbot about invoices, claim, and payment status by clicking from hamburger menu or dashboard.
  • S14: This screen show list of contact information and Bob can call the number by tapping the call icon.

• Name: Maria Gills
• Occupation: Supplier 
• Goals: Check invoice status and remittance details
• Frustrations: My invoices are not paid and I need to submit a case to have it solved and no way to easily track them.
• Wants: 
  • Easy to use mobile app to track my invoices status and see if it is paid or not.
  • Informative screen where I can view my remittance details.
  • Intuitive way to submit a claim if I have an issue with my payment.
• User Story:
  • S1: Maria login to this app using her credentials
  • S2 and S12: After successfully logging in, she lands on a dashboard which contains news and alerts about the company working with. She can read the news if she found it interesting (out of scope for this challenge). Maria also can scroll down or hide alerts and news and focus on a list of Invoices, Claims, and Purchase Requisitions. She also sees a chatbot on the dashboard hovering. From the dashboard, Maria also can trigger “Check Status” and “Stop Payment Request”.
  • S3: Maria clicks on the hamburger menu and sees the action menu available for this app (check wireframe).
  • S4: She can tap on the notification icon and check her invoices status.
  • S5: When Maria taps “Check Status”, she sees a dropdown with following option:
    • “Invoice/Payment” then go to S6
    • “SFDC Case” then go to S9
  • S6: She notices that invoice #12235 to status is pending approval. She either can tap on invoice #12235 from notification and then bring to this screen and need to enter PO number with additional fields to see invoice status. Upon entering, Maria tap submit so she can see invoice status with a link to see remittance details.
  • S7a: She tap view remittance details and notice details about bank number and account is empty.
  • S7b: She then submit the edit and wait for the information to be approved.
  • S8: Maria also can ask chatbot about invoices, claim, and payment status by clicking from hamburger menu or from dashboard.
  • S9: Maria selects “SFDC Case” from the check status dropdown. She enters case number to see the details. Upon submitting Maria can see her case status.

• In terms of expectations, we would like to measure the concept against the following in the one to ten scales:
  • Creativity: 8
  • 1: barely new ideas
  • 10: a utopic product with features not proven to be able to be fully implemented

 

• Aesthetics: 9
• 1: low-fidelity design, wireframe or plain sketch
• 10: top-notch finished looking visual design

 

• Exploration: 9
• 1: strictly follow an existing reference or production guideline
• 10: open to alternative workflows/features not listed here that would help the overall application

 

• Branding: 7
• 1: don’t care at all about the branding just functionality
• 10: without a properly branded product there is no success

• Remittance: transfer of money, often by a foreign worker to an individual in their home country.
• Purchase requisition: is a request or instruction to Purchasing to procure a certain quantity of a material or a service so that it is available at a certain point in time.

• Create a simple logo app name for this screen.
• Users will enter their username and password. Users can register and access forgotten password if needed.
• Users can choose language: English, French, and Spain.
• This should be a very straightforward login screen.
• Don’t spend to much time on this, focus on key interaction

• This will be a simple and straightforward Dashboard with hamburger menu navigation and notification on the top
• Screen must include two action buttons: “Check Status” and “Stop Payment Request”. Suppliers can only access “Check Status”.
• User will see News and Alerts about the company.
• When users scroll down or close the news and alert, they can see the summary of invoices, claims, and purchase requisitions they assign for.
• A simple chatbot button will also be available here.

• When users tap on the hamburger menu, users will land on this screen.
• Simple list of navigation:
  • Message Center: View message 
  • Help and Support: Call us, Chat now, FAQs, Submit a Query
  • Profile and Settings: Sign in and security, Account management, and
  • Sign out button

• This screen shows a list of invoices, claims, and purchase requisitions updates that are assigned to employees or created by suppliers. 
• We need to show both notification for employees and suppliers.

• This should be a very straightforward chatbot screen. A standard chatbot with script provided on wireframe is enough.
• Don’t spend to much time on this, focus on key interaction

• To check claim status, users click on “Check Status” from dashboard, then select Claim from dropdown on image S5.
• Users than asked to provide required informations:
  • Claim number
  • Concur Batch Period: from and to
• When users hit submit, they can see claim status. If claim status approved, a link to see contact information appears.

• To check invoice/payment status, users click on “Check Status” from dashboard, then select Invoice/Payment from dropdown on image S5.
• Users than asked to provide required informations:
  • Invoice number
  • PO number
  • Select additional fields (dropdown which contain: suppliers number, amount, and date of submission), and the value of selected fields.
• When users hit submit, they can see invoice status. If invoice status is paid, a link to see remittance details appears.
• When users tap the “See remittance details” link, they will see details on image S7a. If some information is missing from remittance details, users can edit the remittance and submit for approval (image s7b).

• To check SFDC case status, users click on “Check Status” from dashboard, then select SFDC Case from dropdown on image S5.
• Users than asked to provide required informations:
  • Case number
  • Concur Batch Period: from and to
• When users hit submit, they can see case status. If case status approved, a link to see contact information appears.

• To check purchase status, users click on “Check Status” from dashboard, then select Purchase from dropdown on image S5.
• Users than asked to provide required informations:
  • Purchase number
• When users hit submit, they can see purchase status with amount paid and date.

• Users click on “Stop Payment Request” from dashboard (image S4)
• Before initiating stop payment, users can check status by entering invoice and check number. 
• When users tap submit, the system will show the payment status and remark on when it has been done. 
• If the payments is paid/encashed, users can submit to stop the payment by providing required informations:
  • Invoice number
  • Check number
  • Justification for request
  • Select additional fields (dropdown which contain: suppliers number, paper check number, and supplier contact), and the value of selected fields.
• When users hit submit, they can see notification that the request has been submitted.

• To check invoice status, users click on “Check Status” from dashboard, then select Invoice/Payment from dropdown on image S5.
• Users than asked to provide required informations:
  • Invoice number
  • PO number
  • Select additional fields (dropdown which contain: suppliers number, amount, and date of submission), and the value of selected fields.
• When users hit submit, they can see invoice status. If invoice status is paid, a link to see remittance details appears.
• When users tap the “See remittance details” link, they will see details on image S7a. If some information is missing from remittance details, users can edit the remittance and submit for approval (image S7b).

• To check SFDC case status, users click on “Check Status” from dashboard, then select SFDC Case from dropdown on image S5.
• Users than asked to provide required informations:
  • SFDC Case number
• When users hit submit, they can see case status. If case status approved, a link to see contact information appears.

• Invoice and Purchase Tracker - Wireframe.pptx. You can use this wireframe as a sample for CONTENT ONLY in your design. We are looking for creative and new visual design solutions.

• Logo: just use a placeholder for this challenge.
• Color: RED #D51900, Light Grey #F0EFED, Dark Grey #807D79, Black 3D3A36, White #FFFFFF
• Font: Sans-serif font. Font guidance something similar to Helvetica Neue, SF, etc. Remember to declare your font!

• We need you to upload your screens to Marvel App
• Please request for marvel app in the challenge forum
• You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment on this link while you upload)
• You MUST ADD hotspot to your Marvel App prototype so client can navigate and understand the flow.

• Submit JPG/PNG image files based on Challenge submission requirements stated above
• MarvelApp link for review and to provide feedback
• Declaration files document contains the following information:
  • Stock Photos Name and Links from allowed sources
  • Stock Art/Icons Name and Links from allowed sources
  • Fonts Name and Links source from allowed sources