 So thank you for joining me, I'm going to talk to you about a project we've been working on for a company called Overmire, where we focus on building a website that facilitated sales for both their consumer and business customers. My name is Mark Dodgson, I live in a little town called Ancaster, which is in Ontario, Canada, it's about 45 minutes south of Toronto, and I work as a user experience strategist and designer at a company called BlueSpark. And so BlueSpark is a distributed design and digital shop, so we focus on building large scale digital projects, primarily with open source technology, so a lot of Drupal projects that we're working on. And it's offered us the ability to work on some interesting projects in the higher ed library and e-commerce spaces, and as you can see by our map we have employees in nine countries and five different time zones. We've also been really fortunate to work with a number of really great organizations like Red Hat, TripAdvisor, Stanford University, UCLA, to name a few, and of course we're working with Overmire, who we're going to talk to you about today. So a little background, Overmire is an Aspen based winter wear company that was started back in 1947 by a guy named Klaus Overmire, who actually still runs the company to this day. And as a company that got started long before the internet, they actually built relationships with their dealers, which has ultimately led to their success. But because of those relationships, it's actually led to some interesting conversion workflows online. So my goals for today is to offer an overview of the Overmire project, highlight some of the challenges we've faced doing this project, and then offer some insight into the tools that we've been using to make design and development decisions. So I'm going to give you the Kohl's note version of the Overmire history. They started in the early 2000s by just building out a content management system, but as they needed e-commerce, they built out an e-commerce platform, then they needed inventory management, then they need built on a CRM, and then it was email newsletters and social media, and you get the picture. They started building on so much stuff that they ended up with so much technical debt that it made it difficult for them to move forward. And having recently, you know, investing in a comprehensive ERP system to manage their inventory and supply chain processes, it actually, they ended up with three user-facing sites that were in a broken state. So at a really high level, when we took over the project, they had a B2C site that was running Drupal 6. They had a VIP site, which is like a loyalty program site, which was also running Drupal 6, and then they had a business B2B site that was being facilitated through a third-party SaaS system. So after a thorough discovery phase with the Overmire team, we decided to consolidate all three sites onto the Drupal platform and facilitate sales using Drupal commerce. And this gave us the benefit of maintaining a single site and also being able to reuse design components across the three for a more consistent user experience. We also suggested at the time, again, going from Drupal 6, so doing the upgrade from Drupal 6 to Drupal 8, which at the time was very early. I think it was only out for a couple weeks, so there were a number of challenges along the way related to that. But that was done in an effort to offer them the most up-to-date system to future-proof their investment. So it's important to understand that they have three very distinct purchasing groups, and each of these, and this presented some challenges while integrating Drupal commerce and where the user experience needed to be designed in a way to facilitate sales regardless of the use case. So they had a B2C site, so the consumer-facing site, which facilitates sales actually through third-party retailers, so you're not actually checking out on their site, so this is, and I'll get into more detail about that. Then their VIP site facilitates sales through a traditional kind of e-commerce fashion where you can check out product directly from their website. And then they have business customers that facilitate purchases through the exact same site and the same catalog but are built with a P.L., so there's no cash transaction. So I'm going to just walk you through these in a little bit more detail. So for the B2C, the B2C purchasing, they actually have a workflow that we had actually never seen before. They don't allow, their business model doesn't allow for a direct to consumer sales. So when you went on to their site before we took over the project, you would find a product that you were interested in. You would select a color for that product. You would select a size for the product. And then what you would get is a list of dealers in the form of logos that were supposed to have that product in stock. And so then from there, you would select the dealer and you would be directed to that dealer's website to check out the final product. So essentially, this shopping cart experience is a single product ordering system, which is not really great for a company that sells matching outfits. If you wanted to go and buy a matching pant or a hat or gloves, you have to actually go back to the Overmire site and go through the entire process again. So we slightly modified it in the sense that we built in a MyCart page where they can add product to a cart like you would expect. And then based on that, you would take them from their MyCart page and then select the dealer that they want to check out with. So the idea is we're taking those single item sales up to multiple item sale orders. Another area that required improvement was the handing off to the retailer's websites. So by taking a look at the data from their partners, the retail partners, we started to see lots of patterns of cart abandonment. So they'd get over there and they'd leave their site. So one of the awkward workflows before consumers is that you would select a retailer for checkout and they wouldn't actually realize that they were being directed to that retailer's website. So from a user experience perspective, it needed to be clear what was happening. So we actually ended up building a completely fictitious transfer window that displays for a few seconds. And this just gives the user a little bit more detail about what's actually happening so that when they landed on the dealer's site, it wasn't quite such a jarring experience. The VIP section, it essentially translates to friends and family pricing. But more importantly is really for the sales associates. So sales associates that are pushing their product on the sales floor, they wanted to give them discounts. So they actually have cards that they hand out with a VIP URL and a discount. And that user can then log into the site, like create an account. You have to watch an introductory video, so getting a little bit of education in there. And then they're able to access the same catalog as the B2C customers, but with that discount pricing. And although the VIP section required some interesting ways to facilitate discounts, it's actually been the most straightforward to implement because it's direct sales from the website. B2B purchasing. So facilitating sales through for both consumers and sales associates is relatively easy because they have similar buying patterns. The only difference really is that from an actual purchasing standpoint is that the sales associates are getting a discounted price once they're logged in. Trying to facilitate B2B sales on the same site becomes significantly more complex because they buy in bulk and they have more complex needs in terms of how they purchase product. So based on the business customer's user rule, we actually removed the add to bag button that was on the top left by the title. And we give them a form that gives them a lot more control over adding multiple variations of product to their cart. They can add multiple sizes, different colors. And then we add some persuasive patterns in there as well, where we're showing stock levels that are getting low in an effort to hopefully get other deals to buy them as they see that they're running out of stock. So one of the interesting things we learned through discovery was the way dealers actually purchase product for their retail locations. We actually hadn't considered that they might have multiple retail locations. They might have six plus locations. So it turns out that the dealer's purchase product for each of the retail locations individually and actually have budget set for each location. So on the old site, what dealers were doing was they would open up multiple tabs and add product to carts for those multiple tabs and try to order for each of those locations. But that broke a lot of times and people would lose their orders and things like that. So what we've done is we've actually built a thing called work in progress orders, where we store multiple shopping carts at the same time. So any retailer that has multiple locations can create carts and store them and save them and they can go back to them multiple times. We've even built in duplicating those carts too so they reorder things over and over again. So this is something we're really excited about and where Drupal Commerce's flexibility has really kind of helped us out. One of my favorite features is the ability for merchandisers to actually create merchandising boards or look books. So we heard from our client and a number of their dealers that merchandisers would add product to the shopping cart just to see what the product looked like together. So we created merchandising boards as a way to offer these merchandisers the ability to assemble product on a board that might look good together on the sales floor. So they can name their board, they can add a description, they can add product, they can move the product around on the board. And in addition to the customization features there, merchandisers will be able to share these boards with key decision makers within the organization and then turn those boards into orders. So we're hoping that adding this functionality will increase the overall product sales by simplifying a process that was a little bit klugey. So there's always going to be challenges on a project of this size, but it's important to plan and risk manage through them. Aside from the technical challenges, we knew that facilitating all three purchasing user roles would be difficult. We've definitely had some major challenges trying to clarify the B2C experience and simplifying the business experience. And that's just we want a much more streamlined user experience there. Unfortunately, we've had a number of usability methods to help us through many of the challenges we've faced on this project. So I want to start by defining what a conversion is because it's actually different for the site. I'm going to focus on consumer because we just launched the B2B stuff so we don't really have a lot of the data there. So I'm going to focus on consumer stuff. So a conversion in this case is a transactional value that we pass on to the retailer site. So if you buy a jacket for $200 and end up on the retailer's site to purchase it, that transactional value becomes our conversion. And sadly, due to the complex nature of the old site in terms of how conversions were being tracked, we didn't have all of the ideal baseline data that we needed to make good decisions moving forward. And this is where things became pretty interesting for us. We worked really hard to develop a site that was easy for customers to purchase from, taking into consideration that unusual check out process. Again, the old site only allowed for single item sales, so we introduced that the ability to do multiple item sales through that. So unfortunately, when we launched, the conversions were pretty horrific. So we launched in last year in week 1939. And we were down about $250,000 from the same time period in the previous year, which was only in a period of a couple of weeks. And that number was being pulled from retailers, locations and analytics that was being pulled in from a lot of the locations. So we didn't actually know the overall number. So traffic was down about 30% to the site, but that even wouldn't have accounted for the decrease in conversions. So after the panic subsided, we tried to understand what was causing this dramatic decrease in conversions. We were thinking, was it stick or shock? Because now their customers were used to buying a single order product and now they're seeing multiple in the total and then being sent off to the retailer site. Was it that moment because that jarring experience between going from the overmire site to the retailer site? We weren't really sure. And so as with all projects, we want to have really good baseline data to have understanding where the project was before you launched a new site or a new feature. And again, we didn't have that. So we started re-evaluating how we could get the site to a point before our launch. So before we took over in an effort to kind of move the site forward using a number of usability tests. So after a number of discussions, we decided to implement the old e-commerce model on the new platform. So we were ensuring some, you know, building some historical data that we were told was working well. So this was a reactionary measure. It was a reactionary move and definitely not one we would normally recommend. However, we were under a lot of pressure to fix this problem. So we hid the ability to add the bag, right? So doing the multiple item sales. And we introduced their old model, which is if you select a size and a color, you get the logos. So we've gone back down to single item sales. So not ideal. But here's what happened. We had near identical traffic from one week to the next. But we saw an 8% increase in conversions. And so this was huge for us. We were like baffled as how reducing functionality could actually increase conversions. We even went and started looking at the average order. And the average order went from $306 down to $170, which would be expected because we were going from single multiple item sales back down to single item sales. And it turns out that we overlooked one key feature that we hadn't even considered before this project. And that was that we saw an average drop in 10 to 15 degrees in temperature in key markets for their product because they sell winter wear. It just happened, bad luck, that we launched the feature reducing functionality on a week when it got cold. So this was our aha moment. We started thinking about factors that could play into the sales process and how we could start to monitor these factors to make sure that we don't have them happen again in the future. So we've actually now built out a tool that plugs into our analytics to show weather patterns and transactional values on a session level. So we actually tag every user that visits the site with the weather from their location. So we get the high and low temperature, whether it's sunny, rainy, if it's snowing. And it gives us a little bit more insight into what's going on. So this is hopefully going to help us make better decisions in the future or at least help us to understand what's going on when there is a downturn. So the lesson learned for us is don't don't forget to keep an eye on the external factors. So for the Overmire project, whether it was a big one, ebbs and flows in the economy. Other ones that affected us at the launch was less users to the less users to the site because of an actual industry downturn. So many of their customers and dealers experience a 10 to 15 percent decrease in sales across the board in 2016. Less users, less visitors because of a slowed marketing efforts. So Overmire had actually slowed all their marketing efforts because we were launching the new site. They wanted to wait till it was up. And then also we launched preseason. So a lot of product wasn't actually available yet online, which also killed conversions a bit. So although the initial shock was pretty hard to take in the losing $250,000 in that short of time was pretty scary. We've actually made, worked very hard to make iterative changes over this on the site. So things like improving the design and the programming side of things, optimized the current site, tried to get it to run faster. We've improved the above the fold content and calls to action where possible. And what we're finding is that many of the improvements that we've been making when those external factors were playing a role. Now that things have picked up and marketing is better and traffic is better, that we're now starting to reap the benefits of that. So in week 39, we actually ended up seeing a 1.52% conversion rate to 5.31% in week 48. And then we closed out 2016 with a 7.34% conversion rate. It's gone up and down a bit, but it's been pretty steady in terms of how it's been increasing. So how do we make our design and development decisions? Well, we do a lot of A-B testing. I'm sure most of you know what this is, but for those of you don't, it's a way of comparing two versions of a web pager app and putting them against each other to see which one converts better. So in this example here, we actually were testing whether showing the sizes as buttons compared to sizes as the dropdown would convert better. And they actually did. So the version on the site now is the sizing as buttons. We're running A-B tests using Google Analytics, sorry, Google Experiments. And the benefit of using Google Experiments is that it offers us the ability to A-B test a percentage of the traffic going to the site. So essentially, we're not losing tons of those conversions while we're testing. So for example, we can test, we can A-B test on 10% of the traffic and then Google splits it up 50-50. So we're about seven months into the launch for the consumer side of things and we continue to test and iterate. Later this month, we're actually beginning a series of A-B tests to reintroduce that original cart feature that we reactively removed and a number of other improvements to help increase the overall conversion. So here's some tests now. So this is what's live right now. So it's the old sales model. The next test is going to remove the logos and put in a button that says buy online now. Because we've seen a lot of confusion with users. I'll show you a recording in a moment of users like not understanding that the logo is actually a button. So by going to this route, the buy online now will then launch a pop-up model that they can select their dealer to check out. Once this test is done, the next one is to take that buy online now button and change it to the add to bag. So then we're taking it back to multiple item sales and then it would go through the traditional cart feature and then from the cart they would select their dealer to check out. So it's an unusual checkout process but we're trying to get back to that multiple item sales, multiple item sales there. So AB testing is, you know, ensures that we're maintaining the sales while gaining and understanding what's actually affecting it, you know, affecting the conversions good or bad. As I'm sure many of you are using, we use Google Analytics for a lot of our insights. So we've even tweaked it a bit to make sure that we're, you know, tracking the things that actually matter to this particular project. Conversion rates is a big one that we manage, of course, but transactional value by country is pretty important for us. Transactional value is sent to the dealer so we know if we've sent $10,000 or $100,000 to a specific dealer, it's broken out by dealer. Transactional value by device, desktop mobile or tablet. Transactional value by browser, which actually was pretty important for us back in November. 60% of their traffic is on desktop Safari, but it was the lowest converting browser and it turned out that it was a JavaScript bug. So by fixing that bug, we were able to make that the highest converting browser now. We also keep an eye on session by individuals for marketing optimization and by gender for marketing optimization. Let's face it, usability testing can be expensive, but the harder part is actually selling it to key stakeholders. So, you know, user feedback is important to get us out of our design and development bubbles and although setting up a focus group and in-person user testing are often valuable, the cost to implement them is a little bit scary to your stakeholders. So it's important to remember that our friends and family are real users for the most part. It actually sounds pretty simple, but we actually tried this with our own team and it revealed areas of concern when we ran scenarios with them. So we gave scenarios up to our friends and family and it was interesting that a number of the concerns that were raised were consistent amongst all of our friends and family. So here's a couple of things that came out of just asking them for a little bit of help. On the far left one, we have thumbnails with the large image above and the idea is that you click the thumbnail and you get the large version. But on ours, you have to hold down on the thumbnail a little bit to launch, which is obviously ideal. And obviously you see what happens. It wants to save it to the camera roll. So that was a bug that we were able to fix pretty quickly by asking for help. The one on the far right is a light box image that pops up. We had the image scaling to the width of the image. So if the image actually exceeded height wise the device size, you couldn't close the image because the close button was hidden. So again, just by asking our friends and family for a little help, it uncovered some seemingly obvious things that we should have caught while we were building it. What users say they do and what they actually do are often quite different. And as a result, we've actually introduced anonymous user recordings that we can turn on and off as needed. So I thought I would share three different recordings, two failures and one success one to kind of show what we see and how we're using them. So this is a recording and we can turn them on, on and off as needed. And this is a user that's trying to buy a product that these pants here. And so they don't realize you have to select the size to get to get a button to check out with. They finally select the size, they get the logos and they don't realize the logos are buttons. So they click three times on the actual title before exiting the page. So you can see from this recording that they're confused by the logos. They don't understand their buttons. And they are also confused by how they need to select a size before they can get a dealer for check out. So this is one failure in one area that we're trying to reintroduce that new button that's a little more clear. Here's a mobile one. And so the mobile one here is again keeping in mind that a user has to select a size and a color to check out a product. Well this is a TUC, I don't know if you call that in the U.S. but it's one size fits all, right? So you can't actually select a size which means you never get a dealer which means you can't buy that product in line. So again by having these user recordings we're able to uncover a quick little bugs and make fixes on those so this user couldn't purchase that product. And it's good to find those failures because we're also we can implement changes pretty quickly. But it's also good to uncover things that are successful. So here's a user, this is on the VIP site so this is a user shopping around and we had just reintroduced a recommendation engine. So it was neat to see that this user is shopping around for a jacket. They get to the cart page and then we show the recommendations and it's neat to see the user actually interacting with those recommendations and adding those particular products to their bag. So again it highlights the things that are also working. On the right hand side there's a column there and what that's giving us is a lot of detail about what's going on from that user so we can get what country they live in, what device they're using, what operating system and version of operating system, what browser and version of browser. And so what we've found is that when we're running into bugs we create tickets in JIRA and we can attach these recordings to the ticket and our developers can then fix these bugs a lot more quickly and efficiently because they understand exactly what's going on. So it's important to remember that things are going to fail, that's the nature of software and so having good customer friendly fail points is good to help kind of reduce customer frustration. So here's a couple that we've introduced on the Obermeyer site. So the 404 page we put the content you're looking for no longer exists. We have a 1980 ski jacket and we've got for authenticated users the course you're trying to take lies outside the patrol area so trying to keep that theming going throughout the entire experience. I really wanted to talk about process because we have a two tier estimation process where we go from wire framings and sketches into the comping and then development. Unfortunately there's no time for that. If you're interested in process my colleague is doing a talk tomorrow at 1045 in room 314 and she talks for an hour about how changing our estimation process took our project ending from WTF to FTW. And it's very thorough in terms of how we do a run-up project from start to finish and how it's transparent for our client and how they're involved in the whole estimation process. So here's what we've learned, how good baseline data. Again we didn't have ideal baseline data but we've gone back to make sure we get that. Be proactive not reactive if possible. Understand the metrics that matter to your particular project. Consider external factors so in our case it was weather and marketing efforts and low stock. And definitely test your assumptions. Thank you for your time. Appreciate it. I'm open to some questions.