NRCS Design System

Color

Components

Storybook

NRCS Design System

A Design System tailored to the unique needs of NRCS GIS applications with high accessibility requirements.

An adaptation of the FPAC Design System and its inherent roots from the U.S. Web Design System.

A resource for UI styles, accessible components, and guides for their use across a suite of applications. All of which were carefully selected based on research, studies, and testing.

Also attempts to provide coded examples of components for accessibility, presented via StoryBook as an aid to developers.

Built with React around Reactstrap/Bootstrap to align with the most common frameworks teams are using at the moment.

Published on GitHub to encourage open collaboration and contributions over time.

Picky Fingers Banjo Podcast

Website homepage

Logo

www.banjopodcast.com

Responsive website with LibSyn and eCommerce integrations. My goal was to keep Keith focused on producing his show and not his website.

Super fun project while listening to the best banjo podcast out there!

Logo and branding by: Grace Van’t Hof

Music of the Sphere

Logo

Website homepage

www.musicofthesphere.com

New music instruction team in Boulder, Colorado and all-around awesome group specializing in piano, percussion, and guitar.

Happy to help them get a website going and see their business get some traction!

Logo and branding by: parallelarts.com

Field Office Technical Guide

USDA – Field Office Technical Guide

UI design and development (rewrite) of a NRCS document repository for scientific references and technical resources for soil, water, air, plant, and animal data.

https://efotg.sc.egov.usda.gov

This project had only a few months for a development timeline with the focus/requirement on 508 accessibility.

Technical Tid-Bits

  • Built with React + Redux + Foundation
  • 508 accessible accordion component
  • Accessibility tools: Tota11y, JAWS, VOX
  • Aced NRCS strict departmental 508 testing

Map Interactions

Overview

One of my teams is building out a geospatial map application using ESRI ArcGIS that is embedded in a larger web application. The map is used for conservationists to view and study layers of soil & hydrology data as well as to manage and draw-out shapes and regions into layers that are identified for planned activities.

This project presents interseting challenges for creating usable space but having efficient access to several forms, common tools, and toolbars to accomplish tasks.

This page shows several rough mockups that were created to help visualize and discuss options.
A few mockups and proof-of-concepts were created with different locations for tools and toolbars overlayed on the map to find a solution that was compact, organized, and intuitive. The original outgoing application had tools available at all times in various sized floating panels eating up valuable map real estate and were hard to manage.
Several rounds of user studies and debates around selection behavior were done to strike a balance between common modern standards and familiarity of an outgoing application that users were familiar with. For example the use of the CTRL and SHIFT keys along with the mouse.
Map tools and toolbar were overlayed on the map and slide-out dialogs were used to keep the access to the map at a maximum at all times, yet fixed on the screen. The previous application had all sorts of floating and movable windows which was a pain to manage and control (GIMP anyone?).

Notifications

Overview

Front-end development of a synchronized notifications feature for an enterprise procurement application.

Technical Tid-Bits

  • Front-end: Angular 4.x with Foundation 5.x
  • Back-end: NodeJS proxying API calls to Java
  • Notifications via RabbitMQ message broker
  • Implemented notification pop-ups, indicator, drop-down menu, and management pages
  • Notification counts, indicators, and lists are syncronised in the UI across multiple browser sessions for the same user or a class of users.

Matters of UX (slide sets)

For QA & Analysts

For Developers

Overview

UX presentations tailored for a particular organization who was new to embracing user experience as an important aspect of software development.

For analysts: we talked about roles and responsibilities, how UX can fit into our processes, and to eat-your-own dog food.

For developers: we talked about good programming practices, consistency, repeatable patterns, and creating a UI component library to build from.

Helgedom

helgedom.com

… is the another deployment of a FoundationPress theme we often use with clients.

Maybe it’s because I don’t trust social networks and services to store and not use, abuse, or lose my stuff. Or worse, lure me in then hold it for ransom. I still think photos in a shoebox will last longer.

How do we collect and preserve the digital content we produce and share in this current state of diversive and silo’d, pay-to-play connectivity?

Perhaps I’m a paranoid DIY’er, is that better?

Either way, this project is an effort to centrally collect and store all my things from around the web for my own preservation and ease of search and organization.

Automated

And because I’m lazy, I want it automated! Helgedom serves as a personal blog and content management system, but much of its content is delivered autommatically via a combination of IFTTT, Zapier, a syndication plugin, and some hand written scripts to pull content through accessible APIs.

Randomseeds

This website…

… is a deployment of a WordPress workflow we’ve been perfecting over time.

It’s a theme based on FoundationPress 6.x. With a few tweaks and a couple of key plugins, it gives us a WordPress development and deployment scheme that doesn’t get in the way and allows us to be more efficient and do rapid prototyping for clients.

Plugins

  • Space
    Space, the final frontier.
  • Space
    Lets Rocket!

Defensive Programming for Better UX

There are lots of good articles about defensive programming out there, and I’m a strong believer in it. The topic of the discussion can get nitty-gritty to the depths of security and database abstraction, whitelist over blacklist, and to some extent can go too far. I believe it’s a balance between solid code and effcient development.

