DonnaVino Booking & Add‑to‑Cart Flow

Context & Challenge

Role: UX/UI Designer
Tools: Figma (Advanced Prototyping with Variables), Notion (knowledge sharing and project documentation), Trello (Project management)
Duration: 4 months

DonnaVino, a boutique wine company based in Denmark, wanted to enhance their online experience by:

1. Allowing users to book wine tasting events seamlessly and allow the Event Managers to easily collect event booking requests and essential details.

2. Implementing an add-to-cart flow for purchasing exclusive wines.

The challenge was to design a flow that felt premium and intuitive, while also delivering interactive prototypes that developers could understand and implement efficiently.

Research & Discovery

• User needs:

  • Easy way to browse and book events without friction.

  • Clear visibility of availability and confirmation steps.

  • Smooth transition from event exploration to purchasing wine.

• Stakeholder collaboration:
  I actively engaged with the company CEO, our main stakeholder, the associated Web Master, and the dev team by presenting medium‑fidelity prototypes early in the process.
  ➝ This helped uncover their needs and pain points, especially around managing reservations effectively.

  ➝ Having a draft of a solution already implemented, allowed the design and dev team to collect more insights about the design and computational logic to implement in our solution.
  ➝ Together, we structured a process that allowed them to access the right information (e.g., attendee numbers, event capacity) directly from the booking flow.
  ➝ Guiding the dev team through our medium fidelity prototypes allowed them to share more details about the technical feasibility of our solutions.

• Competitive analysis: reviewed booking flows of wine clubs and boutique brands to find best practices (e.g., transparent calendar selection, progressive disclosure of options), adopted keyword research via Google Keyword Planner and restructured sections, parragraphs and headings for SEO.

Design Process

1. User Journey Mapping:

• Scenario A: Book a wine tasting event → check dates available → choose date → confirm event type → review details → pay reservation fee and send reservation request to admin.

• Scenario B: Select product to purchase → check availability → check price details→ select quantity → add to cart → review cart → checkout.

2. Wireframing & Stakeholder Feedback

Created medium‑fidelity screens to validate layout and flow with both users and the CEO.

• Iterated based on CEO feedback to ensure the booking flow included clear data outputs for reservation management.

• Reduced steps and statuses that where unnecessary, prioritizing user convenience, information transparency and internal operational needs.

3. UI Design & Advanced Prototyping

• Further developed the existing design system with the addition of reusable components (buttons, cards, modals).

• Designed interactive Figma prototypes with variables and conditional logic:

  • Fees are calculated taking into consideration multiple variables, like the type of event, the no. of guests and event type.

  • Cart total updates as items are added.

  • Admin-facing details (like event capacity) surfaced naturally in the flow for internal use.

  • Real-life dynamic error handling for a clear requirement sharing with the development team.

• These prototypes allowed stakeholders and developers to experience the flow as if it were live.

4. Developer Handoff

• Organized Figma files with clear layer naming and component documentation.

• Annotated interactions and variables to ensure smooth implementation.

• Held a design review session with the development team, improving collaboration and reducing guesswork.

• Planned the releases using Figma Ready-to-Dev feature.

Outcome & Impact

• Improved collaboration: Developers reported the prototypes reduced ambiguity in implementation.

• Stakeholder alignment: CEO and team validated their operational needs were integrated into the booking flow.

• User‑centered design: The final flow balanced simplicity with DonnaVino’s premium brand identity.

Key Learnings

✔ Engaging stakeholders early (via medium‑fidelity prototypes) uncovers business‑critical needs that influence UX decisions.
✔ Leveraging advanced prototyping in Figma (variables, dynamic interactions) bridges the gap between design and development.
✔ A structured handoff process saves time and fosters trust within cross‑functional teams.

What this shows about me as a Junior UX/UI Designer

• I think holistically: from stakeholder engagement and research to polished interactive prototypes.

• I’m comfortable with technical tools (Figma variables, dynamic components) that enhance collaboration.

• I ensure a seamless collaboration between the design and dev team and involve devs in the design process to assess technical compliancy and feasibility.

• I´m confortable with interacting with multiple stakeholders to ensure alignment across all the individuals involved.

• I aim to design user-centered, feasible solutions that empower both users and internal teams.

  
  

Interactive Prototype: Add to Cart Flow

Link to Figma

Link to Figma

Interactive Prototype: Event Booking Flow

Link to Figma