Shutterfly Homepage Redesign

e-commerce website

Shutterfly Homepage Redesign

overview

Shutterfly is in the process of simultaneously modernizing its brand, adding a new product line, and moving its website to a new CMS platform. In order to be successful in all of these big endeavors, the website needed to be redesigned…quickly.

In 2021, Shutterfly acquired Spoonflower, a company that prints artist-submitted patterns to fabric and wallpaper. Shutterfly decided to leverage the patterns on its platform and apply them to home decor products and is launching a new product line of outdoor decor in the spring of 2022.

challenge

Adding a new product line that differs from its current product mix of personalized photo gifts is a heavy lift for an established company and research has shown that users are confused about the introduction of the new line of custom designs. So the biggest challenge was increasing awareness of the new product line knowing that the majority of users come to the site with a specific photo project in mind (i.e., making the annual photo book, ordering holiday cards, buying photo gifts for special occasions) and may ignore the new offerings.

Additional challenges:

Reduce the visual presence of promotional messaging without impacting profits
Work quickly. The timeline for the homepage redesign was a little over six months
Ensure stakeholders were included throughout the process

goals

Provide the best “just for me” landing experience in order to inspire, engage, and enable visitors to browse, search, and discover both the new product category as well as existing products.

solution

Create a more modern, simple, and functional homepage that improves usability and uses business goals, user research, and stakeholder needs as the foundation for all design decisions.

methods

Stakeholder Interviews
Comparative Audit
User Interviews
Secondary Research
Wireframes
Prototyping
Developer Handoff
Design System Library

tools

Usertesting.com
Miro
Sketch
InVision
Jira

my role

Assisted with user research by observing, taking notes, and synthesizing the data
Initiated increased stakeholder collaboration
Designed wireframes
Led the refactoring process for existing CMS components
Created specs for developers, conducted handoffs, and provided support during the development phase
Built master nested symbols in Sketch for new CMS components
Provided documentation, training, and consultation across teams

before and after

research

I observed the user interviews, took notes, and helped synthesize the results. The results were included in a presentation to leadership and stakeholders. An outside research agency conducted additional research, which was incorporated into our strategy.

**Outline of insights, challenges, and high-level thoughts on how we proposed to tackle the areas of focus**

**The color-coded system I developed for labeling the key areas of focus**

**My concept for creating a pattern of informational and directional themes**

my wireframes and notes

Homepage Thoughts

If the goal is to provide the best “just for me” landing experience in order to inspire, engage, and enable visitors to browse, search, and discover both the new non-photo product category as well as existing photo products, based on our user research, it seems like the primary function of the homepage is as a directory to get users up to speed and headed in the right direction. The clear signposts should include deals, what’s new, what’s trending, personalized recommendations (returning), photo product categories, artist product categories, Spoonflower and Tiny Prints.

So the homepage can function like a trailhead where users can see what’s new, get help choosing the right trail for their needs, see what trails are the most popular, get recommendations based on their previous trail experiences, and find out what other users thought of the trails and see deals on park passes and parking.

Brand Navigation

All versions feature the brand logos at the top to highlight the various offerings and to differentiate the non-photo marketplace and Spoonflower from Shutterfly since most users felt like spoonflower and non-photo gifts would be cool, but some were confused as to why they were on the SFLY HP.

The selected brand is highlighted and there are various options for what to include in the header. The two concepts are:

1. including icons in the same space as the branding

2. adding a row of user-specific actions either above the branding or as the bottom nav

Page Content

The order of components follows a rhythm of Inspire - Direct - Inform

Inspire: beautiful product photography, and lifestyle images to inspire users and visually represent the brand
Direct: helps users get where they want to go
Inform: provides users information to help them decide, create, and learn more

The following components continue with the inspire, direct, inform pattern.

Horizontal scrolling is used a lot and there could be a mix of interaction types since horizontal scrolling may have accessibility issues or doesn’t consistently match users’ mental models.

component development and refactoring

The core UX team worked on the final iterations, and I was brought back to help with the component building and lead the refactoring of existing components. I worked closely with stakeholders and engineering to ensure all their needs and requirements were addressed, created detailed specs, and helped shepherd the components through the development process.

Example of Refactoring Specs — **Sample of specs for engineering**

launch

I supported the creative designers by creating master symbols in Sketch of the new and refactored CMS components (while at Shutterfly, I led the creation and maintenance of the master CMS component symbol library for designers. I was also on the UI Design System team, which involved making updates for the homepage redesign).

After the CMS components were approved, I provided training, documentation, and ongoing consultation for designers on how to use the symbols and the behaviors and functions of the components.