Shutterfly Production Suite
Reimagining Shutterfly's Production Apps.
One Suite to Rule Them All.
Shutterfly uses many unique applications to process, manufacture, and ship all the personalized products and gifts they offer. However, these applications can be difficult to learn, especially when users need to change between apps frequently and aren't always highly fluent with computers.
It is also difficult for a development team to maintain so many different applications, much less make improvements to them. ZenXD was asked to evaluate and redesign the user experience of the production workflow applications used by Shutterfly's production line operators.
I was brought immediatdiscovery phase, initially to provide UX support to the design lead in planning the suite-level app strategy. Over the course of the project, my role grew to include:
- UI and UX concept generation and design at the suite level and individual app level
- Mid and high-fidelity prototyping
- User testing observation and insight synthesis
- 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 QA process during which I tested builds, documented, and expedited bug fixes
During the discovery process, extensive on-site research and contextual inquiry was conducted with employees at Shutterfly's print and production facilities. Based on the insights from this discovery process, the project goals were defined as:
- Increase production capacity through efficiency improvements, ensuring less production mistakes and increased ease-of-use.
- Make it easier for users to learn tools, reducing overhead costs associated with employee training and cognitive costs of context shifting.
- Increase employee job satisfaction through skill diversification and empowerment through task simplification.
The proposed solution was to create a suite of applications, where each application represents a fundamental manufacturing task. This required us to design a suite-level navigation pattern as well as a UI platform that could work for dozens of disparate applications.
To design all of this at once would be an enormous undertaking. We began by focusing on a single production task - Line Control. There were half a dozen line control applications in use, but they all did basically the same thing: allow users to choose orders and send those orders to the printers. This is where we put our first stake in the ground and got to work.
DESIGN & TESTING
Designing a universal Line Control app proved challenging as there were dozens of different print stations, each with its own unique needs and set of printers with different capabilities and purposes. Each of these contexts used different applications, processes, and terminology.
With direct access to users, we employed a lean design approach where we rapidly created concepts, showed them to users, and used the feedback to inform the next round of iterations. We also used these concepts to collaborate with other stakeholders to ensure that business and development needs were being accounted for.
EARLY LINE CONTROL CONCEPTS
EARLY JOB MONITOR CONCEPTS
Once we had the foundational elements for the Line Control App in place, as we continued to improve that design we also worked on how it would fit into the overall suite of products. This would require an intuitive and flexible navigation system for regular users, and a simple but powerful configuration system for the techs responsible for setting up all the manufacturing stations within the production facility.
We conducted many quick rounds of testing of both the production UI and the configuration UI with full prototypes using InVision.
HELP & TRAINING CONTENT
I designed several concepts for a self-serve contextual help system. Many of these ideas were scrapped for time, but are still in the backlog for future improvements:
Over the course of the project, I became somewhat of a subject matter expert on both the suite design as well as the line control process. Subsequently, Shutterfly requested that I author a significant amount of UI content, which included:
- All of the help content within the application
- A training manual for admin users to configure print stations
- A getting started manual to teach the training staff how to use the new Line Control app and Manufacturing Suite
DELIVERY & DEVELOPMENT
When working directly with developers, I prefer the "just enough" documentation approach. This was made easy using Sketch and the Sketch Measure plugin to generate interactive specs. I also used Principle to create reference gif to UI transitions:
I reviewed the builds daily and provided feedback to ensure the dev team always had enough information to deliver according to the intended design.
At first we had a somewhat informal dev management process using Trello to manage stories and the backlog, which was sufficient for such a small team. Halfway through the dev cycle I was put in charge of managing the remaining production work. During this time I worked with the dev team to streamline our already lean approach by restructuring our Trello process and reorganizing backlog items. I also was responsible for reviewing all dev work, logging/managing all bugs, and provided design solutions on the fly as issues arose.
As of this writing the new Line Control App and Suite platform is in the initial stages of its deployment. Early feedback has been extremely positive, not just for the new experience and interface but also for how exposure to the UX Design process has influenced Shutterfly's internal product culture. New initiatives are not only being shaped by the overall suite and user strategy set forth by ZenXD, but stakeholders are proactively seeking out design and product strategy upfront.
I collaborated with many talented people on this design project, and they deserve a lot of credit for its success:
- Brian Tharpe, Product Manager and 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!