Bradford
Johnson

Adaptive Automaton

As web applications come closer to matching the capabilities of native applications, one of the most exciting avenues of design that have opened up to us is that of animation. Animation, when executed well, offers a fourth dimension through which we can communicate with the user: time.

New CSS properties allow us to use animation to draw the user's attention through an application in a very natural way. By using principles of animation that have been honed over a hundred years, we can convey meaning and personality in ways that web designers have never been able to before. These new properties are easy to use, robust, and performant, blending seamlessly with existing CSS techniques.

One quick note: Many of the example animations in this article have been slowed down to show detail. All of the animations throughout Decky are 400 milliseconds long or shorter. Also, I learned a lot of the techniques I used on Decky by reading Designing Interface Animation and A Pocket Guide to CSS Animations, both by Val Head, and used Mozilla's MDN as a reference.

Watchful Automaton

In addition to showing Magic decks or cards "loading" into the screen, we can convey important information

Provisioning

One of the most important tenets of software design is the idea that we should manage the complexity of the user's actions so that they don't have to. Simply put, we do the complex work once so that when the user wants to do the same thing they don't have to do anything difficult. The provisioning portal we were asked to build was a fantastic example of this idea.

The problem we were tasked with solving was that customers' "assets" (routers, firewalls, and other devices) had to be set up on a case by case basis by someone who worked for Verizon. Each time one of those devices needed to be updated or changed, the customer would have to put in a support ticket and another Verizon worker would have to make the change for them. We wanted to offload that work to our system, thereby improving customer satisfaction and reducing the number of support tickets the Verizon people had to deal with each day.

Let Me Do It

Customers still have to purchase services directly from a Verizon salesperson (perhaps that's something we'll address in a future release), but now they can take care of enlisting their own

Ordering Disorder

We were recently brought on to a project for Cardinal Health to rebuild their dated order tracking system and were asked to redesign the application as well.

The existing orders application applied design principals from the web of the early 2000's so there was a lot of room for improvement. We were able to make the data in the application more digestible using a variety of techniques from creating a new map view to simplifying and improving the typography and colors of the application. We were given a lot of leeway when it came to branding for the application because the existing application didn't adhere to any internal design guidelines.

Out with the Old

It is immediately evident upon seeing the outdated application that it was a product of its time. It's easy enough to flatten out the '00s gradients and use more modern web fonts, but a lot of thought went into rearranging and improving the usability of all of the information throughout.

For example, gone are the pod-shaped table rows. Unlabeled controls are replaced with a menu of text buttons to take a variety of actions on the site. We also removed the 960 pixel width