Line 6 and Ampeg eCommerce Websites
UX/UI Designer
Frontend Developer
Content Producer
Line 6 is a Yamaha brand at the forefront of innovation in the guitar instrument sector, revolutionizing guitar amplification, effects, wireless solutions, and guitar technology. The Line 6 eCommerce website initiative was in strategic response to Yamaha's corporate directive to enhance direct online sales. The initiative also helped extract better insights into customer buying behaviors, contact information, and equipment preferences. This data collection was instrumental in shaping Line 6's understanding of the customer base, enabling us to understand the unique needs and trends of guitar enthusiasts all over the world.
As the UX/UI designer, my role was pivotal in conceptualizing and developing a new e-commerce platform from the ground up. This included formulating a robust information architecture strategy and devising a cohesive design theme for the platform. The phase one objective was to launch a functional site capable of selling b-stock gear, software downloads, parts & accessories, additional services, and merch. This phase was crucial to stress test our internal product fulfillment processes. This was a significant step in our evolution, as we had been relying exclusively on distributors and channel sales partners. The goal was to ensure seamless integration and efficiency in our direct sales approach before expanding to include entire our product portfolio.
To enhance the research I visited three Guitar Center locations to observe competitor product packaging, and general product merchandising strategies firsthand. I also engaged in a "secret shopper" exercise to explore the in-store experience. This revealed which key product specifications were emphasized in the salesperson's final pitch, and how that could be mirrored effectively in our e-commerce environment. It also helped tease out the differences between the marketing site content from the online shopping journey, to enrich the overall user experience.
In the early research phase, I delved deep into our Google Analytics and sales data to establish benchmarks for site metrics and conversion rates. This analysis was crucial in determining the quantity and nature of content required to optimize the purchasing process on our e-commerce pages, thereby effectively "closing the deal". Additionally, my research extended to studying our competitors and current design trends. This helped me to discern which trends would be beneficial in our context and which ones to avoid, ensuring our platform remained relevant and user-friendly.
The design process began with a detailed site map. It was important that the structure was clearly outlined first, so all pages and site sections had clean organization and categorization. The emphasis here was on classification, looking top down through the navigation system to ensure friction-less access to key product categories and product information.
Next I built wireframes to outline the basic layout and sections for each page, focusing only on functionality and user flow. Understanding the page themes and individual components for the overall design system was also important for creating a content plan. While much of the content could be repurposed from marketing assets, this helped me find the gaps in coverage so I could organize a plan to produce any new content that would be required.
I created users journeys as a way to explore how users go through the marketing funnel, including how users interact and flow from one page to another. Interaction design can have a dramatic impact on user engagement, and for this eCommerce stage, I believe less is more. It was important that our eCommerce site complimented the marketing site, rather than be a regurgitation of the same content and interactions.
The last design step was to focus on the final visual aesthetic, such as color schemes, typography, media, and the visual style approach. It was imperative the site be inline with the brand’s visual identity, as well as preserve continuity and cohesiveness through the entire customer journey. However, I also wanted the eCommerce site to have a clear visual distinction from the marketing site, so there was no confusion as to which environment the user was in, in case their journey took an asynchronous turn.
Before we could start the final build I created a content strategy, for which I used a blend of marketing site analytics along with human psychology data, for things like average reading speed, to help inform word count and call-to-action placement strategy. This is where I applied inspiration from the in-store experience for tagline placement, and how that juxtaposed any media content elements.
In the final build I coded the html and css for each section using the Bootstrap grid system, so that the developers could implement a faithful representation of the design into the backend framework. During this phase I worked hard to make sure the site would be optimized for mobile. I strongly felt users might check their phone to compare our online price with a store in which they may be shopping, so a fully responsive site was critical.
The entire site was tagged with Google Analytics in order to track goals and conversions. For the first time we would be able to monitor the efficacy of the marketing campaigns, something that not possible before launching the new eCommerce site. This would give us a ton of additional data around user behavior and spending habits. This was especially beneficial if we had the user’s email, as we could provide discounts or incentives in hopes to nudge them into finalizing an online purchase.
User engagement based metrics such as page loads and page depth were very high, as it appeared users were clicking around to learn more about the products to find out what we were now selling online, and comparing the different models. Time on page metrics were close to the prediction models I formulated, which validated that the amount of content & copy was appropriate. Return visitation also performed considerably well. Site performance in general seemed healthy.
Conversion rates in the beginning had a slow start. I attributed this to a variety of factors, most notably that it was not our full line of current products. To address, we made the strategic decision to introduce a refurbished category, which allowed us to sell a large stockpile of defective equipment that needed only slight repair. Over time we saw the conversion numbers experience a significant increase, primarily in the b-stock and refurbished categories, along with software downloads. The merchandise category was also seeing growth with the addition of a new line of apparel.
Months of data tracking furthered our understanding of purchase behavior, which led us to generate a three month conversion model for any product over $100. Basically, the time it took a user to consider and buy a product was roughly three months. The model seemed to evenly overlay and scale to all customer segments, product categories, and price points. This helped to improve the timing, frequency, and communication messages of our email nurture campaigns as well as our advertisements.
The Line 6 eCommerce initiative was considered a huge success, generating millions in annual revenue for a brand that was previously earned roughly that $30k a year from parts & accessories and software downloads. My role as designer and strategist was pivotal in this transformation, and the framework I developed served as the blueprint for another Yamaha brand, Ampeg.
My attention to detail combined with an ability to motivate and maintain a high standard for the deliverables enabled Yamaha to replicate the eCommerce design system and content strategy across brands, which saved the company countless hours of work, and thousands of dollars in research and development costs. The success of this project is a testament to the impact of thoughtful design, strategic planning and adaptability.
