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….actually it’s first CMS platform. I was hired to help the small team tasked with designing, building, and assisting engineering with the development (and ongoing refactoring) of the CMS components. 

Our team was also responsible for providing a library of components for designers as well as training, guidance, documentation, and ongoing consultation around the use and function of the CMS components.

challenges

Our timeline was tight, so our team needed to build relationships quickly in order to work collaboratively across teams including UX, Marketing, Creative, eCommerce, Brand, Legal, Promotion, Product, and Engineering.

goals

Create, define and continually support a system of components that would improve the design of the site and increase efficiencies. Improve collaboration by breaking down barriers and connecting individuals and teams to ensure we would be successful in creating a system that worked for all stakeholders.

solution

We created a library of pixel-perfect component mockups in Sketch and wrote detailed specifications around behavior, logic, design, use cases, and CMS interface recommendations. 

Over time, we defined a process and I presented it across teams:

• Starts with a business goal/need/pain point or update request from Creative, Brand, Marketing, UX, Legal, etc

• Meet with stakeholders to determine goals, needs, and requirements

• Begin check-ins with relevant partners (Creative, Brand, Design Systems, Ecom, Engineering, UX, etc)

• Ideate solutions, define all possible use cases and perform secondary research if needed

• Create low- and high-fidelity mockups including detailed specs

• Review with stakeholders/partners and iterate based on feedback

• Once approved by all parties, hand off to engineering

• Provide support through the development process until the release 

• Create master symbols (with nested symbols for all variants) for designers to use in page mockups

• Provide documentation and training for designers about the updates and master symbols (demos and Frontify)

• Post-release—continue to review and test components in BR and track performance once they are live on site

• Ongoing consultation with designers as they use the components

• Track issues, potential improvements, and additional use cases as needed

my role

• Everything listed in the process list above ^

• Collaborated with the team to define, research, design, evaluate, refine and deliver (repeat) scalable, flexible and functional CMS component solutions

• Built the master Sketch symbol library of CMS components for visual designers

• Trained designers on the CMS and provided guidance whenever needed

• Led the refactoring process for CMS components

• Proactively worked with engineering and design systems to increase efficiencies

• Broke down barriers between teams and colleagues to help build stronger relationships

• Ensured all stakeholder perspectives and opinions were considered throughout the process