Designing a Garden-to-Table Food Festival Merchandise Purchase App

Mobile Interface • User Testing • Prototyping • E-Commerce

Overview

Digital experiences have the potential to elevate festivals by offering engaging interactions that extend beyond the in-person event. As the sole Product Designer, I created a mobile purchasing experience for a Garden-to-Table Food Festival at the University of Washington. The goal was to streamline merchandise purchasing while also promoting local engagement and supporting the festival's sustainability mission. I executed an end-to-end design process, using research, persona development, wire-framing, prototyping, user testing, and an iterative approach. The final mock-up allowed the audience to connect with the festival’s mission even before attending the event.

Project Brief

As part of a ten-week initiative to design a digital experience for the University of Washington’s Garden-to-Table Food Festival, I was responsible for developing one of three possible mobile user flows:

  1. Event schedule planner – enabling users to explore and bookmark festival events

  2. Volunteer signup – allowing users to browse available roles and register

  3. Merchandise purchasing flow – guiding users through browsing, purchasing, and confirming festival merchandise

The Proposal

I chose to focus on the Merchandise Purchasing Flow because it offered the greatest opportunity to integrate key principles of e-commerce, drive engagement beyond the immediate campus community, and directly support the festival's sustainability mission.

The design process followed an iterative approach, including sketching, wireframing, user testing, and A/B testing to refine the flow. Feedback from design critiques and testing informed each step to ensure a seamless and intuitive experience. The final prototype streamlined the purchasing experience, with a clear donation integration and user-friendly checkout process.

1 Research and Discovery

Festivals are typically viewed as in-person experiences, with limited emphasis on digital engagement before or during the event. However, digital experiences present an opportunity to enhance participation and build anticipation ahead of the festival.

Discovering User Needs

To better understand user needs and pain points, I began by conducting online surveys to festival-goers at the University of Washington and the Greater Seattle area. My research focused on three key aspects:

  • Frustrations: Respondents that indicated having attended concerts or festivals expressed frustrations with inefficient purchasing at in-person merchandise booths. They highlighted the preference for a faster, more convenient way to avoid long queues during the event.

  • Festival values alignment: I analyzed three large-scale food festivals (Oktoberfest, Taste of Chicago, and Bite of Seattle) to uncover what sets them apart. Through a competitive analysis, I identified issues such as overcrowding and inefficient mobile ordering. However, what made these festivals successful were their strong cultural ties and engagement strategies. For example, Oktoberfest’s themed beer tents, Taste of Chicago’s live music lineup, and Bite of Seattle’s live cooking demos all fostered memorable, immersive experiences.

  • Behavioral Analysis: In addition to user surveys, I conducted competitive research on popular e-commerce platforms to identify trends and best practices. Key takeaways included the importance of featuring trending products on the landing page and ensuring clear, intuitive product categorization.

Three distinct personas created based on survey findings to capture the diversity of festival-goers

2 Problem Definition & Prioritizing Needs

After synthesizing the research, I mapped out a customer journey specifically for Connor, the Food Content Creator. As an influencer, he bridges the gap between the broader Seattle community. His position as a UW alumni and established presence on social media can create buzz and drive awareness of the festival’s identity. Unlike the other two personas, Connor can help amplify the event's reach beyond student population and target local food lovers.

Customer Journey Map

Key Insights

Overwhelming Information

A significant challenge for the persona of Connor, the Food Content Creator, is the overwhelming amount of event information available. As someone with a busy schedule and a full-time job, Connor seeks a quick, intuitive access to key information and an enjoyable shopping experience for festival merchandise. The ability to pre-order or plan ahead will help build excitement and anticipation, turning the festival’s digital experience into a delightful and engaging break in Connor’s busy day.

Promoting Festival Values

As an enthusiastic food content creator and UW alumni, Connor is excited to share this festival experience with his network. A key opportunity lies in offering exclusive, eco-friendly merchandise that aligns with the festival’s sustainability mission. Not only does this reinforce the festival’s core values, but it also provides Connor with content to engage and excite his followers. A merchandise campaign can amplify the festival’s visibility and impact, driving greater engagement both online and offline.

3 Ideation & Concept Testing

1 Review and Confirmation Interactions

One key insight from the user flow is the importance of adding multiple touchpoints for attendees to confirm their products, quantities, and any additional items before proceeding with the checkout. For example, an ‘Added to Cart’ confirmation pop-up provides users with a chance to review and edit their selection before moving to the next step. This approach helps reduce cognitive load, ensuring the process is clear and straightforward—especially on mobile, where a clutter-free interface is crucial.

