
Product goal
Develop an experience that reflects the sophisticated brand identity, while still allowing for a unique approach, adapting to different user groups from a single website. Primarily as a point of sale, but facilitating further investigation into the brand beyond the wine
Target Audience
Primarily casual wine drinkers ordering online after sampling the wine previously, who have an interest in the high-level information around the wine. Additionally, merchant users, who require a high-level of detail and context to the vineyard processes
Individual Role
User Research & Analysis, Persona Creation, Information Architecture, Wireframing, UI Design & Prototyping, Usability Testing
Problem statement
The responsive website looks to create an authentic experience that utilises the unique brand identity of the vineyard, to help progress their reach and educate their customers on the passion and dedication that goes into the vineyard
Breaking down the design process
quantitive research
To be able to gain a high level understanding of the industry, I began the project by undertaking a high-level desktop study of the state of the industry and its approach to digital elements. Research highlighted an increased interest in vineyards and the processes behind them. However, it also indicated a reluctance to adapt to the digital age.

Competitive audit
Progressing into a competitor audit enabled me to get an understanding of those in the industry and how they utilise the digital age. The client brought several of these to my attention, giving me an insight to their product vision. Identifying additional opportunities that could help push the boundaries of the existing website, which came to me in its infancy, unable to utilise its brand identity that they were working to establish.
PERSONAs

Information Architecture
Following a top-down approach, the product focuses the primary function of the ordering process and looks at how secondary uses can be interjected to support the user journey. The sitemap demonstrates the series of decisions made by the users to complete the primary task. Further complicated by the need to inform and supplement the users along the process, so they can understand the context behind their decisions.
Wireframing
Wireframe proposals we initially sketched by hand to get key stakeholder feedback and initial client buy-in to the website overhaul. Primarily focusing on ways to bring in the brand identity and break up the heavy reliance on text. The design then progressed into a low-fidelity prototype to get a better understanding of how the user flow would work and identify the connections between the supporting elements with the primary user flow.
This is some text inside of a div block.
Research Overview
Remote unmoderated usability study, completing a series of prompts within the low-fidelity prototype, identifying pain points and experimenting with the primary user flow. To understand the navigation through the ordering process and determine how users complete a series of tasks on both a laptop and mobile device. Effectiveness was measured by comparison of completion rate and time to completion.
Insight 1
Participants recommended the ability to gain further information from the different areas. While restricting to insights initially, they would appreciate the ability for further expansion.
Insight 2
Participants identified the need for additional opportunities to return to the order process. Many highlighted the limitation on some secondary pages.
Insight 3
Participants appreciated the main call-to-actions were consistent and clearly accessible, particularly while using the mobile device. Although those from the primary target audience struggled to understand the benefit for a desktop platform.
Style guide


Lessons Learnt
Continuing my personal self-development working on a freelance basis, engaging with a live product and managing stakeholder expectations as the project developed. Further fueling my passion for product design, it was interesting to adapt my approach to a brand outside of the technology space entirely and solely focus on the process, from capturing the user’s perspective through to sales. Adapting a traditional business to the world of e-commerce.
Insight 1
While the client brief required the process to be completed from a top-down approach, it would be interesting to have worked from a mobile-first perspective when considering the primary target audience.
Insight 2
Further iterations and user research studies would be required to refine the product. Participants expressed interest in experimenting with a high fidelity prototype, so they could gain a greater understanding of the product.
Insight 3
The primary focus of this project has been to raise the standard of the UI to match the brand identity. The design has enabled me to further develop my skills and focus on the primary user process. However, it would be interesting to expand beyond this and experiment further with the secondary elements to the design.