Glen Lyon Website Redesign

PROJECT BACKGROUND

Overview

The project aimed to revitalise Glen Lyon Coffee Roasters' online presence by creating a visually appealing and user-friendly Shopify store. The focus was on designing versatile components that could be seamlessly integrated across multiple pages for a cohesive and flexible user experience.

As the lead UX/UI Designer on this project, my primary task was to design a collection of modular components for various pages within the Shopify platform.

Goals:

Enhance User Experience:

Improve the overall usability and satisfaction of the online store by implementing intuitive navigation, clear information architecture, and engaging design elements.

Increase Conversion Rates:

Optimise the design to drive more conversions, focusing on key pages such as the product page and checkout process.

Reflect Brand Identity:

Ensure that the redesigned online store aligns seamlessly with the brand identity of Glen Lyon Coffee Roasters, conveying their unique values and positioning in the market.

USER RESEARCH

Research & Discovery

In the initial phase, I employed a combination of qualitative and quantitative research methods to gain insights into the coffee market, understand the target audience, and identify industry best practices for e-commerce. This involved competitor analysis, user interviews, and analytics review, providing a solid foundation for informed design decisions.

Analytics Findings

Current Conversion Rate

2.2%

Current Bounce Rate

50%

Current Average Session Duration

1.5 minutes

User Interview Summary: Unveiling Insights for Design

In the initial phase of the Glen Lyon Coffee Roasters Shopify redesign, a series of user interviews were conducted to unveil the preferences, habits, and expectations of the coffee-loving audience. Enthusiasts shared insights on their online coffee shopping experiences, emphasizing the importance of freshness, detailed product information, and an intuitive navigation system. Preferences for clean design, mobile optimisation, and a personalised subscription experience emerged as key themes. Feedback on the existing Glen Lyon website highlighted opportunities for improvement, guiding the design process towards a more seamless and enjoyable user journey. These interviews played a pivotal role in crafting modular components for the redesigned pages, ensuring an elevated and tailored experience for every coffee connoisseur.

Research Findings / Pain Points

"I've visited the current Glen Lyon website. While the coffee is fantastic, I find the site to be slow and unimaginative. Improving the page layouts and optimising for mobile would enhance the overall experience."

"I love coffee subscriptions for the convenience. Personalisation is key – I'd like to customise my subscription based on my preferences. A simple and intuitive process for managing subscriptions is crucial for me."

"I often browse on my phone, so a mobile-friendly design is a must. It's frustrating when the website isn't optimised for mobile, making it hard to navigate and explore products."

"A well-designed product page is essential. I look for detailed descriptions of flavour profiles, information about the roasting process, and customer reviews. It's helpful when there are recommendations for similar blends."

INITIAL DESIGN

Information Architecture and Wireframing

Mapping out the navigation for the Glen Lyon Coffee Roasters Shopify redesign is crucial for providing users with a clear and intuitive journey. The site map establishes a structured hierarchy, guiding users through key sections and ensuring easy access to products, subscriptions, and informational content. This thoughtful navigation design enhances the overall user experience, contributing to positive engagement and successful interactions on the online store.

Key areas Re-Designed

1. Glen Lyon wanted to expand their navigation so they could introduce a larger product range. By prioritising organisation, strategic element placement, and mobile optimisation, it enhances user satisfaction and contributes to the success of the online store.

2. The homepage design aimed to capture user attention instantly, with key components strategically placed for maximum impact.

3. Components were tailored to optimise product visibility and navigation on the collection page, fostering a user-friendly browsing experience.

4. Design choices on the product page were geared towards driving conversions, focusing on a clean and persuasive layout.

5. The subscriptions page featured a unique quiz, leveraging components to create an interactive and personalised subscription experience.

Homepage: Before & After

The Glen Lyon Coffee Roasters homepage underwent a transformative journey, transitioning from a visually uninspired and navigationally challenged state to a refined, strategically designed interface. The "before" snapshot highlights previous limitations, while the "after" view showcases a dynamic, organised layout with enhanced product visibility and intuitive navigation. This redesign not only elevates aesthetics but also aligns the homepage with the brand identity, delivering a more engaging and user-friendly experience.

Revolutionising Collection Pages: Introducing Product Filters

In a notable evolution, Glen Lyon Coffee Roasters now features collection pages equipped with innovative product filters. A stark departure from the previous absence of filtration, this strategic addition empowers users to tailor their coffee exploration based on roast levels, flavour profiles, and more. The newfound functionality marks a significant enhancement, elevating the shopping experience and providing users with a refined and personalised journey through Glen Lyon's diverse coffee selections.

Revitalizing Product Pages: Unleashing Creativity and Clarity

The transformation of Glen Lyon Coffee Roasters' product pages marks a shift from a less engaging presentation, where creativity was understated, and information tended to be overly detailed. Departing from excessive detail, the content is now concise yet impactful, effectively selling the unique qualities of each coffee blend. With strategically placed visuals, detailed flavour profiles, and customer testimonials, the redesigned product pages offer a dynamic and persuasive user experience, ensuring that each coffee is not just showcased but compellingly presented to every discerning coffee enthusiast.

Subscriptions Quiz and Page: Personalising the Coffee Experience

The redesigned subscriptions experience at Glen Lyon Coffee Roasters is highlighted by the innovative addition of the Subscriptions Quiz. In contrast to the previous state, where the subscriptions page lacked interactivity, this new feature adds a personalised touch. The Subscriptions Quiz engages users in a dynamic exploration of their coffee preferences, intelligently guiding them to customised subscription options. Seamlessly integrated with the subscriptions page, this enhancement ensures that every user embarks on a uniquely tailored and enjoyable journey in managing their coffee subscriptions with Glen Lyon.

Full Store Makeover for Glen Lyon Coffee Roasters