Donna Vino e-commerce:
UX system, team flows, and product delivery
PROJECT INTRODUCTION
PROBLEM STATEMENT
Buying quality Italian wine online can be confusing for Danish users, unfamiliar with grape varieties, regions, or pairing suggestions.
The existing platform lacked clear structure, intuitive filtering, and a smooth product discovery experience, leading to user frustration and high drop-off rates.
PROJECT OBJECTIVE
Redesign the e-commerce experience to simplify wine selection, enhance product discoverability, and streamline user flows, making the platform more intuitive and engaging for both wine experts and casual buyers.
TOOLS:
Figma,
Trello,
Discord,
Gifthub.
Canva
ROLE:
UX/UI Designer,
Project manager,
Ux Coordinator
DATE:
February 2025 - July 2025
PHASE 1 – First steps into the project
When I joined the Donna Vino team as a UX Design intern, the e-commerce platform was still at an early stage.
The team already had a rough draft of a design system and a few incomplete screens, but no real UX research had been done yet. There was no defined color palette, typography, spacing, or UI consistency.
Everything felt temporary and disconnected.
At the beginning, I worked under the guidance of the UX Lead, Davide, alongside eight other UX designers.
My first challenge was understanding the design direction and figuring out how to contribute without clear guidelines.
I started by familiarizing myself with the Figma workspace and reviewing what had been done so far.
Then, I began collaborating with the other designers, offering small suggestions to improve layout and visual structure on a few components.
Figma workspace Donna Vino
FOOTER OPTIMIZATION
The original footer was minimal and lacked structure.
I redesigned it to follow common e-commerce conventions, organizing the content into clear columns and adding links to relevant pages.
Even though some of the pages weren’t live yet, including them improved the site's navigability and future SEO performance by using meaningful, searchable anchor text.
Mobile Footer
Web Footer
FILTERS OPTIMIZATION
The filters, which were meant to help users refine their search, were poorly positioned.
Expecially in the Web Layout, when opened, they created an awkward amount of white space, and they weren’t expandable enough.
PHASE 2 – From Ux Designer to Ux coordinator
UX RESEARCH
After a few weeks, I was promoted to UX Coordinator and took on more responsibilities.
One of my first actions in this new role was to organize the first user research activity.
Since our users were selected clients with limited availability, it would have been difficult to schedule interviews with each of them individually.
That’s why I chose to start with an online questionnaire, which we sent via email to the existing customer base.
Although this method gave us mostly quantitative feedback, it allowed us to quickly collect structured insights and identify recurring user needs and pain points.
Extracted visual from the survey:
User sample age distribution
We received valuable insights, especially around buying behaviors, expectations around delivery, and product discovery.
From the answers, I helped the team extract key patterns and pain points.
Extracted visual from the survey:
Wine shopping habits and preferred payment methods
Extracted visual from the survey:
User preferences regarding wine tasting formats
Extracted visual from the survey:
Preferred communication channels
Based on those, I created initial user personas and a user journey map, which I shared with the rest of the design team to align our efforts.
Before:
Mixed categories (e.g. wines + events)
Duplicated items
Flat and unclear hierarchy
Utility features mixed with main content
At the same time, I noticed that the internal structure of the e-commerce wasn’t working well.
Navigation was unclear, and categories were overlapping.
I redesigned the site architecture and presented a new layout that made the structure easier to follow for both users and the team.
After:
Clear content grouping
Logical, scalable structure
Redundancies removed
Better alignment with user expectations
REDESIGNING THE SITE ARCHITECTURE
PHASE 3 – Organizing the Chaos
As the project grew, it became clear that we needed more structure.
Designs were inconsistent, and collaboration was becoming confusing.
1) SPRINTS:
I proposed dividing the work into design sprints, assigning specific flows and tasks to each designer.
2) ORGANIZING FLOWS ON FIGMA:
On Figma, I also suggested organizing the frames by arranging the different user flows horizontally.
Instead of using a tree structure with branches, the flows are laid out side by side, visually representing the different logical steps a user can take.
Figma Preview
3) TRELLO:
I organized the team's workflow using Trello, distributing tasks among the designers and coordinating priorities with the developers.
Each day, I assigned tasks based on urgency:
from critical to lower-priority items.
And ensuring a clear progression across columns:
from 'Ideas' to 'To Do', 'In Progress', 'Ready to Review', and 'Done'.
This visual and structured approach allowed me to efficiently align design and development efforts while keeping everyone updated on the current priorities.
PHASE 3 – Iteration and Refinements
At the end of this phase, we launched the first version of the e-commerce platform.
Some advanced features were hidden for development reasons, but the MVP was ready and functional.
After the MVP was released, we started collecting user feedback.
This helped us identify some usability issues and areas that needed improvement.
Based on this feedback, I focused on optimizing specific parts of the experience.
2) Some users were frustrated to find out an item was out of stock only after adding it to the cart.
To solve this, I added a status indicator at the top of the page: green for 'In Stock' and red for 'Out of Stock'."
1) PRODUCT SHEET:
1) Several users selected many bottles at once and asked about discounts for large orders.
I added a quicker selection option by introducing a 6-bottle case, displayed with a reduced price per bottle directly below the description.
