Landing Page Redesign
Project background
VinTrail, founded in 2019, is a wine experiences booking platform and wine marketplace. Their primary focus over the last few years has been on their B2B platform, VinTrail Pro, which provides wineries with an integrated software to maximize wine tourism and sales potential. Their B2C platform offers users over 1,000 unique winery experiences and regional tours, and allows users to shop from 3,000+ wines and buy directly from the winery, shipping to over 45 countries around the world.
The problem
Visitors are not loyal to booking systems and seek the most intuitive and streamlined booking experience. Competition is dense. A lot of third party websites resell wine experiences or sell wine online. This is causing a problem on VinTrail’s B2B side: wineries wonder if they’ll convert as much with VinTrail’s UX.
VinTrail has two main offers: experiences (tourism, activities, etc) and shop. Their current website is visually bland, lacks personality, and is confusing to navigate.
The goal
The main goal is to create a unique and innovative design that differentiates VinTrail's marketplace from competitors while keeping it intuitive and easy to use. We aimed to:
create a clear navigation to enhance user experience
highlight the benefits of both services while creating a cohesive landing page that seamlessly connects our two main services.
The team
Lee Fisher (UI/UX Designer)
Preeti Mehalwal (UI/UX Designer)
Matt Featherstone (UI/UX Designer)
Eric Wagnon (VinTrail Founder / CEO)
Nédélia Fauconnier, (VinTrail COO)
Tools used
Figma
GoodNotes
Google Suite
Zoom
The timeline
4 weeks (40 total hours)
Project Kickoff
At the end of April of 2023 I had the opportunity to team up with two other Springboard UI/UX design students to work on a redesign of VinTrail’s landing page. This four week, 40-hour project aimed to clarify VinTrail’s B2C offering and create a better user experience in order to promote trust within their B2B clients.
After meeting with teammates Preeti and Matt we determined that I would be the point person between our team and VinTrail, and I promptly introduced our team to our VinTrail contacts and scheduled a kick-off meeting to learn more about the project. We met with VinTrail CEO Eric Wagnon and COO Nédélia Fauconnier. During our first call we learned that VinTrail was currently working with another Springboard team on their B2B side, which has been their main focus since the company’s start in 2019. My team was to focus on their B2C website, which needed a lot of love. VinTrail has two main offerings: wine experiences and a wine shop. However, the current website was difficult to navigate, and they told us that users often leave their landing page shortly after arriving. In fact, at first glance, many users don’t notice that there is a wine shop within the site. Eric and Nédélia requested that we redesign the landing page in order to establish a clear connection between their two main offerings while creating a memorable feeling for their users. After this meeting my team and I created the following timeline:
Competitor Analysis
During our kickoff call I learned that winetourism.com was VinTrail’s most direct competitor, so I decided to conduct an analysis of their website in order to learn more about the competition and to identify their strengths and weaknesses. I also analyzed an indirect competitor, Bright Cellars, to gain inspiration for the wine shop side of VinTrail.
VinTrail’s Current Landing Page
After I conducted the previous analyses, I helped my teammate Preeti do an in-depth heuristic analysis of VinTrail’s current landing page. My main takeaway was that the current website was very difficult to navigate. The top navigation bar had both a shop and experience tab that linked to their respective landing pages, but there was no dropdown to give the user a sneak peek at the offerings. The main landing page itself linked to different experiences and wineries, yet there was no easy way to get back home once you navigate away. There was a lack of organization amongst the webpages, and due to the absence of breadcrumbs or “emergency exits” it was easy to hit a dead end. The most pressing usability heuristics that needed to be addressed were user control and freedom and error prevention.
Overview
VinTrail’s original website landing page has a lot going on. At first glance the site appears to be for wine tourism and it’s easy to miss the shop tab and icon in the top navigation bar. It’s not quite clear what their offers are.
Top Navigation Bar
VinTrail’s top navigation bar did not make it easy for users to know what to expect within the website, and navigation as a whole was a major issue that we needed to address. The original navbar can be seen in the mockup above- the navbar to the right is how it appeared once VinTrail updated their logo a week into our project. Some issues we noted were:
Icons are not needed next to tab names
The shopping cart icon is for the wine shop, not experiences, even though it is visible when browsing experiences
The flag for language preferences is ambiguous and could represent the country in which the user is shopping
After my team completed our analyses we decided that our best course of action would be to redesign VinTrail’s landing page. We needed to clearly define the information architecture and to find a way to highlight both the wine experiences and the wine shop while still keeping them distinct. We learned that the wine experiences attracted mostly women in their 30s-40s, whereas the wine shop attracted mostly men in their 40s-50s. We needed to find a way to seamlessly marry the two offerings and create a cohesive feel while also targeting those two distinct demographics.
Sitemap
I began the process of defining the sitemap by organizing the website’s offerings into five different categories: experiences, shop, account, VinTrail Pro (their B2B product), and about us. I shared an initial version of the sitemap with VinTrail and also included a sample footer to demonstrate how the sitemap could be displayed within the landing page to enhance navigation.
Original Footer:
Example New Footer:
The client was very appreciative of the sitemap and liked seeing how it could aid in navigation within the footer. They requested that I rename the VinTrail Pro section “Business Solutions,” and the final sitemap can be seen below.
Sketches
With the sitemap approved by the client, the team and I began our ideation phase. We each sketched two or more versions of possible landing pages in order to quickly come up with multiple solutions for the client to choose from. I used the app GoodNotes on my iPad to sketch out my ideas and easily digitally share them.
I presented the above sketches alongside the sketches my teammates created during our weekly meeting with VinTrail, and we received the following feedback:
The client liked the top tab system depicted in my sketches, and noted that it was discreet and could be used throughout the whole website. They also appreciated that it left room for expansion, as they are working on their wine club and could see a third, “wine club” tab being added in the future.
They appreciated the simplicity of the icons for search, account, cart, and so on in the top navigation bar as opposed to their current use of icons plus labels. My teammate Preeti explained the importance of keeping the navigation bar uncluttered and the clients were on board.
They agreed with our suggestion to keep the landing page relatively short with only three to four sections.
They liked the idea of cross-promotion, as Matt recommended we promote the wine shop on the experience landing page and vice versa.
Low Fidelity Designs
After discussing the feedback as a team, our next step was to start designing in low fidelity. We decided that there would be two landing pages: one for experiences and one for the shop. I created the following design for the experiences landing page.
My teammates designed a low fidelity version of the shop landing page. At this stage I also designed the mega menu dropdowns in order to help create a clearer navigational structure. For the top navigation bar I was inspired by American Eagle’s website, which uses a similar tab system to separate their main clothing store from Aerie, their lounge line. I wanted to keep the experience booking part of VinTrail separate from the shop, but I didn’t want users to be unaware that the other exists. Within the experience and shop tabs I designed categories for the mega menus, allowing for easier navigation within the distinct areas of VinTrail’s offerings. I was also inspired by J. Crew’s mega menus that include cards for featured items, and I added something similar to my design so that VinTrail can promote experiences and/or wines from within the menu itself. Below you can see the dropdowns that I designed for the experience landing page.
High Fidelity Designs
After receiving feedback on our low fidelity designs, I had a frank conversation with the client about our next steps. Ideally at this stage in the project I would have wanted to conduct usability testing in order to validate our designs. However, due to the limited scope and timeline of this project it simply wasn’t feasible. Additionally, we were told during the first week that the Springboard team that was working on their B2B side would define the style guide and color palette, but it ended up not being completed in time. Without user feedback or a defined style guide, my team and I wanted to check in with the client to see what would be the most useful during the final week of our project: conducting guerilla usability testing on the low fidelity designs instead of creating a high fidelity prototype, or creating a high fidelity prototype using the color palette from the logo as inspiration. After discussing the pros and cons of each, the client gave us the go ahead to create the high fidelity designs, but appreciated the willingness to adapt and noted that they would like to spend more time on usability testing in the future.
My team and I split up the work as follows:
When designing the high fidelity version of the top navigation bar, I implemented the feedback I got from the client. They requested that the logo go in the top right corner, and after reviewing the low fidelity design they also requested that their name go next to the logo instead of above the menu categories, which you can see reflected in the final design.
I also made the decision to use a different color on the experience landing page navigation bar than the shop landing page navigation bar. Since the main demographic for the experience side is women I chose the purple brand color, and I used the navy blue brand color for the shop in order to appeal to the mainly male demographic. By differentiating the tabs with different colors, users will easily be able to tell if they’re on the experience or shop side of VinTrail.
Below you can see the dropdown menus for both the experience and shop landing pages. The clients wanted the final product to be memorable and fun, so I took the time to design hover interactions for the menu items. The hover effect also gives users immediate feedback and helps them differentiate between text and links.
Future Steps
If I were to continue working on this project, these would be my next steps:
Conduct usability testing to validate the design and learn if the switch between shop and experience is intuitive
Clearly define UI style guide and keep accessibility standards in mind
Keep navigation clear throughout the rest of the website
Add breadcrumbs to help users know how they got somewhere and how to get back
Work with developers to design a mobile friendly version of the mega menu and navigational structure
Reflections and Thanks
This was my first experience working with a real company on a real problem, and the experience affirmed my decision to enter this field. I value working on a team and felt confident in my ability to lead my team in the right direction. I really enjoyed explaining the design process to the clients and ensuring that our work always kept their users in mind.
“We were impressed by your deep understanding of the project that we attribute to your Active Listening skills. You understood our goal of pushing beyond conventional UI/UX. Among your team members, you displayed the most understanding, creativity and innovation. Your ability to think outside the box and transcend the status quo was highly valued within our team.
Despite the project’s constraints and complexity, we found alignment in our approach to bring seamless solutions and introduce intuitive changes. You demonstrated a genuine interest for the project and your ability to source the ideas we needed, and pertinently advise us on following steps have been invaluable. Your delivery of clear-cut designs was also commendable.”
I’d like to thank my teammates, Preeti and Matt, for their work on this project with me. It was fantastic having fellow designers to bounce ideas off of and we pushed each other to create the best possible solution. I would also like to thank Eric and Nédélia for their prompt feedback and trust in us as designers. Their openness to new ideas allowed us to design a landing page that set VinTrail apart from competitors. I look forward to staying in touch with them and seeing the changes we suggested take effect.