Major Project II / Final Compilation and Reflection

on
03.02.2025 - 17.03.2025 (Week 1 - Week 7)
Gunn Joey / 0366122
Major Project II / Bachelor of Design (Hons) in Creative Media
Final Compilation and Reflection

TABLE OF CONTENTS


MODULE INFORMATION BOOKLET


Major Project II

Description

In this task, you are required to producie a standalone portfolio of design artefacts developed from the pre-production documentation completed in Major Project I. It demonstrates the progression from research and planning to refined visual design outcomes, showcasing the overall design process, development decisions, and final interface solutions in a clear and professional format. 
Requirements
  • Develop a standalone portfolio derived from Major Project I pre-production materials.
  • Translate research, concepts, user flows, and wireframes into finalized visual designs.
  • Show clear progress from planning stage to execution stage.
  • Maintain consistency with project objectives and target audience needs.
  • Present work professionally with clear structure and documentation.
    Submission
    • Project Exploration (20%) 
      • Submit project management documentation including planning progress, weekly lecturer feedback, design development process, mood boards, sketches, wireframes, early concepts, reflections, and evidence showing the evolution of ideas from research to execution.
    • Project Execution (30%)
      • Submit finalized design artefacts and organized working files such as UI screens, visual refinements, layout systems, typography and colour consistency, iterations, technical workflow evidence, and improvements from pre-production to final outcomes.
    • Project Presentation (10%) 
      • Submit presentation slides and deliver a clear explanation of the project including problem statement, target audience, concept development, design process, and final outcomes with professional visual communication and confident presentation delivery.
    • Final Project (40%) 
      • Submit the final high-fidelity prototype or media demonstration with complete interface screens, interaction flow, usability considerations, industry-standard design quality, and supporting showcase materials that demonstrate the project meets user needs and provides an engaging experience.

    Progress:
            A. Planning

    Before starting the prototyping and design process, we revisited our app features and carefully reviewed the details for each function. After consulting with Mr. Shamsul and Ms. Noranis, some features from Major Project I were removed to better align the project with the app’s direction and scope. As a result, we created a Google Docs document to clearly list and organize all the finalized features, which helped guide our design decisions and ensured consistency throughout the development process.

    Figure: Features Draft

    Figure: Features Draft

    We also created a new flow document to better study and understand each step within the different app workflows. This helped us organise the interaction process more clearly and ensured that all features followed a logical and consistent structure before moving into the prototyping stage.

    Figure: Flow Planning Document

    This is our final UI kit, developed after experimenting with several different colour palettes to identify the most suitable visual direction for the app. The selected palette reflects our goal of creating a warm, simple, and consistent interface that supports a comfortable user experience.

    Figure: Pawfect UI Kits

        B. Figma Prototype
    1. Landing Page

    Firstly, we wanted our logo to reflect a minimalist style, so our initial logo version was designed using simple shapest. This allowed us to focus on establishing a clear and recognizable visual structure before refining the logo further with colours and additional details to better match the overall branding of the app.

    Figure: Landing Page - Draft

    We created several logo drafts while developing the first impression of our app for users. All of our ideas focused on simple designs because we wanted the logo to match a minimalist style. We avoided using complex elements so the logo would look clean, clear, and easy for users to recognize.

    Figure: Logo - Draft

    After consulting with Dr. Wong and Mr. Shamsul, they pointed out that our app icons and logo were not consistent in style. Dr. Wong mentioned that the icons already looked nice and consistent, but the logo felt different compared to them. She suggested adding an outline to the logo so it would match better with the icon style. Based on her feedback, we redesigned our final logo in Procreate and adjusted the style to improve the overall consistency.

    We also wanted the logo to be more recognizable, so this became an important direction for our final design. After reviewing our previous logo drafts, we realized they were too simple and not distinctive enough, which made them less memorable for users as part of our app’s identity.

    Figure: Final Logo Design - Progress in Procreate

    After conducting user testing, one of our participants, Win Sheng, pointed out that our landing page felt too plain and suggested adding some animation to make it more engaging and appealing to users. Based on this feedback, we considered improving the landing page by adding simple animations to create a stronger first impression and enhance the overall user experience.

    Figure: Final Logo Design - Progress in Adobe Animate


    2. Onboarding Page

    When we first started designing the onboarding pages, we experimented with some sharp and bright colours. However, we later realized that these colours did not match the overall theme of our app.

    Figure: Onboarding Pages - Draft

    As a result, we adjusted the colour choices to better match our app’s visual style and create a more consistent experience for users. We refined the onboarding page colours by using softer tones so the overall look feels warmer and more comfortable.

    Figure: Onboarding Design - Draft 2.0

    With our previous logo draft, we designed some simple illustrations for the onboarding pages to match the style of the earlier logo design. This helped keep the visuals consistent during the early stage of development before we refined the logo further.

    Figure: Onboarding Pages Background Colour Refinement

    After finalising our logo with animation, we updated the onboarding page illustrations to better match the new visual style. We also added animation to make the app’s first entry experience more engaging and less plain, helping create a stronger and more consistent first impression for users.

    Figure: Final Onboarding Pages

    3. Log In & Sign Up Page

    We noticed that our previous login and sign-up page designs felt quite plain and resembled basic wireframes. Recognizing this, we’re planning to refine them to create a more engaging and welcoming experience for users.

    Figure: Log In & Sign Up Page - Draft

    For the refined login page, we kept our final logo and added subtle animations to make the page feel more lively and welcoming. Compared to the previous plain design, this version looks more polished and friendly. We prefer this new design because it gives users a better first impression and matches the overall style of our app.

    Figure: Log In & Sign Up Page - Final Design

    4. Home Page

    The first draft of our home page felt rough and didn’t look appealing. Mr. Shamsul suggested that we refine the page and simplify the design elements to make it cleaner and more user-friendly.

    Figure: Home Page - Draft

    We experimented with a few different versions of the tab bar, but Mr. Shamsul emphasized that it needed to be clean, simple, and easy for users to navigate. Some earlier ideas, like adding a corner radius, made the design look more complicated than necessary. By simplifying the tab bar and exploring several options, we finally settled on a version that is both simple and very user-friendly. Through this process, we realized that when designing an app, the most important priorities are consistency and putting the user experience first, and everything else comes after.

    Figure: Tab Bar 1.0

    Figure: Tab Bar 2.0

    Figure: Tab Bar 3.0

    Figure: Tab Bar 4.0 - Final Design

    We added animations to all the icons to make the app feel more engaging. Whenever a user hovers over an icon, it animates, giving immediate visual feedback and making the interaction more fun and interactive. This small detail helps bring the interface to life and makes the overall experience feel more polished and user-friendly.

    Figure: Icons and animations 

    On the home page, the top right corner features a notification icon that shows incoming alerts. We added animation to the icon as well. When a new notification arrives, the icon updates to display a number, like "1," indicating how many unread notifications there are. This makes it easier for users to notice new alerts and keeps the experience clear and interactive.

    Figure: Notification Animation - Progress in Adobe Animate

    Figure: Final Home Page Design

    5. Services

    Our app offers a variety of pet services, including clinic visits, grooming, and pet hotel stays. To book any of these services, users fill out a simple form with information about the service they want, their pet, their own details, and their preferred date and time. Before submitting, a confirmation message appears to ensure the user wants to proceed, which we designed using an open overlay in Figma. 
    Figure: Pet Services Booking Form

    After consulting with Dr. Wong, she pointed out that the text size was too small and suggested making it larger. We took her feedback seriously and adjusted the text throughout the app. This refinement not only improves readability but also makes the overall user experience more comfortable and accessible.

    Figure: Servces Text Size Refinement

    In addition to pet services like clinic visits, grooming, and pet hotel stays, our prototype introduced a new emergency feature. This allows users to quickly call a 24-hour clinic if their pet faces an urgent situation, ensuring help is available anytime it’s needed.

    Figure: Emergency Call

    6. Pet Care

    For the AI pet care feature, we added filters to help users easily select their preferences and view relevant results. For example, users can filter by pet size, pet type, or urgency level. This makes it faster and simpler for them to find the information or care options that best match their needs.

    Figure: AI Pet Care FAQ Filter - Draft 1.0

    We went through several versions of our app’s theme colors. In the second draft, we changed the previous bright yellow to a lighter yellow combined with brown. However, we realized that this color palette still wasn’t simple enough. Since our goal is for the app to feel warm, comfortable, and easy to use, we wanted the design to be straightforward and not feel complicated in any way.

    Figure: AI Pet Care Chat - Draft 2.0

    For the third version of AI pet care, we experimented with a purple colour to give a more tech and AI feel. After trying out different color options, we gained a clearer understanding of what we wanted for our app’s theme and overall goal. We realized that the purple did not align well with the rest of the app’s design. Through this process of experimenting and drafting prototypes, we learned what works best for our app and were able to define a clear and consistent direction for our theme and design.

    Figure: AI Pet Care Chat - Draft 3.0

    The calendar is one of the key features in the pet care section. In the previous design, all the date details were listed out, but users had to click through many buttons to view the calendar and reminder information. To make it simpler and more user-friendly, we refined the calendar design so that everything can be seen on a single page. Now, users can view their calendar and reminders at a glance, without having to navigate through multiple pages or take extra steps.

    Figure: Calendar & Reminder System Draft

    Figure: Calendar Date Details Refinement

    The feeder is another key feature in the pet care section. Users can connect their device via Wi-Fi or Bluetooth and wait for it to pair successfully. Once connected, they can schedule the feeder’s portion, date, and time directly through the app. By linking the app with the pet feeder, pet owners can manage feeding more conveniently and easily, all in one place.

    Figure: Pet Care Feeder Schedule Progress

    When a user clicks “End Chat” in the AI pet care conversation, we designed a rating system to collect their feedback. By doing this, we can better understand user thoughts and continuously improve the app. Throughout the process, we prioritise user experience first, ensuring every update makes the interaction smoother, more helpful, and enjoyable.

    Figure: AI Pet Care Chat Rating System

    Mr. Shamsul suggested adding animations to the AI pet care chat conversation to show when the other side is typing. To implement this, we created the animations in Adobe Animate. This feature helps users know that a response is coming, making the conversation feel more interactive and engaging.

    Figure: AI Pet Care Chat Conversation Animation - Progress in Adobe Animate

    After several drafts and consultations with Dr. Wong and Mr. Shamsul, we have finalised our AI pet care feature, arriving at the outcome we are most satisfied with.

    Figure: Final AI Pet Care Design

    7. Pet Matching

    For the pet matching flow, we first created a draft outlining the information we wanted to include in the questionnaire. To ensure a smooth and user-friendly experience, we conducted research and found that the best approach is to limit the questionnaire to around five questions. By keeping the questions and answers simple, users can complete the process easily, making the experience feel smooth and enjoyable.

    Figure: Pet Matching - Draft

    On the left is our refined loading bar, and on the right is the previous design. Initially, we wanted the app to have a cute style, but after careful consideration, we decided that keeping it simple and clean would create the best overall experience.

    Figure: Pet Matching Loading Bar Refinement

    We experimented with a few different layouts for the pet matching flow. On the left is the previous design, and on the right is our refined version. In the refined version, we added images to make the experience more engaging and visually interesting, helping to keep users from feeling bored while completing the questionnaire.

    Figure: Pet Matching Refinement

    The final pet matching outcome aligns perfectly with our app’s goal: creating a warm, simple, and user-focused experience.

    Figure: Pet Matching Final Design

    8. Adoption Flow

    In the adoption flow, once users view their pet matching results and see the available adoption posts, they can click on a post to view more details. From there, they can also check the pet owner’s profile and send a message to request adoption. This makes the process more direct and convenient for users to connect with pet owners.

    Figure: Adoption Flow Progress

    Once users start chatting with a pet owner, they will receive a pet adoption form. Users need to fill out this form to provide the pet owner with more information about themselves, as well as their preferred date and time to pick up the pet. By combining the chat and adoption form submission, the process encourages responsible pet ownership and helps reduce pet abandonment, ensuring pets find caring and committed new homes.

    Additionally, only verified users on the Pawfect app are allowed to adopt pets. This verification step helps increase the success rate of adoptions and ensures pets are placed with trustworthy owners.

    Figure: Adoption Flow Progress

    Figure: Adoption Flow Progress

    There is a verification flow that allows users to become verified on the app. To complete verification, users need to upload the front and back of their identification card, take a profile picture with a selfie, and enter a verification code sent to their phone number. This process ensures that users’ identities are real, making the adoption process safer. Given the increasing number of pet abuse cases nowadays, the Pawfect app only welcomes responsible users with verified identities to adopt pets, helping ensure that animals are placed in caring and trustworthy homes.

    Figure: Adoption Flow Progress

    After a successful adoption, users can leave a review for the pet owner to help other users make informed decisions. Ratings and reviews provide insight into a user’s experience and reliability as a pet owner. When someone wants to adopt a pet, they can check the pet owner’s ratings and reviews to decide whether they feel confident adopting from them. This system helps build trust within the community and encourages responsible pet ownership.

    Figure: Adoption Flow Progress

    9. Pet Mini Games

    We designed pet mini-games under the Fun section of our homepage. In the game, users choose food to feed a cat. If the user selects food that the pet cannot eat, the pet will “die” and the game ends. Users can then restart the game and try again with the correct food. The mini-game also includes animations, as Mr. Shamsul suggested, to make it more engaging and entertaining. These animations help make the experience lively and interesting for users of all ages.

    Figure: Pet Mini Games - Draft

    To better match our app’s overall colour scheme, we refined the layout and colours used in the mini-games section to create a more consistent visual experience. By adjusting these elements, the mini-games now feel more naturally integrated with the rest of the interface instead of appearing like a separate feature. This improvement helps maintain a cohesive design style throughout the app and makes the experience smoother and more comfortable for users as they explore different features

    Figure: Pet Mini Games Final Design

    11. Community

    For the Community section, we took inspiration from Facebook’s design and redesigned it in Figma. Users can search for their Pawfect friends, view their posts, and interact with other pet owners, making it easy to stay connected and engaged within the community.

    Figure: Community Progress - Draft

    Figure: Community Progress

    After consulting with Mr. Shamsul, he emphasized that the app should follow a consistent theme color throughout. Our previous blue-background design, inspired by Facebook, did not align with this principle. We then refined all the Community pages to match our app’s theme, ensuring a more cohesive and visually consistent experience.

    Figure: Community Final Design
    12. Profile

    To make things clearer, we separated the Community and My Pet sections on the profile page. We experimented with several designs for the Community and My Pet containers. Now, when users click on either Community or My Pet, the profile page displays the corresponding information. This allows all relevant details to be seen in one place, making the profile page more organized and easier to navigate.

    Figure: Profile Progress - Draft
    Our final profile design was simplified based on feedback from Mr. Shamsul, resulting in a cleaner and more user-friendly layout.

    Figure: Profile Final Design

    Final Submission

        1. Project Exploration (20%)


        2. Project Execution (30%)

    Click here to view Group36_ProjectExecution in Google Drive

        3. Project Presentation (10%)

    Click here to view in Canva

    Figure: Canva Presentation Slides - Week 7

        4. Final Project (40%)

    Click here to view Group36_FinalProject in Google Drive

     

     

    Final Walkthrough Video: 

    Click here to watch in YouTube


    CONTRIBUTION

    Ser Chen: Logo Animation, Notification Animation, Conversation Animation, Onboarding & Log In Page, Posters, Pet Images, Pet Mini Games, Community, Pet Service (Clinic), AI Pet Care, Records, Calendar Date Details, Adoption Flow Conversation, Feeder System

    Gunn Joey: Logo Design, Tab Bar, Home Page Icons, Pet Service (Grooming), Pet Service (Pet Hotel), Pet Matching, Adoption, Verification, Calendar & Reminder, FAQ and Info Centre, Profile (My Pet), Emergency, Forms, Button Hover

    FEEDBACK

    Week 1
    Mr. Shamsul suggested conducting further research on existing pet apps and planning for a long-term app strategy. He also recommended expanding the app’s focus from a purely pet adoption platform to a combined pet care and adoption solution.

    Week 2
    This week, Mr. Shamsul provided detailed feedback on several aspects of the app. For the Adoption AI Match feature, he recommended using a structured decision tree while avoiding open-ended AI responses, and ensuring that the logic for both the questions and final results is internally designed. For Pet Services, he emphasized that booking flows for clinic, grooming, and hotel services should be clear and intuitive, and suggested recommending nearby providers based on ratings or stars. Regarding AI Pet Care, he advised providing curated answers only and avoiding open-ended AI responses. For Pet Mini-Games, he noted that simple games are sufficient, while for the Pet Avatar feature, he recommended simplifying 3D avatars to 2D if modeling becomes too complex. Additional feedback included enhancing the User Pet Details Page with vaccination proof from clinics and grooming booking history, improving the Calendar and Reminder System to mark upcoming vaccinations, grooming, or boarding dates with automated reminders, and integrating smart devices such as feeders and pet cameras for remote feeding, schedule control, and real-time monitoring. Finally, he suggested including user confirmation pop-ups for critical actions to ensure users double-check their choices.

    Week 3
    There were no classes this week due to Chinese New Year.

    Week 4
    Mr. Shamsul emphasized the need to clearly explain the data collection and submission flow, detailing what information is gathered during user registration, service booking, and adoption posting. He recommended implementing a user verification mechanism to prevent scammers and suggested adding a Verified User badge to enhance trust and credibility on the platform. Additionally, he advised supporting a user ratings and review system, not only for shops and services but also for individual users, and establishing a trusted pet owner and buyer system. In terms of UI design, he noted that further polishing and consistency are needed across layouts, colours, and component usage, and recommended referencing the DaisyUI component library to improve overall UI quality.

    Week 5
    Mr. Shamsul suggested several improvements to enhance the app’s design consistency and user experience. He recommended standardizing shadows across all screens and simplifying the tab bar to make navigation clearer and more intuitive. He also advised streamlining UI elements for a minimal and user-friendly interface, reducing the corner radius of buttons and cards, and ensuring text colors remain consistent throughout the application. Additionally, he emphasized aligning the design with Material Design 3 guidelines, using illustrations or images on the breed profile and pet details pages for visual consistency, adding animations to the typing indicator in the conversation page, and incorporating simple interactions or animations into the pet mini-games. He also recommended applying a consistent colour style to both the FAQ and Info Centre pages to maintain overall visual harmony.

    Week 6
    This week, Mr. Shamsul noted that the use of purple for the AI feature is not suitable, as it can be distracting to users. He recommended maintaining a simple and consistent colour scheme, primarily using white and yellow throughout the app, and advised against introducing additional colours that could disrupt the overall visual consistency.

    Week 7
    Dr. Wong provided feedback on the app design, noting that while the icon design is appealing, it is inconsistent with the logo and recommended redesigning the logo to achieve visual consistency. She also highlighted that the font size is too small and should be increased where possible to improve readability, and that the white and yellow contrast may be insufficient and needs enhancement. Overall, she found the design acceptable but with room for improvement. Additional suggestions included making the launcher longer and more noticeable, conducting user testing to gather feedback, and updating all changes in the project management documentation.

    Also, Mr. Shamsul suggested presenting the logo design iterations to clarify the design process. He noted that adding the cat element increases inconsistency in the visual identity and recommended starting with sketches based on real dog and cat features, then refining and simplifying them into a final logo. Overall, he advised redesigning the logo to achieve better visual consistency across the app.

    REFLECTION

    Experience
    Working on the Pawfect app project has been a meaningful learning experience in applying user-centered design principles to a real mobile application concept. Throughout the development process, we explored how to combine pet adoption, pet care services, AI-assisted support, and community interaction into a single platform. We produced several design iterations and refined the prototype based on continuous feedback from Mr. Shamsul and Dr. Wong. This process helped us better understand the importance of planning user flows carefully, maintaining visual consistency, and designing features that are practical and relevant to real pet owners.

    Observations
    During the design and prototyping stages, we observed that small interface decisions such as color selection, typography size, layout spacing, and component consistency greatly influenced the overall user experience. Feedback sessions also showed that users respond better to simple navigation structures and clear interaction steps, especially in important processes like adoption requests and service booking. In addition, experimenting with features such as AI pet care support, mini-games, and smart device integration highlighted the need to balance creativity with usability so that features remain helpful rather than distracting.

    Findings
    From this project, we learned that iterative refinement is essential in developing an effective application prototype. Regular consultation and usability considerations helped us improve both functionality and visual clarity across the app. We also found that ensuring trust through verification systems, structured adoption flows, and ratings features plays an important role in supporting responsible pet ownership within the platform. Overall, the development of Pawfect strengthened our understanding that successful app design requires consistency, continuous improvement, and strong alignment with user needs and project goals.

    Comments

    Post a Comment