Travis County DesOps

Case Study

Defined and documented UX design processes and spearheaded project to bring together two different departments into a unified web app design and development project

The Backstory

Travis County ITS is the branch of the local government responsible for the county IT infrastructure. So anything that doesn’t fall under the City of Austin, or State/Federal is covered by them. County park services, sheriff’s department, local elections, marriage licenses, wildfire firefighters and more. They’re kind of the glue that holds together all the things in between.

The Initial Design

There was no initial design. I was brought in fresh. They wanted someone to to shake things up and do things differently than had been traditionally done before. I was given pretty much full reign on my initial UX research and design process, and played a major role in deciding the specifics of the final implementation. There were of course waypoints that the project needed to fit within, such as the use of existing vendor technologies, which would be utilized as microservices and piped through a custom Mulesoft middleware API that would then be consumed by our web app frontend, but I was hired in part largely to define processes which the department did not have any formal experience with.

The Challenge

Travis County ITS had two departments that they wanted to begin to integrate and possibly merge in the future. The Web Team was a team primarily concerned with social media and internet marketing. They built and maintained brochure style websites in the Joomla CMS for various other departments of the county. While they had great graphic design experience, and had begun dipping their toe into intranet sites for county documentation, they did not have any formal UX processes. The other department, the App Development team, were the group responsible for building internal tools for the county, primarily using technologies like C# for the apps and Visual Basic for UI. They also did not have a formal UX design process, instead leaving the process of designing UI to the individual developers building the apps. The challenge here was to define and introduce a set of UX design processes that could be taken up by the Web Team and  integrate with the App Development pipeline. I had begun thinking about this sort of issue at my previous contract at the Department of Labor. While there I had 1) strove to push as much as my design directly into code as possible and 2) attempted to push for documentation and standardization of our designers work into a living Design System. It seems to me increasingly necessary for designers to be able to scale and integrate their work into the tools of developers, and to not merely design individual parts but to design the relationships between those parts. (this thinking has been recently validated by the Design lead of Airbnb in what he calls “DesignOps”).

The Solution/s

The solution to this challenge can be divided into 3 basic points of attack

1. Define and Document UX design processes

There were no established formal processes to UX design at Travis County ITS. There were ideas about it, but defining and documenting the process was a luxury that the county hadn’t been able to afford till now. I divided my UX research process into a couple of different approaches. First, I began with user interviews. I interviewed as many people as I could. I observed them use their daily processes, asked them questions about what pain points bothered them, and logged all additional documentation given to me by team leaders .

I made extensive notes which I organized in a private wiki. I recorded all these conversations for later review. I cross referenced these notes extensively and tried to draw out patterns and common themes between them.

I shared this wiki with the department and encouraged people to add their own input, add comments/questions. I have always been a fan of wikis, but I had first started fiddling with wikis for documentation when I was at the DoL. To me this seemed like a much smarter, more approachable way to document software projects. Developers have lots of very fancy documentation frameworks (such as Atomic Design’s Pattern Lab), and while these frameworks provide some very smart automation features, civic tech orgs often have a wide diversity of stakeholders who might not be as familiar with as much code as necessary. I settled on using Nuclino to document my UX research and processes because of it’s clean simple design, speedy SPA frontend, and it’s markdown influenced input scheme that allowed for fast keyboard centric documentation formatting that was then also reflected in it’s flat file backend which could then be easily exported as txt files to basically any machine environment conceivable.

Second I  researched the vendor technologies that would be used. I poured the MuleSoft, Team Foundation Server, and ChangeGear documentation. These were the 3 vendors that we would start with as a proof of concept. I tried to map as many commonalities between these systems and discussed with stakeholders in what ways they used different parts of these systems together. The purpose after all was to integrate these systems together into a single frontend using the MuleSoft middleware API. What kind of information was useful in one app that was relevant to another app’s? What data-fields were repeated? What data-fields contradicted? Identifying the disjointed parts between these pieces would be necessary in order to build a system which properly filled in the cracks.   Lastly, I began wire-framing. I like wire-framing with paper and pencil. Sure I can use wire-framing apps like Sketch or Figma, but I think that’s unnecessary considering the second step in this process.

