Happy Cog Engagement collaboration
Ramping-Up training
Project Endeavor part one building & testing
Project Endeavor part two redesign & cms integration
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.
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
Visualization of the card sort results
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.
Before Happy Cog and After Happy Cog
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.
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.
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.
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, we provided recommendations based on data from our current site and helped shape the (UX) user experience.
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 to lead this design. Customization accounts for over 40% of the revenue generated at Soccer.com.
Overall, 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 also interviewed customers. The original design seen here had significant issues with visual hierarchy in the user interface. Customers experienced a cognitive gap between the final customized product and the UI (user interface) due to lack of visual cues. Working with the developers and stakeholders, we identified the key requirements and discussed technical limitations.
The interaction of the customization was dated. There was room for major improvements.
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 visual icons (shirts and shorts) aided our customers more than anticipated. We encountered many technical hurdles trying to serve a real-time version of the customization so we had to design around this pitfall. The icons helped bridge the gap.
wireframe ideation and final launch
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 versus many of other sites was how other sites eliminated options and focused the customer's attention on the task. We achieved this on the new system by providing guidance with a step-through interface design.
Soccer.com Redesigned Customization Experience
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!
b.berkner@gmail.com