Rebranding TPC: A Lesson in Engineering Leadership

Leading the technical efforts to rebrand, optimize, and modernize the TPC e-commerce website

Project Overview

I had the privilege of leading the implementation of a significant redesign for the public-facing e-commerce website of TPC, the industry leader in buying and selling used bikes. The primary goal was to modernize the overall look and feel of the site, enhance the user experience, and improve performance.

My Role

As the frontend engineering lead, my responsibilities encompassed overseeing the entire frontend development process, collaborating with our design, product, marketing, and backend engineering teams, and communicating regular milestones and deadlines. I oversaw refactors of all pages on the website and ensured the successful implementation of the rebrand while continuing to release new features and product updates.

Objectives

Modernization: Refresh the user interface to align with contemporary UX trends and the new company brand.
Enhanced User Experience: Improve navigation, product search and discovery, and overall satisfaction for online shoppers.
Code Sanitation & Performance: Clean up outdated and unused code to improve performance and developer experience.

Challenges

1
Outdated User Interface: The existing website had an outdated design that didn't resonate with the company's progressive image and lacked some basic functionality common in modern e-commerce websites.
2
Suboptimal User Journeys: Users faced difficulties navigating and finding products efficiently. Some of the user flows were not tailored to the best user experience or desired conversion rates.
3
Performance Concerns: There was a lot of tech debt in the form of dead code and overall cruft that not only hampered website performance but also made it challenging to consume from a developer experience.

Solution

Key Contributions

Streamlined Navigation

I implemented a simplified primary header navigation and footer to increase usability and improve discoverability.

Using Shopify's internal dashboard editor to configure the menus, categories, and links allowed our marketing team to maintain and update the information architecture without having to request updates from the tech team.

Search & Discovery Improvements

Integrating with Algolia to power the rebranded website's search greatly improved and modernized the overall search experience.

I configured and built all search and filter-related functionality including setting up logic for displaying suggested search terms and matching categories, brands, and products.

Users also gained the ability to create and maintain saved search queries to track their most-wanted gear and receive email updates when new products arrive.

My Account Personalization

We completely redesigned the "My Account" experience to incorporate new functionality and add features expected of a modern account page.

My primary contributions included integrating with Braze APIs to give users' options for setting their notification preferences.

I also added functionality for users to update their primary contact information including first and last name and phone number.

Simplified Magazine Exploration

One of the biggest pain points regularly reported by users and internal teams alike was the lack of search functionality on the magazine blog page.

I implemented a simple search experience that incorporated Shopify architecture patterns to return paged results and allow our marketing team to easily organize and tag articles.

Technology Highlights

Revolutionized Search

Thanks to the powerful search and discovery capabilities included with the integration of Algolia, we transformed the way users explore and discover the bikes and gear they want

Empowered Teams

We were able to blend out-of-the-box functionality provided by Shopify along with custom solutions that allowed our marketing and merchandising teams to thrive independent from the tech team

Boosted Engagement

By integrating with Braze during the rebrand we were able to easily connect with our users through personalized, targeted campaigns

Unified Analytics

We gained clarity into our users' data and behavior by leveraging Segment to unify our data and streamline reporting and insights

Results & Impact

Before & After

Metrics

Project Duration: Over 3 months we successfully refactored all pages and launched the rebranded website on time to coincide with marketing efforts and the new brand announcement
Site Performance: We addressed all major issues with metrics identified by Google Lighthouse, increasing our scores to >90% for performance, and perfect 100% for accessibility, best practices, and SEO
Search Response Time: We reduced the response time for search queries from a couple seconds to an average of 8ms
Tech Debt: We removed or refactored over 100k lines of unused or outdated code

Impact

The launch of the redesigned site not only met but exceeded the project objectives, resulting in a more engaging and efficient user experience and an easier codebase to maintain.

By regularly communicating and agreeing on realistic deadlines, all involved teams were able to successfully announce the new brand and immediately incorporate rebranded assets and product features.

Reflection

The redesign of TPC's e-commerce website was a collaborative effort that successfully addressed user experience challenges and achieved notable improvements in performance and design. As the frontend engineering lead, this project allowed me to showcase my leadership skills, technical expertise, and commitment to delivering a high-quality user experience.

It presented a unique and fun challenge in balancing refactoring and cleaning up code while maintaining focus on the overall goal of finishing the project on time. I enjoyed collaborating with so many different teams and contributors, and I liked the opportunity to make a large impact on the perception of a public-facing brand in an industry I love.

Lessons Learned

Crush Tech Debt When You Can: This project allowed our team to address longstanding amounts of tech debt while also encouraging us to implement consistent architecture patterns
Overcommunicate Deadlines: Speak up early and often when creating deadlines with external teams, and don't be afraid to be realistic about project estimates
Take Initiative: As a frontend engineer, it's your duty to collaborate with designers, and you can contribute ideas that positively impact the direction and decision-making in most projects

Future Recommendations

For future projects, I recommend establishing agreed upon metrics that allow the stakeholders to know what is successful and what still needs work when taking on such a large project.

PREVIOUS PROJECT:

ianjsmith.com

How It's Made

NEXT PROJECT:

Starbucks

Component Library & Internal Apps