Download to read offline
Uploaded byJosh Zapin
pres-irsurf2013-v11
Crocs redesigned its ecommerce website to better support branding, drive increased sales, and empower regional teams. The redesign provided a cleaner look across pages with bigger images and consistent calls to action. It launched smoothly across 18 countries over 16 months. Lessons included setting milestones with vendors, separating design and functionality testing, and extensively pilot testing changes. The redesign resulted in improved customer satisfaction, engagement, and sales.
pres-irsurf2013-v11
- 1.
- 2. What We’ll TalkAbout • About Crocs/Crocs.com/Me • Why Redesign • What We Did • How Did the Project Go? • Lessons Learned • Q&A
- 3.
- 4. Many famous companiesstarted in a garage. Crocs started on a boat. On a sailing trip in 2002, three friends had an idea for a better boat shoe. The original Crocs were light. Had good grip. Let water drain quickly. And they looked like nothing else. We didn’t set out to create a shoe to help people run faster, or longer, or whatever. We just created a shoe that was really, really comfortable. We didn’t tell people its purpose or how to wear it. We simply put it out there and let the world decide what to do with it. Turns out people – millions of people – simply like being comfortable. OUR GARAGE WAS A BOAT. Overview
- 5. About Crocs • 11year old company • $1 billion in annual revenue • 547 retail locations in more than 90 countries • 200 million shoes sold since inception (50 million/year currently)
- 6. About Me • GlobalDirector of Global eCommerce Operations • 17 years experience building digital experiences for major brands including IBM, Volkswagen, American Express • PMP, CSM
- 7. About Crocs.com • 22country sites in 4 regions and 15 languages supported by a global team and 3+ regional teams • Generates $100M year in revenue • During the past 12 months, global ecommerce traffic increased 25 percent.
- 8.
- 11. Why Redesign? • Supportbrand message and seasonal marketing campaigns by leveraging digital platforms. • Drive increased retention and conversion by creating a continuously- improving, best-in-class eCommerce user experience. • Empower regional eCommerce teams by providing updated tools, processes and measurement.
- 12.
- 13.
- 16. • Muted headercolors bring out more of the brand • Cleaner lines/less clutter • Permanent place to feature a product Home Page Comparison
- 17.
- 20. • Provided aplace where we can tell a category story • Bigger marketing imagery • No product cards Category Page Comparison
- 21.
- 24. • Cleaner linesallows product/marketing to be up front and center • Bigger/cleared product images • Consistent banner messaging • Quick-View functionality Sub-Category Page Comparison
- 25. PRODUCT DETAIL PAGE(PDP)
- 28. • No leftnavigation to give more space for product and user experience and less clutter • Better accommodation for tablet users • Better way to feature product video • Unlimited image angles • Zoom • Elevate Risk-free shopping above the fold PDP Comparison (Top Half)
- 29. • Recommendations algorithm •No more tabs to allow for more space for reviews • Main navigation anchors PDP Comparison (Bottom Half)
- 30.
- 31. • Cleaner separationbetween product and interactions • Clearer/consistent calls to action Cart/Checkout
- 32. • No topnav (harder to leave the checkout) • Clear direction to call customer service Cart/Checkout
- 33.
- 34. HOW DID THEPROJECT GO?
- 35. How Did theProject Go? • Smooth Project – 18 country sites in 15 languages, in 16 months • Started in February 2012 • Beta site (CA) in October 2012 • Launch US/TW/NL in January 2013 • Remaining rollouts complete by June 2013 – No disruptions • Positive Feedback – Customer satisfaction on presentation went up 4 points and 2 points for the US and EU sites, respectively – Better brand alignment • Internal and External users loved the look and feel • Good Performance* – Recommendation demand increased nearly 5x – 4% increase in the amount of visitors who spend 1-30 minutes on the site. – AOV went up by 1% *US data
- 36. LESSONS LEARNED Hindsight isEverything
- 37. SET TRIPWIRES FORYOUR VENDOR Lesson #1
- 38. Lesson #1: SetTripwires for Your Vendor • Original expectation: Get all sites launched before Holiday • Used Sprints to manage key milestones – Sprint 1: Shopping Experience (US) (Mid Summer) – Sprint 2: Checkout (US) (Late Summer) – Sprint 3: Remaining Features (Early Fall) – Sprint 4: Remaining Countries (Mid Fall) • Adjusted schedule/project and set appropriate expectations when dates slip
- 39. SEPARATE FUNCTIONAL ENHANCEMENTS FROM MARKETINGCHANGES Lesson #2
- 40. #2: Separate FunctionalEnhancements From Marketing Changes • Measurements are challenging when two dimensions are changing at the same time • Phase the project so you can separate out look-and-feel from functionality
- 41.
- 42. #3: Pilot/Test Pilot/Test(And Personalize) • Let your users dictate which things work better or worse – Provide experiences that are honed to their particular needs • Leverage multivariate testing to determine which things work and which don’t
- 43.
- 44. Key Takeaways • Successfulexecution – Much better brand alignment with a great creative platform for the future – Performance gains • There were challenges but we managed them effectively • Put us in a new mindset: pilot, test/prove it, pilot some more
- 45.
Editor's Notes
- #2 Thank you for that great introduction. How many people have heard of crocs? How many people own a pair of crocs? How many people thought crocs was dead? How many people have undertaken redesign of their site? How many found it to be a smooth ride? I'd like to stand up here and say that we had no pitfalls and that the combined 80+ years of combined experience of the team at crocs made it the case study of the year in how to implement a redesign of a major, global brand. It wasn’t. Still, it was pretty good. And, today I’m going to share with you some of the highs and lows.
- #5 How many people know that Crocs was invented on a boat. The original concept for our shoe was to make a better boat shoe. We call our “birth” at the Boat show in Fort Lauderdale. That’s where it was introduced. Why? It was light, comfortable, had good grip and (it even floats). Of course, it became MUCH more than that. People with boats, without boats, kids, adults, gardners, seemingly for a period of time, everyone wore our shoes. We put it out there, and lots of people wore them. Millions of people. And for those of you who thought that crocs was dead, I’m here to tell you that were not.
- #6 11 years: Not old for a shoe company, but longer than some people thought (even a few years ago) Our revenue has never been higher and we’re now an omnichannel retailer selling shoes, lots of shoes, in our own branded stores across the globe. And, most importantly, we still sell lots of shoes all over the globe.
- #7 I won’t spend a ton of time talking about me, but I’ll just say I came to crocs 2 ½ years ago from the digital agency world with the passion of living with a global, growing brand, and taking it into new directions.
- #8 Our crocs digital properties is a huge part of who we do business. We sell crocs all over the globe, both physcial stores and digitally. I am part of the global team that supports 4 regional teams that have sites that sell and fullfill the selling our product in 20 countries. There are 40+ Full time employees who manage the sites (about dozen on the global team alone) Our collective sites generate over 100M of our 1B in revenue with great margins, conversion rates, etc. That’s 10% revenue and while we don’t know for sure if that’s the optimal number, we know that it ain’t bad etiher.
- #9 If it’s generating 100M out of 1B, why redesign? From a show of hands, how many people when I say the word “crocs”, this is what you think of?
- #11 Although we’re still very much known for our iconic clog, the reality is that we’re much more than that now. Selling casual shoes, to flip flops, and even winter BOOTS. From casual shoes you can wear to work, to acitve, to boots (yes, boots), we are way more than the clog. In fact, we have more than 300 four-season footwear styles. So, why redesign.
- #12 Why was it time to redesign? Probably the biggest reason was the our brand had changed. We aren’t just a one trick pony shoe company, we sell lots of others. And, since our website is the number one branding vehicle, it had to be updated. Additoinally, we wanted to improve performance. As I alluded to before, our site didn’t suck. Actually, it performed well. Still, we wanted to improve it (who doesn’t). Finally, we wanted our regional teams to be more empowered to target their customers. You might say that we aren’t a global brand we’re a brand that sells all over the globe. The way we’re perceived in JP is different than EU. Our regional teams are empowered to target those customers. We wanted to give them better tools to target them. Now that you know why we did it? I want to take you through what did we did.
- #13 I’ll take you through a series of before/after pic. Ooos and Aahs are welcome in this section of the presentation.
- #14 First up the home page.
- #15 This was the old. OOOOO
- #16 This is the new. Ahhh
- #17 Some of the thigns to note here: We muted the header (was our “classic” green, now it’s white). This help make the other imagery on the site pop. Cleaner lines (header isn’t this rounded drop off thing…it’s straight) We also put a permanent place to feature a product. Next Up: Category Page
- #19 Here’s the old
- #20 Here’s the new
- #21 Besides the changes I mentioned on the home page, This s a page where we wanted to give a vehicle to better tell our brand story. No product cards (debate) Bigger imagery more space to promote Moving on…
- #23 The old…
- #24 The new…
- #25 The subcategory page is similar to the category page with cleaner lines and muted colors in the hearder, but we introduced bigger product imagery (note there are four on the left and only three on the right). Makes it less cluttered and helps make the product pop more. We also introduced new functionality: Quick View where you can click on this page to view a richer experience on this product without having to drill down to the detail page. Next…
- #26 This is where we made some of the most significant functionality changes.
- #28 Biggest changes No left nav to give more space for the product attributes and clearer interaction. Shoes complicated. Better way to feature video Universal scrolling to add more Zoom Feature risk free shipping on top
- #29 Biggest changes No left nav to give more space for the product attributes and clearer interaction. Shoes are relatively complicated with lots of interactions between color/size/quanitity. We wanted to give customers as much room as possible to make. Better way to feature video Universal scrolling to add more Zoom Feature risk free shipping on top
- #30 On the bottom half of the page, Algorithm YMAL/ recommendations More space for reviews Anchor of pulldown/main nav on every page
- #31 For these, I’ll just show you the new
- #32 On the cart, we have a cleaner separation between the product and the interactions. The consistent green for the call to action I think I really is displayed where your next actions should be the things in green.
- #33 Probably the biggest change in checkout was to elimante the nav altogther. If they’re in a checkout flow, make it not distracting. Keep them there. We also elevated customer service so that customers know where to get help. While it’s better if they do it on their own, it’d be worse if they left the site.
- #34 Before we move on, are there any questions to what we did.
- #35 So, now that I’ve shown you what we did, let’s talk about how the project went.
- #36 Almost incredibly, the project turned out to be really smooth. NO DISRUPTIONS! The feedback from our customers (and, somewhat more importantly, from our executive was overwhelming positive). People loved the new look and our customer satisfaction scores went up. The performance, while not a slam dunk, has been good: The recommendation engine really helped increasing nearly 5-fold The amount of time people were spending one th site has increased nicely. (Of course, more time on site, means more browsing, more exploration, more likely to purchase) We’ve also seen an increase in Average Order Value. While small, it does show that people are buying more from us. Now, I would love to stand up here and say that this thing was a piece of cake. It wasn’t. The team we had in place to lead had something like 60 years of experience building websites. While that should have made it the most beautiful project, there were things that happened.
- #37 So now let’s go through a few of the lessons we learned from this effort.
- #38 First up: Set tripwires for your vendor (or keep friends close and your vendors closer)
- #39 We had a choice: We could do it ourselves We could get a vendor to do it. Like I said, we had a ridiculousy experienced team who could have done it by ourselves. We chose a vendor because: 1) We wanted an outside perspective 2) We didn't have the bandwidth.. With a goal get all sites on redesign before start of Q4. We couldn’t do it alone. Vendor we selected said it was possible (what vendor won’t…I did when I was on that side of the fence). We knew it was aggressive, but possible. Still, we want to make sure. That’s where we co-opted a PM technique called “Sprints” to help keep our vendor in check. Does anyone know what a Sprint is? Sprints is a technique to “chunk” out a project into smaller releasable set of code. This means, that it doesn’t just sort-of work, it really works. It’s got to be ready for prime time. Now, we didn’t expect to release all of the Sprints (for example, it would be terrible to our users to change out the shopping experience but keep the checkout in the old design). We’d probably kill our conversion rate and we weren’t prepared to do that. What happened? The vendor missed these dates. First by a little, then by a lot. But, we knew where we stood at each point and was able to adjust expectation. So, instead of releasing all of the sites before Holiday, we launched a Beta site (CA) before Holiday. While it was a total change in the original plan, it was much better than rushing to release sites that didn’t work before. The worst possible thing you can do is release a site that isn’t ready during the busy shopping season. Fortunately that logic made sense to the people we had to tell when we slipped dates AND, most importantly, told these folks early enough to prepare them for the change. But if it wasn’t for the fact that set up the Sprints, we would have never had known. Questions?
- #40 S
- #41 Big bang redesigns often include branding updates with big functional changes. Why? Because if you’re going to have the patient on the surgery table, you might as well do everything you need to mimize the possibility of future surgeries. It is without question, the most cost-effective, efficient way to do things. But the reality, if you launch a site that makes those changes at the same time, it is going to be nearly impossible for you to discern the root cause of issues. We made the button bigger and green (used to be orange), which is the reason that people are clicking on it less? When you change both of these factors at the same time, it’s hard to discern which is your root cause. As much as possible, separate these two factors. Maybe Sprint 1 is to change all of the branding? Or do all the functional changes you want to do first. This is super-hard to do since on the Web branding and UX are so intertwined. Still, as much as you can, separate marketing and functionality. It’ll be The fact that we didn’t do that leads us probably to our biggest lesson of them all…
- #43 Big bang changes, big bang release sounds great, but when it comes down to it, customers may not think your changes are so great. What is becoming more clear is that just like brands has a personality, our customers do too. Some brands customers want to see more reviews, others want see more specifications. Some have both sets of customers. So, the key is let your users dictate which things work better or worse. Since the launch of the redesign, we’ve begun to invest heavily in multivariate testing tools. These allow you to serve up a unique experience to multiple customers types and have you determine through “champion/challenger” tests, tell you which is best. In some cases, both might be best depending on the user. In those cases, personalize the experience. The experience of the redesign helped us to understand that whlle big bang is sexy, piloting and testing is more practical.
- #44 Now that you’ve heard me ramble for 45 minutes, what should you remember?
- #45 Overall, it was successful and a relatively smooth project. The redesign gave us much better brand aligment, some performance gains. There were challenges, but we managed them effectively. But probably the most important thing is that it put us in a new mindset: pilot/test pilot/test.