Tapestry is a global house of brands powered by optimism, innovation, and inclusivity. Defined by quality, craftsmanship, and creativity, the brands that make up Tapestry give global audiences the opportunity for exploration and self-expression. Tapestry currently houses Coach, Kate Spade, And Stuart Weitzman. I had the opportunity to create a micro site for Tapestry’s 2018 Sustainability report.
About the Project
I had the opportunity to work on this project providing Art Direction, UI/UX design and strategy (Branding, as well as content strategy). Partnered with Carbone Smolan, I was apart of a 5 person team which included myself, an Account Director, A 3rd party writer, the Executive Creative Director for project over site, and a Design Director who had previous experience designing assets for prior projects with Tapestry who served as a guide and project mentor.
My task was to create a new microsite that would be added to the Tapestry website focusing on the companies sustainability report for 2018. The goal was to create a site of 4 to 6 pages that would highlight these initiatives, introduce a new website, and introduce new design components to the brand and its digital presence (more on that later). I was also tasked with creating a print version of this report that could be downloaded via the website or printed for reading. This report was a 50+ page document that highlighted the companies current and future progress in the areas of its workforce, diversity, production practices, and initiatives towards saving the environment.
The journey began with me reading through the document and working to organize all of the content in ways that would make sense for readers as they use the website. This meant taking content and breaking it down into buckets that could potentially reflect pages where content would be placed. The first challenge I faced was dealing with so much text content. Realistically 50+ pages would not translate well on web, so I focused my energy on working with the Tapestry team, our 3rd party writer and the design director, to work on ways to edit down the content for web. After we were able to edit the text content, I updated my buckets and was able to come up with a page structure that consisted of a Landing Page, Our People, Our Planet, Our Community, A Ceo Letter, and lastly a resources page for readers to download and access Tapestry’s print based content like the Letter and actual 50 page report.
After sorting through Tapestry’s content I then focused on creating wireframes based on the carved out site structure. We went through around 15 to 16 rounds of wireframes working out UX options to handle content and media. Early wireframes consisted of advanced sliders, timeline components, modal windows, and boxed content to hide some of the more lengthy content. Our explorations were so extensive for a few reasons. Firstly our first roadblock came when we discovered that Tapestry’s Dev team was only being headed by a few people and due to the tight deadline (about a 1.5 month turnaround) the options we suggested and implemented in the wireframes were not going to be able to be completed with in the timeframe.
I worked to combat this by simplifying the UX and basing it upon components that already existed on the current website. This allowed for the dev team to simply modify existing components and not have to completely engineer new options. The second hurdle was that website content was changed upon each review. That meant that pages sections would be switched, things would be removed or added. There wasn’t really anything we could do about those edits as this was direction from the client in order to present its best foot forward.
As the wireframes began to take shape, I worked simultaneously to elevate the brands styling and guidelines. The client mentioned that they did not want to stray far from its current brand styling but wanted to figure out a way to use its colors in a new way and to use the pattern seen through out the tapestry website in a fashion that was more integrated into the design and less of a decorative piece. I worked to create a mood-board or style-tile to explore new ways of handling color, typography, pattern, and image.
This exploration helped to solidify those items listed and showcased how they could be applied to both web and print. Initially I created two directions, one that focused on a more yellow focused palette while the other worked to employ an almost identical color set up. I later worked on more of gray palette which eventually worked its way into the final direction.
After an extensive revision process, I worked to add imagery to the wireframes in the last few rounds. I worked to curate images that would fall in line with the content provided by Tapestry. Working between Shutterstock, adobe stock, elements Envato, and Unsplash I gathered around 700 to 800 potential images to use on the site. Initially client feedback was great on the images as they hadn’t thought about curating images of their own which later become another issue we had to over come. Once the final wireframes were approved I then had to do revisions to updated imagery and content and new items came in almost daily. When it was all said and done I constructed a library of 1800 images from the prior sources listed as well as images Tapestry’s team sent over. From there the images were narrowed down to a much more concentrated library of around 250 images. The direction for these images were also worked out during the brand exploration phase which explored color effects, pattern effects, and various photography styles.
Another hurdle of this project was the Print component. So much time and energy was being devoted to the web piece all parties quickly remembered to tend to the print piece. I started some initial mockups of some cover designs based on work I did for the style-tiles just to start some direction studies on where and what the print piece could look and feel like. Due to the quick turnaround of the project and the growing need for support around web I handed these designs off to other memebers of the team and they were able to create the final print designs which can be viewed here. I was happy to see that some of the elements I introduced found their way into the end result of the print piece.
Our timeline was was to get Dev building the website by April first, and we were losing time with all of the back and forth with content and imagery. I made the call to start designing the UI components as time was quickly running out. The UI design process should have been straight forward as 1. the UX wireframes were finalized and 2) Tapestry made the call to have the site fall more in-line with the current visual aesthetic as they wanted this site to integrate seemlessly into the full website. This was not the case. We went through about 22 rounds of UI mockups each one changing images, text content, and even completely rearranging sections that were already approved upon. The UI process did not take me long to complete but it was rather frustrating to deal with such bumps in the road with a quick approaching deadline. I was able to design the finalize pages in about 3 days and continued to make minor tweaks until project handoff. This process of image changes and text changes lasted until the site went live.
All in all this turned out to be a project I was really proud of. I was happy that I was able to create assets that the client not only loved but will use in their brand moving forward. Some of the obstacle I faced at times were very tough but I worked hard to keep my focus on providing a solid solution for the client. When ever there was a set back or a delay or a change I just rolled with the punches. I think being flexible and open was a great lesson I learned from this project because it taught me that I can’t control everything going on but I can control myself. Through that control or putting the same energy into everything that I personally do, I can still achieve great results and high success.