Case Study
Three Springboard students were matched to collaborate in a real-world UX design project called an IDP (Industry Design Project) in an aim to serve as the final course assignment for our host, vintrail pro. They are a comprehensive SaaS Wine Tourism Software connecting wine tourism and global wine sales, using a B2B2C model.
Team
3 UX Designers (Springboard IDP Interns)
MY RESPONSIBILITIES
-
Project planning
-
Documenting process
-
Ideating
-
Information architecture / Creating Userflows
-
Project facilitating
-
Prototyping
-
High Fidelity mockup organization and cleanup
-
Giving final presentation
TOOLS
-
Figma
-
Zoom
-
Whatsapp
-
Asana
-
Miro
-
Google Drive, Presentation, Sheets, Doc
TIMELINE (4 weeks)
April 24th - May 23rd, 2023
-
Discovery & Research: 1 week
-
Design & Testing: 3 weeks
Phase 1: Discovery
OUR PROJECT PLAN (3 hrs)
To present our project plan effectively, we used Figma to create a table with vintrail pro's potential colors. Our strategy has six phases with deadlines and timelines. Each phase includes an explanation of our process and the methodologies used for our final design.
COMPETITIVE ANALYSIS (10 hrs)
VINTRAIL operates in Europe, South America, and Oceania, providing all-in-one booking software, a channel manager, wine club management, and e-commerce solutions. With advanced technology, it streamlines winery operations, boosts revenue, and enhances customer connections. Let's compare its competitors' performance in the market.
As planned, we initiated our Competitive Analysis with a folder provided by our hosts, containing various documents to review. One of the documents we studied is a Google Sheet listing their competitors to identify our preferences and areas for improvement.
​
Each team member analyzed a specific competitor, gathering key findings for our future designs:
​
Starting with our first competitor, Commerce7, Melanie pointed out their tutorial pop ups as well as their progress circle during the dashboard setup.
Tutorial popups
Progress Circle on
Dashboard Setup
Dilara commended WineDirect for their user-friendly sign-up form, which incorporates a split-screen layout and gamification elements. She also admired the simplicity and concise information provided in their category menus for each product.
Simple signing up form + split screen. We can gamify this with imagery.
Simple menu selection: 4 categories.
CTA is accessible and highlighted with a flashy color
Short info + simple icons
I (Xriss) quite liked Corksy's accessibility of their live chat feature. Same for the visually appealing contrast colors on their website that enhances legibility. I also like the use of fun and simplistic icons in their interfaces.
Clear & legible navigation + downward arrows
In case we want a "Scheduled Demo" option
Friendly
Showing diverse options
Live chat / Live support"
Background photo of Vinyard
Love the purple vs. robin blue contrast
Icons
Positive wording
Find our Competitive Analysis on Figma here
PROBLEM STATEMENT (2 hrs)
As per vintrail pro’s project brief, (1) their sign up process, (2) dashboard setup guide and (3) front store setup were much too time-consuming, outdated and complex for winery businesses to learn to use. This can frustrate users resulting in a temporary decrease in productivity and efficiency during the on-boarding process.
Please find below the screenshots of the interface as it appeared before our intervention.
(1) The Sign Up Process
(2) The Front Store Setup
(3) The Dashboard Setup Guide
SOLUTION (3 hrs)
Our goal for vintrail pro's client onboarding is to create an exciting and obstacle-free experience. As we redesign vintrail's B2B software, we focus on faster, intuitive, and visually engaging interface flows.
​
Our strategies include mandatory fields for necessary account and dashboard information, a visual progress percentage for easy completion tracking, instructional prompts for each step, and gamification features to liven up the interface.
Phase 2: Design I
Before creating low-fidelity wireframes, we analyzed Vintrail's visual elements, informational architecture, and content to redesign a new userflow.
DESIGN AUDIT (10 hrs)
You can write here as much as you want, this text will always look nice, whether you write longer paragraphs or just a few words. Click here and try it out.We individually assessed and prioritized the improvements needed for Vintrail Pro's three main flows. Here are the identified problems for each:
​
-
Sign Up
Lacking structure and clarity.
-
Dashboard Setup Guide
Requires better organization.
-
Front Store Setup
Requires significant improvement, including gamification and color enhancements, due to its complex nature.
Find the Design Audit details in Figma here
USERFLOWS (10 hrs)
By Xriss
-
The Sign Up
​
Upon sign-up, the progress circle starts at 0%.
​
Users must input all required business information to proceed. "Help" options will be available throughout the entire process for user assistance.
2. The Dashboard Setup Guide​
In the dashboard setup guide, a progress circle shows the remaining information to be filled in. Prompt bubbles provide guidance throughout the process.
​
Essential information like photos, the winery's story, contact details, and office hours are crucial for attracting customers. Users can select "Setup Guide" to review missing profile details, "Help" for assistance, or "Go to your Website" to preview progress.
3. The Winery Dashboard Interface Flow
​
Keeping the progress bar still on display, this was a bit of a tricky one for us to design as there was a lot of information to fit into one screen but we made it happen.
View userflow on Figma HERE
SKETCHES & WIREFRAMES (20 hrs)
By Dilara
​
With the useflows I created confirmed, it was now Dilara’s turn to bring her strengths forward in building the wireframes (right) according to her sketches (left) while using the three previously stated flows needed to solve our UX problem:
​
-
The 5 steps users will follow to sign up
-
The Dashboard Setup Guide
-
The Winery Dashboard Interface Flow
(1) THE SIGN UP
STEP 1: BUSINESS INFORMATION
STEP 2: CONTACT INFORMATION
STEP 3: QUESTIONNAIRE
STEP 4: CREATE ACCOUNT CONFIRMATION
STEP 5: LOGIN VIA CONFIRMED ACCOUNT
(2) THE DASHBOARD SETUP GUIDE
(3) WINERY DASHBOARD INTERFACE FLOW
The final dashboard look after the information was added
Get a closer look at this on Figma here
Our Takeaways
-
Text sizes are bigger than should be for websites when played
-
Questionnaire forms need separating the and adding skip / back buttons
-
Front store setup flow need more pages to show the steps
Phase 3: Design II
STYLE GUIDE, ICONS & UI ELEMENTS (20 hrs)
Vintrail then provided us with their color palette ideas that, admittedly, weren’t the easiest colors to work with but our hosts were flexible. We were able to make it work.
​
But what they were adamant about were the following brand adjectives
​
-
Engaging
-
Dynamic
-
Innovative
-
Professional
-
Trustworthy
-
Minimal
For a closer look of our color palette, click here
And thus, we conceived our UI Kit! ✨🚀
HIGH FIDELITY WIREFRAMES & PROTOTYPE (40 hrs)
​In order for all of the team members to be on the same page, we had to find common ground when it came to design choices in order to maintain consistency and brand continuity.
Find the prototype link on Figma here
Phase 4: Validate
TEST SCRIPT AND INTERVIEWS (4hrs)
By Mélanie Minchom
​
The only way to improve is by receiving feedback from a fresh pair of eyes ... or four. Vintrail provided us with four users who, via Zoom, tested our designs.
​
1. A tour operator
2. A startup manager
3. A tour manager
4. The head of digital at a winery
​
The tasks we gave them were according to the three flows we created such as “Walk us through how you would sign up for the first time” and “Can you show us how you navigate through the dashboard?”
To read and watch our usability test runs on Zoom, click here
For the test script click here
Our Takeaways
The main highlights from the tests were
​
-
Overall: need more descriptions
-
Labeling was unclear
-
Buttons on the front store setup were confusing
-
Dashboard was still too busy
-
General information could be organized better
A more detailed list of our takeaways can be found on Figma here
Phase 5: Present
FINAL FIGMA DESIGN (8hrs)
Our designs underwent a transformation from their initial state to their current form. We made adjustments to enhance the user experience taking into account the insights gathered from user testing, and implemented the necessary changes accordingly.
THE SIGN UP
STEP 1: The Sign Up - Entering Business Information
Step 1: Entering Business Info
Step 2: Questionnaire
Wineries may view all sorts of analytics in detail on the progress and sales of their businesses
Step 1: Entering Business Info
Evolution of our Designs
BEFORE
Sketches
Low Fidelity Wireframes
High Fidelity
Final High Fidelity
AFTER
Sketches
Low Fidelity Wireframes
High Fidelity
Final High Fidelity
NOW
Sketches
Low Fidelity Wireframes
High Fidelity
Final High Fidelity
LESSONS LEARNED
Typically, for case studies, we explore transferring the project to developers for the website we built. Surprisingly, Vintrail was highly impressed with our project presentation and unexpectedly offered us the opportunity to continue. Unfortunately I am unable to disclose further details for the time being.
​
Initially, I was concerned about having three female UX designers on the team, hoping it wouldn’t result in catty conflicts and chaos. To my surprise, from our very first meeting, we immediately connected on all levels. We got to know each other's strengths, assigned responsibilities, and executed our tasks accordingly. This approach greatly benefited us, setting the tone for open and effective communication with our hosts, managing their expectations, and fostering a positive workspace where we took pride in the result.
​
I consider myself incredibly fortunate to have been matched with such a Super-Team. We welcomed each other's ideas and maintained a solution-oriented mindset rather than dwelling on problems. The project and client’s satisfaction came first. While mistakes certainly occurred along the way, the open communication and support we provided to one another enabled us to take accountability and create a positive work environment. When one had shortcomings, the other two always jumped in to help. Working on this project and making two new friends was a blast, to say the least!
Smiles for miles with the Dream Team
CHALLENGES
-
Time difference
With me in Lebanon and the girls in the USA, it was a little annoying to manage but once we set a time that worked for everybody, we followed it religiously. The way I also looked at it was that with us being across the world from each other, I saw the wheel spinning 24/7 making us actively rapid responders and allowing us to deliver our project on time.
-
Deadline
This created some frustrations as we were a little nervous on Presentation Day. As my team and I are solution-oriented and extremely supportive of one another, that is what helped us focus on being reliable and doing our best, handing off a banging product the client loved!
-
Sticking to my own lane
There were times I jumped in for some fine tuning, coming off as though I was “correcting” someone’s hard work. After clear communication, making light of the situation and taking accountability, nothing ever went too far.
-
Vintrail’s color palette
This part was difficult to work with and took the most time! It was easy for the colors chosen to look overly colorful and childlike but we made Eric & Nédélia happy with (literal) flying colors.