We are currently redeveloping the web application in .NET and would like a new graphical and easy to use ‘look and feel’ to go with our new system.
We have three primary goals from this brief.
1. Design the referral registration form
2. Design the referral management page
3. Design a reporting layout
Page One – Referral Registration Form
This page is used by our client (referring) agencies. Members (police officer, teachers, etc) will use this form when they identify a person who needs a social support referral. The image (referralForm.jpg) is an image of our current referral form. The document (referralFormLeadin.pdf) is an example of how we are planning to enter into the referral form (this is mostly for your information – not for you to design). When a police officer (or other user) logs in, they are asked to make a series of selections that will filter the resulting page. Once the user making the referral has made a final selection (from the final page illustrated in the document referralFormLeadin.pdf), the system will open the referral registration form with its pre-configured options. This page will use Telerik controls and Jquery to hide and display different sections of the page.
This page should have a conservative yet authoritative feel, and should have a strong ‘police’ look (see attached logo – supportLinkPoliceLogo.eps). Colours for this page should be similar to those in the logo. Please provide as many samples of form elements as possible (e.g. what should input fields look like, submit buttons, file upload buttons, calendar (date) selection buttons).
This page does not have to be a fixed width – and would preferably allow for the most efficient use of screen real estate (perhaps a wider layout with more efficient placement of groups of information).
Page Two – Referral Management Page
The Referral Management Page is where the referral (that was registered using the form in Page One) is displayed for management for support agencies. The image (referralManagement.jpg) is an image of our current referral management page.
The details entered in the referral registration form can be either editable or not (which is configurable in the system) so the page should be capable of displaying editable fields or simply the details of the data. Users have a number of workflow options, and this page should also utilise a number of html form elements. Sections in the image that are displayed in grey with a dashed border are sections that are opened dynamically by jQuery when a form option is selected.
There needs to be buttons for the following options:
• Save page to Word
• Save page to PDF
• Upload a file
• Edit the page (go into Edit mode)
• Print the page
This page can have a similar overall feel to the referral registration page, but should be done using the corporate colours contained in the corporate logo (corporateLogo.eps).
Page Three – Reporting Layout
We produce a large number of reports for our clients based on referral activity. We are experiencing a growing trend from purely data-based reports to graphical reporting based on a ‘dashboard’ concept (see reporting example – spectatorAgencyReporting.pdf).
We require a page layout that will lend itself to this concept, plus can be used as a template for a list of table-based reports (i.e. instead of displaying graphs, will provide a menu of reports that can be selected by the user after entering preferred dates – this will then take the user to their report).
This page should be consistent with the look of Page Two, and should be done using the corporate colours contained in the corporate logo (corporateLogo.eps).
Elements Common to All Pages
As these pages are all contained within the user environment of the referral management system, the following common elements will appear on each page:
• A place for the name of the agency and their logo to appear at the top
• Navigation bar for common functions
• Welcome message identifying user
• Footer containing copyright symbol and patent numbers
• We would like to emphasis the use of graphical icons for options (if you can find an appropriate icon set (e.g. from iStockPhoto) that incorporates a large number of icons that can be applied to the social support/emergency services sector we can use that as the basis for icons).
• Similarity of elements between all three pages, but page one to have graphical features that represent police (i.e. chequered logo/images). Colours for each page to be compatible with the appropriate logo for that page.
• These pages do not require photos – they need to maximise the use of screen real estate, but present the information in a non-fussy clean way.
Access to current application for background information
Interested designers can ask for a login to our existing test application to see the sort of information we are dealing with. Please direct request to firstname.lastname@example.org using the subject ‘Design Project’.