integrated suite of web applications, 12 months
Shutterfly Manufacturing Suite
This case study reflects my views and not necessarily the views of the client. Confidential info has been omitted or obscured.
Shutterfly prints millions of personalized gifts each year in multiple facilities across the country. Shutterfly engaged ZenXD to redesign the user experience of the production workflow used by its employees to process, manufacture, and ship customer orders.
The existing manufacturing process involved dozens of highly technical, disparate applications. Inconsistent UIs, language, and mental models made the apps difficult to learn and inefficient to use. Even the simplest tasks required multiple apps and high technical fluency. This was problematic in a time-sensitive environment, with users who aren't necessarily computer-savvy.
We designed and built a new manufacturing suite from the ground up, replacing those dozens of outdated & complex tools with a set of 5 simple, cohesive apps (plus 1 for configuring them all). Each app was designed for a specific manufacturing task, with simplified language to make it easy for users to learn and work efficiently.
• Full spectrum of UX Design for 4 of the 6 suite applications, including interaction design, prototyping, testing, content design, & visual design
• Conducted interviews & design reviews with remote client stakeholders and developers
• Ownership of all UI writing guidelines, help content, & training guides
• Management of agile dev process and daily scrums, while simultaneously providing rapid design solutions as needed
• Ownership of UX QA process during which I tested builds, documented UX issues, and expedited bug fixes
This project had several unique challenges. The domain dealt with complex manufacturing processes, with a lot of jargon that didn't make sense to end users. Our solutions had to simplify the process enough for non-English speaking users with little computer skills, but also be robust and flexible enough to work with the existing platform in multiple locations across the country.
ZenXD conducted user surveys as well as extensive on-site research & contextual inquiry at 2 of Shutterfly's print and production facilities. We distilled insights from these in-situ observation, and came up with a list of clear design themes.
We were fortunate to have direct access to our users during discovery and throughout the design process. This allowed us to create concrete role-based personas backed up by data and direct observations.
Primary Persona Examples
To consolidate the vast array of apps we focused on the main tasks that drive the manufacturing process. The result was a set of 6 core apps to cover the most critical production needs. The design effort was a collaborative process between myself and a Principal of ZenXD. I was primarily responsible for the Scheduler, Press Schedule, Line Control, and Station Configuration apps, as well as suite navigation patterns.
The app lineup
Core Use Cases
We worked with the client using rough concepts and storyboards to identify the core uses cases for each application. With such a large undertaking, this process was vital to limit the scope of effort and drive design decisions.
For the sake of brevity I limited this example to only the Scheduler App.
Sketching & Wireframes
Since this project required significant input from remote stakeholders and users, I created several rounds of sketches and wireframes of low, mid, and high fidelity. Using InVision made it easy to collaborate with my design partner and the client to quickly evolve wireframes to detailed clickable prototypes.
SCHEDULER CONCEPT SKETCHES
SCHEDULER EXAMPLE WIREFRAMES
Luckily we had direct access to users, so we conducted frequent usability testing. I used InVision to rapidly create clickable prototypes and gather feedback. This lean approach enabled us to constantly make incremental improvements.
There were also occasionally major changes, such as a total redesign of the scheduler interaction model.
Delivery & Development
When I have the advantage of working directly with developers, I prefer the "just enough" documentation approach. I was able to do this using Sketch and the Sketch Measure plugin to generate interactive specs, and Principle to create reference gifs for UI transitions. The dev team built a component library based on the designs, which was critical to expediting dev work and UI specifications.
In managing the dev process, I worked with the dev team to streamline our workflow by formalizing a lean, agile process using Trello. I reviewed all dev work, logged and managed the UX bug list, and provided design solutions on the fly as issues arose.
The results have been met with overwhelmingly positive feedback. Users in all manufacturing locations report that the new UIs pleasant and much simpler to use than the previous system. Leads and training staff say it takes less time to get new employees up and running.
Influencing the Future
This project was the first time Shutterfly had been exposed to a robust UX process, and it has influenced their internal product culture. New initiatives continue to be shaped by the overall suite and user strategy set forth by ZenXD.
I collaborated with many talented people on this design project:
Brian Tharpe, Principal Designer at ZenXD
Angela Noel, User Experience Research at ZenXD
Dave Stewart, Developer at ZenXD
Jackie Wijaya, Full-Stack Developer at WebMocha
Emmanual Pilande, Software Engineer at WebMocha
And all the great folks at Shutterfly!