2. Implement hi-fidelity UI mock-ups directly in static code using preexisting code libraries.

This is often my preferred way of working nowadays but this was also out of necessity. I came into work bright one Monday morning and was told I needed an interactive prototype delivered within 2 weeks for the CIO presentation. Our department needed to justify the existence of this project and it was thought that the best way to do that was to give something that could actually be clicked on.

One can debate this approach to design all day, but one of the realities of working in civic tech is that you are often working up against strong internal political constraints. Private orgs also meet these sort of difficulties, but while designers/developers can often make a profit-motive argument in favor of better approaches, it’s often more difficult or even impossible to argue with the structure of the civic org itself. Civic orgs pretty much all predate modern information technology, they were set up in the days of paper records, and horse drawn carriages. Imagine how different the United States Constitution would have been had it been written in the day and age in which a literal physical representative jumping on a horse to Washington DC was no longer needed!

So that meant knocking out a basic mock-up in 2 weeks. Here’s the great thing about code. It scales, and it’s often cheap or free, and easy to copy and paste. I purchased a static HTML/CSS/Javascript framework for 15 bucks and started mocking up the visuals for the wire-frames. Fully animated, built using the most up to date and modern frontend specs like CSS Grid and Flexbox, componentized functional SCSS and heavy use of variables for visual design scheming. It was a no-brainer. I delivered on time.

3. Build Angular 6 components in code to be handed off for developer use.

Once we had buy in from the powers that be, we needed to actually start building the project. Our frontend developers had selected Angular 6 as their frontend of choice.  Like many other new client-side SPA frameworks such as React or Vue, Angular 6 has a focus on componentizing UI. My goal then was to further define the layout and design of the application UI, and do so in a way that fit into the developer’s pipeline. I had already started learning a little React.js on the side, so I decided to take a class on Angular 6 and actually convert over the static components from the UI mock-up into Angular components. This repo of code would be a living design system, code named: Limestone.

Along the way I also partnered with the Web Team to utilize their burgeoning Travis County ITS visual design language. While this had a bit some high up front technical requirements for me as a designer, I am convinced that this is a necessary step for the future of designers in our modern tech industry, and civic orgs can not be left behind in this paradigm shift. It wasn’t so long ago that code and design were handled by a single “webmaster” and I think we are going to see an evolution of that relationship between design and code. Can you paint without ever touching a brush? Well I won’t pretend to answer that question fully for you here (the internet already has it’s fill of those kinds of articles), but I am personally convinced that the design of a thing is necessarily situated in it’s medium, and if you want to design something, you have to get your hands a little bit dirty.

There’s not much of an ending to this. My contract ran it’s course, the project was not continued after I left due to a lack of funding, but the processes that I laid out stayed and I hope have continued to help guide the ITS department on their new projects.

As for me, I’ve continued to study and up my development/design skills. Following working at Travis County I stood up my own cloud server system and built an extensive set of processes for automating and containerizing my development/design processes. I’m currently digesting what I’ve learned and trying to integrate these things into a hackable design/development/non-technical-stakeholder deployable tool-set that can be adapted and used by many different civic orgs. I’m also looking for my next contract, and am particularly interested in working with civic orgs who are seeking to build smart scalable, well design systems that can be open sourced and shared with everyone.


Department of Labor Web Redesign

Case Study

Website Design for the Department of Labor Job Corps program.

The Backstory

Job Corps is the the largest residential educational training and job training program for young adults in the United States. It benefits 60k students a year by providing them education (including GED and ESL programs), stipends, and job training.

The Initial Design

The original Job Corps website had not been updated… in a long time. It was running on a proprietary and outdated CMS. Our job was to give it a refresh, while also migrating all of its information over to the Drupal 8 CMS.

I was brought on after the first round of redesigns had been proposed and passed over. Below is an example of the initial redesigns that had been proposed by my predecessors.

The Challenge

There were a number of challenges to this project. The first most fundamental one was how to present a government jobs training program to disaffected youth in a way that was engaging. Job Corps had seen a radical drop in applications in the years leading up to this redesign. Job Corps offers a lot for disadvantaged young adults looking to better their lives, but it can’t do them any good if they never hear about it, or it’s not presented in a way that’s exciting and highlights the boosts it gives them.

