- Willie Saul & Son Plumbing
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.The following is ©2012 Willie Saul and Son Plumbing and is used with permission.
- 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.
- 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.
- 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.
- 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