Current Look

Proposed Look

Project Overview

Challenges

The 180wines website, despite being the digital face of a beloved local establishment, faced numerous challenges. These included outdated design elements, limited functionality, and an overall lack of user engagement. The existing website failed to capture the essence of 180 Estate Winery, hindering its ability to effectively connect with its target audience and showcase its unique offerings.

Challenges

The 180wines website, despite being the digital face of a beloved local establishment, faced numerous challenges. These included outdated design elements, limited functionality, and an overall lack of user engagement. The existing website failed to capture the essence of 180 Estate Winery, hindering its ability to effectively connect with its target audience and showcase its unique offerings.

Challenges

The 180wines website, despite being the digital face of a beloved local establishment, faced numerous challenges. These included outdated design elements, limited functionality, and an overall lack of user engagement. The existing website failed to capture the essence of 180 Estate Winery, hindering its ability to effectively connect with its target audience and showcase its unique offerings.

Project Scope

Comprehensive overhaul of the 180wines website.

Redesigning the user interface to align with 180 Estate Winery's brand identity.

Optimizing site navigation for intuitive browsing.

Integrating e-commerce capabilities for online wine purchases.

Content review and restructuring to effectively communicate the unique value proposition of 180wines.

Objectives

Revitalize online presence of 180wines website.

Enhance user experience.

Create visually captivating platform.

Reflect charm and character of 180 Estate Winery.

Provide seamless navigation and access to information.

Leverage modern technologies for customer engagement and business growth.

Objectives

Revitalize online presence of 180wines website.

Enhance user experience.

Create visually captivating platform.

Reflect charm and character of 180 Estate Winery.

Provide seamless navigation and access to information.

Leverage modern technologies for customer engagement and business growth.

Objectives

Revitalize online presence of 180wines website.

Enhance user experience.

Create visually captivating platform.

Reflect charm and character of 180 Estate Winery.

Provide seamless navigation and access to information.

Leverage modern technologies for customer engagement and business growth.

Duration

12 weeks

Duration: 12 weeks

Duration

12 weeks

User Research

Heuristics Evaluation

Our journey embarked with a thorough exploration of Heuristic Evaluation, a method enabling us to analyze the current website using proven usability principles. Following Jakob Nielsen's renowned heuristics, we delved into the intricacies of the user interface, information architecture, and overall user experience. This approach served as our guiding light, uncovering hidden challenges and highlighting opportunities for enhancing the website's design to maximize user engagement. Embracing Heuristic Evaluation, we established a framework centered around the user, guaranteeing that the redesign would surpass the diverse expectations of 180wines' audience.


Heuristics Evaluation

Our journey embarked with a thorough exploration of Heuristic Evaluation, a method enabling us to analyze the current website using proven usability principles. Following Jakob Nielsen's renowned heuristics, we delved into the intricacies of the user interface, information architecture, and overall user experience. This approach served as our guiding light, uncovering hidden challenges and highlighting opportunities for enhancing the website's design to maximize user engagement. Embracing Heuristic Evaluation, we established a framework centered around the user, guaranteeing that the redesign would surpass the diverse expectations of 180wines' audience.


Heuristics Evaluation

Our journey embarked with a thorough exploration of Heuristic Evaluation, a method enabling us to analyze the current website using proven usability principles. Following Jakob Nielsen's renowned heuristics, we delved into the intricacies of the user interface, information architecture, and overall user experience. This approach served as our guiding light, uncovering hidden challenges and highlighting opportunities for enhancing the website's design to maximize user engagement. Embracing Heuristic Evaluation, we established a framework centered around the user, guaranteeing that the redesign would surpass the diverse expectations of 180wines' audience.


Key Takeaways

Visibility and Navigation: Issues with button visibility and disappearing filter panels.
​
Information Clarity: Lack of indicators for active filters and missing search functionality.
​
Interaction and Feedback: Inadequate feedback on user actions and improper checkbox usage.
​
Consistency: Inconsistencies in login access and shopping experience continuity.
​
Booking Process: Non-specific, generic forms for reservations and bookings

Key Takeaways

Visibility and Navigation: Issues with button visibility and disappearing filter panels.
​
Information Clarity: Lack of indicators for active filters and missing search functionality.
​
Interaction and Feedback: Inadequate feedback on user actions and improper checkbox usage.
​
Consistency: Inconsistencies in login access and shopping experience continuity.
​
Booking Process: Non-specific, generic forms for reservations and bookings

