A Response to Growing Demand for Best in Class Specialty Retail, Online
Christy Sports had been feeling the pressure to take a closer look at its practices in the digital space. One result was an in depth redesign of the ski and snowboard retail site.
A Hypothesis for Redesign
Demand for specialty ski and snowboard equipment online had been rising for several years. Many of our brick and mortar competitors were beginning to show signs of responding to this demand and also pure play businesses within the genre were expanding so the evidence was there that we needed to take a deeper look at our digital practices for the season’s round of improvement projects.
We conducted a CRO focus group to gather some customer feedback on where pain points may exist within our online user journey: from arriving at the site to committing to a purchase. This was the first study of its kind for us so we kept the discovery exercise fairly broad.
We also elected to gather input from outside experts, Ovative and FitForCommerce, on our digital status and to gather input for a digital roadmap into the next 10 years.
Establishing Scope and Constraints
The resulting roadmap was put together from the results of the CRO and recommendations of the two consultants, primarily FitForCommerce. The roadmap was broken down into four phases:
- Phase 1 - (As Soon as Possible) Became the project highlighted in this case study
- Phase 2 - (Within 2 Years) Enhance CRM and personalization
- Phase 3 - (Within 5 Years) Replatform, choosing a scalable enterprise level platform that meets our specific needs
- Phase 4 - (5 Years+) Shoot for One to One Personalization; bring the in-store CS experience to our online customers
My Roles within the Project
Our digital team was fairly small There were 4 primaries and our operations staff. As Design Manger, My roles included user experience as well as handling ongoing improvements to the look and feel and frontend functionality of the site.
I was tasked with the following roles:
- Create a list of updates derived from the research of the CRO study, and recommendations from outside consultants.
- Create a full mockup of the changes to the look and feel of the site.
- Draft a proposal for our contract developer that included the mockup as well as a development brief for all of the changes to the site's functionality.
- Work closely with the developer during the development process.
- Facilitate the QA and troubleshooting process.
- Coordinate the Launch with stakeholders and affected parties.
Gathering results from the CRO study, Ovative and FitForCommerce
We asked a group of 10 users to provide feedback on specified journeys through the conversion process on the site. We were also on the lookout for any roadblocks that occurred while they conducted the tasks.
Below is an example of some of the planned updates to the header and homepage that were derived from reviewing the results of the CRO and recommendations from Ovative and FitForCommerce:
Building the Look and Feel
Highlights for the changes to the visual design of the site include a focus on cleaning up the fonts on the site brought us to using roboto for copy, links and titles. Meta remained in the logo and some freedom was extended to the graphic design department for marketing banners.
The site was opened up so that the content would flow 100% of the window width and having an increased max width of 1400px. Backgrounds and marketing banners were expanded to the full width of the site to give it more impact and a more modern feel.
The Common areas of the site were redesigned to give them a fresh look that fit with the new site look and feel and to accommodate new features added to the site.
More Changes that were derrived for pages found deeper into the conversion journey.
The product detail page saw:
- The product images gallery was increased in size and could include videos
- Size and color options were converted from dropdown form elements to graphic elements
- Crosslinks were added between new relevant content pages like buying guides
- Shopping tools like sizecharts and a chat for help link were redesigned and reintroduced to these pages
- Updates to the checkout process
- Updates to the Brand pages
- Containers added for Personalization
Further changes were introduced to product listing pages, new evergreen content and the checkout process:
- Product detail pages were reorganized with bigger more fluid product images and image thumbnails for color options.
- They saw the reintroduction of the compare feature as well as star ratings for reviewed products
- New content pages were added to facilitate more exposure to the personalized services that Christy Sports provided in stores
- Shopping Guides pages were added to help online shoppers with the same questions and research options they might follow in stores
- Store location pages were enhanced with more details on the store's surrounds and the managers on staff
The checkout process was updated a little more conservatively, but did include some changes that were long needed. Here are some of the most impactful changes to the checkout process
- The shopping cart and checkout pages were combined from the backend to allow more on the fly changes by the user that were facilited with AJAX scripting.
- Customers could update quantities and colors from the cart and the change would show immedialty in the checkout phase
- Coupons and gift card options were enhanced and showed more clarity of their impact on items within the cart as well as the final totals in checkout
Creating a Brief for Development
Our relationship with our contract developer was very good after working together for over 10 years. We got together inperson to go over most of the desired changes and updates to the site. The development brief and general direction and timeframe of this redesign project was largely discussed and agreed upon during this meeting. New features and details were passed over in a pdf document with a compressed file with all mockups and creative assets included. Highlights for this package can be browsed from the link below.
Development, Testing and Launch
As mentioned, while our developer was a resource outside the company, we had been working together for many years. Our development process was pretty well hashed out and there were few deviations during this phase of the project.
The launch of the site was coordinated with our internal IT team and the developer with the digital team ready to catch any issues that arose. It went smoothly; most of the issues that made it past the launch phase were fixed within 24 hours.
Results and Outcomes
In the end the outline for improvements to the site based on recommendations from our consultants for phase one of our growth plan were successfully implemented. Many of the features we added had the expected results and received praise from internal stakeholders as well as operators of the digital and marketing departments. The site’s revenue and conversion rate continued to grow and set us up for our iterative phase: to observe and improve.
Getting the graphic design department to wrap their heads around a fluid edge to edge design required some coaching and some trial and error. finally some limits and guidelines were applied to the marketing segments of the site that allowed for background content to expand while the marketing messaging remained in a "title safe" area withing the banners. I also implemented the html 5 picture element to introduce art directed optimized image delivery across multiple sized screens.
After some practice, the graphic design department became very adapted to the new design process and I was able to accommodate a wide variety of messaging and creative style for the marketing banners.
Building out a graphical interface for the size and color options found on the PDP. I worked closely with the developer and volunteer testers within our team to work through some serious bugs and new challenges that were introduced from this new feature set. The results were passable for launch but this area of the redesign proved to be one to watch over time for user acceptance. Data feed - refresh time introduce new aspects like PLP thumbnails sizer and color tiles for PDP
The results were passable for launch but this area of the redesign proved to be one to watch over time for user acceptance.
Data feed - refresh time introduce new aspects like PLP thumbnails sizer and color tiles for PDP
Looking back, I would say things went well for this particular project.
The Christy Sports E-commerce team was always a little less formal with processes than a typical enterprise level retailer, and given that the project went well.
I believe some items that were changed warranted more research from users and more careful planning to start. Changes to these areas of the site could have made on a more interactive approach after the launch of the redesign, but overall even with the changes made with the launch, the details seemed to be headed in the right direction and marked improvements over the previous state of the website. Theft also paved the way toward iterative enhancement and more ideas for change to be discovered.