Park Tool
Park Tool holds a global leadership position in bike tool manufacturing and immersive DIY repair content, yet its digital offerings were overly complex and outdated. To align with their industry leadership, we aimed to create a distinctly innovative solution.
Live site - http://www.parktool.com
How I Contributed. Sales Support ( pitch ) | Process Evolution | Design Strategy | UX & UI Design | Customer Relationship Management
The Exciting Opportunity.
With both industry-leading tools and how-to content, Park Tool had a chance to “wear the yellow jersey”.
Discovery.
We dove into focus group work and learned that there were 3 predominant personae with similar paths/motivations.
1. Hard-core Biking Enthusiast
This group is passionate about doing all the work for themselves and might just need some tools or some tips and tricks along the way.
2. Bike Shop Worker
Their predominant interaction with Park Tool is replenishing their tool stock that they might sell in-house or keeping up to date on new products or techniques.
3. Hero Dad or Mom
Time to save the day! This audience is bound and determined to “take care of it themselves” and might have a few tools lying around, but they really are drawn to the rich educational content.
The customer would select brand preferences and build a library.
We also worked closely with Park Tool stakeholders to explore the brand and establish a design language.
Exploring Design Together
We developed a design workshop that took clients through common design concepts and showed them opposite ends of the spectrum in each concept.
We would select two sites to compare based on things like type, color, depth/texture, photo usage, etc. This helped our clients to not only understand a bit of design language but also helped us create a catalog of likes and dislikes that would ultimately help directionally.
Process was key with this customer because they had internal resources that would manage the site after it was born.
Enter Design Pairing
We developed a customer design pairing, content-first approach that created meaningful connective tissue between all parties (including the client) throughout the build process.
This process allowed us to maximize the design/development relationship and iterate quickly because of the constant contact that was had both internally and externally.
Our design pairing process (click for larger).
Our Objective.
Create a modern, immersive, yet flexible experience that can evolve and be managed by internal resources.
UX/UI Direction.
Go big. Go bold. Create easy pathways for users to access what they came to the site for.
Park Tool wanted to hit people over the head with the experience, but also ensure that tasks that people came to the site for could be achieved seamlessly. This meant we had the opportunity to be over-the-top with the experience/animation layer, but the “bones” needed to make it easy for visitors to find what they were looking for.
One of the biggest ways we did this was by understanding that there were usually two doors visitors would enter through. We created two doors that users could enter through, but they backed that up with a robust navigation system and search functionality.
Satisfying User Needs
Here are a few ways we helped users reach their goals quickly:
The "Tools vs. Fix It" feature guided users directly to their desired path, eliminating the need for navigation interactions.
A powerful search with contextual results let visitors simply type what they were looking for, skipping the need for browsing.
The “Find What You Need to Fix Fast” tool allowed users to pinpoint the issue on their bike, instantly bringing up relevant, context-specific content.
We created dynamic elements that brought users into the brand.
A LEAN System of Design.
We recognized that a design system was essential for enabling Park Tool’s internal team to not only maintain the site we were building but also follow a clear, consistent roadmap with page patterns and templates. At the same time, we made sure to keep the system lean and flexible, so both technical and non-technical managers could easily manage and update the site without the need to be “expert web designers”.
Gnarly Challenges.
How trying to “lead the pack” can lead to interesting challenges.
1.
We added lots of bells and whistles, which meant we were being a bit experimental.
Park Tool wanted all the bells and whistles, but historically, Clockwork hadn’t been at the forefront of cutting-edge experience and interaction design. This meant I had to push internal resources to embrace the experimental and join us on the journey. We prided ourselves on building extremely solid usable experiences. I wanted to see if we could add another layer and still deliver exceptional, reliable experiences.
Mitigation.
Rolling Up My Animation Sleeves – With a background in animation and interaction design, I was always ready to dive in and create prototypes that helped communicate our ideas both internally and to the client.
Test, Test, Test – Testing was crucial. Introducing new tech always carries risks, especially since some users are slow to adopt new hardware or browsers. That meant we had to push our testing to the limits, ensuring that what we proposed either worked seamlessly or had well-planned fallbacks to strip away any layers that could cause issues.
The outer layer was “removable” to ensure all users got a great experience.
2.
New processes can be tricky at a company lauded for its process chops.
Change is hard. Especially if that change is happening at an organization that has written a book about process. This project meant we needed to think differently about the work. Our typical waterfall process with many, many smart steps would add unnecessary overhead to the project and would have stifled innovation. With design pairing, we were approaching the work differently than anyone had on the team previously, and at times it led to some folks feeling itchy.
Mitigation.
Over-communicate - What worked well was being the best communicator I could be and taking it to the next steps with internal checkpoints and opportunities for feedback to eliminate any surprises. This not only served to be extremely helpful across the board but also elevated the “collaboration” we preached as an organization to new levels.
Project Impact.
Everyone saw some wins.
We built a modern site that was able to seamlessly catalog over 1,500 products and an equal amount of immersive repair help content.
The site was designed to scale seamlessly, supporting future growth, due to careful planning of both its architecture and content hierarchies. This strategic approach positioned Park Tool to achieve success with a platform capable of adapting across all mediums no matter how big their product catalog or repair help would grow to.
Park Tool grow by 68% during the pandemic, which was mostly from tool sales on their website.
During the pandemic, as DIY culture took off, Park Tool thrived by offering more than just the tools to fix a bike — they provided the educational resources that empowered anyone to try it themselves. Their strong web presence became a go-to for both the gear and the guidance needed to get the job done.
Clockwork was able to add new processes to our tool belt that helped us innovate – and potentially fail – quicker.
By leveraging design systems, high-fidelity prototyping, and streamlined processes that bridged design and development, we were able to identify opportunities for innovation without the fear of failure — because we could fail faster and learn from it. This approach not only accelerated our path to the “validation phase,” but also helped bring the client on board quickly with new ideas and possibilities.
Featured Work.
Corvex Connected Worker
Corvex Connected Worker is an enterprise IoT SaaS platform for operational excellence, facilitating connectivity and activity management within dynamic environments.
Ramsey County
Ramsey County is the second most populous county in Minnesota. The 508,640 people that live there are a diverse group and they demanded an accessible offering.