The difficulty of this challenge was increased by structural issues that were beyond our control as designers and developers. The main one being that we were not allowed to do any user research in our initial design phase. Surveys of the target demographic, A/B testing, usability testing, diary/camera studies, or even former/potential user interviews were not allowed. So we were tasked to design a meaningful experience without necessarily knowing to whom we were even talking.

The Solution/s

We all contributed to the solutions but since this is my case study, I’m going to focus on my contributions and how it affected the final product.

First, we had to deal with the lack of user testing. We were not allowed to contact any former alumni of the program. We did get to talk a little bit with a guy who shared our office space who worked for the DoL now and had gone through the program, but information was thin on the ground. Thankfully, we live in the information and smartphone age, and it turns out there are a whole lot of young former, current, and prospective students putting up their opinions and thoughts about Job Corps on Youtube.

Honestly, the kids’ videos surprised me with their sophistication and media savvy. Some of these kids should have been taking over the Job Corps’  ghost-town social media presence. Their content was unfiltered, raw, and gave some amazing insight into the program and what life was actually like for them – no marketing or jargon to get into the way. They drove home what they cared about, what they saw they could get out of the program, and what their aesthetic and personality might be like.

Now that we knew who we were talking to, we needed to draft a message:

The solution I felt was two-fold.

  1. Appeal to the pragmatic concrete advantages of job skills training that empowers the participants in the program, and made their work seem valuable and worthy of respect.
  2. Present the existing website information in an easy to follow way, that was structured such that it reinforced the overall message and values of Job Corps through it’s presentation, rather than being incidental to it.

I started my design process by putting together a  moodboard  of diverse influences that I felt would help communicate the values and goals of the Job Corps program well. The biggest thing lacking from the original website and presentation was a positive presentation of blue collar jobs, and an emphasis on the dignity of hard-work and labor.

College is lauded in our society, and while welding on an oil rig can pay pretty well, it’s not something that people really give a lot of credence to. It reminded me of  a TED talk by the host of Dirty Jobs, Mike Rowe, in which he talks about the lowered opinion of blue-collar work in America. If you want kids to buy into a jobs training program you have to present their work as important and valuable.

I looked to influences from the WPA and FSA photographers during the Great Depression with their clean simple and American graphic design supported by photography which depicted pride in the roughness of real life.

Inspirational quotes from leaders who laid the foundation for these programs.

The typography used in fitness motivational Instagram pages that are also very popular with our demographic.

The websites of blue-collar friendly companies like tool manufacturers and craft breweries.

And in the vein of craft breweries, I looked for depictions of young people engaged in their work in a “craftsman-like” fashion, particularly emphasizing a diverse and “alt” representation that would appeal to young people. Men and women, people of color, tattoos, bearded guys with dirt on their face etc. The emphasis here was on the ownership of the job as craft that the young person could take.

And in the vein of craft breweries, I looked for depictions of young people engaged in their work in a “craftsman-like” fashion, particularly emphasizing a diverse and “alt” representation that would appeal to young people. Men and women, people of color, tattoos, bearded guys with dirt on their face etc. The emphasis here was on the ownership of the job as craft that the young person could take.

Job Corps isn’t just offering a training program. It’s offering a new identity. The opportunity to reinvent yourself, make something new.

This visual design is not superfluous aesthetic to the purpose of Job Corps. Rather it is the medium through which the message is transmitted.

This brings us to the second goal. Visual design can transmit the values and promise of Job Corps, but the information still needs to be organized in a rational and accessible way. This is where visual design meets systems/information design.

We had a lot of existing information that needed to be transferred to the new website from the old, but by breaking this information into 4 topics, which also mirrored the application process we could make things easier to digest and also reinforce the theme of the website’s messaging

You can also see here the full view of my original redesign proposal to the team.

And below is a gallery of what the final website ended up looking like. I think you can see my influence on the structure and branding pretty clearly.

