UX Design

22.09.2025 - 04.01.2025 (Week 1 - Week 1 4)
Lew Guo Ying / 0365721 / Bachelor of Design in Creative Media
UX Design

Index

    1.1 Final Video

Instructions

MIB for UX Design

Requirement:
For this UX Design module, we were required to work in groups and go through a complete UX process, from research to final execution. Our main task was to conduct user-centered research. This includes understanding user needs, behaviors, and pain points through research methods such as user studies, feedback collection, and persona creation.

Based on the research findings, we were required to analyze the user experience and identify key problems within the existing system or experience. After identifying the problems, we proposed UX-based solutions that directly respond to user needs. These solutions needed to be logical, user-driven, and supported by research insights.

The final deliverable was a completed product, such as a web or app prototype, that integrates research, information architecture, and UX design principles into a functional outcome.

AR Cook

Our group is called AR Cooked(Melvin Yung, Ng Kar Yee, Lin Si Yan, Ho Winnie, GuoYing(Me)) , and our project focuses on developing an AR-based cooking application. The aim of this app is to support students and individuals in the kitchen by providing practical and real-time assistance during the cooking process. It is designed to be helpful for a wide range of users, from complete beginners who lack cooking experience to more advanced or professional cooks who want a smoother and more efficient workflow in the kitchen.


Research & Ideation

At the early stage of the project, we began by conducting research related to the cooking domain and user behavior in kitchen environments. This includes understanding common challenges, user expectations, and how AR technology could be applied to enhance the overall cooking experience. This research phase served as the foundation for our UX decisions and helped guide the direction of the project.


Fig1.1 Research

At the beginning of the project, we divided the tasks within the group, and I was responsible for researching case studies related to AR cooking applications. The purpose of this research was to understand how existing AR cooking systems support users in real kitchen environments, as well as their strengths and limitations from a UX perspective.

Through the case studies, I found that most AR cooking solutions focus on reducing cognitive load and keeping users’ hands free while cooking. Common approaches include step-by-step AR overlays, ingredient and object recognition, gesture or voice-based interactions, and real-time guidance that stays within the user’s field of view. These features are especially helpful for beginners, as they reduce the need to constantly switch attention between cooking and a separate screen.

However, the research also highlighted several limitations. Many systems heavily depend on accurate object and gesture recognition, which can lead to misclassification, latency, or incorrect feedback, especially during complex cooking tasks. Hardware-related issues, such as discomfort from wearing headsets, high setup costs, or environmental sensitivity to lighting and noise, also affect overall usability. Some systems perform well in controlled scenarios but lack scalability when applied to more complex recipes or diverse user groups.

Overall, this research helped me understand the current landscape of AR cooking applications and revealed important UX opportunities. These insights later informed our design direction, particularly in balancing hands-free interaction, clarity of guidance, system reliability, and accessibility for different types of users.

While I focused on AR cooking case studies, other team members took on different research roles, including AR technology, interaction methods, and overall research direction. This division allowed us to cover both technical possibilities and user experience considerations, helping us build a more complete understanding of how an AR cooking app could support users in real kitchen scenarios.

Fig1.2 Research Plan

After reviewing and discussing the research findings together, we aligned on the target user group and clarified the overall planning direction of the project. Based on this direction, tasks were further divided according to the next stages of the UX process. As the next step, we decided to begin with a user survey to collect initial user insights and validate our assumptions before moving forward.


Fig1.3 Interview

For the qualitative research stage, I conducted an interview with a culinary student studying in Singapore. The interview focused on understanding the learning journey, emotional challenges, and expectations toward technology in cooking education.

From the interview, several key insights emerged. The participant emphasized the importance of hands-on practice, such as preparing ingredients, kneading dough, and adjusting flavors through repeated trials. Time pressure, especially during practical exams, was identified as a major source of stress, although focus and experience help reduce anxiety over time. Clear and honest instructor feedback was seen as essential for improvement, particularly when mistakes occur.

