MINOR PROJECT [ TASK 3 ]
15.06.26 - 24.07.26 / Week 9 - Week 14
Bachelor of Design (Hons) in Creative Media / CHARACTER DESIGN / Taylor's University
Task 3
OUTLINE
Instruction
Feedback
- WEEK 10
- WEEK 11
- WEEK 12
- WEEK 13
- WEEK 14
- WEEK 10
- WEEK 11
- WEEK 12
- WEEK 13
- WEEK 14
Reflection
INSTRUCTION
Module Information Booklet (MIB) of Minor Project
<iframe src="https://drive.google.com/file/d/1zfO9-6FuAuAEy51UCAccnRPt-bIEiEXt/preview" width="640" height="480"></iframe>
Task 3
It was now time to begin designing the interface of the Halal Ingredient Analyser app. First, I suggested the name "SafeBite" to our team leader, Angeline, and it eventually became our application's name.
After class, our team held a meeting to discuss the project. We divided the tasks among ourselves, and I was assigned to create the logo and organise the UI kit.
 |
| Fig. 1.1 Logo Moodboard (Week 11 / 2.7.2026) |
I first created a logo moodboard using references from Pinterest and various logo designs, then developed several logo sketches based on those references. After discussing the concepts with my team members, they preferred Designs 5 and 9. Therefore, I recreated both logo concepts digitally using Adobe Illustrator.
 |
| Fig. 1.2 Logo sketches (Week 11 / 3.7.2026) |
 |
| Fig. 1.3 Logo 1 and 2 (Week 11 / 4.7.2026) |
Next, I prepared the UI kit. Using the UI kit reference provided by Angeline, I searched the Figma Community for suitable components and incorporated them into the UI kit to establish a consistent design system for the application.
 |