Based on the insights gained from the customer journey map, I narrowed my focus to the merchandise flow. The objective was to design a seamless and intuitive experience that allowed users to easily select products, complete the checkout process, and align with the festival’s values. I chose to center the user flow around the Recycled Tote Bag, an eco-friendly item that perfectly aligns with the festival’s sustainability mission.

I mapped out a user flow that outlined key decisions, interactions, and touchpoints, providing a clear structure of the purchasing journey. Critical to understanding how users would move through the process and where potential issues or improvements could arise, the flow aimed to ensure users could:

  1. Browse products effortlessly

  2. Confirm their selections and quantities.

  3. Review the donation option for a Garden Kit to support local farms.

User Flow

> So what do users need?

2 Creating a Donation Incentive Garden Kit Gift

The addition of a donation option for a Garden Kit, a product that allows attendees to purchase and take home a kit for growing vegetables or herbs. Presenting this option just before the final checkout step strengthens the attendee’s connection to the festival’s mission—supporting local farms and sustainability.

Offering the Garden Kit as an appreciation gift for those who donate serves as both an incentive and a way to further align the purchasing experience with the festival's values.

Low-Fidelity Wireframes & Concept Testing

I started with hand-drawn wireframe sketches to visualize key pages and interactions referencing the user flow. These initial sketches were then used to conduct user testing with 5 participants.

4 User Testing

I conducted the first round of user testing on 5 participants to view the sketched wireframes all at once and encouraged them to "think aloud" during the process. The objective was to gather insights into the intuitiveness of the design, identify pain points, and understand how users navigated between different pages.

During Test

Post-Test

Pre-Test

How much do you already know about purchasing merchandise on a mobile app?

Before I show you the design, what do you expect to see?

What do you think of the following elements? a. The empty space on the "Added to Cart" popup confirmation b. The header bar c. The donation option on the shopping cart page

What, if anything, draws your attention or stands out to you?

Was there anything that didn’t look the way you expected? If so, what was it?

“User testing surfaced key usability and flow issues in the merchandise purchase experience. Each insight led to focused design adjustments aimed at improving the overall interaction model.”

What would you like to see in the final design?

How would you rate your experience navigating through these pages?

Header bar interference

On devices with Apple’s Dynamic Island, the wordmark placement overlapped UI elements, reducing legibility and creating visual noise. I repositioned and scaled the wordmark to maintain brand visibility without disrupting iOS-native components.

Cluttered scroll behavior on landing page

2 users found dual horizontal scroll sections on the merch landing screen difficult to parse, with content blending together. This friction slowed down product discovery. I consolidated the layout into narrower, clearly segmented category tabs to replace large square images, supporting easier scanning and browsing.

Donation banner placement and message confusion

More than half of the users ignored the donation banner embedded within the basket. Another user expressed visual overload and lack of context. I moved the donation feature to a dedicated screen pre-checkout, allowing space for clearer messaging and improved alignment with user intent at that stage of the flow.

Unstructured donation input

Free-form donation entry led to decision paralysis. Users were uncertain about norms or expectations, resulting in drop-off. I introduced pre-set options ($5, $10, $20) to reduce cognitive load and standardize user behavior, while keeping an open field for flexibility.

