Facilitating Change

soccer dot com

My Role

  • Collaborated with internal and external stakeholders
  • Conducted a card sorting workshop
  • Designed and prototyped interactions
  • Coordinated feedback for key functionality

Areas of Expertise

  • UX Methods and Design
  • UI Design and Development
  • Agile Development
  • Front-End Development
  • Usability Testing
  • Information Architecture
  • Project Management

Timeline

2014

Happy Cog Engagement collaboration

2015

Ramping-Up training

2016

Project Endeavor part one building & testing

2017

Project Endeavor part two redesign & cms integration

2014 FIFA World Cup and Happy Cog

Prior to the World Cup, I recognized an opportunity to make significant improvements to Soccer.com’s mobile site and overall user experience. Along with a few colleagues, we organized a “Sports Endeavors” team to mobilize our efforts in an expedited three-month time frame.

To that end, I identified Happy Cog, a front-end development and design firm that took immediate action to realize Sports Endeavors’ priorities.

card sort exercise

Conducted a card sort as a team building exercise and to illustrate some of the difficult decisions we were going to need to make during the Happy Cog engagement

cart sort exercise

Visualization of the card sort results

Winning Over Leadership

A major hurdle in pursuing the engagement to reskin Soccer.com and partner with Happy Cog was convincing leadership that in the short time we had we could make significant changes to greatly improve the UX of the site. I had been doing quite a bit of research and competetive analysis around checkout flow and I used this information to create a mockup to demonstrate quick wins we could make without too much overhead.

Mockup of incremenetal changes to the UI that aligned with industry standards, focused on the task, and allowed customers to more efficiently navigate the experience.

Wrangler ICONS Portraits

Before Happy Cog and After Happy Cog

Happy Cog Impact

We were able to demonstrate the importance improved customer experience. The proof came in the form of improved conversion rates and improved AOV (average order value). Desktop sales on Soccer.com improved 12.7% and mobile sales increased 23.6% over three months.

Key Learnings

  • Collaborated to develop then manage a pattern library design system
  • Stand-up SCRUM sessions and incorporated agile methods
  • Tracked and resolved JIRA tickets
  • Coordinated code updates with Happy Cog through GitHub
  • Planned how to leverage SASS

2015 Ramping Up

During this time, we were trained in WebSphere and introduced to the front-end workflow for the new platform. We simultaneously “kept the lights on” and continued to support our current system. Sports Endeavors Inc. also invested in the project and brought in 60+ contractors who helped provide technical direction on the backend with our SAP integration.

2016 Project Endeavor Part 1

We used daily SCRUM stand-ups to stay the course and identify any blockers. During this phase, we replatformed 14 e-commerces sites on to WebSphere Commerce. Many of the sites had specific business requirements. An example of this was our partnership with FIFA, where the developer and I had to call Switzerland on several occasions to provide updates and coordinate changes.

2017 Project Endeavor Part 2

As we moved along with the replatform initiative, Part 2 of Project Endeavor was ramping-up. This was the redesign and CMS implementation of our core site Soccer.com. My manager, the Director of Ecommerce & Digital Marketing, led the charge. As part of his Digital Experience team, our team provided recommendations based on data from our current site and helped shape the (UX) user experience.

Customization Redesign

As part of Project Endeavor, we also identified areas where we could make significant improvements to our customer experience. We identified our product customization as one of these. I had the privilege leading this design. Customization is over 40% of the revenue generated at Soccer.com.

soccer.com customization 2015-2017

Research

There were five customization scenarios. After extensive research and competetive analysis, there were two areas we could update quickly before our team season began. We did some task analysis, paper prototyping, and interviewed customers. The original design seen here had significant issues with visual hierarchy in the user interface and customers experienced a cognitive gap with the final customized output due to lack of visual cues. Working with the developers and stakeholders, we identified the requirements and discussed technical limitations.

soccer.com customization 2015

The interaction of the customization was dated. There was room for major improvements.

Design and Launch

In 2016, we moved through several rounds of wireframes and paper prototypes. The final version used a card design pattern to help organize the content. The element that aided our customers more than anticipated were the icons that highlighted the placement of the customization. We had quite a few technical hurdles trying to serve a real-time version of the customization and often it wouldn't work. This help bridge the gap.

wireframe ideation and final launch

Soccer.com Redesign

In 2017, Soccer.com was going through a CMS integration and a full redesign. I worked with the Director of Ecommerce & Digital Marketing and our partner agency to lead the strategy for the customization workflow. The most significant difference between how Soccer.com approached customization and many of other sites approached it was how other were able to focus the customer's attention on the task. We were able to achieve this on the new system by limiting the customer's decision making per screen and provided guidance with step-through interface design.

Placeholder for video of final

Summary & Impact

The journey from our engagement with Happy Cog through Project Endeavor was extremely rewarding. It was a valuable learning experience that could never be replicated. We worked in lock-step with some of the best minds in the industry in Happy Cog. As a team, we challenged and supported each other through many obstacles. We transformed Sports Endeavors, Inc. and delivered on our core promise "To Inform, Inspire, and Innovate."

Say Hello!

Wrangler ICONS Portraits