ReFinE: Streamlining UI Mockup Iteration with Research Findings

Abstract

Although HCI research papers offer valuable design insights, designers often struggle to apply them in design workflows due to difficulties in finding relevant literature, understanding technical jargon, the lack of contextualization, and limited actionability. To address these challenges, we present ReFinE, a Figma plugin that supports real-time design iteration by surfacing contextualized insights from research papers. ReFinE identifies and synthesizes design implications from HCI literature relevant to the mockup's design context, and tailors this research evidence to a specific design mockup by providing actionable visual guidance on how to update the mockup. To assess the system's effectiveness, we conducted a technical evaluation and a user study. Results show that ReFinE effectively synthesizes and contextualizes design implications, reducing cognitive load and improving designers' ability to integrate research evidence into UI mockups. This work contributes to bridging the gap between research and design practice by presenting a tool for embedding scholarly insights into the UI design process.

Figures (8)

• Figure 1: Pipeline for generating the components provided by ReFinE
• Figure 2: Contents of the cluster and their formulation
• Figure 3: An example of mockup reconstruction in our pipeline. Although the reconstructed HTML may not perfectly match the original mockup, it faithfully mirrors the components in the original mockup and allows for visualization of action items.
• Figure 4: An example of an action item and its visualization. With the reconstructed HTML, ReFinE selects the appropriate screen(s) from the design mockup and visualizes how each action item can be applied. Users can toggle between the before and after visualization, assisting designers in grasping the differences. Users can also bookmark each action item.
• Figure 5: Design outputs from iterating two example mockups with ReFinE-generated action items. For each example, we present the extracted design context, an example of retrieved design implications, and action items used for the iteration. For conciseness, a single screen pair (before/after) is shown for each mockup, and edits are highlighted with a yellow background.