Summary
The goal of this project was to redesign e-commerce sites for Tapestry, Inc, starting with Stuart Weitzman. The sites would be migrating to a new backend platform.
- Role: UX Research and Design (Experience Lead)
- Client: Tapestry (Stuart Weitzman, Coach, Kate Spade)
- Design Tools: Sketch, InVision, Keynote
- Collaboration Tools: Skype, Microsoft Teams, Box; Zoom (client)
Challenge: The challenge for the design team was that two other Tapestry brands, Coach and Kate Spade, would also be migrating. Solutions needed to work for all three. And they needed to be mobile first.
Team: I reported to the Associate Creative Director (UX). Other team members included the Design Director (Visual design), and two art directors. The project manager was the final core member of our team.
Phases of Work: Our work was completed in 2 phases. In phase 1, we focused on identifying best practices. In phase 2, we focused on completing the design.
Publicis Sapient calls itself a "digital business transformation company". Its headquarters are in Boston, MA.
Phase 1: Best Practices
The early UX phases of the project centered on finding examples and best practices for e-commerce websites, to present our findings to the clients for the different sections of their website. I found most of the best practices from the Baymard Institute, as well as other expert sites like Nielsen Norman Group (NNG.com).
The recommendations were organized by page or section, including home page, product detail pages (PDP), category listing pages (CLP), cart, and checkout.
For each section, best practices were presented along with screenshots of example sites, the current sites, and “out of the box functionality” for the backend platform.
Although I had not worked on luxury brands before, I discovered that the best practices I found for e-commerce sites applied just the same for luxury as they did for mass market.
Surprising Finding About Quick View: Don’t Use It
One best practice that surprised me, which was included in our findings, involved the use of Quick View. Baymard Institute identified that around 48% of websites utilize Quick View on product listing pages. However, their research concluded that “Quick Views are often symptom treatments for poor product list designs.” Therefore, the priority would be to create strong designs for the product list pages rather than create a new design for Quick View.
Learn more about this finding: https://baymard.com/blog/ecommerce-quick-views
Early UX Collaborations with Visual Design in Phase 1
Starting out, the visual design team concentrated on UI foundations, like building a pattern library, exploring typography, and high-level layouts, etc. We collaborated in a few of the following ways:
Shopping Journeys: As a team, we also discussed various shopping journeys to plan how we would address specific concerns from the client.
Information Architecture: We also discussed the information architecture of Stuart Weitzman and iterated on multiple sitemap options after exploring prior versions (on archive.org), similar sites, and consulting with the tech team.
Phase 1 Conclusion
Phase 1 concluded with a focus on specific PDP requests, shopping journeys, and presenting best practices. The design explorations and UX research were synthesized into a single client presentation. We did not make design recommendations at this time, other than surfacing these best practices.
Phase 2: Design Sprints
Our goal going into Phase 2 was to complete several rounds of 2-week sprints. The work would include most of the site, starting with PDP. A few highlights from the start of Phase 2:
Design-Pairing: In the first month, I closely collaborated with one of the art directors on an early design of PDP. We discussed various options for product descriptions, reviews, and selectors (such as for size, color, etc). I gave feedback on functionality; she focused on look and feel.
Annotations: I also supported the visual design team that first month by creating annotations for visual designs to upload for Confluence, following the terminology and guidelines in the reference architecture for the backend system.
Responsiveness: Throughout the project, I worked with the development team on understanding functional limitations and keeping a layout responsive.
Mid-Project Changes
As with many projects, plans changed.
Refocus in scope: Due to a client request, we were asked to redirect our efforts towards the global navigation and user profiles, and not start with PDP. The work would include headers, footers, country selector, sign in, account creation, favorites, purchase history, change password, etc.
New team members: A new UX team lead joined on the client side. The team member was focused on the longer-term goals of building an internal UX team, as well as a design framework for all three brands to use.
On-Going…
In one sprint following these changes, the UX and Visual design teams did a remarkable job collaborating on establishing a base for the design framework. I used my experience with Basecamp, Foundation (Zurb), and Tachyons to advise the visual design team on UI components.
Eventually the UI and UX teams split into two, so the visual team could support the design framework and the UX team continued the product design.
Outcome
The UX team continued with the product design, as planned. We focused on screens associated with user profiles, including purchase history, favorites, communications, user registration, address book, etc. We spent a lot of time iterating on form design and mobile layouts.
Screenshot references
My Week Note blog posts document some of the tasks I completed in Phase 2. They can be found for March, April, and May. A few highlights are below:
- Created wireframe desktop layout options for account profile dashboards in Sketch
- Created workflows to map proposed account profile functionality, including update address from account profile and checkout, communication preferences, and expired cards/payment methods
- Worked with the visual design lead and UX associate director to prep for a client presentation on wireframes and visual design of requirements
- Included a table within the wireframes to map processes between systems, for better messaging for the customer
If you visited this blog post from my website, you can jump back here.
Sidenote
As ridiculous as it sounds to say, in the middle of this project a new and deadly virus spread across the United States. A global pandemic was declared. The city of New York became the hardest hit locality in the United States. In the early weeks of March, we stopped travel to the client’s location and the main office. For 2-3 months, all work became remote.
However, back in 2017, I wrote this blog post with tips for better conference calls. The remote work affected some members of the team more than others, but we were able to find new ways to collaborate using online tools and lots of patience.
