Everything In Its Right Place

• Role: UX Team-of-one
• Time frame: 3 months

A stop-motion character production team needed a better system to keep track of 3D printed parts inventory and distributed puppet head assemblies at an animation studio. I led the research and design of a new, tablet-based webapp to improve inventory efficiency and streamline the workflow.

Problem Space

A department of approximately 12 people was responsible for tracking the assembly and distribution of hundreds of puppet heads (known as 'cores') produced during the duration of a film production. Their existing workflow had evolved over time, but was still supported by a simple digital spreadsheet page with limited functionality and an inadequate UI that only tracked half of the necessary data.

Research - Ethnographic Study

My first step was to observe the department members working for a period of time. Their workspace consisted of an inventory room where the parts were stored in labeled containers, an assembly room where the parts were assembled into puppet heads and existing puppet heads were repaired, as well as the stages where the puppets were being used during testing and filming. The team needed to track the location of parts and puppet heads across all these settings.

It became pretty clear that a tablet-based solution would work very well in this case, since the team members were moving throughout their workspace and the larger studio to complete these tasks. The IT department had a number of iPads already available for distribution, so using this hardware was a business win as well.

Research - Lo-Fi Journey Map

With my observational findings in mind, I facilitated an analog journey-mapping session with our key users, with this result:

Research - User Journey Deliverable

I developed a visual language to distill the journey map into a streamlined diagram, which the stakeholders reviewed and gave their buy-off.

I found that there were three primary use-cases for a digital tracking app:

1. Daily parts inventory audit
2. Live parts inventory updates, when a head or 'core' was being assembled or repaired and the part usage needed to be logged
3. New core request form, when a puppet body was ready for production and a new head needed to be assembled

The salmon-colored box represents the app itself, and the arrows flowing in and out represent a high-level front-end view of the data that needed to be tracked.

Stakeholders used this diagram to visualize their relationship to the workflow and our proposed app and understand how the app would be used across the various use cases.

Design - System Blueprinting

Now that the app’s functional requirements were clear, the next step was to understand the technical requirements. I modeled the data lifecycle and spec’ed out the back-end database relationships and API interaction. I then met with the two software engineers responsible for both databases to get their buyoff that the API requirements were feasible.

Design - Screenflow and Wireframes

With the feasibility of the app’s features confirmed, I began designing the UI using a scenario-based methodology. I built wireframes for a front-end interface that would address our three key use case scenarios and meet our major goals of displaying unified data from both back-ends in an intuitive and tablet-friendly layout.

Testing - Lo-Fi Usability Testing

I created paper prototypes from the wireframes and ran lean user feedback sessions with 3 users. The tests were informal task-based assessments which took the following structure:

• Introduce the project goal and paper prototype
• Describe three scenarios with tasks that represent each of the defined use-cases
• Observe users interacting with the prototype and thinking out loud, write notes directly on the prototype
• Ask followup questions

Feedback was positive and all users were able to complete their tasks, with only a few tweaks requested to the sub-part data entry options.

Design - Interaction Data Structure

Once the wireframes had been successfully tested, I started architecting the app's React/Redux component pattern. I designed the component hierarchy and user interaction requirements and diagrammed them using OmniGraffle, seen below. The components are represented by the orange boxes, and arrows represent how UX transitions are facilitated.

I reviewed the structure with our software engineers and got the thumbs-up to proceed with app development. I find that visual hierarchy diagrams make so ware discussions much more efficient, especially between people with mixed levels of experience. I try to put them together whenever possible on a project.

Results - Handoff for Development

With the design of the app tested and fleshed out and the technical requirements defined, I wrote up documentation and handed off the wireframes to an engineering team to develop. The app was built within a few months and successfully adopted by the team to improve their day-to-day operations.