Challenge Summary
Welcome to the Hestia B2B "Purchase Approval Workflow" Storyboard Design Contest. The goal of this contest is to design Storyboards that illustrate and improve the "Purchase Approval Workflow" user experience within the Hestia B2B Application.
At the end of this contest the Client is looking to have an clean, intuitive, and easy-to-use design that meets the listed design requirements.
Contest Details Hestia B2B is always looking to give their customers a better online user experience. For this contest you will be reviewing existing pages of the Hestia B2B application and making user experience design decisions while also creating new pages based on the provided descriptions. Purchase Approval Workflow Scenario ABC Plumbing is set up to do business on the Hestia B2B Application. - John is the Owner/Manager - Paul and George are Foremen - Ringo and Stuart are Salesmen. John wants to set up his employees to place orders on the web site, but he wants to limit the dollar amount they can spend without approval. Admin element - Owner/Manager can set up his people with approval workflow. Approver element - Approvers can view orders waiting for their approval. Submitter element - Submitters can see what orders have been sent on for approval and who will be approving them. Design Scenario: - John, Paul and George have the ability to approve orders. Ringo and Stuart do not have that ability. - Ringo can place orders up to $500 without approval. Anything over $500 and up to $2500 must be approved by Paul, George or John. Orders over $2500 must be approved by John. - All of Stuart's orders must be approved. Anything over $2500 must be approved by John. - When John goes out on vacation, he appoints Paul to cover his approvals. - All users have a queue that displays orders submitted, pending, approved and rejected. - Orders that are rejected go back to the original writer for re-work or other action. - John wants to easily manage the work-flow dollar amount levels and who the approvers are. The Concept: We are looking for you to design how the User Interface would work for the above scenarios. We have created a concept that uses a Slider solution (see attachment). An Owner/Manger can go in and see multiple people and adjust the slider (permissions) accordingly. The Foremen and Salesman would see their respective sliders based on their user permissions. (Salesman would see his but couldn't adjust it). What other items/buttons would the Managers, Foremen or Salesmen see based on the above scenarios? Target User - Users of the Hestia B2B Application - Assume Users know how to use the Application but are not necessarily web savvy. Judging Criteria - How well you design and plan out the "Purchase Approval Workflow" process - Cleanliness of your graphics and design - User Experience Follow the referenced screenshots and recreate/update the screens and User Experience. (DO NOT REDESIGN THE SITE) but enhance, fix-up, improve the UX. Round 1 Submissions: Use Round 1 of this contest to ask the Client questions or try out your design solution with the Client. Reference Files 01-Company-Profile.png- Design Reference - This page lists the Branches and User Permissions - Include an updated version of this page based on the provided screenshot details - Tabs can be changed/removed or redesigned 02-Approval-List.png- Design Reference - This is where your new "Purchase Approval Workflow" screens would go. - Based on the above scenario's/descriptions design what each User typer would see Contest Deliverables Round One Approval-Workflow(s) = Your submitted design solution for a review Please provide all screens/steps to show how your Approval Workflow would work. Notes.jpg = A file that explains your design and solution Number your screens in the order they should be viewed (example: 01-description.jpg) Round Two Approval-Workflow(s) = Final Design Please provide all screens/steps to show how your Approval Workflow would work. Notes.jpg = A file that explains your design and solution Number your screens in the order they should be viewed (example: 01-description.jpg) 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. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections. 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, Gimp, Adobe Illustrator or Inkscape and saved as layered PSD files, AI or EPS files. . Final Fixes As part of the final fixes phase you may be asked to modify fonts (sizes or colors) or modify overall storyboard colors.
Round 1
At the end of Round 1, the Client will choose five (5) Round 1 winners, each will win $50 as Round 1 Milestone Winners. These winners and any member who had a passing submission in round one will be eligible to compete in Round 2 for the additional $1250 in prizes.Round 2
Round 2 will start with the announcement of the Five (5) $50 Round 1 winners and their design review from the Client.Contest Details Hestia B2B is always looking to give their customers a better online user experience. For this contest you will be reviewing existing pages of the Hestia B2B application and making user experience design decisions while also creating new pages based on the provided descriptions. Purchase Approval Workflow Scenario ABC Plumbing is set up to do business on the Hestia B2B Application. - John is the Owner/Manager - Paul and George are Foremen - Ringo and Stuart are Salesmen. John wants to set up his employees to place orders on the web site, but he wants to limit the dollar amount they can spend without approval. Admin element - Owner/Manager can set up his people with approval workflow. Approver element - Approvers can view orders waiting for their approval. Submitter element - Submitters can see what orders have been sent on for approval and who will be approving them. Design Scenario: - John, Paul and George have the ability to approve orders. Ringo and Stuart do not have that ability. - Ringo can place orders up to $500 without approval. Anything over $500 and up to $2500 must be approved by Paul, George or John. Orders over $2500 must be approved by John. - All of Stuart's orders must be approved. Anything over $2500 must be approved by John. - When John goes out on vacation, he appoints Paul to cover his approvals. - All users have a queue that displays orders submitted, pending, approved and rejected. - Orders that are rejected go back to the original writer for re-work or other action. - John wants to easily manage the work-flow dollar amount levels and who the approvers are. The Concept: We are looking for you to design how the User Interface would work for the above scenarios. We have created a concept that uses a Slider solution (see attachment). An Owner/Manger can go in and see multiple people and adjust the slider (permissions) accordingly. The Foremen and Salesman would see their respective sliders based on their user permissions. (Salesman would see his but couldn't adjust it). What other items/buttons would the Managers, Foremen or Salesmen see based on the above scenarios? Target User - Users of the Hestia B2B Application - Assume Users know how to use the Application but are not necessarily web savvy. Judging Criteria - How well you design and plan out the "Purchase Approval Workflow" process - Cleanliness of your graphics and design - User Experience Follow the referenced screenshots and recreate/update the screens and User Experience. (DO NOT REDESIGN THE SITE) but enhance, fix-up, improve the UX. Round 1 Submissions: Use Round 1 of this contest to ask the Client questions or try out your design solution with the Client. Reference Files 01-Company-Profile.png- Design Reference - This page lists the Branches and User Permissions - Include an updated version of this page based on the provided screenshot details - Tabs can be changed/removed or redesigned 02-Approval-List.png- Design Reference - This is where your new "Purchase Approval Workflow" screens would go. - Based on the above scenario's/descriptions design what each User typer would see Contest Deliverables Round One Approval-Workflow(s) = Your submitted design solution for a review Please provide all screens/steps to show how your Approval Workflow would work. Notes.jpg = A file that explains your design and solution Number your screens in the order they should be viewed (example: 01-description.jpg) Round Two Approval-Workflow(s) = Final Design Please provide all screens/steps to show how your Approval Workflow would work. Notes.jpg = A file that explains your design and solution Number your screens in the order they should be viewed (example: 01-description.jpg) 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. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections. 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, Gimp, Adobe Illustrator or Inkscape and saved as layered PSD files, AI or EPS files. . Final Fixes As part of the final fixes phase you may be asked to modify fonts (sizes or colors) or modify overall storyboard 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.