Objective: Website Redesign
J&P Cycles would finally receive a complete website makeover after 13 years of having outdated page layouts and clunky user flows.
The dated interface and confusing user flows impacted the online shopping experience. Revamping the site was necessary to introduce modern interaction design but also gave us the opportunity to create new features unique to motorcycle parts shoppers.
I spent the first few months analyzing historical website analytics and sales data and conducted quantitative and qualitative research to validate new concepts and our overall solution. I worked with senior engineers to revise our tech stack with the new frontend framework and various integrations.
I built a 12 month product roadmap with 5 major project, managed a team of UX designers and frontend developers, and contributed design and development work for all projects from start to completion.
Old Website
UI Framework
Designing a modern site required a new frontend UI framework that would be robust out of the box, flexible for cross-platform integrations and open-source to allow custom modifications to the framework itself.
Foundation was the clear winner because of its customizable XY layout grid system and alloweed me to implement my grid system specs as designed. I implemented nesting media queries and built out custom mixins unique UI components that I designed.
Thinking about how UX and Engineering would operate in the future helped us in making the best decisions early on. Development time was reduced by 50%, implementation quality improved to greater than 90%, and technical debt reduced signifcantly.
Final Product
J&P customers visit our site to fulfill a lifestyle need. The new site was designed based on two main product themes:
- Anticipate customer needs and get them to where they need to go through the site. Shopping paths were restructured to reduce random entry and exit points that impact user session and page abandonment.
- Create an immersive motorcycle ownership and rider culture experience throughout our digital products. Landing pages were designed with purposeful content components and placement for rich media content. We challenged ourselves to emulate human interaction for motorcycle enthusiasts by inventing new design interaction features.
The success of the new site boosted site engagement, conversion for critical steps of the shopping journey, and new customer acquisition with higher average order value.
UI Components