Usability Testing

Our journey embarked with a thorough exploration of Heuristic Evaluation, a method enabling us to analyze the current website using proven usability principles. Following Jakob Nielsen's renowned heuristics, we delved into the intricacies of the user interface, information architecture, and overall user experience. This approach served as our guiding light, uncovering hidden challenges and highlighting opportunities for enhancing the website's design to maximize user engagement. Embracing Heuristic Evaluation, we established a framework centered around the user, guaranteeing that the redesign would surpass the diverse expectations of 180wines' audience.

Key Takeaways

Informational Needs: Users require clearer confirmation messages and detailed event availability.

Form Usability: Confusion arises from unclear form fields and instructions.

Terminology Clarity: Users need simpler explanations of terms and pricing.

Discount Visibility: Users seek more visible discount and promo code information.

Search Functionality: There is a need for improved search filters and bars.

Convenience: Users want simpler scheduling, clearer event 

Key Takeaways

Informational Needs: Users require clearer confirmation messages and detailed event availability.

Form Usability: Confusion arises from unclear form fields and instructions.

Terminology Clarity: Users need simpler explanations of terms and pricing.

Discount Visibility: Users seek more visible discount and promo code information.

Search Functionality: There is a need for improved search filters and bars.

Convenience: Users want simpler scheduling, clearer event 

Definition & Synthesis

In this phase, we distilled the findings from our User Research to identify key usability issues and user needs. This step transformed the collected data into a focused set of problems, guiding our redesign strategy to improve the user experience on the 180wines website effectively.The key question driving this redesign effort is:

"How might we enhance the 180wines website to improve visibility, streamline navigation, and simplify bookings for an intuitive and efficient user experience?"​

"How might we enhance the 180wines website to improve visibility, streamline navigation, and simplify bookings for an intuitive and efficient user experience?"​

"How might we enhance the 180wines website to improve visibility, streamline navigation, and simplify bookings for an intuitive and efficient user experience?"​

This central question unfolded into a detailed set of challenges that we addressed.

  1. Navigation & Visibility:

 An example is the "Shop Now" button's low visibility, and also the small product images and details need significant improvement for better user guidance

  1. Flexibility & Efficiency of Use:

On the Shop page and other pages: There’s no search functionality to make it faster for site visitors to find a particular wine. Users are forced to browse the catalog.

  1. Visibility of System Status:

On the Shop page: there’s no visual indicator of which filter is currently in use. As seen in the screenshot below, “Red” is selected, but visitors have no way of knowing this.

  1. Consistency & Standards:

On the Payment page: There’s an option for site visitors to log in. However, this capability is not accessible from any other page on the website. If a visitor is on the home page, they are unable to sign up or log in.

Ideation

We started with the website's sitemap, thoughtfully devising plans to resolve the identified navigation and layout issues by proposing a redesign of the sitemap.​

To generate fresh concepts for navigation, content layout, and interactive design, we created initial sketches for the redesigned 180wines website.

Current Site Map

Proposed Site Map

User Flow

Shopping for wine

Booking an Event

Mood Boards

Prototyping

In this phase, we distilled the findings from our User Research to identify key usability issues and user needs. This step transformed the collected data into a focused set of problems, guiding our redesign strategy to improve the user experience on the 180wines website effectively.The key question driving this redesign effort is:

"How might we enhance the 180wines website to improve visibility, streamline navigation, and simplify bookings for an intuitive and efficient user experience?"​

"How might we enhance the 180wines website to improve visibility, streamline navigation, and simplify bookings for an intuitive and efficient user experience?"​

"How might we enhance the 180wines website to improve visibility, streamline navigation, and simplify bookings for an intuitive and efficient user experience?"​

This central question unfolded into a detailed set of challenges that we addressed.

Paper Sketches

Advancing to the prototyping phase, our team embarked on an iterative process to bring our solutions to life. Initially, we created paper sketches, a simple yet effective tool to visualize our initial ideas aimed at resolving the issues identified in earlier stages. This step was crucial in laying the groundwork for more detailed prototypes.

Lo-Fi Prototype

