UX Design and Strategy

Shutterfly Manufacturing Suite

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. 

 
 
Hero.png

Opportunity

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.

 
 

Solution

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.

 
 
Shutterfly app strip.png
 

My Role

• 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 clients 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

 
 

Unique Challenges

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. 

 
 

Discovery

ZenXD conducted user surveys as well as extensive on-site research & contextual inquiry at 2 of Shutterfly's print and production facilities. From these in-situ observations were distilled our insights into a list of clear design themes.

 
IMG_2917.jpg
IMG_2806 2.jpg

Shutterfly Design Themes.png
 

Personas

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. Our two primary personas are shown below:

 
Shutterfly Personas.png
 

Suite Strategy

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.

 
Shutterfly Suite Strategy.png
 

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.

 
Shutterfly Core Use Case Examples.png
 

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

 
Shutterfly Sketches.png

SCHEDULER EXAMPLE WIREFRAMES

Shutterfly Wireframes.png
 

User Testing

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. 

 
Shutterfly Redesign.png
 

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. 

 

Results

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.

BEFORE

 
Shutterfly Before.png

AFTER

Shutterfly After.png
 

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.

 

CREDIT

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!