From my current position in helping development teams find that balance and bringing UX into the design and development thinking. This is an excerpt from a response/debate I was having with a couple developers who were protesting some defects regarding validating character limits on a specific text input, saying “… but it wasn’t in the acceptance criteria for the user story to do any validation on that input.”

In my mind the acceptance criteria for a user story is specific to the new functionality being developed in that story, and should not have to cover every basic validation other than some specific rules based on the context of the functionality, or things required for this feature.  

It is really in the developer’s best interest to exercise “defensive programming”
and validate any/all inputs for basic things like special characters, reasonable character limits, required fields. To not do so is asking for guaranteed defects and extra work later. Of course there should be a character limit, of course we should limit special characters for any text input as they are problematic unless they are needed for particular reasons.

To go even further, a good UI development setup would be to have a “kitchen sink” or library of vetted 508 compliant UI components with basic validations in place, and a developer uses these to build things. I don’t know of any framework that does all of this out-of-the-box, some get close, but most need some little extra 508 or validation work.

It would be concerning if we are creating bare-bone UI’s and then adding in 508 and certain piece-meal validations for every feature independently.

Think about how much extra work and planning (lack of) that is!

Think about the how much rework we create for later via defects and churn with QA!

Or worse, think about the things we may miss then get caught with serious validation or security issues with defects in production.

How awesome it is to not worry about any of this if they are baked in from the beginning.

Plus from a UX perspective, the validation behaviors and UI interactions overall become more consistent and familiar from page to page, feature to feature.

Wizardry

Overview

Various example of wizards I have helped build or design over the last few years.

As a designer, I typically try to avoid using wizards as they are complex and do not always lend themselves to a good UX.

I’d rather solve the design problem by simplifying to smaller independent views or sections.

However, usually in enterprise environments, sometimes there are use cases that require a sequenced flow for setup or configuration for example where using a wizard is suitable.

As a developer, I think designing and building a reusable wizard UI component can be a fun challenge.

For example, handling transitions in/out of a step, allowing clickable headers or not for navigation, forcing a sequence vs. allowing hopping around, and how to share data and conditions between steps.

Pixel Your Life

Overview

Full-stack e-commerce website and vector art web application.
Turn any image into cool pixelated art for free download or custom printing. Generated images are vector mosaics outputted to a PDF that and be printed to any size without loss of fidelity.

Details

  • Graphic design, business concept & partnership: parallelarts.com
  • Pixel art application: Flex/AS3
  • Front-end: Sencha ExtJs 4 Javascript web framework
  • Back-end: LAMP stack (MySQL/PHP)
  • Secure access for gallery, order management, and project tracking
  • Automated order processing
  • Safe and secure file management
Special Note: The Pixel Your Life project is featured with installations decorating the Google Boulder offices. Click to read more…

Test Automation UI

Overview

How adding a nice web front-end to a command-line interface significantly improved productivity, quality, and cohesion across an organization.

Technical Tid-Bits

  • Front-end: Sencha ExtJs javascript web application
  • Back-end: Perl Catalyst with MySQL
  • Desktop-like presentation with various applications based on user’s role
  • Implemented user, authentication, and session management

Case Study

Scenario:
Enterprise client providing large complex high-available storage systems has multiple globally diverse development and test teams working together on a shared lab infrastructure. The lab has a limited pool of hardware for deployment of storage clusters that needs to support development and various levels of “smoke” and full system test activities.

This group spent a few years developing a custom test automation infrastructure that manages the deployment and configuration of hardware and sofware resources, configures clustering and failover, deploys software for test, executes tests, collects results, and then breaks it all down to restore the resources back to the lab pools for the next activities.

Problem:
The test infrastructure is command line!
It is difficult to use and a bottle-neck to productivity.
  • The test system has a steep learning curve.
  • Triaging remote systems, test failures and log files via command line is tedious.
  • Developers were skipping “smoke” tests, constantly breaking the build.
  • System testers were getting lost in larger test configurations and monitoring deployments.
  • Managers have trouble producing accurrate quality metrics.
Solution:
A web application providing a web based user interface to the test infrastructure.
  • Developers can visually set-up, deploy, monitor, and triage “smoke” or code check-in tests in minutes helping them avoid breaking the build with trial-and-error coding.
  • Testers can configure and deploy complex configurations and automated test sets quickly. They can monitor progress across nodes in the cluster and easily get at log files and traige failures.
  • Managers can mine test result data for reporting and tracking of quality metrics. They can even export data and trends to spreadsheets for further analysis.

Mobile IT Alarms

Overview

Need a mobile app now!

Android and IOS hybrid web application for IT support agents to remotely receive, assign, and manage IT alarms and outages coming from CA’s Unified Management Portal.

Details

  • Developed with Sencha Touch and Phonegap (Apache Cordova)
  • Push notifications
  • Back-end integrations, XML to JSON conversion

Notes

Given roughly six months to produce a working Android and IOS application, this project had a very aggressive schedule and ramp-up.

Using a hybrid approach with Sencha Touch and some work to convert back-end API XML responses into JSON structures that Touch components could consume natively, this application was functional within three months. The rest was prep, packageing, licensing, and deployment! Done and done.

PYL at Google Boulder

Overview

A custom installation of murals commissioned by Google for their Boulder offices. Images were generated using our PixelYourLife.com web application. Read more about the project here.