Hestia B2B Make A Payment Design Contest

Welcome to the Hestia B2B "Make A Payment" Design Contest. The goal of this contest is to create the Hestia B2B Make A Payment pages and click-paths based on the provided Powerpoint and Contest Description.

The Milestone is set for 8am Thursday as we have a presentation of your designs that day - Note the timeline!

Round 1

Your submitted design solution for a Milestone review. 
Make a Payment Flow
1) Hestia B2B Home (updated navigation)
2) Make a Payment Landing Page
3) Make a Payment Screen(s)
5) Payment Setup Tab (multiple screens)
6) Payments (multiple screens)
(note: we have left off #4/#7 for the Milestone - if you have time - please give them a try for a review) 

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 
1) Hestia B2B Home (updated navigation)
2) Make a Payment Landing Page
3) Make a Payment Screen(s)
4) Options Tab
5) Payment Setup Tab (multiple screens)
6) Payments (multiple screens)
7) Payments (Make a One-Time Payment)
Any addtional items noted in the Milestone Review 

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. This contest has to design how a Hestia customer can pay their Hestia bill through the Hestia B2B application. For this contest are looking for you to create new storyboards and design the click-paths for the "Make A Payment" scenario.

We are looking for consistency within your design and your submission should use/follow the newly designed "View Accounts Payable" as design "guide" for your new screens.
Note: Do not put shadows/gradients on the checkboxes

User Scenario 
This contest is meant to capture the Hestia Customer who has an established account with Hestia and needs to make a payment on their Account. Below is a detailed breakout of what needs to be captured in your submissions.

Screen Requirements
We are providing powerpoint slides: "Hestia-B2B-BillPay-Update.pptx"
- This is your guide to this project
- Capture the click-paths and screen requirements from this document
- We want to see these screens in the Hestia B2B design/look and feel. 

Note: 
- "Make a Payment" is a navigation item off of "Site Tools"
- Reference the attached prototype for the navigation/look and feel of the application.

Required Contest Storyboards & Click-Path's
1) Hestia B2B Home
Reference Slide 1
- Hestia B2B Home (current site design)
- Navigation update

2) Make a Payment Landing Page
Reference Slide 2
- When a user clicks on the "Make a Payment" link they will see this screen
- Update the tabs/navigation to the Hestia design
- Create this page in the Hestia B2B design
- How should the filter/table look? (reference the provided "View Accounts Payable")
- Create icons (or use correct GUI Kit icons) for any necessary icons
- Do not include the "Contact Us" and "Sign Out" tabs  

3) Make a Payment Screen(s)
Reference Slide 3 
- When a user clicks on Pay under Payment Options (from the Payment Landing Page) they will see this screen 
- Capture these screens and click-path's 

4) Options Tab
Reference Slide 4
- When a user clicks on the "Option Tab" they will see this screen
- Create this page in the Hestia B2B design
- Create icons (or use correct GUI Kit icons) for any necessary icons

5) Payment Setup Tab (multiple screens)
Reference Slide 5
- When a user clicks on the "Payment Setup Tab" they will see a version of this screen
- Create this page in the Hestia B2B design (correct form field design etc)
- Create icons (or use correct GUI Kit icons) for any necessary icons

Payment Setup Tab Versions:
a) We need a version of this screen for the first time user. What messaging would they see to beginning creating their first payment?
b) We need a screen where the user inputs their payment method
c) We need a screen for when the user comes back to this screen to add or remove Payement methods

6) Payments (multiple screens)
Reference Slide 6
- When a user clicks on the "Payments Tab" they will see a version of this screen
- Create this page in the Hestia B2B design (correct form field design etc)
- Capture 5 plus lines of Payments items here.
- Capture the "Cancel" screen
- Capture the "open" detail
- Create icons (or use correct GUI Kit icons) for any necessary icons 

Payments Note:
- See the open/close item navigation/detail on this page - please design this like the attached "View Accounts Payable" detail (where its indented)

7) Payments (Make a One-Time Payment)
Reference Slide 7
- When a user clicks on the "Make a One-Time Payment link" they will see a version of this screen
- Create this page in the Hestia B2B design (correct form field design etc)

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. 
- You should always refer to the Hestia Style Guide so your design stays consistent with the existing Hestia B2B Design Theme.

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 
Submit JPG/PNG image files based on 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.