The Challenge
Researchers, analysts, and students dread manually collecting web data—especially from pages behind login walls—while businesses need fast, in-depth product market research. As the lead product designer, I spearheaded Relais.ia, a responsive web app that uses AI to address both: scraping login-protected sites with prompts and generating market insights from a product name or code, each exported to Google Sheets. My challenge was to make it intuitive for novices and experts, hiding technical complexity in a sleek interface.
The Journey
1. Understanding the Problem:
The client brought a product idea that required validation. To test it, I interviewed 20 target users—researchers, students, and analysts—who were frustrated by manual data collection, desired concise summaries, and favored Google Sheets as a tool. One remarked, “I waste hours weekly just pulling data—it’s exhausting.” Businesses, too, expressed a need for rapid market research. I handled stakeholder communication, ensuring their goals aligned with user insights, and evaluated competitors like ParseHub and Browse.ai, which fell short on AI-driven summarization and login-wall capabilities.
2. Ideation & Design:
Leading the design, I created the user flow and sketched wireframes (see below) for a clean interface, using “progressive disclosure” to avoid overwhelming the user with too much information at once. Relais.ia offers two functions, both exporting to Google Sheets:
-
Web Scraping: Enter a URL and prompt (e.g., “Summarize this page”) to process data, even from pages behind login walls.
-
Market Research: Input a product name/code to scrape multiple sources for a detailed report.
3. Cohesion:
I created a design system—standardizing typography, colors, and components like buttons and fields—for consistency and scalability, tightly aligned with Relais International’s branding. This was crucial, as Relais.ia serves as an MVP for a larger, more ambitious platform.
User Flow
Design system shot
Early concept wireframes
4. Testing & Iteration:
-
Round 1: Eighteen users tested low-fidelity prototypes, flagging prompt phrasing issues, login confusion, and navigation hiccups. I relayed feedback to stakeholders, then added prompt examples, clarified login security, and refined the menu.
-
Round 2: Sixteen users tested high-fidelity prototypes and validated the fixes. The design system unified the look, and both functions—login-wall scraping and market research functionalities—flowed smoothly. Task success rates soared, with 94% of users (15/16) completing URL scraping and 88% (14/16) finishing market research tasks without errors.
One cheered, “This tool will save me so much time! "
The Solution
Relais.ia is a polished, dual-purpose app: scrape login-protected URLs with prompts or generate product market research from a name/code, both delivered as organized Google Sheets. The design system ensures cohesion across devices, with an intuitive login wall gate and error handling. I prepared the final design files in Figma and handed them over to developers for implementation. See the high-fidelity interactive prototype and screen comparison below.
Device screen comparison
Interactive prototype
Reflection
Leading Relais.ia sharpened my UX/UI skills, especially through its testing phases. Designing for login-wall scraping and AI market research demanded simplification, but user testing was the game-changer. It pinpointed critical fixes—prompt clarity, login security, navigation—that transformed usability. Hearing “This will save me so much time” after those tweaks was huge. Managing stakeholders and crafting a design system boosted my strategic side, but testing’s impact on nailing user needs made me a more empathetic, precise designer.