Loading

I was hired at Debtdomain in April of 2012 taking on several responsibilities including an overhaul of the branding, front-end code, and design process within the organization.

Debtdomain was later acquired by Ipreo.

Before writing any code, new pages were prototyped from low- to high-fidelity and iterated with stakeholders, business analysts, and product managers.

One of the first tools we fired up was Axure RP Pro, which we used for rapid prototyping and keeping track of our concepts. Below is an animated GIF of about a dozen or more iterations over one of our pages.

Overhauling an Old Design

The old designs were troubled both visually and technically and needed a complete overhaul. I started with my latest iteration of Kickstrap and began creating a custom Bootstrap theme using Debtdomain's colors.

Next, I created a UI Kit (described below) to use these existing colors and add custom fonts.

Groups Page (old)

(new)

The new groups page was one of the first pages in the application to be given an "application frame" treatment. The frame served to populate with varieties of page types across the application as well as to apply colors and branding to the experience.

Deal List (old)

(new)

Replacing the illegible and overly minimal previous "design," we set out to make the user more efficient. Users could now filter by typing and through complex user-defined named filters. We also integrated "pinning" to affix favorite deals above a list of recent ones.

User Testing

Observing the user

While there are plenty of fancy tricks at my disposal for testing and measuring the user experience, I don't know what questions to ask until I've actually observed a user.

At Debtdomain, we start by quickly making mockups of our ideas and immediately put them in front of a user. Silverback, a Mac app, has been great for this purpose as we can both see what users are doing on screen and watch their reactions via the Mac's webcam.

If, however, my goal is to present user testing directly to the team, I'll use Camtasia so I can focus more on video editing and group presentation.

Short-Cycle Iteration

Although there area a lot of great prototyping tools out there, I find myself pulling out my scissors and sharpies more often than firing up Indigo, Axure, Balsamiq, or Omnigraffle.

While testing an interface with a user, I can easily tear out a button from its group, move it to a new area, or quickly sketch out a new idea and re-test the user with the new change.

Debtdomain's headquarters are in NYC, however most of our clients are European and elsewhere. To communicate concepts with our London team, I would typically get on the phone with the business analyst and work in an Axure RP prototype via join.me.

Paired-programming

I generated an online styleguide using Sphinx documentation generator. This allowed me to quickly write in markup language and generate docs that were searchable and deployable cross-platform, even as a PDF or EPUB.

In pairs of two, developers and I could then work through specs and decide how best to implement the ideas in code.

Sandboxing

At first, this process was very slow because the work had to be compiled in Visual Studio, then accessed by logging into our system. To speed this up, I used Jade, Make, and LESS to create "sandboxes" where we could write UI code and test out parts of the styleguide. Because the sandbox built itself on browser request and didn't need credentials to access, we could iterate over code, fixing bugs and tweaking appearance in a fraction of the time.