I think it’s also worth noting that while I was hired as a Senior Web Designer for this job, I was also involved in the technical implementation of the design on the front-end. I very specifically focused on the animation for the website, prototyping the first version of the menu in code so that I would have full control over the motion graphics design of the interface. Learning code has empowered me as a designer to create dynamism and movement. I’m not tied to static mockups or required to laboriously fake animation in After Effects. Instead, I can build the animations myself, which then provide a more robust starting place for front end engineers who translate the design into clean optimized performant code.


Deep Dimension VR Branding

Case Study

Branding for Virtual Reality company using atomic design principles.

The Backstory

Deep Dimension is a Virtual Reality company started here in Austin TX and they are creating a next generation Project Scheduler application allow project managers to display, research, and interact with project data in new and innovative ways.

The Initial Design

I was originally approached to work as a UX designer prototyping the application in Unity. The project was intended to be a hybrid application using both web and native application, and therefore I suggested that we improve the branding and web presence so as to start the UX design out on the right foot (by establishing from the beginning an  atomic design system that could easily be expanded over time) and hopefully recruit a more heavy duty architect to deal with the networking and online aspects of the service. 

The initial brand design was…. lacking. This was the business card being used at the time. But that was easy for me to fix!

The Challenge

I’ve done my fair share of logos and illustrations and doodles over the years but after having dipped my toes into Systemic Design Components with  Lodestone Social and afterwards reading   Atomic Design Systems by Brad Frost , I wanted to approach my visual design in as systematic and organized a way as I had my UI design. This meant creating not just a logo, but a brand identity. Brand identity is a modular system which can be adapted to any number of possible contexts and allows for consistent presentation of a brand that appropriately relays semantic information about the brand.

I see visual design and in particular brand identity not as separate “aesthetic” decorations to UX and interaction design, but as a pillar in its development. Users see the product’s branding before they use it, and the system that underlies the branding will also underlie the visual presentation of the interaction design system. I wanted to push my visual design further through well documented and consistent execution of deliverables to the client, and I wanted those visuals design to be integrated together in an overarching visual brand system, that would then lay the groundwork for our atomic systems design components.

The Solution/s

In order to systematize my deliverables for the client, I set up a series of milestones.

Initial meeting:
I met with the client and took extensive notes on what kinds of influences, styles, etc that they wanted to evoke with their brand. It was a pretty fun conversation and interview, with a focus on building as many reference points aesthetically as possible. I generated a word cloud and mind map based on my notes in order to visualize for myself what I saw as aesthetic and semantic connections.

I set up  a moodboard to catalogue a broad set of ideas about the brand and its aesthetic. I showed these to the client and we talked about how these thematic ideas could be presented in the final brand identity.

Logo sketches:
Rather than go with the first idea that came to mind, I chose to force myself to evolve ideas through an agile sketching method, focusing on rapidly experimenting with ideas.

I then took these ideas and surveyed a wide variety of expert/non-expert opinion. I had friends, family, anonymous users on the internet, fellow designers, and people working in the target industry look at the sketches and pick out their favorites. I tallied up the results, narrowed my preferences down, and discussed the results with my client.

Once I had taken in feedback from people and decided which I liked best I started iterating higher fidelity versions of the final contenders. This point of iteration was also interesting for me because I had just begun learning 3D modeling and used my knowledge to mock up the brandmarks in 3D. From there I could procedurally generate a lot of different versions of the logos by adjusting the camera angle, location, and lens length (which shifts the size of the field of distortion in a camera’s viewport)

Finalizing the B/W and W/B logo and brandmark:
I discussed the iterations with my client and after some discussion he decided on 2 final designs which I then translated into final B/W flat vector logos. I also made a W/B version due to the way that white objects appears differently over dark backgrounds.

Color and Type Palettes:
Now that the black and white logos had be determined I set up a color and type palette to inform the rest of the brand identity. Colors were chosen based on their cohesion and balance and their relationship with the general color palette that had evolved from the earlier research.

Final color illustration of the logos:
I now needed to integrate the colors and type palettes with the brandmark into a single color logo. I went with a highly illustrative rendition of the Monuments logo for the business cards, and a simpler color logo for the company’s general use.

Brand identity package:
As part of the package for the logo, I designed branded stationery letterhead and envelopes for company use.