In terms of technology, the interviewee expressed strong interest in visual and real-time guidance, noting that videos and demonstrations are more effective than text-based instructions. The idea of using AR or smart assistants during cooking was viewed positively, as long as it remains non-intrusive and does not interfere with the cooking process. Suggested features included step-by-step displays, timer reminders, and post-session feedback based on performance data. Overall, technology was seen as a supportive tool rather than a replacement for instructors, with reliability and usability being key expectations.


Fig1.4 Beginner User Persona
Next, I was responsible for creating the beginner user personaName: Hana Lee, Role: Culinary Beginner.

Hana is a first-year culinary student with little to no cooking experience. She often feels nervous in the kitchen, especially when dealing with heat, sharp tools, and timed tasks. Under pressure, she tends to forget steps and misinterpret instructions, which affects her confidence during practical sessions.

Her main goal is to have a clearer and more guided learning experience that helps her feel safe, confident, and supported while cooking. Hana wants to gradually build confidence and independence through structured guidance rather than trial and error.


Fig1.5 Presentation Slide

Next, I worked on part of the presentation slides, focusing on the ideation process and the steps that followed. This section explains how we translated user research insights into design ideas, and how we refined them using methods such as brainstorming, MoSCoW prioritization, and the 2×2 matrix. Through this process, we were able to narrow down our ideas and define the final MVP features that best address our target users’ needs.


Fig1.6 User Journey Map

Next, I continued building the user journey map based on the beginner user persona. The journey maps out Hana’s experience across key stages of a cooking task, from entering the kitchen to cleaning and reflection. By mapping her actions, emotions, pain points, and opportunities at each stage, we were able to clearly identify where beginners feel the most anxious, overwhelmed, or uncertain, especially during preparation, cutting, and cooking under time pressure. This journey map helped us pinpoint critical moments where AR support could meaningfully reduce stress and improve confidence.


Design & Production

After completing all the documentation and preparatory work, we moved into the next phase of the project, which was developing our AR cooking application. Alongside the app design, ongoing discussions and feedback also led us to plan additional deliverables, including a demonstration video and a website to showcase the AR cooking experience.

At this stage, we began discussing the storyline and how the AR cooking app should be presented visually in the video. This included deciding what moments to highlight, how to communicate the user experience, and how AR guidance would be shown clearly to the audience. I was responsible for the animation component, focusing on how motion, transitions, and visual cues could effectively demonstrate the AR cooking interactions and enhance the overall storytelling.


Fig1.7 Low fi Website

I was also responsible for creating the low-fidelity version of the website. While Winnie helped define the content direction, I started from scratch by designing the overall layout. Using a grayscale system, I focused on structuring the page hierarchy, planning text content, image placement, and overall information flow rather than visual styling.

The website was initially planned as five pages, but after discussion and feedback, we decided that one page was unnecessary and removed it. The structure was then refined into four main pages: Homepage, Features, Gallery, and About. After further iterations, the homepage layout and content were adjusted to better communicate the project’s purpose and user value.

With these revisions, the low-fidelity website was finalized, serving as a clear foundation for the next stage of development, where it will be refined into a high-fidelity design.


Fig1.8 After Effect

I was mainly responsible for the animation and video production of the project. Since Melvin handled the filming, I took on most of the editing and post-production work, leaving only a small portion for him to complete. I first did a rough segmentation of the footage in Premiere Pro, then linked the timeline directly into After Effects to add visual effects.

One of the most challenging parts was creating the AR scanning effects. In addition, I needed to rotoscope the hand movements so that the interaction with the AR interface—such as tapping and selecting UI elements—could be shown clearly. This process was especially time-consuming but essential for making the AR interaction feel believable.

After that, I integrated the AR app interfaces designed by Winnie and Yanny into the video, aligning the UI with the hand movements and camera perspective. I also added other visual effects, such as ingredient scanning, safety alerts, and interface transitions, to clearly demonstrate how the AR cooking app works in a real kitchen scenario.



Fig1.9 Hifi Version 1

After finalizing the low-fidelity structure, we moved into developing the high-fidelity website. The overall direction and layout were largely established, but during the process, some team feedback and differing opinions emerged, which led us to further refine the design.

