01

Before jumping into research, though no design decisions should be made without research, I mapped out proposed solutions to put the stakeholder at ease and have a clear path going forward for myself as the designer!

From this, I built a roadmap with the Stakeholders and Developer to make sure the team was aligned on what to expect for the project.

02

After Conducting Stakeholder meetings, further research was conducted to get a holistic view of what the current issues are and what the redesign must solve:

1.    Analyze their data analytics software (Cloudflare).

2.    Research company reviews on Google.

3.    Perform a competitive audit of neighboring wineries.

4.   Conduct user testing of the current website.

03

Based on the user research, proposed issues from stakeholders, and tech constraints from the developer (all presented above), I created a prioritization matrix to map out potential features based on urgency and importance (which were decided based on what elements are crucial to meeting business and user goals once launching the live product). Each feature is color coded to confirm which source of research supports each decision!

The matrix was then used to create a product roadmap to keep myself and the stakeholders on track with what to expect and their corresponding deadlines.

04

Nancy is a self-employed, married woman with 3 kids who is a wine connoisseur in her leisure time. She is the ideal customer for Narmada because she not only frequents wineries in person and is open to purchase wines online, but she also recommends those wineries to her friends and large family (bringing in more business).

05

The prioritization matrix, task flows, and user flow were all used to create a site map for Narmada’s redesign. The hierarchy ensures that while there is so much content to sift through, the user will be able to find every single piece of information efficiently.

06

For the sake of visualizing the layout of the redesign, including alignment, consistency, content, and navigation, I quickly made rough sketches before moving on to wireframes.

Desktop wireframes were made for all screens in order to make sure the stakeholders, developer, and I were on the same page before moving further. Below showcases 5 Key screens: the homepage, age gate before wine selection, wine club registration, and secure checkout.

07

5 Participants tested the desktop prototype using monitored remote user testing via Zoom. Participants were asked to share their screens and verbally share their thoughts as they complete each task.

The goals of testing were to deduce whether the pages are clear to read, understand, and interact with, as well as identify any pain points the user expresses as they complete the given tasks.

The testing consisted of 2 different scenarios with 3-4 tasks corresponding to each. I strategically chose these task flows to take into account the 2 ways users would utilize the website: for an in-person trip and an online experience.

08

Although participants completed user testing successfully, various follow-up questions that were asked after user testing had one piece of feedback in common: shorten the FAQ section.

This was a special moment as a product designer to understand how your own thinking can differ from users and developers. As a designer, my reasoning was to keep the FAQ section expanded to ensure it stays searchable through the search feature, however that was a counter-effective decision as it caused overwhelm to users.

10

As stated earlier, Narmada Winery’s previous analytics tool was primitive with the membership plan they had on it. Therefore, it was nearly impossible to measure how the redesign affected the business’ numbers through the tool alone.

Instead, I gathered a few key metrics (6 months after launch) reported from the stakeholders themselves:

Lessons from a previous project: Something that I was more cognizant in this project that I learned from Zesty is to be more mindful of design decisions that can result in ambiguity. For example, in Zesty, I learned how just one choice of iconography can impact how the user interacts with the product. In this project, I was hyper-aware when it came to choosing iconography and the user feedback I gained from it to solidify decisions.

Working with a team: Though user testing had a 100% completion rate, I had a lot of learning lessons working with a developer and what they need in order to engineer the final product, including spacing, how to hand off assets, and unique constraints developers have when developing the live product.

Needing a team: I learned how much work redesigning an entire website takes for a single person and got a better understanding of why teams are needed to specialize on different tasks to create a product.

A Deeper Dive Into Accessibility: If I had more time, even though I always take accessibility into account, I would dive deeper into testing and designing specifically for accessibility as the primary goal to adhere to WCAG standards. This means recruiting users who have visual, mental, and mobile impairments and observing how they navigate the redesign.

Responsive Layouts: Being that this was my first responsive design, in addition to the the amount of screens that had to be redesigned, this project made me understand the importance of designing responsive layouts in Figma to cut down on time.

Conversions: I plan to check back in with the Narmada Winery team in a year to see how the redesign has helped their online sales! This way, all 4 wine seasons are accounted for and a better idea of the redesign’s impact on conversions will be clear.

Further Testing: If this were a product that I’d work on for years to come, a crucial next step would be to test both the tablet and mobile redesign to understand how the type of device affects usability for each task and scenario.