With the insights gained from user testing, we progressed to developing low-fidelity (lo-fi) mockups. These mockups provided a clearer representation of our proposed solutions and were instrumental in facilitating more in-depth discussions with stakeholders.

Hi-Fi Prototype

The hi-fi prototype is a refined and interactive representation of our design for the 180wines website, incorporating both aesthetic and functional upgrades. It plays a crucial role in the upcoming user testing phase, providing a critical platform for gathering valuable user insights and feedback.

Before

(The "Shop Now" button is hardly noticeable)

After

(The "Shop Now" button redesigned)

Before

(No search button on Landing Page)

After

(Search button included on top right corner)

Before

(No visible indication of filter in use)

After

(Filter in use indicated on the left panel)

Before

(Sign in option when about to check out, but no indication on landing page)

After

(User profile icon included on landing page for users who with an account)

User Testing

Armed with our interactive hi-fi prototype, we advanced to the Usability Testing phase. This crucial stage involved closely observing user interactions with the prototype, providing key insights into their preferences, habits, and challenges. This deep dive into user behavior was invaluable, enhancing our understanding of the user journey and guiding us towards thoughtful, user-centric refinements.

Findings

Navigation and Workflow Confusion: Users faced confusion in navigating the site, especially during checkout and event bookings, due to unclear action sequences.

Clarity in Information and Instructions:There was a need for clearer instructions, particularly in applying discounts, understanding processes like wedding bookings, and accessing pricing and event details.

Interface Design and User Expectations: The interface sometimes failed to meet user expectations, with interactive elements not leading to anticipated actions and key elements like calendar times being overlooked due to layout.

Limited Discoverability: Users had difficulty locating specific features such as social media connections, highlighting the need for more intuitive design.

Navigation and Workflow Confusion: Users faced confusion in navigating the site, especially during checkout and event bookings, due to unclear action sequences.

Clarity in Information and Instructions:There was a need for clearer instructions, particularly in applying discounts, understanding processes like wedding bookings, and accessing pricing and event details.

Interface Design and User Expectations: The interface sometimes failed to meet user expectations, with interactive elements not leading to anticipated actions and key elements like calendar times being overlooked due to layout.

Limited Discoverability: Users had difficulty locating specific features such as social media connections, highlighting the need for more intuitive design.

Navigation and Workflow Confusion: Users faced confusion in navigating the site, especially during checkout and event bookings, due to unclear action sequences.

Clarity in Information and Instructions:There was a need for clearer instructions, particularly in applying discounts, understanding processes like wedding bookings, and accessing pricing and event details.

Interface Design and User Expectations: The interface sometimes failed to meet user expectations, with interactive elements not leading to anticipated actions and key elements like calendar times being overlooked due to layout.

Limited Discoverability: Users had difficulty locating specific features such as social media connections, highlighting the need for more intuitive design.

User Research

Conclusion

The 180wines website redesign project, undertaken by our team of four, culminated in a deeply enriching and insightful journey. Throughout this process, we gained valuable lessons on the significance of user-centric design. Key takeaways included the criticality of intuitive navigation, the importance of clear and concise information presentation, and the need for aligning interface design with user expectations. The usability testing of our high-fidelity prototype particularly illuminated areas such as navigation workflow, clarity in information, interface design, and feature discoverability. These insights were instrumental in informing our design decisions and emphasized the importance of truly understanding and addressing the real needs and habits of users.

Conclusion

The 180wines website redesign project, undertaken by our team of four, culminated in a deeply enriching and insightful journey. Throughout this process, we gained valuable lessons on the significance of user-centric design. Key takeaways included the criticality of intuitive navigation, the importance of clear and concise information presentation, and the need for aligning interface design with user expectations. The usability testing of our high-fidelity prototype particularly illuminated areas such as navigation workflow, clarity in information, interface design, and feature discoverability. These insights were instrumental in informing our design decisions and emphasized the importance of truly understanding and addressing the real needs and habits of users.

Future Opportunities

Looking ahead, the insights garnered from this project present numerous opportunities for further enhancement and innovation. Building on our learnings, there is significant scope to refine the user experience further, making it even more engaging, efficient, and user-friendly. Emphasizing the iterative nature of design and continuously integrating user feedback will be key in evolving the 180wines website. This approach not only ensures that the website stays attuned to user needs and preferences but also solidifies our commitment to enhancing user satisfaction and engagement, driving the website towards greater success.