UI Style Design

  • Wordmark Font: IM FELL GREAT PRIMER


    I wanted to convey a feeling of creativity, approachability, and liveliness, because they represent the innovation of chefs, the authentic produce, and the energy of the community to celebrate the farm-to-table experience.

    To accomplish this, I chose IM FELL Great Primer, which is a serif font. The font uses ligatures between ‘G’ and ‘A,’ as well as ‘E’ and ‘N’—the start and end of the word Garden, which creates a sense of motion. Motion is important because it mirrors how fresh ingredients from the farm is transferred to the table. By using all caps I further emphasize the feeling of liveliness, as it reminds me of the vibrant energy of a community that is brought together by seasonal flavors.

  • Typography Pairing

    I chose Afacad, a sans serif font, as a font pairing to complement IM FELL Great Primer because its clean and modern feel helps with readability and balance to the decorative, serif Wordmark.

    The two fonts share commonalities, such as similar letter widths in uppercase characters (like “G” and “D”), and a similar x-height, contributing to the cohesion visually. At the same time, the distinctive qualities of the two fonts adds to the hierarchy of the poster, conveying a sense of authenticity and liveliness — an intersection of traditional farm methods and modern culinary creativity — of the festival.

  • Color Palette

    I chose a analogous color palette, which features Forest Green (#2D551A) and Lemon Yellow (#FFF38A) as my primary colors. The dark, calming green grounds the festival in its farm-to-table roots, while the brightness of the yellow adds the joyful energy of celebrating food.


    Squash Orange (#BA4303) adds warmth and the communal aspect of cooking and sharing meals. The refreshing tone of Pistachio Green (#B3D589) balances the richness of the deep colors. The tertiary Beach Blue (#70A3A0) undertone reminds me of having a picnic under a clear blue sky, creating a sense of openness and inviting nature of the festival.

  • Icons & Style Tiles

    The icons were designed to be minimal and elegant, with a refined line weight that mirrored the festival’s logomark. I used elongated forms and less rounded edges to create consistency with the wordmark, resulting in a cohesive, polished look that was both rustic and refined.

    The button's subtle rounded corners add a sense of approachability, while complementing the serif wordmark with thinner edges.

Wireframe Iterations

Building on the feedback from earlier user testing, I transitioned from hand-drawn sketches to digital wireframes in Figma. This shift allowed me to refine the merchandise purchase flow and better represent the visual hierarchy and color theme of the app.

Key Changes Based on Testing:

Pickup & Delivery Option

  • Initially, attendees could only select a pickup option at the merch booth during the festival. After testing, I introduced a delivery option, enabling users who couldn’t attend in person to still purchase merchandise. This feature opened up new revenue opportunities and increased accessibility.

Donation Before Checkout

  • To integrate the donation seamlessly into the user flow, I placed it directly before checkout, inviting festival-goers to support local farms while receiving a special souvenir that highlights the festival’s gardening values. Presenting a donation option in the cart, where users are already in the mindset of payment, would make sure the flow of the shopping experience isn’t disrupted, and the timing may be when they are most likely to be open to contributing a small, meaningful amount to the festival’s mission.

High Fidelity Prototype

Reinforcing the Garden-to-Table' mission

I created a high-fidelity prototype on the iPhone 16 Pro, focusing specifically on a purchase flow for the Festival Recycled Tote Bag. I chose a merchandise flow because this sector not only generates revenue but builds community engagement. Attendees can own a piece of the experience, support the festival’s mission, and promote it just by collecting the items. To build excitement leading up to the event, I made the merchandise landing page the home page, encouraging attendees to shop for merch months in advance.


To reinforce the festival’s identity throughout the app, I kept the primary color palette—a joyful, inviting lemon yellow background paired with forest green elements to ground the design in its garden-to-table roots. Instead of “cart,” I used “basket” to align with the festival’s theme, and I incorporated Garden Kit donation gifts to further highlight the mission. Finally, I added a small "Secured Goods" animation featuring the festival logomark after checkout, giving users a satisfying completion while adding to the festival's identity

Usability Testing

I conducted two rounds of moderated usability testing using mid- and high-fidelity prototypes in Figma on an iPhone 16 Pro frame. Five participants were recruited based on prior behavior: individuals who had previously purchased event merchandise through mobile platforms. Each session followed a think-aloud protocol and focused on key flows: item discovery, basket review, donation decision-making, and checkout.

Resulting Design Changes:

Pickup Instructions

During post-purchase flow testing, users expressed confusion regarding where and how to collect their purchased items. To reduce cognitive load, I introduced a "Pickup Details" page that follows the purchase confirmation screen. This included item retrieval steps, a visual checklist, and a zoomed-in map of the merch booth location.

Checkout Call-to-Action Visibility
Multiple users overlooked the “Continue to Checkout” button due to its placement below the fold on the basket screen. To address this issue, I implemented a fixed bottom CTA that remains visible regardless of scroll depth, so it’s always accessible while scrolling through basket items.

Checkout Flow Consistency
Several users noted the inconsistency between the basket pop-up and the full-screen donation and checkout pages. To create a smoother transition, I restructured the basket as a dedicated screen. This improved flow predictability and aligned with mobile navigation best practices.

Donation Framing
Uncertainty around the purpose of the donation caused hesitation. I added a concise, context-setting statement explaining that donations support farmers affected by climate-related disruptions. To highlight the hypothetical partnership with Modern Sprout on the Garden Kit gifts, I designed a clearer display of the brand. The rounds of testing validated that having the donation page before checkout—especially with the option to pick a garden kit as a thank-you gift—actually made them more likely to donate. 

Reflection & Learnings

  • Through this project, I combined my interest in e-commerce and user experience design to execute an end-to-end product, with a focus on iterative design and user testing. Reflecting on the process, I observed how small refinements based on user feedback enhanced the flow and made the experience more intuitive.

  • Storytelling of a festival’s brand can be integrated into the interface itself, not just the surrounding content

  • Small interactions, such as animations and consistent visuals, enhance user experience during functional tasks

  • Providing a curated set of options (e.g., suggested donation tiers) can facilitate decision-making and increase user engagement.

Next
Next

MindTab: ADHD Chrome Extension