E-mail

James Acklin, a coding designer

I am James Acklin, a digital product designer and front-end web developer. I work full-time for Nielsen Media Analytics in Pittsburgh, PA.

I have created digital experiences and tools on the Web for startups, large agencies, and Fortune 500 companies for about a decade. I have extensive experience with building and designing visual, component-based UI design systems for consistency, aesthetics, accessibility, and usability. I am also a UX general practitioner, leading user-focused design exercises and research efforts.

I am comfortable in pro-complexity UX vacuums and formally advocate for human-centered design methods in business contexts. My design practice concentrates on high-fidelity prototyping, information design, and living code deliverables. I have a passion for manipulating data and working with the raw material of the web.

Occasionally, I conduct branding exercises and do general graphic design work for projects I'm interested in or personally connected to. I am not presently accepting freelance opportunities.

Case Study

Rhiza User Bifurcation

Adapting a general-purpose research toolkit to new users and markets

Upon acquisition in 2017, Rhiza's general-purpose analytics product needed to serve the research needs of local TV & radio stations and networks. Nielsen wished to aggressively protect against revenue erosion to lower-priced competitors and turned to the newly-acquired Rhiza team for help. Our goal was to bring the simplicity of repeatable market research tools to local markets using the system we had built.

We proposed targeting two different groups of users, introducing "Creator" and "Consumer" roles. The objective was to mask off just enough complexity and provide a refined workflow for "Consumer" users, while enhancing expressive power and publishing capabilities for "Creator" users. Along the way, we would develop a syndication model of pre-built research stories for "Consumer" users to subscribe to—thus creating a new revenue stream for Nielsen in local markets.

A diagram showing users' familiarity with Rhiza and the anticipated uses for Templates
→ Based on stakeholder interviews and early feedback with existing Nielsen customers, we proposed introducing two primary roles, which would give us adequate coverage for many different personas.
Research findings and several proposed features to provide backfill support for new user personas
→ Summarized research findings and proposed a suite of features for validation. These features were designed to gear the system to users without time or budget to invest in a technical research workflow.

These features expanded the capabilities of the existing “Template” infrastruture to enable the creation of simple, custom interfaces.

We wanted to validate both the positioning of the product and this new, bifurcated user model. I created a few diagrams quickly showing the feature surface area each user class would cover. I validated this with potential users and subject-matter experts.

Diagrams depicting two different user flows through the Rhiza system
→ Created user-focused capability diagrams for socializing the bifrucation concept and laying out the template publishing / consumption model.

→ Mocked up an extremely low-fidelity cartoon prototype and validated this workflow with potential users.

I also conducted an academic exercise exploring various ways people tend to browse feeds of information, and proposed several ways of "chunking" the interface up to avoid both nesting menu options to excessive depths and presenting users with a wall of indiscernable chaos.

This was an important step for developing our pre-fabricated research stories. Rhiza needed carefully manage a curated feed, which was new territory for both us and our acquiring Nielsen team.

A slide deck from a review of information architecture approach for browsing a feed of like bits of content
→ Researched and applied an approach enabling discovery and recognition in a feed of published Templates, dubbed the “Explorer.”
A screenshot showing an interactive feed prototype in Principle.
→ Tested information architecture and interaction model with several user proxies.

I supported implementation by first prototyping the interface in the browser using Vue.js, then passing the prototype off to engineering when product leaders were satisfied with both visual and interactive elements. I then pivoted to creating traditional interaction design artifacts such as flow diagrams and wireframes.

Screenshots of various stages of the Rhiza Explorer.
→ Constructed initial in-browser prototypes with Vue.js.

→ Iterated with visual designer and product owners to land on a non-standard, uniquely non-corporate visual style.

→ Assisted with final implementation in production Angular application.
Wireframes and diagrams depicting Template cards, sharing interactions, and publishing workflow.
→ Developed information design diagrams, interface mockups, and visual guidelines for Template “Cards.”

→ Created system architecture drawings to illustrate Creator-to-Consumer publishing mechanism.

Outcomes

The newly-adapted Rhiza product generated $5m annual recurring revenue for Nielsen with ~100 local TV & radio clients (~1,200 individual users). Rhiza's Template creation and publishing model led to formation of Media Analytics' Dashboard team, a team of 5 analysts creating valuable custom end-solutions for clients. These efforts also began critical conversations within Media Analytics about "always-on" solutions and the value of delivering software over services.

Case Study

User-Uploaded Data in Rhiza

Enabling new use-cases for Rhiza at Nielsen

