Manufacturing Suite
Enabling Shutterfly to print & ship millions of products with a simple, integrated suite of applications.
Printing millions of personalized items a year is a big, complicated endeavor.
At the time, Shutterfly’s printing and shipping involved dozens of highly technical, disparate applications. Even the simplest tasks required multiple apps and high technical fluency. This was problematic in a time-sensitive environment, with users who need to learn quickly.
How can we provide a simple, easy to learn toolset that covers all of Shutterfly’s production needs?
My Role
I partnered with the lead designer, researcher, developers, and Shutterfly stakeholders to envision, design, and develop a full suite of web applications.
What I Did
Full UX/UI including interaction design, prototyping, testing, content design, & visual design for multiple applications
Conducted interviews & design reviews with remote client stakeholders and developers
Authored UI content, help content, & training guides
Management of agile dev process, daily scrums, & UX QA
Getting to know the problem space
User surveys as well as extensive on-site research & contextual inquiry helped us understand the production workflows, who we were designing for, and where the opportunities were.
Designing for real people
Our primary personas were based on real people working daily on the production floor, who had different needs based on their role in the manufacturing process.
Seasonal Operator
Works under a Lead to process orders and perform quality checks across multiple workstations.
Is frustrated when she needs help understanding the tools, or when friends are assigned to work areas she is not trained in.
Production Lead
Schedules work, trains operators, anticipates issues, diagnoses problems, and creates solutions and workarounds to avoid downtime.
Is frustrated by constantly needing to switch between tools, bottlenecks, unnecessary wast, and duplicate efforts.
Design themes
Defining these themes early in the process allowed us to keep a cohesive and impactful vision persistent through our solutions.
Lower the learning curve
Reduce the number of apps, standardize terminology, use task-based language, and provide contextualized help.
Design for hand scanner
Designing around the hand scanner interaction avoids time-consuming data entry tasks.
Communicate status
Provide simple & clear error messages, utilize push notifications, and highlight priority items.
Enhance the work environment
Make UI “open” as a foil to a noisy & cluttered workspace. Find opportunities to be friendly and decrease waste.
How suite it is.
We took our observations and principles into workshops with Shutterfly to create a new production model that would simplify workflows and consolidate the number of apps required.
A flexible but simple production model that accounts for different types of order streams and printing needs.
A small set of apps can cover a wide range of manufacturing tasks for all product categories.
The right fidelity at the right time
For each application I worked directly with engineering and product stakeholders to identify core use cases then used sketches, wireframes, animations, & mockups of varying fidelity to test and iterate on designs.
User-informed iteration
With direct access to users I was able to rapidly test prototypes and make both incremental and major changes. For example the original concept for the scheduler required a total redesign.
The original concept was for a consolidated schedule, with presses stacked in the UI.
Prototype testing uncovered two critical flaws with this concept:
Leads would often be working with more than 10 presses at a time, making the list hard to manage through scrolling.
Leads plan all production line tasks around a “single press schedule” mental model, so each press needs to be managed separately.
I redesigned the UI around single press schedules, taking inspiration from various task-management UIs to manage each press in its own list.
This allowed Leads to see more schedule info and provided more flexible options for adding and managing jobs.
Establishing universal elements
We envisioned a production workflow where users could switch tasks or workstations with little friction. In addition to the obvious needs of a UI framework like navigation and messaging, we designed patterns for common production elements that could be leveraged across all apps.
Out with the old…
Where there were once dozens inconsistent and complex applications required to manage Shutterfly’s production workflows…
In with the new, modern, and simple.
Powerful, clean, and beautiful print job scheduling empowers leads with full control and visibility into the day’s production.
Leads and operators get intuitive views of timelines and exactly how orders are batched, formatted, and sent to print lines, empowering everyone to work autonomously and efficiently.
A new shipping workflow allows operators to work autonomously, efficiently, and accurately to get orders out to the customer.
Making an Impact
Shutterfly saw an immediate decrease in critical metrics of training time, operator errors, and material waste.
Overall manufacturing efficiency metrics increased, including higher production rates, accuracy, and uptime.
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 in motion by our solutions.
