Willie Saul & Son Plumbing
A Web App
A Web App
While working at Four Clouds, we were approached by a client to update their customers and orders database from a DOS-based text-mode interface, which had been used since the early 1990s, to a modern, database driven web app.
Initial mockups were created between other client projects. The project was then shelved for a bit while other client work began. Later on, after the developers ported the database to a more contemporary format, I began the task of creating the client-facing interface directly in HTML and CSS.
The web app relies on the Ruby on Rails framework to handle all back end tasks and uses the built-in templating to dynamically create each view. I improved these default templates to fit the design goal: a somewhat responsive layout with an efficient, attractive design that didn’t sacrifice utility or existing user knowledge for the sake of aesthetics or technophilia.
Twitter Bootstrap was employed as a base styling layer to provide for a quick design and development process. Since software would be used mainly in the client’s office we were able to recommend and design for Google’s Chrome browser to provide the best user experience. The somewhat responsive design would allow for the app to also be used on an iPad, a secondary client requirement.
Initial mockups were created between other client projects. The project was then shelved for a bit while other client work began. Later on, after the developers ported the database to a more contemporary format, I began the task of creating the client-facing interface directly in HTML and CSS.
The web app relies on the Ruby on Rails framework to handle all back end tasks and uses the built-in templating to dynamically create each view. I improved these default templates to fit the design goal: a somewhat responsive layout with an efficient, attractive design that didn’t sacrifice utility or existing user knowledge for the sake of aesthetics or technophilia.
Twitter Bootstrap was employed as a base styling layer to provide for a quick design and development process. Since software would be used mainly in the client’s office we were able to recommend and design for Google’s Chrome browser to provide the best user experience. The somewhat responsive design would allow for the app to also be used on an iPad, a secondary client requirement.
The following is ©2012 Willie Saul and Son Plumbing and is used with permission.
An example of a single customer view from the original DOS-based app.
Mockups
Client/user interviews had already been completed before I started working at Four Clouds, so there was already a lot of data about what they wanted out of the app. The design started with recreating the company’s logo in a vector format as it only existed as a carved wood sign and their existing corporate stationery. The freshly reborn logo was used as the basis of the app’s color scheme as well as the initial design direction for the app’s header. The header formed the foundation of the app’s design since it would be present in every view.
Mockups of the app’s header, including a portion of the redrawn company logo.
The next step was to create mockups of the secondary app interface. Initially a two-part tabbed interface was created. As the app developed further, this portion of the interface changed quite a bit.
Mockups of the secondary tabbed interface.
The most important result of the design goal was make the main content area immediately familiar to a user experienced with the original DOS app. So HTML tables were a necessary requirement. The above mockup was initially created, but it was clear that from then on that the design would need to happen in the browser.
Above the Customers and Orders views. The app defaults to the Customers view as its home page.
The nav bar has been simplified to reflect changes in the app’s architecture. The tabbed interface from the mockups has been replaced by contextual buttons. The Customers and the first Orders view shown represent a desktop view, while the second Orders view is shown how it appears on a smaller screen, similar in dimensions to an iPad. The somewhat responsive nature of the app’s layout shifts the drop-down filters from a horizontal list seen in the second screen above to a single button that displays the drop-down filter list seen last in the above set.
App Screens
Above the tabbed customer view showing a specific customer’s orders on the first tab and their locations on the second tab.
Above the screens showing the customer single order, edit order, and new order views.
Above the screens showing the customer edit and new customer views.
Above screens showing the location edit and new location views.
