Walsworth Yearbooks

Overview

Yearbookforever.com is an important touchpoint for parents and students in their yearbook experience and a key product for Walsworth in their broader Yearbook ecosystem. Using a third party vendor to partner with Walsworth to develop a new yearbookforever.com site, leveraging modern technology, security, and best practices with a new look and user flow.

Problem

Redesigned the entire site. Added in in new functionality and business requirements to the site. Switched to a new payment processing vendor. Worked in an Agile process which was new to Walsworth team. Switched code base to React, utilizing MUI Design System. Used a third party development vendor for a set time, transitioned mid way to Walsworth development team taking over build. Took time getting developers up to speed on the new technology and processes.

Design Process

To begin the redesign I scheduled meetings with the heads of Marketing and Sales holding a Brand Exercise to get a feel for what was wanted for the new yearbookforever.com site from these departments. This was followed by a website audit and competitor research to uncover opportunities for improvement. Building on these insights, I created a brand style guide and low-fidelity wireframes to present to stakeholders for approval, then the third party vendor to showcase direction.

Working closely with the third party vendor, we shaped these wireframes into high-fidelity designs, colors, and typography that resonated with the brand identity. I provided marketing with designs to iterate and finalize new copy and error messages for entire website. After final I then documented all copy in Confluence. Customized the MUI Design System to reflect the brand, yet it also needed to be general in look for every school client we service. Prioritized mobile shopping experience during design and testing, considering 60% of our purchases are made on a mobile device.

Once the Design System direction was approved, continued in the Agile process to build new components as the project grew and keep them documented. I conducted detailed quality assurance testing in my QX Agile lane, providing fast feedback to developers to resolve tickets to move along quickly during sprints. I created new tickets as I saw tasks or bugs that needed to be addressed in the development site for future sprints. In my role as the project design lead, I ensured that the designs were brought to life with precision, meeting all functionality, business, and design requirements.

Walsworth help desk, quality testers, and marketing departments were updated during the build about the design to provide feedback and insights to help move the design in directions to help support our customers.

Solution

When we set out to redesign the yearbookforever.com site, my main goal was to make it easier for users to quickly purchase their yearbook or accessories and with confidence. To achieve this, we shortened process flows, added visual identifiers, and simplified the look of the site so users could focus on what they were purchasing. I shot product photography alongside the Marketing department to better highlight the products to provide clear product images. We improved the advertisement purchasing and it’s online design process. After customers search for their schools and land inside their school’s store we added the ability to showcase their school mascot/logo in the header, provide primary and secondary color in the header, and enlarged the schools name, city, state to help identify a school.

Overall the clean new design, communication and insight from various departments allowed the team to roll out a product that is documented and in a place to keep evolving.