Challenge Summary
Welcome to the Hestia B2B Account Payable Redesign Contest. The goal of this contest is to update the provided screens/existing designs based on the provided requirements.
We have a Fast Milestone - please note the time.
Round 1
Your submitted design solution for a review.
Updated Account Payable flow(s)
Notes.jpg: Any comments about your design for the Client
NUMBER YOUR SCREENS (01, 02, 03 etc.) - its easier to review with the client.
Round 2
Final All requested items
Final Updated Account Payable flow(s)
Notes.jpg: Any comments about your design for the Client
NUMBER YOUR SCREENS (01, 02, 03 etc.) - its easier to review with the client.
Contest Details
Hestia is always looking to give their customers a better user experience by providing new and up-to-date features in their B2B Web Application. For this contest we would like you to redesign the "Account Payable" screen by adding/updating features.
Account Payable Design Requirements
Please click around at fol-prototype-3.2/account_payable.html to get familiar with the Account Payable page.
Important
- Match the content like the provided screenshots.
- When you create new graphic elements, please refer to the GUI Kit. You can download Hestia GUI KIT from Hestia Contest Resource page
- Watch typos for any text in pages.
Design Updates
We are adding new functionality to the Account Payable screen. Customers have been asking for new features so we would like you to design these new items to help improve the overall user experience of Account Payable. Note: We are not removing any current functionality - just adding new features to this page.
Concepts:
In the current design a customer see their "Main Account" (Yellow bar) and "jobs" that make up/belong to their Main Account (the line items below the yellow bar). We are adding additional detail to the "Jobs" and implementing an open/close details feature. Review "payable_2.jpg" for suggested edits.
1) The Jobs data table/line items needs to be able to expand/collapse. Please re-use existing "collapse" and "expand" state from provided Hestia GUI Kit
2) The information in the purple box will need to be presented as a modal window (quick snapshot of information). The information changes when a different Job name is clicked (remove the 4 line items marked in red). Please re-use existing Modal Windows design from GUI Kit
3) We need a way to display the order information for a Job - when the job is expanded
The Information that needs to be captured is: (see payable_1.jpg for an example)
- Invoice#: (1714720)
- Inv Date: (06/15/2011)
- Cust P/O: (57401)
- Inv Amount: ($17.00)
4) Remove the search bar, shop all categories, cart, my list from this page
5) We need a design on how to signify to the user that their invoices have "proof of delivery" (this can be a flag or icon, when click it will open a pdf) (see POD.pdf)
- Please create new icon to represent "proof of delivery".
- (See Proof2.jpg) This placement is a suggestion - there could be better solutions; this is at the invoice line item level
6) We need a design that signifies that ALL invoices in a Job, have "proof of delivery"
- (See POD.jpg) This placement is a suggestion - this alert is at the Job Name level
7) We need to show that a credit memo is available on a invoice, an invoice can have multiple credit memos, this would be a generated pdf. (see credit memo.pdf)
- There needs to be an icon in the results table, it would be next to the line item when a Job Name level expands
8). We need a user experience flow showing how the user can use a billing system to pay for one or multiple Jobs. Probably need a button to start the flow (look at bill pay storyboards for insight: Pay-Bill-Graphic-Source.zip)
- This process needs to happen on this page, The Bill Pay in My Accounts is for making just lump sum payments, this process is to make specific payments on invoices, the checkboxes are to be used to select which Job or Invoice should be paid
- We're thinking a modal window process flow might work here.
9). We need a flow showing how the user sets up a payment account options (for future payments). This could link to the payment options feature, or possibly make a modal (look at Payment options prototype for insight: fol-prototype-my-account/payment_settings.html)
- This can link to the Payment Options in My Accounts, but we need a button or link that will direct the user to it; if we leave the Accounts Payable Page
- Imagine if this was your first time on the Account Payable screen - how would you set up payments?
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.
- Please reference the provided GUI PSD Kit to help make your design consistent across the application.
Target User
- Potential Customer
- Current Customer
Judging Criteria
- How well you update & create the Account Payable graphics and keep things consistent with the current site design.
- Cleanliness of your graphics and design
- User Experience
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
All Requested Contest Submission Requirements stated above.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD 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.
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.