Challenge Summary
Welcome to the Hestia "Online Bill Pay" Page Design Contest. The goal of this contest is to design a new "Online Bill Pay" information page for the Hestia application.
Round 1
Your submitted design solution for a review.
- New "Online Bill Pay" Information page
- Note the different right column views
NUMBER YOUR SCREENS (01, 02, 03 etc.) - its easier to review with the client.
Round 2
Final Design
- Final Design
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 create new "Online Bill Pay" information page within the Hestia Application.
User Scenario
1) User navigates to the Online Bill Pay screen (a new menu item under Payments menu on top navigation)
2) User reads the information about Online Bill Pay.
3) Based on their "role" and "permissions" the will see different content and action items
Page layout for Online Bill Pay
Note: This page is an informational screen about "Online Bill Pay" for the Hestia Customer
- Layout should be a grid divided by Left and Right Column
- Left Column 2/3, Right Column 1/3
- Right column will dynamically change based on user actions
- Any suggestion open to represent the Online Bill Pay.
- For submission of this contest, you need re-use template-bg.png as base of design.
1). Left Column
- This is the main area that will contains text information discussing Online Bill Pay process
- Re-use the attached screenshot of text/copy and you can add new greeked text
- Need add new paragraph discussing Online Bill Pay, another paragraph discussing the Roles for Online Bill Pay
- Need put some pictures of the Online Bill Pay tool (You can use place holder images for now) Suggest to us how they should be placed, sizes, how will the user be informed of this new features?
- This area need simple and design so content can be easily managed.
- Think of this as a "help/informational" screen
- Here is the actual "Bill Pay Tool" that a button on this page will link to (a 3rd party software)
2). Right Column
This area will change dynamically based on user actions, create separate screens showing different status:
1. We need a way for the user to request Account Payable permission (a button), once clicked we need a it show a "Thank you" for requesting information.
2. If the user is selected to be an "Account Payable Admin" or "Standard role", this area will display a button to to take them to the Online Bill Pay tool, so the wording around it needs to reflect that.
3. If the user is not selected for "Account Payable Admin", but someone else is, there needs to be a message that displays telling that person to contact the Account Payable admin for that company and display their name.
User Roles
Note: it would interesting to maybe have a chart showing the differences of roles
Account Payable Admin
- Has the ability to assign other AP Admins, and Standard Bill Pay users; as well as able to pay bills
Standard Bill Payer
- Has only has the ability to Pay Bills
IMPORTANT
- All of the graphics should have a similar feel and general aesthetic appearance.
- Refer/Download the Hestia GUI Kit (Click here to download) so your page design stays consistent with the existing Hestia B2B Design Theme.
Target User
- Current Customer/site user
Judging Criteria
- How well you design the Online Bill Pay Information 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.
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.