Process Flowcharts for Food Ordering Systems

I created complete workflows for users and admins for two food ordering systems: a text-based system and a no-code system. The flowcharts shown here are for the text-based system.  All were created to compare capabilities/limitations and to development cost estimates/run rates between these two and a custom web app option. (Off-the-shelf systems were also considered but didn't have the right features.)

.

The no-code option won out even though it had fewer capabilities, mainly because its short-term and long-term costs were significantly lower.  After we decided on the no-code option, I implemented it by:

• Making the Google survey and connected tracking spreadsheet
• Managing the transition off the old system  
• Training those that have kept the new system running ever since 

Specs/Mockups for Update to Management Tools

This set covers several refinements to existing work order and expense tracking features as well as the addition of a handful of new features.

Starting at the top left corner: improved detail view for an expense item, below which is a visual history of the expense as allocated (accessible from the detail view).

The other image on the top row is a modified version of a summary view of all work orders for a given class code.  Below this view are two new detail views: one showing machine time allocations, the other showing summary budget info.

The third row shows what comes up if the user drills into the details for the budget: significant milestones, spending over time, and editing functions are all shown.

Note that this is only a sample of the full set of specs, and, note that, as with other proprietary items, the copyright of the component images belongs to Novatek and the thumbnails are intentionally shown at a size that obscures the finer details (alas).

Support Materials for Impromptu Management Training

A cross-section of items from different parts of Novatek's system of web tools: the Friday before Christmas we had an all-managers meeting to set the stage for changes coming in 2013.  I provided the visuals by assembling a set of mockups from the backlog of not-yet-implemented designs.  I also drove while the COO gave the presentation (switching between the live site and the visual aids, etc.).

Quick rundown of the images, left to right, top to bottom: a drill down screen with an overlay showing all time allocations of one individual, a service work order summary screen, a prototype work order summary screen with an overlay showing machine time, a profile screen with emphasis on newly added data, an alert on the main time allocation overview screen, an individual time allocation, a service work order in edit mode, and a machine time summary screen.

(As with other proprietary items, the copyright of the component images belongs to Novatek and
the thumbnails pictured are intentionally shown at a size that obscures all the good stuff, alas.)

iOS Work Aids App

My first mobile app, designed from scratch and coded, tested, and distributed internally, with the post-design development done in coordination with a different programming team than the one I work with for web app development.  Some features:

• Detailed profile with live updates and hooks into other system functions (this piece of the app is what's shown in the image set below).
• Media capture and uploading to user file repository (and, optionally, local saving).
• Hooks into the company's web app [overview post forthcoming, see also here, here, and here].
• A catalog of other software tools.
• Inline help/documentation.

It would actually be fitting to call this my third or fourth mobile app, since the package has gone through several major revisions since mid-2011.  Screen mockups from earlier versions are available after the break, starting with the version that was limited to providing an automated on site/off site status indicator and basic company directory info.  (Copyright disclaimer is also after the break.)

Assorted Flowcharts

A handful of charts for various technical and business processes, including an overview of screens and functions for the third revision of my iOS app (the app of my design, at least).  These have been used both for management approval and programmer reference.

Most of my charts are created with Visio, but some are custom-made mixes that include interface mockups and other graphic-type cues as needed.

(As with other proprietary items, the copyright
 of the component images belongs to Novatek
and the thumbnails pictured are intentionally
shown at a size that obscures many details, alas.)

Org Chart Management Module

Detailed specs and interactive wireframe of interface that allows for at-a-glance review and easy updating of supervisor-supervisee relationships as well as drilldown to check on profile details of any individual.  This module has hooks into many other back end modules (profiles, time/expense allocations, etc).

All in all, another management tool customized to fit the unique needs of Novatek, built with Novatek-standard interface elements; touch-friendly parts/features that are either standard implementations or straightforward extensions of the existing code framework (reporting, search, action panels, etc.).

(As with other proprietary items, the copyright of the component images belongs to Novatek and the mockups pictured are intentionally shown at a size that obscures all the good stuff, alas.)

Annotated Mockups for Profile Module

The image below is a composite of a few composites, all prepared in the course of working with an independent off-site programmer/developer to update the profile editor portion of the Novatek employee portal. These images were used together with standalone specs, flowcharts, and correspondence (phone, e-mail, and Basecamp).

(Standard disclaimers apply: the copyright of the component images belongs to Novatek and

 the mockups pictured are intentionally shown at a size that obscures all the good stuff, alas.)

Novatek Capabilities Report

Copyright for this image belongs to Novatek.

A hybrid technical report and marketing booklet focused on the company's capabilities.  This started as a set of eight .pdf pages focused on existing and planned drill testing facilities, but it has since tripled in size to cover different production, R&D, and other areas.

The report also grew into a top-level page featured in the main navigation bar of the company website.  The image to the right shows a screen grab of the page, which I designed.

I was in charge of collecting all information and graphics, writing and editing copy, and producing, posting, and printing the final digital and print versions.

As shown in the graphic, the print versions were produced with formatting that took advantage of the medium by using mirrored layouts for facing pages.

Climatic Branch Overview Briefing

I made this PowerPoint briefing completely from scratch to replace one that was very old and ugly.  Some key attributes of the new version:

• Curb appeal: a polished, professional look that's clean and simple rather than gimmicky and cluttered. 
• Flexibility: the core slides can be used effectively for a five-minute overview, but they are backed by dozens of supplemental slides that contain enough information to use for test program negotiations. 
• Navigability: both the person giving the briefing and those receiving it benefit from the visual cues to the organization of the content.  Extensive linking allows for easily diving into details at any point and for easily returning to the point of departure.
• Maintainability: Updates and edits can be made without triggering a cascading set of consequences.  This was especially important in that an expansion of facilities and some organizational changes were imminent at the time this was produced. 

Interface Mockup for Custom Testing Software

As I put it in one version of my resume: "Created and documented a mockup of a database-backed system for test tracking and recording."  Some of the resulting visuals are in the composite image to the right..

This was a self-initiated project sparked by seeing how inefficient and mistake-prone testing could be, even with clear regulation-based guidelines.  Some common problems came from turnover in the testing workforce, the sheer volume of test items, the volume and variety of test data, and the frequency of delays during the tests.

My proposed database-backed system would take advantage of the formalized guidelines to make the testing process run on rails, and would thus solve the just-listed problems.

UPDATE 1: Speaking of rails, as I researched the best way to implement the system, I got a taste of the future when my research took me to the Ruby on Rails project; I could see that web-based approach was certainly the best solution.

UPDATE 2: Looking back from early 2013, I can also now see that tablet-like devices would have been (and still would be) the ideal hardware to match with the software described/shown.  On-the-floor testing makes even notebook-type solutions awkward, but a direct touch-based interface running on a small tablet would be just right.

BYU School of Technology Web Design

From March 2000 to November 2002, I was the webmaster for the School of Technology and for the School's Manufacturing Engineering Technology (MET) program.  My work as the MET webmaster continued on to August 2003.

This was a part-time work-study position that involved independent webpage authoring and maintenance, including the production and editing of content on my own and extensive work with professors and teaching assistants to create and maintain individual class websites.

The sample images to the right represent only a tiny percentage of what I did over my three-and-a-half years as webmaster.  Shown are two samples each of the home pages for the School of Technology and the MET program.  I was also responsible for most of the sub-domains shown on these home pages (i.e. the faculty profile pages, the facilities overview pages, the news pages, etc.).

Most of the content and structure I developed for the MET program has been replaced, but it was all intact through late 2006, which means that it had a very long life for web content.