One of Rhiza's early key differentiators was that users could bring their own datasets and analyse them alongside bigger, syndicated datasets using the same tools. These datasets could be from private collection, exports from other tools, or really anything that fit in a CSV file. This feature proved to be useful for Nielsen Media Analytics analysts, as they frequently used Rhiza as a central clearinghouse for frequently-updated, custom data delivery for clients. These user-contributed datasets were represented as single tables, generated from a single CSV file.

As Rhiza's importance in the Media Analytics offering suite grew, analysts needed to conduct rolling updates to datasets in Rhiza without duplicative visualization work. As a result, we introduced a "dataset" structure, composed of multiple underlying files. We designed several rules for the system to produce a composite dataset of several files, and allowed users to manage datasets they created.

User-contributed data was always a focus area for usability and feature improvements, but usually took a backseat to more pressing issues of technical debt. I had investigated improving the usability of the feature several times—once in March 2015, then again in February 2016.

Diagram outlining usability improvements to user-uploaded dataset interface in Rhiza.
→ Began as exploratory concept in March 2015, revisited in February 2016.

Based on some interviews with Media Analytics analysts, I constructed a few diagrams outlinign how the system should behave from a user-interaction perspective.

→ Quickly diagrammed interface to test model and validate overall physics.

I then collaborated directly with engineering to create operational diagrams of several usage scenarios to better design an interface aligned with users' mental models. We also outlined exactly how the system should behave in each of these given scenarios with the explicit understanding that the interface should abstract atop these operations and provide a seamless experience. These scenarios eventually became implementation stories and test cases.

→ Generated a detailed abstract talking through each scenario and articulating how the system should respond. This proved to be later useful for quality assurance, generating training and onboarding materials, and writing tests for the new feature.

With the technical underpinnings in place, I mocked up the new dataset editor in the browser using Vue.js. We wanted to move quickly, so it was easy to lay out the interface, add styling and animations, and define component states directly in the browser. We then validated this prototype with users, stakeholders, and anyone who wanted to give their input to the feature's development.

Prototyping in the browser also made it easy to define design requirements directly on element DOM nodes and display them with a guided walkthrough. This effectively described the relationship between various component states and communicated the interface's intent, reducing friction and surprise later in the development process.

→ Prototyped interface in JS to communicate and test interaction.
→ Added meta-markup layer in later versions of prototype to demonstrate and clarify design requirements in situ.

Outcome

With this feature, Media Analytics analysts constructed and delivered on-the-fly updates to dashboards for Nike, Facebook, and other high-profile, high-value clients. Thanks to our design-in-code approach, we cut implementation time nearly in half, beating our sprint estimates and making our product managers very happy.

This feature also opened new use-cases for Rhiza within Nielsen as a general-purpose analytics delivery platform and began some strategic conversations about programmatic addressability.

Case Study

Steady State Cycles

Thoughtful branding development for a high-end cycling shop

Steady State Cycles is an outgrowth of Pittsburgh's premier professional road cycling shop, which had 17-year history of providing mechanical excellence, European racing bikes, quasi-rare components, and overall “the best of the best.” The new shop caters to performance-demanding bike racers and affluent enthusiasts. Steady State hosts road race viewing parties via Eurosport streams and have a culture of intense attention to detail, aerodynamic optimization, and sky's-the-limit builds.

The new, bootstrapped owners of Steady State commissioned me to provide a logo-mark, type, and essentially serve as their quarter-time in-house designer. We agreed on a few specific influences to check, such as Formula 1 racing, Porsche design, and Mavic's "special service course" line. In essence, we wanted to position Steady State Cycles as every cycling superlative.

→ Developed desirable qualities the Steady State brand should ideally exhibit.
→ Arranged desirable qualities in a circle diagram, highlighting key conceptual areas.
→ Conducted visual research based on theme areas.
→ Initial explorations—a deliberate exercise in hideosity; designed to gauge rough direction and intent.
→ Refinements of the logotype and word-mark.
→ Final tweaks to the logotype and wordmark, forming a full lockup.

→ Secondary color selection driven by a desire to distinguish Steady State from other bike shops in the area, which lean on sports teams colors for recognition.
→ Programatically generated alternates for all implementations of the logo-mark, word-mark, and full lockup using ImageMagick and shell scripting.
→ Implemented logo shown in various on-screen and print contexts.
→ Website, built with Nuxt.js, then refactored with Sapper. Statically hosted on Now. View site, or view source on GitHub
→ Helped team apply logo to real-world signage in brick-and-mortar retail context.

Outcome

Steady State Cycles is now a profitable and growing high-end cycling repair and sales operation in Fox Chapel, a suburb of Pittsburgh, Pennsylvania. The shop is a destination for riders and racers who appreciate a distinguishing touch for service and rock-solid guarantees. The owners have received multiple positive comments on the logo and identity system, and it remains one of the strongest graphic representations of cycling in the Pittsburgh area.