While I enjoyed my time working in the world of VR, it’s still a really up and down sort of place, so I’m afraid to say that I had to leave the company before their project was able to come to market. I took a job at  Department of Labor on a very different sort of project, but one that nevertheless allowed me to continue and expand on my process towards systemic design in interaction and visual design.


Lodestone Social

Case Study

UI Design Systems and automation for Lodestone Social.

The Backstory

Lodestone Social (acquired by Umbel in 2016) was a sports and live event media marketing company focused on in-person geo-located marketing campaigns using their proprietary CMS and platform.

The Initial Design

The basic design for Lodestone’s platform had been established. My day to day tasks were to take those established designs and customize them for various client comps and presentations.

The Challenge

The challenge of implementing the established designs was in two different areas of our client presentation. While the design itself was already set up, I sought to optimize and expand our execution of these designs using componentized and automated processes. Nowadays this approach would be referred to as “Design Systems” or “Atomic Design”, but at the time, I was just an intern trying to get out of doing a bunch of boring grunt work!

The two areas with which I was tasked in implementing our designs were

  1. Static client comps.  New potential client comes in, I change some colors, switch out logos, customize the feature set available in the comp to what the client is looking for etc.
  2. A series of motion graphics presentations presenting the services that Lodestone could provide clients. In taking on these presentations I needed to translate the existing Lodestone Social brand identity to a motion graphics Adobe After Effects comp, and in the process build my comps in such a way that additional videos would be relatively easy to iterate on. Additionally, while I sought to create a flexible and powerful system for producing presentation videos, I also wanted to make sure that I made our work stand out from the zillions of paint-by-numbers app presentation kits that you could buy online from websites like VideoHive.

The Solution/s

While I was at Lodestone, I was also just beginning to dip my toes into code for the first time. I was taking online classes in HTML, CSS, and Javascript. One of the things that I found interesting in learning code was the focus on D.R.Y. (Don’t Repeat Yourself) code.

While my training in art had often emphasized the manual and specific execution of skilled craft, code as a field has an industrialized/automated paradigm at its core worldview. The genius and power of code is its ability to abstract things into functions/objects/libraries, freeing up the programmer to deal with the higher level architecture of the program.

Let’s say you write a piece of code that turns a red square into a blue circle. Instead of writing that piece of code over and over again, every place in a program where you need to turn a red square into a blue circle, you abstract that code into a self contained function that can then be invoked everywhere in the program you need that functionality. And this saves a lot of time, because, you can write a function once and then just invoke it wherever needed. Furthermore if later on you decide you want to change the red square into a blue triangle, you can modify you original function and the changes will propagate throughout the entire program!

As I was learning this, it occurred to me that the same thing could be done with our PSD comps in Photoshop. By breaking out individual parts into their own components, contained within Photoshop “Smart Objects”, I could speed up my future iteration speed and make it easy to customize things much more quickly. The CTA button needs to be blue? Just open up a smart object and edit it. Save. And the change is proliferated throughout the entire document and screens. This was literally years before I heard of Design Systems. I think it’s actually a fairly obvious leap to make once you become more familiar with code and code thinking, but I have to admit I’m a little proud of hitting upon this way of thinking, even if by accident, that is now so ubiquitous in the design world.

This change in our workflow greatly speeded up things and also helped to instill a greater level of rigour in our design system language.

The second challenge was to translate our existing branding over to an After Effects comp and to build it in such a way that it was easily iterated on using D.R.Y methodology. The actual D.R.Y. stuff is pretty straightforward, and not all that different from what I did in Photoshop. Adobe owns both programs so there’s a lot of crossover in their approach to things.

What was a unique challenge to this issue was that in presenting our app, I wanted to make sure that we retained a human element. It’s pretty easy to buy a ready made app presentation video comp online and then just plug-in your pictures and render the result. I insisted that we actually film demos of people using our apps. This would be useful, because it would show off the unique features of our applications (which is difficult to do with ready-made comps) but would also humanize and contextualize our applications in the environments and the people who would use those apps.

Balancing the bespoke aspects of craft and the scalability of design/dev is the key to creating a brand that is both agile and human.