## 3 Conceptual Framework and Methods
### Conceptual Framework Prototype  
Building on the insights gained from the preliminary study, we further developed our SLA prototype to support live-prototyping in alignment with our conceptual framework. At this stage, none of the voiced feedback from the preliminary study had been integrated into the prototype, as we intended for participants to modify the prototype live based on feedback provided during the co-design session. It is important to note that the participant groups differed across the two phases: the preliminary study involved SLA learners, whereas the main study engaged HCI practitioners with prototyping expertise. In the main study, one of our researchers additionally assumed the role of an SLA learner, voicing user needs--displayed in the \"End-User Requests\" column of Table 1--that the HCI practitioners were expected to address and implement in real time.  
To align with our conceptual framework, a separate control interface for the prototype was added, as seen in Figure 3. A control interface places the designer between the participant and generative AI instances to tailor the behavior of the AI to the participant's needs. This can be achieved while the participant interacts with their prototype user interface, as seen in Figure 2. The added control interface enables live changes to the conversational agent by directly manipulating the behavior of the generative AI instances using clear-text prompting and component simulation by allowing multiple generative AI instances to be chained together. Since the components are created as AI-generated elements, they can be re-generated to perform various tasks, such as allowing for a translation feature by prompting an instance of GPT-4 based on a user input. This maintains the illusion that the SLA prototype has fully implemented components, while the generative AI plays a similar role to the Wizard-of-Oz, simulating a language learning application. Like the framework diagram in Figure 1, our implementation now uses two interfaces: the language learning interface through which the user can communicate with the AI, and the control interface on the designer's side.  
\begin{table}
\begin{tabular}{p{113.8 pt} p{113.8 pt} p{113.8 pt}} \hline \hline
**Summarized Participant Needs** & **Participant(s)** & **End-User Requests** \\ \hline Users sometimes struggled to understand the AI’s language level during conversations. They wanted to be able to adjust the complexity of the language beforehand. & \(2,5\) & Change complexity level to A1: Set the default language complexity to A1 for easier understanding. Consider allowing adjustments later. \\ \hline Users wanted feedback on the correctness of their speech and text inputs to improve their language skills. & \(4,3,5\) & Add grammar check/correction: Analyze and correct user input, providing grammar suggestions for improvement. \\ \hline Users wanted to engage in conversations about the images with the AI, as if they were both present in the same visual setting. & \(5\) & Add context information to AI knowledge: Include image content as part of the conversation context for AI responses. \\ \hline While casual conversations were appreciated, users also wanted the tool to help practice specific vocabulary or prepare for real-life situations, like in their language classes. & \(4\) & Allow embedded questions: Let users predefine certain questions they want the AI to ask during the conversation. \\ \hline \hline \end{tabular}
\end{table}
Table 1: Cont.