Hunter Valley
A microsite highlighting Hunter Valley's wineries, adventures and cultures.
Role
Sole Developer & Designer
Tools Used
Visual Studio Code
Figma
Adobe Illustrator
Gloomaps
Skills & Responsibilities
User Experience Research
UX/UI Design
Coding
Responsive Website
Usability Testing
Timeline
2024 (Sep - Oct)
The Challenge
Designing a microsite was more than just a class project. It was an opportunity to craft an experience that sparked curiosity and exploration. Rather than simply showcasing a destination, I wanted to create a narrative that resonated with a diverse audience, making them feel as if they were stepping into the place itself. Hunter Valley stood out as the perfect choice. Known for its exceptional wines, it offered a mix of nature, tradition and adventure, all waiting to be explored. My challenge was to translate this richness into a digital experience that felt both inviting and dynamic.
Bringing Hunter Valley to Life
The goal was to design a microsite that would showcase Hunter Valley’s character by highlighting its rolling vineyards, cultural heritage and diverse experience. I focused on offering more than just a list of attractions. I aimed to immerse users in the region’s beauty, its outdoor activities, and its deep-rooted traditions. The site was designed with families, adventure-seekers and leisure travelers in mind, offering an interactive and engaging experience that appealed to both first-time visitors and those seeking a fresh perspective on the area.
What makes Hunter Valley a unique destination?
Hunter Valley is one of Australia's most iconic and oldest wine regions located just north of Sydney and extending inland from the coastal town of Newcastle. With its warm climate and diverse soils, it produces world-renowned Semillon, Shiraz and Chardonnay. But beyond its prestigious wine culture, the valley offers rolling vineyards, beautiful landscapes and cultural heritage that make it a destination that offers something for everyone.
Potential Benefits of Tourism:
Economic Contribution: As a key tourist destination, Hunter Valley’s renowned wine, fine dining and natural beauty generate significant economic benefits for the community and local businesses.
Industry Collaboration: The region’s many vineyards collaborate closely, exchanging resources and knowledge to enhance the quality of their wines. This collaboration not only elevates the wine sector but also attracts more visitors, contributing to the continued growth of both the tourism and wine industries.
Crafting Experiences for Two Unique Visitors
To ensure the design catered to a diverse audience, I developed two user personas that guided the design decisions. These personas helped create a flexible design that accommodates both types of travelers and their unique needs.
Occupation: Blogger & Freelance Writer
Location: Sydney, Australia
Gender: Male
Peter Johnson
-38 years old-
Engaging content that showcases the vineyard experience.
User-friendly navigation with clear, concise information.
Curious and Adventurous: Loves discovering new destinations and indulging in rich cultural experiences.
Social and Outgoing: Enjoy hosting gatherings and sharing his discoveries with friends.
Detail Oriented: Focuses on quality and seeks well-planned experiences.
Personality Traits
Comfortable using digital tools for communication, research and quick access.
Values vibrant content, including images and videos, that capture interest.
Prefers seamless sharing options for social media recommendations.
Technical and Usability Considerations
Clear and up-to-date information on upcoming events, wine tastings and vineyards tours.
Easily accessible guides on the types of wine produced and the vineyard’s winemaking history.
Prefer a clean and well-organized layout where information is intuitively categorized and can be accessed in just a few clicks without long search times.
Needs and Requirements
Motivations
Struggles with accessing detailed vineyard data and complex info.
Values fast access and loses interest with slow sites.
Dislikes irrelevant content clutter that distracts from key details.
Frustrations
Sarah Collins
-50 years old-
Occupation: Architect
Location: Newcastle, NSW
Gender: Female
Calm and patient: Enjoy leisurely activities and take time exploring places.
Refined and Knowledgeable: Passionate and appreciate in-depth information about the context.
Time-Conscious: Balance work and leisure, prioritizes ease of access and information.
Personality Traits
Prefer browsing on desktop with larger fonts and clean layout for easier reading.
Seeks detailed information about the history, process and specifics but not too complex.
Prefer a well organized menu that can guide effortlessly to detailed sections.
Technical and Usability Considerations
A map feature that explores different parts of the area, highlighting points of interest such as landmarks and production areas.
Detailed descriptions of each wine, including grape varieties, tasting notes and recommended food pairings.
Personalized filters or preference, making future visit to the site more efficient and tailored.
Interested in the history and traditions of winemaking.
Prefers well-organized educational content.
Drawn to high quality visuals that capture the experience.
Needs and Requirements
Motivations
Finds basic details lacking depth.
Struggles with disorganized layouts when searching for information.
Frustrated by unclear event schedule.
Frustrations
Information Architecture: Structuring the Travelers' Journey
The information architecture of the website was carefully planned to create an intuitive user journey. While this section presents my initial ideas, several adjustments were made later in the process to refine the structure which are described in the next section.
Designing with a Purpose
To reflect Hunter Valley’s essence, I chose an Earthy color and vineyard color scheme was chosen for the website to reflect Hunter Valley's natural landscape and vineyard aesthetics. This design aims to create a welcoming atmosphere and highlight the area’s natural beauty. I opted for a minimalist aesthetic to enhance usability and focus user attention on key content. Moreover, I decided to find a font that represents Hunter Valley by using a classic and serif font.
Initially, I used the Pacifico font for a playful tone but after feedback from my tutor, I switched to Lora for better readability and a more balanced aesthetic.
Gathering Informal Feedback
I started with simple sketches to bring my ideas to life, allowing me to explore different structures and layouts without constraints. When I shared these early concepts with peers, their reactions sparked new insights and ideas. What seemed clear to me wasn’t always as intuitive as others and this feedback became a guide to refine my approach. These initial sketches paved the way for a more intentional design, helping me build a stronger foundation before diving into the next phase.
Usability Testing Scenarios
To refine the user experience, I conducted usability testing with participants who engaged with the website based on specific scenarios. The “think aloud” method allowed users to express their thoughts while navigating the site, followed by post-interviews to gain deeper insights into the design.
Testing Scenario:
Architect Traveler: You are an architect visiting Australia for a holiday, eager to explore the stunning landscape and natural beauty of the region. During your trip, you want to discover and learn more on how architecture interacts with the environment and enhances the visitor experience.
Freelance Writer/Travel Blogger: You are a freelance writer and travel blogger looking for a guided tour in New South Wales to see iconic wildlife up close. You want to learn more about the area’s scenic beauty and culinary delights, aiming to gather experiences and insights that will enhance your blog content and provide your audience with a rich perspective on this picturesque destination.
User Testing Insights: Low-Fidelity Wireframe Evaluation
In this phase, I finalized the low-fidelity wireframes in Figma, ensuring the prototype size aligned with the design. This wireframe serves as a detailed blueprint for both the desktop and mobile version, incorporating all user suggestions and clearly outlining the layout, navigation flow and interactive elements. I tested the website with two users, using the scenarios in mind for context to evaluate if their needs are being met and my site fulfils its purpose.
Through this testing the following issues were identified:
Content & Layout Issues
Misaligned Elements
Cramped & Overcrowded Layout
Users found the large images on the About, Experience, Plan and Blog pages were overwhelming, making navigation harder. The Vineyard Tour was placed below “Events”, despite being the main attraction. The event sections lacked a clear structure, making it difficult for users to browse and preview details.
The wireframe’s navbar had tight padding and margins, making the layout feel cramped and overwhelming. Additionally, the map and guides were combined into one section, leading to clutter and navigation issues. Users struggled to focus on specific information, reducing clarity and organization.
The text and buttons in the mobile were not centrally aligned, making the layout feel unpolished. User testing also revealed that the spacing in the mobile version was too tight which affected readability.
Refining User Experience: Prototype Testing
After gathering feedback from the first round of testing with the wireframes, I made the necessary adjustments in the prototype to address the usability issues. With these fixes in place, I conducted another round of user testing to refine the design and ensure a smoother and more intuitive user experience.
Background & Font Adjustments
“Blog” Renamed to “Review”
The original grid background was distracting, so I switched to white for better readability. I also reduced the hover text font size to prevent it from covering images.
Based on user feedback, I renamed the “Blog” page to “Review” to encourage users to share their experiences, creating a sense of community and providing more authentic feedback for potential visitors.
Mobile Image & Booking
Users found the mobile images were too small so I adjusted the padding for better visibility. I also added a clear booking button for vineyard tours to address confusion and enhance usability.
Final Website Prototype
For a full-screen experience, view the prototype here.
Future Learnings & Takeaways
This project marked my first time creating a microsite from scratch, and it has been an incredible learning experience. It has taught me a lot about how to bring a design vision to life.
Key insights and plans for improvements:
Balancing Functionality and Aesthetics: I quickly realized the challenge of making a site interactive and visually appealing. I had to repeatedly reconsider how to present the content, especially when envisioning the Hunter Valley marketplace.
CSS & Mobile Responsiveness: While developing the responsive layout for the homepage, I encountered issues with CSS media queries for the image sliders or gallery as I wasn’t able to click the next button for the next images. I initially tried using the first-child selector and display none to control which images appeared in the gallery to show one image one by one but this prevented me from seeing all the images except the first child of the images. As a result, this limited the gallery’s minted functionality because I was unable to dynamically show each image in sequence on a mobile device. I plan to dive deeper into CSS to ensure the design is more dynamic and mobile-friendly.
User Testing & Future Roadmap: I’ll continue gathering user insights and refine key features to better meet user needs and market needs. Looking ahead, my goal is to expand the microsite’s content and features while ensuring it remains user-friendly and engaging for a broader audience while integrating advanced technologies for a more dynamic experience.