Timeline
Spring 2023 (4 Weeks)
Team
Lee Fisher, Matt Featherstone, Eric Wagnon, Nédélia Fauconnier
Tools
Figma, Miro, Zoom
Role & Responsibilities
UX Design: Sketches, Wireframing
User Research: User Interviews & Heuristic Analysis
Vintrail
Context
As a part of Springboard's final project, students were grouped into teams and tasked to work with an industry sponsor on a given problem statement and formulate an evidence-based design solution.
My group was given to work on the B2C aspect of Vintrail, a wine tourism and wine sales platform connecting a global winemaking and wine-loving community.
Problem
An ineffective interface hampers engagement and sales
Vintrail was seeking design support in redesigning its website to seamlessly integrate vineyard tour purchases with wine sales. User research highlighted the need for enhancing user experience, and engagement by addressing discoverability, inconsistency, and navigation challenges.
How might we seamlessly integrate vineyard tours with wine sales while improving user experience, engagement, discoverability, and navigation?
Solution
Before
After
Homepage
Homepage
Understanding existing users and business goals
Building upon Vintrail's prior research, our redesign process consisted of two phases: primary research, involving stakeholder interviews and user interviews to understand pain points, followed by secondary research, where my team member did competitive usability testing and I did the heuristic evaluation to assess design patterns and identify usability problems in the current website interface.
Rapid Iteration and Diverse Landing Page Designs for Client Selection
During the ideation phase, we discussed the approved sitemap and ensured that everyone has a clear understanding of the client's requirements and goals. I proposed the idea of sketching multiple versions of the homepage, allocating four days for each team member to sketch two landing page designs. This approach encouraged creativity and diverse approaches to generate a wide range of solutions. We collaborated, shared our designs, and explained our choices. Finally, we presented the selected landing page designs to the client, highlighting how they addressed their requirements.
Prototype
Next Steps
1. Usability Testing:
-
Conduct usability testing to validate the design and assess the intuitiveness of the switch between the shop and experience sections.
-
Gather feedback from users to identify any potential issues or areas for improvement.
-
Use the insights obtained to refine the design and enhance the user experience.
2. UI Style Guide and Accessibility:
-
Clearly define a UI style guide that establishes consistent design elements, including colors, typography, icons, and layout.
-
Ensure that accessibility standards are adhered to, considering factors such as color contrast, font size, and keyboard navigation.
-
Make accessibility a priority to provide an inclusive user experience for all users.
3. Mobile-friendly Mega Menu and Navigation:
-
Ensure that the website's navigation remains accessible and user-friendly on smaller screens and touch devices.
Idea 2: Homepage
Idea 1: Homepage
Iterations based on the client's feedback
After receiving feedback from the clients on our early idea sketches and gathering their preferences and insights, we progressed to the next stage of designing low-fidelity wireframes. With confidence, we began iterating on the selected designs, making necessary adjustments and refinements in the low-fidelity stage.
Low-fi Wireframes
Hi-fi Wireframes
Identify key problem areas
Goals
After our first kickoff meeting with our stakeholders and discussing the scope and time constraints for this project, we decided to focus on the homepage with a clear goal:
1. Streamlining Navigation: Simplifying and clarifying the navigation structure to make it easier for users to find information.
2. Enhancing User Experience: Improving the overall usability, accessibility, and user-friendliness of website visitors.
3. Improving visibility: Creating a unified and visually cohesive landing page that seamlessly connects the website's two main offerings.
During the process of synthesizing the research findings, I identified that:
-
Users' first impression of the website was an experience (tours, activities) offering website they failed to notice the wine shop service being offered by Vintrail.
-
The top navigation bar posed challenges for users with unnecessary icons, a misleading shopping cart icon, and an ambiguous language flag, impacting clarity and navigation.
-
The website's information architecture is disorganized with broken links, leading to a confusing user experience.
-
The client’s research showed that users struggle to accomplish their goals and exhibit low engagement.
Project Learnings
I'm proud of contributing to a large-scale project with a supportive team. I learned the power of collaboration, iteration, and involving stakeholders early on. Given more time, I would prioritize user feedback and refine the design. Involving stakeholders from the beginning aligned objectives and gathered valuable insights for a smoother design process.