As a result, Winnie designed an alternative high-fidelity website version that explored improvements in visual hierarchy and presentation. We then used her version as a reference and gradually evolved our earlier low-fi layout into a more polished hi-fi design, while keeping the original content structure and user flow consistent. This iterative process helped us align the website more closely with the project’s narrative and visual direction.


Fig1.10 HiFi Webiste

After several rounds of refinement and collaboration, the high-fidelity website was fully completed through the combined efforts of Winnie and myself. The final hi-fi version brings together the refined layout, visual system, and content structure, clearly communicating the AR Cooking concept and serving as a polished showcase of the project.


Final Video

The final video was completed after Karyee added the sound design and audio effects, bringing the overall presentation together.


Fig1.11 Final Presentation Slide

For the presentation slides, I was responsible for designing the Features section. This part focuses on clearly explaining the core functionalities of the AR Cooking app and how each feature supports users during the cooking process. The slides highlight key features such as AR step-by-step guidance, technique and safety assistance, cutting alignment guides, plating visualization, sound and light feedback, and multi-skill-level modes. Each feature was presented with concise explanations and visual examples to clearly communicate its purpose and user value.




Feedback

General Reception & Structure
The lecturer commended our overall presentation structure, noting that the delivery was clear and effectively resembled a formal business pitch. While the core concept was well-received, we were given several specific questions and challenges regarding our project outcome that we need to address in the next iteration.

1. Defining Skill Levels and User Assessment
A key question raised was regarding the differentiation between our various skill levels (Beginner, Amateur, and Expert). The lecturer noted that our demonstration video only showcased the "Amateur" workflow, leaving the specific differences of the other modes unclear. Additionally, we were challenged on how a user determines which level to choose. We need to consider scenarios where a user might be overconfident—selecting "Expert" only to realize they are struggling—and how our system can help them adjust or assess their true skill level before starting.

2. Managing Multitasking in the Kitchen
The lecturer pointed out that our current video demonstration depicts a linear workflow, where the user performs only one task at a time. However, in a real-world kitchen environment, students are often busy juggling multiple responsibilities simultaneously. We need to refine our UX to demonstrate how the AR glasses manage parallel tasks—such as monitoring a boiling pot while chopping vegetables—without overwhelming the user.

3. Crisis Management & Emergency Protocols
Finally, we received critical feedback regarding safety and accident management. The lecturer emphasized that even with our implemented precautions and alerts, accidents (such as cuts, burns, or grease fires) are inevitable. Since one of our primary goals is ensuring student safety, we cannot just focus on prevention; we must also include a "Crisis Management" feature. We need to design a way for the interface to guide students through these emergency scenarios effectively when they occur.


Reflection

Observation

Throughout this module, I observed that a strong emphasis was placed on user research fundamentals, including surveys, interviews, and both quantitative and qualitative methods. The process of collecting data, analyzing user behavior, and translating insights into personas and user journey maps reinforced the importance of understanding users before jumping into design solutions.

Another key observation was how much the lecturer emphasized clarity and simplicity. We were constantly reminded to communicate user needs in the most straightforward and accessible way, so that anyone could immediately understand what the user wants and why it matters.


Findings

From this module, I learned that effective UX work is not about complex frameworks, but about clear reasoning and communication. A well-constructed persona or journey map should immediately reveal the user’s pain points, goals, and emotional state without requiring lengthy explanations.

I also realized the importance of time management. With multiple modules running concurrently and many deadlines overlapping, managing time efficiently became essential. This was especially clear during presentations, where controlling timing and delivering ideas concisely was just as important as the content itself.


Experience

Overall, this module was a valuable opportunity to revise and strengthen my UX foundations. From user research to ideation, and eventually moving into production, the workflow felt structured and aligned with real design processes.

On a personal level, I also gained new skills through my role in animation and visual storytelling. Working with tools like After Effects allowed me to explore new techniques and experiment with different visual effects to better communicate interactions and concepts. This experience not only improved my technical skills but also expanded how I think about presenting UX ideas visually.


Comments

Popular posts from this blog

TYPOGRAPHY Task 1: Exercise ( Type Expression and Text Formatting)

Application Design 2 - Task 1: Self- Evaluation and Reflection

Advanced Interactive Design - Final Task: Completed Thematic Interactive Website