The "¡Más Fresco! More Fresh" program offers CalFresh (SNAP) recipients of Southern California rebates for purchasing qualifying fruits and vegetables(FVs). When the program expanded to include frozen, dried, and canned items, users needed a way to quickly identify which products qualified for the program.
I designed an intuitive, bilingual search interface that was powered by OpenAI and GO-UPC to provide real-time product verification with visual confirmation. My work focused on creating a user-friendly search experience including results display, error states, visual indicators, and information hierarchy.
The solution promoted healthier food choices through improved accessibility to nutrition incentives.
Fully integrated searchable database embedded within the existing ¡Más Fresco! website
Responsive search interface optimized for both desktop and mobile use
Bilingual design system ensuring consistent experience across English and Spanish version
PROBLEM
How can program participants determine which of thousands of products qualified for rebates?
This problem emerged when the program expanded beyond fresh produce to include frozen, dried, and canned fruits and vegetables (with no added sugars, fats, oils, or salt).
Understanding users: time is of the essence
Many users would access the database while actively shopping, so speed and ease of use were critical priorities. Shoppers wanted to:
Quickly verify if specific products qualified for rebates
Search by product type, brand, or description
Find visual confirmation of products to ensure accuracy
Access information in their preferred language (English or Spanish)
THE SOLUTION
An AI-powered, bilingual product search that helps shoppers accurately identify rebate-eligible items
1. Smart & Intuitive Search Experience
We leveraged OpenAI to account for spelling mistakes—essential for users searching unfamiliar product names.
The search can provide intelligent suggestionsbased on partial inputs.
Search results provided account for spelling mistake.
Intelligent search results provided based on partial inputs.
2. Visual Clarity in Search Results
The search results were shown in an easy to read table that featured:
UPC number, brand name, product type, and product description.
Alternate row shading to enhance readability by making it easier to distinguish between individual rows.
Color-coded icons with labels to quickly distinguish product types.
Iconography for 4 different product types.
3. Accurate Product Info through GO-UPC API Integration
A major obstacle was obtaining reliable information about which products contained no added sugars, fats, oils, or salt. The breakthrough came from a partnership with GO-UPC, which provided:
Accurate product information and descriptions including ingredient information.
The product page on GO UPC also provides visual representation of the product.
UPC link takes you to the detailed product page.
4. Bilingual Implementation
I designed the UI to seamlessly function between both English and Spanish using a simple toggle switch. This ensures:
The platform serves the diverse community of program participants.
Proper text expansion/contraction between English and Spanish.
Consistent user experience regardless of language preference.
Truly bilingual UI that serves the diverse community of program participants.
5. Humanized Error State
For searches that returned no results, I designed a friendly "confused blueberry" character that humanized the experience. This was paired with a clear "Try a different search term" message that guided users toward success rather than leaving them at a dead end or worse, having them leave the site altogether.
Cute and confused blueberry character that denotes a no results state.
6. Multi-point Access Strategy
The last challenge was to determine where to integrate the search feature within the existing website. To ensure users could find the tool regardless of their entry point or current task, we positioned it:
Immediately below the hero section on the homepage, making it a focal point for first-time visitors.
In the main navigation bar, ensuring it's accessible from anywhere within the site.
Within the FAQs section where users actively seeking answers would discover it.
On the About page for users seeking to understand the full program offering.
Multiple points to access the search tool.
Design Approach: quick, accurate, reliable and bilingual
We leveraged OpenAI and GO-UPC APIs to create a fast, intelligent, and user-friendly search experience that enabled shoppers to easily find rebate-eligible fruit and vegetable products. Our design goals were:
Create a real-time, intuitive search experience integrated directly within the existing website.
The search should still work even if user don't know the exact product names.
Provide reliable, accurate information and visual confirmation of products.
Accommodate both English and Spanish speakers in Southern California.
My role and team contribution
As the Lead UX Designer on this project, I worked closely with:
Angie: Project Manager who coordinated stakeholder requirements.
Yanik: Creative Director who oversaw the completion of the project. He helped me problem solve and provided feedback.
Scott: Lead Developer who implemented the technical solution.
My specific responsibilities included:
Designing the complete searchable database interface.
Creating multiple interface states and error handling.
Creating designs for Spanish version of the search tool.
Maintaining consistency with the existing brand identity.
Determining strategic placement within the existing website.
Me and Yanik tryna figure the best placement for the search tool.
OUTCOME
Impact
The completed searchable database successfully:
Provided real-time verification of eligible products.
Introduced participants to nutritious options they might not have discovered otherwise.
Received positive feedback from multiple program participants.
Positive feedback from program participants
Key Takeaways
Leverage existing technologies: Rather than building from scratch, collaborating with GO-UPC turned a complex challenge into a scalable solution for future nutrition programs.
Strategic product placement matters: Strategic placement within the existing website architecture ensured users could find the tool when they needed it most.
Visual confirmation matters: Including product images helped users verify they were looking at the correct item, adding confidence to their shopping experience.
True bilingual UX is more than translation: Creating a truly bilingual experience required thinking about how search patterns and terminology differ between languages.