| Fig. 1.4 UI kit (Week 11 / 5.7.2026) |
After that, we created the user testing tasks for the usability testing sessions. Three team members first developed their own proposed tasks, and these were then combined, discussed, and refined into a finalised set of user testing tasks.
Task 1 - Complete the onboarding process
Task 2 - Log in using Guest Mode
Task 3 - Navigate to the Scan page
Task 4 - Scan an ingredient label and check the product’s halal status
Task 5 - View the full ingredients list and ingredient analysis
Task 6 - Translate the ingredient label and review the translated result
Task 7 - Save the scan result
Task 8 - Open a saved scan and view its details
Task 9 - Filter the saved scans by halal status
Task 10 - Scan a halal logo and view the verification result
Task 11 - Navigate to the Community page and open a post
Task 12 - Like, save, and comment on a Community post
Task 13 - Open the Notifications page and check the most recent notification
Task 14 - Navigate to the Profile page and review the account settings
.png) |
| Fig. 1.5 Process 1 (Week 12 / 12.7.2026) |
The user testing tasks were first organised on the Figma board so that feedback could be obtained from the lecturer. While waiting for the lecturer's feedback, the testing objectives, estimated testing duration, and interview questions for the participants were also prepared.
.png) |
| Fig. 1.6 Process 2 (Week 13 / 16.7.2026) |
After receiving the feedback, the tasks were revised and refined together with another team member. Since that team member was responsible for conducting the user testing sessions, the testing tasks and all related materials were finalised beforehand and handed over to ensure the sessions could be carried out smoothly.
.png) |
| Fig. 1.7 Process 3 (Week 13 / 19.7.2026) |
Once the user testing was completed, the results were compiled and summarised into presentation slides. As the slides were only finalised the day before the presentation, the remaining time was spent completing the presentation deck as quickly as possible and rehearsing for the final presentation.
.png) |
| Fig. 1.8 Process 4 (Week 14 / 21.7.2026) |
.png) |
| Fig. 1.9 Process 5 (Week 14 / 22.7.2026) |
And before the final submission, I refined the assignments based on the feedback I received.
Final Task 3: Final Group Presentation
FEEDBACK
WEEK 10
Specific Feedback: Starting this week, you should begin designing the app interface. Since the project is already slightly behind schedule, work together with your team members and start as soon as possible.
General Feedback: Next week's class will be held online, so feedback will be provided through Microsoft Teams.
WEEK 11
Specific Feedback: Rename the Figma file using a clear project title that includes both the app name and project description. Instead of using only SafeBite, include a title that clearly indicates it is a Halal-related application. Organise the Figma file by separating the user flow, wireframes, UI kit, and prototype into different pages or sections. Keep the user flow well-documented in Figma or FigJam and include relevant documentation and prototype links. Replace generic names such as Onboarding 1, Onboarding 2, and Onboarding 3 with descriptive titles that reflect the purpose of each onboarding screen. Consider providing Google and Apple sign-in options on the login page. Correct the spelling of Community. The overall user flow, visual hierarchy, and navigation from the homepage to the scan, loading, and result screens are clear and well-structured. The transition from the user flow to the low-fidelity wireframes is logical, making it easier to develop the high-fidelity prototype later. Prepare a basic UI kit that includes the colour scheme, typography, logo, icons, and UI components. If Poppins will be used as the final typeface, include it in the UI kit. Maintain design consistency across all screens by using the same colours, typography, logo, and visual style. Continue developing the remaining screens, including Translate Label, Verify Halal Logo, and Community. Prepare the user test plan, including the target users, testing tasks, and evaluation questions
General Feedback: Ensure that the app design follows accessibility guidelines instead of focusing only on visual appearance. Use accessibility or contrast-checking plugins in Figma to evaluate colour contrast. Make sure the interface meets at least the WCAG AA contrast standard. Avoid using colours with low contrast, as they reduce readability and usability. Free accessibility checking tools are sufficient if premium plugins are unavailable. Be prepared to present the prototype by sharing screens properly during consultations and presentations. Learn how to present Figma files and prototypes independently without relying on assistance during presentations. Every group should prepare a basic UI kit or design system that includes at least the colour scheme and typography. Maintain design consistency throughout the application, even when multiple team members are involved in the design process. Be prepared to present the UI screen by screen and explain the user flow clearly. Prepare the user testing plan alongside the UI design process.
WEEK 12
Specific Feedback: Begin planning the user testing plan. Overall, the app design is well done.
General Feedback: Please note that classes will return to offline sessions starting next week.
WEEK 13
Specific Feedback: You guys need to complete the presentation slides for next week’s 15-minute presentation and conduct user testing with 3–5 participants. Overall, your high-fidelity prototype looks good. However, on the profile page, the heading should not remain fixed when the user scrolls down. It should move together with the rest of the page content.
Your current user testing tasks are too detailed and fragmented. You should combine smaller actions into broader tasks and divide larger tasks into sub-steps, such as 1A, 1B, and 1C. For example, Task 4 and Task 8 can be combined. Actions such as “Complete the onboarding process,” “Continue using Guest Mode,” and “Arrive at the Home screen” should be listed as observation criteria rather than separate user tasks. You also need to make the tasks measurable so that you can record task completion, time taken, errors, and user feedback.
General Feedback: Each group will be given 15 minutes for the presentation, followed by a 5-minute Q&A session. Every group member needs to present, so you guys need to plan the timing carefully. During the final presentation, you should not read from your mobile phone or turn your back to the audience. You need to maintain eye contact with both the client and the audience.
Tutorial sessions will continue as usual, so you still need to attend your scheduled tutorial session for preparation. The client presentation will be conducted during the tutorial session.
WEEK 14
Specific Feedback: For the community section, where users can communicate and share information with one another, it would be useful to include country labels or filters. At the moment, the restaurants shown in the community appear too random, so categorising them by country would make the information easier for users to browse.
Overall, the design looks good. The interface is currently very clean, which works well, but if you have the opportunity to develop it further, you could consider exploring a more creative visual direction. For the user testing results, you could also include a chart that allows the results of all participants to be viewed and compared at a glance.
General Feedback: Good job on completing the presentations. Please remember to complete Task 4.
REFLECTION
Experience
In the development of the SafeBite application, I participated in various stages, including naming the application, designing the logo, and organising the UI kit. I created a moodboard and developed logo concepts in Adobe Illustrator based on team feedback. I structured the UI kit in Figma, utilising team leader references and community components. During user testing, I prepared tasks, objectives, participant questions, and observation criteria, revising them with a teammate following lecturer feedback. After testing, I compiled the results into presentation slides and practised for the final group presentation.
Observations
Through this project, I learned that effective interface design involves more than aesthetics; it requires consistent organisation of elements like the Figma file, user flow, and UI kit for ease of development. Accessibility and usability should be prioritised from the outset, focusing on colour contrast, navigation, and readability. Feedback from user testing indicated that our initial tasks were overly detailed; broader user goals should be the main focus, with smaller actions as sub-steps. Additionally, tasks need measurable criteria such as completion rates, time, errors, and feedback from participants.
Findings
From this project, I learned that UI/UX development is an iterative process that depends on clear teamwork, structured documentation, testing, and continuous revision. Preparing the logo and UI kit helped me understand how a visual identity supports consistency across an application, while preparing the user testing plan showed me how usability must be evaluated through meaningful and measurable user goals. I also learned that organising materials clearly before handing them to another team member is important when different members are responsible for different stages of the project. Although the final presentation slides were completed close to the presentation date, the experience showed me the importance of managing time more effectively and preparing presentation materials earlier. Overall, the project improved my understanding of branding, interface consistency, accessibility, usability testing, team communication, and presentation planning, and these lessons will help me approach future UI/UX projects in a more organised and user-centred way.
QUICK LINKS
Projects
Comments
Post a Comment