Landing Page & Email Redesign

Macy’s Backstage

For this project I worked with a designer and developer to create a responsive website template and prototype. Understanding the intended user we based it on two of the 5 personas. After a quick sketch to map out the content, wireframes were developed to accommodate the user preference and primary goals. I advised on responsive best practices to educate the Creative team as they interpreted the wireframes. The developer and I created a system where the content managers could input copy, links and images into a spreadsheet which would then feed into a JSON file to populate the prebuilt template built with Angular JS. This solution allowed the teams to stick with the tools they were comfortable with and minimized the duplication of efforts when generating content. The overall outcome created a statistically significant increase in associated revenue at Macy’s.com

Final Mockup

Desktop & Mobile Landing Page

Email

Process

Target market

The Backstage target market is diverse, however, 2 motivations unify them: to stay on top of fashion and to find deals. We referenced the 3 fashion and value-seeker personas in designing the new experience.

The ability to shop online was important for the younger digital native contingent.

Current experience

As a part of the design research team, we assessed the current landing page for opportunities to inspire and engage potential shoppers. We offered recommendations to infuse more fashion inspiration, and provided guidelines for the copy team to improve SEO relevancy on the page.

Recommendations:

Optimize headlines and copy for SEO relevancy
Reformat "operational" content like email sign-up and store locator from banners to reduce banner blindness and improve findability.
Add fashion feature to elevate the aesthetic and provide inspiration.
Move the store locator map to a new page.
Use geo-location to display or hide a “coming soon” banner.

Wireframes

Design library

The design library conforms to brand standards but also allows for flexibility in placement and layout.

By creating variants within components, the quantity and complexity of assets was greatly reduced, and lowered the learning curve for the designer, resulting in a more efficient process.

Enhancement 1: Geolocation based banner

Geolocation allows us to display “Coming Soon” messaging when relevant, allowing us to remove the long list of stores.

Enhancement 2: Fashion inspo using UGC

The social team was tasked with curating images related to the pre-planned winter stories following the broader Macy’s strategy.

The Design Team assisted in setting up a workflow that would not add extra work by leveraging pre-existing assets.

The mockup to the left uses swipe photos for demonstration purposes.

Mockups

The Design Research time not only provides functional wireframes but also mockups and/or prototypes to share with stakeholders to convey the the importance of engaging photography, a consistent color palette and representing a range of categories to appeal to all demographic segments corresponding to the relevant personas.