We recently completed a web application for Maryland ProFinish Inc., a construction company located in Baltimore County Maryland. They have agreed to let us use their web application as a case study. In return we agreed not to include areas of the application that would be considered unique to their business. Therefore, we will only be covering those sections of the application with the most universal appeal. However, this will give you an idea of what a web application can do and may even provide inspiration for ways to improve your business with an application that facilitates business processes unique to your business.
Let's start with the public facing pages and work our way in.
The Consumer Side
First, here is a screen shot of the home page. Below the home page screen shot, a few smaller screen shots of the "home pages" for the four main sections that make up the consumer side. It is impossible to tell from the screen shots, but these are quick little flash movies which help to reinforce the main points Maryland ProFinish wishes to convey to their existing and future customers. There are about 25 pages total on the consumer side ...if you want to look at the rest go HERE.
My Admin Section
The first page you encounter when going over to the back end of the application, is the login page. The login page and the associated functions are covered in some detail in the section about application features, so we'll not say too much here.
Once the login is successful, the user is taken to the My Admin Home page. This page is different for customers, associates, job leaders and project managers. The screen shot we are looking at is for an job leader/project manager.
You'll notice the interface is simple. It is not fancy, there are no bells and whistles. Once you get past the marketing section, the design objective should be clear navigation and consistent user interfaces.
Some Noteworthy Items
1. There is a "snap shot" area where the user can quickly see whether there are items that need immediate attention.
2. The navigation is broken down as follows: the main links for the module you are currently in at the top and then...
3. below that, in bold, links to the other modules of the application
My Admin-Contacts Section
In keeping with our agreement with Maryland ProFinish (and in order to keep this somewhat reasonable in length), we are only going to cover a few aspects of this application. The contacts section is typical of the user interface design. Most sections of the application follow the same general pattern.
The first page the user is presented with is the search page. It is here the user can either refine his search with criteria or skip right to adding another record (Note the add link at top). The user can supply one or all of the search criteria and only the records that match will be returned from the database. Once the user supplies the search criteria and clicks the "Display Search" button (or clicks on the "Display All" button) she is taken to the list page.
Some Note Worthy Items
The list page has the main information for each record returned. In the case of the contacts, it would include first and last name, company name and phone number.
1. Once on the list page, the user can choose how they wish to have the records sorted. In this case, they have a choice between sorting on last name, contact type (customer, associate, vendor) or zip code.
2. If the user want more information on a particular record, they can click on the view link
Or if they want, they can click on the add link to add another contact.
NOTE** In most cases, there would also be an edit and a delete link (and possibly others) next to the view link...But you don't want your employees deleting or editing your contacts!?
My Admin-The Appointment Calendar
In many cases, the individual sections of different modules within a web application will follow the same general pattern: A search page to narrow database queries, A list page to display query results, A view page to see details for an individual record, An add page to insert new records into the database, An edit page to edit an existing record and a delete page to delete existing records.
Additionally, most times, a simple, non-graphical form is best, but not always. The appointment calendar makes for a good example of when a graphical interface is better.
When the user clicks on the "My appointments" link on the side nav bar, she will be taken to the daily view of her appointment calendar. Here it is easy to see what is scheduled for the day and there is a monthly calendar the user can use to navigate to another days calendar.
Some Noteworthy Items
1. When the user clicks on an appointment listing, it expands to show the details for that appointment. It is within the detail view that the calendar owner can edit or delete an appointment
2. The monthly view is the navigational control for the calendar. Each date is actually a link to that day's calendar. Additionally, the week numbers are links to the weekly view for that week.
3. The daily calendar has links for adding a new appointment as well as for the weekly and monthly views.
4. This is what the add/edit pages look like
5. The weekly view, each day's name is a link to that days calendar.
6. The print preview of the daily calendar. Because of extensive use of cascading style sheets, when a user goes to print the calendar, the logo and all the navigation drops off and the page is resized for the printer (this is true of all the forms within the application).
Office Admin
With the exception of the "Manage Jobs", "Manage associates" and "Marketing" sections (which we won't include in the case study), the Office Admin section has the same functionality as the My Admin section, with one notable exception: those who have OFFICEADMIN clearance in the application, can use this section to set, edit and delete appointments, tasks, messages for everyone in the company. Additionally, they can edit and delete contacts.
Some Note Worthy Items
1. Like all the other modules, the main links for this module are at the top of the left nav bar and the links for the other modules are just below.
2. "Manage Appointments", Manage Tasks" and "Manage Messages" all start at a page where the OFFICEADMIN user determines whose calendar, messages or tasks they will be working with. To change from Bill's calendar to Tim's calendar there is a link at the top of these pages that says "change calendar owner".
NOTE** when the office sets the appointment for others, the application sends an email to the person who has had a new appointment set, as well as a text message to their cell phone, all automatically.
3. This is the contacts list page in the Office Admin area. There are a few more links this time! The address/phone link is for printing labels on a Dymo label printer.
4. The "send fax" link produces a fax cover sheet with all sender and recipient's information already printed out. The user just enters the number of pages and the message. Again, since there is a print style sheet, it will lose all the "chrome" and be resized for the printer all automatically.
Job Admin
This is the last module we can examine and we can only visit one section in the Job Admin area, time cards. But that's OK 'cause the time cards are pretty cool.
Some Note Worthy Items
1. Like all the other modules, the main links for this module are at the top of the left nav bar and the links for the other modules are just below.
2. This is a really neat search interface. You can search by associate, by job, by date range or any combination of all three. Plus, it is able to integrate with quickbooks so you do not have to enter the information twice (actually, the office doesn't even have to enter it once! It's all done by field personnel).
3. This is the form used by the job leader to enter the hours worked on each job each day. Even though it is not explicitly entered, the application tracks the date the information is entered as well as who enter it.
Availdata
Monkton, MD 21120
Telephone: 410-215-7356