Major Project - Heart4Paws

-
22 Sept 2025 - 29 Dec 2025 (Week 1 - Week 14) 
Vincent Lee // 0359386
Major Project // Bachelor of Design (Hons) in Creative Media // Taylor's University
Hyperlink(s)

1. Introduction
2. Why "Heart4Paws"
3. From the Heart — On the Route 4 Paws
    i. Home Page, 
    ii. Exploring Shelters, 
    iii. Shelter Information Screens, 
    iv. Sign Up for Volunteering, 
    v. Login/ Sign Up
    vi. User Dashboard
    vii. Notifications
    viii. Night Feeding Navigation Experience
    ix. Component (Buttons, Components, Icons)

4. Final Submission + Presentation
<div>
      <span style="font-family: helvetica; font-size: xx-small;"
        ><a
          href="https://vinshenglee.blogspot.com/2023/06/advanced-typography-final-compilation.html"
          >TO THE TOP</a
        >&nbsp;⬆️</span
      >
    </div>
Instructions

MIB
<iframe src="https://drive.google.com/file/d/14KcorokKLtzBWPnRbbg3mqGzKFbHBDSG/preview" width="640" height="480"></iframe>


Introduction
- Speak for the Spoken
This concept first took root during my first year under the guidance of Mr. Vinod. He spoke about the importance of "creating for the unspoken," particularly during major projects where our work should strive to bring genuine value to those without a voice. That philosophy has stayed with me ever since, deeply impacting my approach to my studies and my aspirations for my future career. It has shifted my perspective, teaching me to create with intentional purpose rather than simply producing work for the sake of completion.


- A Fear That Turned Into Connection
For a long time, my relationship with dogs was defined solely by fear. I vividly remember the walks home along the only path available to me, where I would feel a surge of intense anxiety every time I encountered the stray dogs wandering the route. My world felt small and cautious until a difficult period in my life changed everything.

After drifting apart from a close high school friend, I found myself feeling devastated and lost. It was during this low point that a conversation with another friend encouraged me to step out of my comfort zone and try something unexpected. I began visiting an animal shelter, and in that 'noisy' space, my lifelong fear slowly transformed into a profound connection. I dedicated my time to ensuring those dogs felt the love and care they deserved. In return, they gave me a sense of belonging. I have come to deeply cherish the way they bring warmth and joy into a life, offering a silent kind of comfort that words could never express.


Why "Heart4Paws"?
1) Rationale
Heart4Paws was born from real volunteering experience at a local pet shelter, where coordinating feeding schedules, routes, and volunteers is often challenging. When volunteers are unavailable, elderly caretakers are left to manage everything alone, increasing physical strain and operational stress. Most coordination still depends on informal communication, which makes it difficult to track feeding progress, avoid duplicated work, or share important updates.

Heart4Paws addresses these challenges by providing a centralised, web based platform that improves visibility, coordination, and accountability. By bringing volunteer scheduling, live feeding updates, and dog information into one place, the platform helps reduce caretaker workload while encouraging stronger community involvement. More than a system, Heart4Paws represents a values driven approach to design, created to support those who cannot speak for themselves.


2) Project Goal(s) and Target Audience
a) Project Goals
The goal of Heart4Paws is to create a simple and reliable platform that improves how shelter feeding activities are organised while promoting awareness of stray dog welfare. 

The project aims to improve coordination through structured scheduling and real time updates, reduce caretaker burden by making feeding progress visible, encourage consistent volunteer participation, and support long term scalability so the system can expand beyond a single shelter or region.

b) Target Audience
Heart4Paws is designed primarily for shelter volunteers who need a clear way to schedule feeding routes, manage time slots, and confirm completed tasks. It also supports shelter caretakers by giving them an overview of feeding progress, volunteer activity, and dog information in one place. 

Secondarily, the platform is open to the general public and animal welfare supporters who wish to discover nearby shelters, participate in volunteering activities, or learn more about stray dog care and protection.


From the Heart — On the Route 4 Paws
The design are divided based on these 8 sections: 
  1. Home Page, 
  2. Exploring Shelters, 
  3. Shelter Information Screens, 
  4. Sign Up for Volunteering, 
  5. Login/ Sign Up
  6. User Dashboard
  7. Notifications
  8. Night Feeding Navigation Experience
  9. Component (Buttons, Components, Icons)

1. Home Page
 
Figure 1.1 - Home page + Sidebar Menu

This Home Page was interestingly the first screen users encounter, yet it was the last screen I designed. This was because I wanted to first clarify the overall flow, tasks, and core interactions before consolidating everything into a single entry point.

For this Home Page, one of the main challenges was deciding between information-based or action-based content. I eventually chose the latter, as reflected in both the heading and the overall content structure. Rather than explaining everything upfront, the page focuses on encouraging users to take action and start engaging with the platform.

The sidebar menu, along with the search tool and footer, serves as a base impression that this is a website rather than an application. These elements help establish familiar web navigation patterns and reinforce the project’s scope. One of the project goals at this stage was to ensure that all buttons are functional, allowing users to move freely through the experience without encountering dead ends.

Figure 1.2 - Home page layout: Supporting different user mindsets through location-based and task-based navigation.

A key discussion in this screen is the distinction between Nearby Shelters and Today’s Needs. These two sections support different user intentions. Some users think in terms of places, preferring to browse shelters based on location, while others think in terms of time, looking for tasks they can help with immediately. Keeping these sections separate helps reduce cognitive load and avoids forcing users into a single way of thinking. It allows users to enter volunteering from whichever mindset feels more comfortable and natural to them.

Link to Home Page: click me



2. Find Shelters Page

Figure 1.3 - Find Shelter page

I am a big McDonald’s fan, and interestingly, this influenced the early direction of this feature. The ability to quickly locate the nearest store when visiting different places made me realise how effective location-based navigation can be in reducing decision effort. Translating this idea into this project, I prioritised showing shelters with the most urgent needs at the top, allowing users to take quick action without overthinking.

Similarly, map integration plays a crucial role in this project, as it helps users gain a clear sense of distance between themselves and nearby shelters. To make the experience more personalised, users can tap on map markers that are paired with dog illustrations (currently AI-generated). This not only adds a warmer, more engaging visual cue, but also reinforces the project’s purpose of supporting shelter caretakers while encouraging care and empathy towards the animals.

Figure 1.4 - Find Shelters page: Interactive Map View and Location-Based Browsing

Distance is an important factor for many users. To support this, tapping on a shelter image will bring users directly to its corresponding map marker, creating a clearer spatial connection between the list view and the map.

In addition, the weather information chip allows users to make more informed decisions when choosing tasks. Based on experience, weather conditions often influence the type of activities that can be carried out, similar to planning a family outing or day trip. Including weather context helps users plan realistically and reduces the likelihood of last-minute cancellations, which can create additional burden for shelter caretakers. A floating filter button is also included to allow users to quickly narrow down options and make decisions more efficiently.

Link to Find Shelter Page: click me



3. Shelter Profile Page

Figure 1.5 - Comprehensive Shelter Profile page: Activities, Requirements, and Info

Looking back at my previous project, the layout of this screen is somewhat similar, although this page took the longest to develop. A significant amount of time was spent refining both the content and the layout, repeatedly revisiting the structure to identify areas for improvement.

On this page, the first thing users see is a list of activities provided by the shelters. Each activity card includes tags at the top to highlight different categories. In this case, Night Feeding is marked as the most needed, clearly signalling where user help and effort are most impactful and reducing hesitation in decision-making.

The page also includes volunteer requirements, which serve as an early preparation for users by outlining basic do’s and don’ts when volunteering at a shelter. In addition, shelter and caretaker information is provided to increase credibility and offer essential context, helping users better understand the shelter, its caretakers, and the environment they will be engaging with.


Figure 1.6 - Shelter Task Discovery: Trial and Error

This screen took the longest time to design, not only due to the amount of content and layout decisions involved, but also because of the complexity of designing the task cards themselves. Considerable time was spent exploring how the card interactions should work, particularly in deciding whether information should expand through an accordion pattern, what element should trigger the expansion (text, icon, or the entire card), and how these micro-interactions would affect usability and visual clarity. These considerations are illustrated on the left side of Figure 1.6.

Initially, the interaction relied heavily on vertical scrolling. However, I felt that this approach alone did not sufficiently support content engagement or guide users through the tasks effectively. As a result, I decided to explore and learn how to implement a sticky scroll interaction, as shown on the right side of Figure 1.6. While the tutorial videos I referred to were based on different screen contexts, they were still useful in helping me understand the core concepts of auto layout, framing, and interaction flow.

After implementing these interactions, I realised that the interface lacked visual emphasis and hierarchy. This led to the consideration of introducing more colour to improve task differentiation. However, I struggled to incorporate multiple colour variations, including changes in hue, saturation, and intensity, without disrupting the existing brown and orange colour palette. At one point, I simplified the design by relying solely on borders. While this maintained visual consistency, it caused the task cards to appear bland and made it difficult for users to distinguish tasks at a glance.

To resolve this issue, I eventually introduced colour in a more restrained manner by reducing the opacity of the existing palette and incorporating a slightly lighter shade of brown. This subtle approach allowed me to enhance visual differentiation and task recognition without breaking the overall colour system, effectively addressing the usability issues I had identified earlier.

Figure 1.7 - Step 101: How to create Sticky Scroll Animation 

Steps to Create a Sticky Scroll Animation
  1. After completing your card layout, frame the card again without applying auto layout.
  2. Hold Cmd and drag the top border of the frame upward.
  3. Start by keeping the first card at its original size. For example, if the card height is 24 pixels, keep it as 24.
  4. For the next card, drag the top border to increase the height. For example, the second card becomes 48 pixels, and the third becomes 68 pixels.
  5. Continue this process until all cards are created, and take note of the final card height.
  6. Rearrange the cards vertically with gaps between them, then frame them together. Do not apply auto layout.
  7. Frame the group again and add padding at the bottom.
  8. Frame everything once more, and set the height of this final frame to match the height of the last card. For example, if the final card height is 150 pixels, the frame height should also be 150 pixels.
  9. Lastly, ensure that the final container frame, such as the Shelter Info Container, is also set to the same height of 150 pixels (mine includes padding on the top, not entirely content).
Link to Shelter Profile Page: click me



4. Volunteering Schedule Flow

Figure 1.8 - Volunteering Schedule Flow

In the current My Pets Haven website, the scheduling system primarily emphasises time and date. However, it overlooks the importance of task type and the specific timing of each task within the shelter’s daily operations. While shelters often hope for volunteers to support activities throughout the entire day, this expectation may not always align with individual availability.

To address this, the second screen allows users to select tasks based on what they are available for and comfortable performing on that particular day. Users are also able to select multiple tasks at once, supporting flexible participation while still meeting shelter needs.

The inclusion of an attendee field enables shelter caretakers to better plan and assign tasks based on the number of volunteers and age group involved. Lastly, a review step is provided to allow users to confirm their selections, reducing unnecessary back-and-forth and minimising errors before submission.

Upon submission, a confirmation feedback screen clearly indicates that the application has been successfully sent to the shelter and directs users to view their application status. This reinforces system transparency and gives users confidence that their action has been completed.

Figure 1.9 - Task Selection Screen

To create this screen, I initially decided to use a two-column layout, drawing from Hick’s Law to reduce the number of visible options and support better cognitive processing. At first, I misunderstood this principle and assumed it meant fitting all content into a single screen by presenting information in smaller boxes. However, upon revisiting Hick’s Law, I realised that it emphasises the relationship between the number of choices and decision time, rather than encouraging content compression. The more choices a user is presented with, the longer it takes to make a decision, which increases cognitive load and the risk of abandonment.

In this case, the task options were already limited. Reusing the card design from the Shelter Profile page therefore helped maintain visual familiarity, allowing users to recognise the interaction pattern without feeling overwhelmed or having to relearn the interface. This approach supports continuity across screens while keeping the decision-making process lightweight.

Further refining the interaction, instead of using a dropdown icon (caret), an information icon was introduced. This allows users to view and confirm each task description in context, without navigating back to the task list screen. Tags are also included to highlight task urgency, indicate how many other volunteers have joined, and suggest whether a task is more suitable for group work or individual participation.

Link to Volunteering Schedule Flow: click me



5. Onboarding and Role Selection Flow

Figure 1.10 - Onboarding and authentication flow including role selection and desktop access notice

This screen is relatively simple. From the initial discussions around the final output of this project, the shelter caretaker site was always part of the overall plan. However, due to time constraints, the focus was placed on developing the volunteer mobile site.

Interestingly, while working on this screen, I realised that common login patterns have shifted. Previously, third-party authentication options were often placed at the bottom of the screen, but more recent designs tend to position them at the top. This observation influenced the final layout of the sign-in flow.

The puppy illustration leaning against the fence adds warmth and visual interest, helping the screen feel more welcoming without overwhelming the interface. However, I was aware that the colour treatment was not ideal. The brownish tones, used across both the onboarding and sign-in screens, felt slightly too intense and could have benefited from further refinement. Due to time constraints at this stage of the project, I was limited to working with Photoshop and AI-generated assets, which resulted in this outcome. 

This direction aligns closely with the type of outcome Ms. Anis encouraged, balancing functionality with emotional connection. If this concept were to be developed into a real product, the intention would be to replace illustrations with real puppy photographs. Their expressions and eyes naturally convey emotion and connection, reinforcing the core purpose of the project.

Link to Onboarding and Role Selection Flow: click me



6. Volunteer Dashboard Flow (Gamification)

Figure 1.11 - Volunteer dashboard flow from home to session completion

I am glad to have included this screen, particularly the streak feature, as it supports user retention through light gamification. The idea originated from a peer, and initially I was hesitant to implement it. I was uncertain how to communicate the feature in a simple and meaningful way, and concerned that it might introduce additional cognitive or participation pressure for users. However, presenting the streak within this dedicated panel allowed the concept of gamification to be clearly communicated without adding unnecessary complexity, demonstrating its value more effectively.

Although settings and profile editing functions are typically placed within a user profile page, I chose to surface these actions through icons located at the top right of the screen. This approach was sufficient to support these functions while keeping the main interface focused on engagement and activity-related content.

The leaderboard feature encourages users to add friends and engage in friendly competition. This extends the experience beyond volunteering for the puppies alone, positioning the platform as a social bridge that fosters connection, interaction, and shared motivation.

The My Activity section serves as a quick overview of users’ upcoming commitments. While I was uncertain about conventional notification patterns for this type of content, the final implementation prioritises clarity and relevance based on what made the most sense within the project context.

Although the History and Bookmark sections may appear lighter in content, they were included for important functional reasons. These sections allow users to revisit previously completed or preferred tasks, supporting repeated participation patterns. Additionally, they act as a mechanism for users to indicate task completion to shelter caretakers, ensuring activities are recorded in the system. In return, users receive “bones” as a form of reward, reinforcing participation through feedback and recognition.

Figure 1.12 - Session Details with Route Preview

If the prototype is tested sequentially, or explored alongside this documentation, the route preview design can be seen earlier in the Shelter Profile page under the Shelter Info section. This allows users to access a full preview of the route before committing to a task. In this iteration, the accordion pattern was removed and users are instead directed straight to the Night Feeding map view. This decision was made to help users more easily grasp the distance between feeding spots, as well as to better visualise the overall route.

This approach also supports clearer understanding of what the task entails, including the number of feeding portions required and the number of dogs present at each location, which are elaborated further in subsequent screens.

On closer inspection, the design of the Session Details and History sections follows the same structure to maintain consistency. In the History section, the interface has been simplified to a single action button. Once a task is marked as completed, this button transitions into “Lend a Paw Again”, encouraging repeat participation while reinforcing continuity in the user journey.

Link to Volunteer Dashboard Flow: click me



7. Notifications and Inbox Flow

Figure 1.13 - Notifications and Inbox Flow

As the project progressed, my attention was primarily focused on the shelter and map features, the shelter profile page, and navigation. At one point, I considered removing the notification feature, as the user dashboard already displays application and task status. However, with the introduction of the streak concept as part of building an all in one platform, I began to reconsider the role of notifications and communication within the system.

Since a messaging feature already exists on the shelter profile page, it became clear that extending chat functionality across the platform would be beneficial. Rather than limiting communication to shelter caretakers or friends, the chat space could also function as a forum where volunteers within the same shelter can receive updates, interact, and share experiences. This approach helps strengthen community bonding and encourages ongoing engagement beyond individual volunteering sessions.

For the interaction design, WhatsApp was used as a core inspiration, particularly in the use of filter chips that allow users to organise and prioritise conversations based on their preferences. This enables users to quickly differentiate between shelter updates, social chats, and other interactions.

At the same time, there was a recurring concern from lecturers and peers that the platform appeared more like a mobile application rather than a website. This led me to study the differences between website and application design through online references. While there is no strict structural rule that separates the two, I observed that websites tend to emphasise goal driven user actions such as volunteering flows and sign up processes, while persistent elements like footers are often removed during critical tasks. For example, online payment pages or ordering interfaces typically do not include footers, as the focus is placed entirely on task completion. These observations influenced how I structured the notification and messaging experience within the platform.

Link to Notifications and Inbox Flow: click me



8. Route Preview to Task Completion Flow

Figure 1.14 - Route Preview to Task Completion Flow

This page is particularly satisfying, as it reflects significant improvements made in response to feedback. The introduction of linear gradients and background blur helps soften the visual presentation, reducing harsh contrasts and creating a more comfortable viewing experience for users.

Integrating real map and location data substantially elevates the overall user flow. By working with realistic contexts, it becomes clearer what users would expect to see and how they would interpret spatial information. In contrast, using placeholder or fictional locations would limit the ability to empathise with users, as it removes the opportunity to fully place oneself in their perspective.

The use of map pins and horizontal cards was intentionally carried over from the Find Shelters page. This consistency reduces the learning curve, allowing users to rely on familiar interaction patterns rather than adapting to a new visual system. Moving into the AR feature, this was an area I revisited deliberately. Since the task focuses on night feeding, updating the visuals to reflect a nighttime context felt necessary and more appropriate than the earlier daytime imagery.

Figure 1.15 - AR guided feeding route and spot interaction

This iteration also provided an opportunity to explore linear gradients and experiment with a dark mode–inspired colour palette. This process was challenging, as I tend to be strict about maintaining colour consistency within an established palette. Rather than introducing new colours, all adjustments were made within the existing colour family to avoid disrupting earlier design decisions. Icon colours were also refined, with active states enhanced through subtle glow effects achieved by reducing opacity and applying background blur, particularly for features in use such as the AR function.

The design of feeding portion details and dog profiles was another time-intensive aspect. Initially, presenting this information directly within the route preview card made the layout feel overly dense and visually heavy, even after adjusting opacity and spacing. This led to a design shift toward using overlay panels. By presenting dog profiles and feeding portions within a pop-up interface, supported by next and previous navigation controls, volunteers can browse information spot by spot more comfortably. The inclusion of a kebab menu further allows access to secondary actions such as reporting or adding remarks without cluttering the main interface.

Overall, this flow contains a large amount of contextual information. To reduce repetitive tapping and excessive navigation between routes, dog profiles, and task details, presenting this content through overlay panels proved to be a more effective solution. This approach significantly reduces interaction friction while maintaining access to essential information, resulting in a smoother and more focused user experience.

Link to Route Preview to Task Completion Flow: click me


9. Components

Figure 1.16 - Components 
(Buttons, Cards, Chips & Tabs, Accordion, Carousel, Icons)

Ordered by Importance (Highest → Lowest)
1. Buttons
  • Primary actions (Confirm, Start Route, Help Out).
  • Without buttons, users can’t complete tasks.
2. Cards
  • Main content containers (Shelter, Route, Dog, Task info).
  • They structure information and guide scanning.
3. Chips & Tabs
  • Filtering, status, categories (Today, Upcoming, Completed).
  • Help users make quick choices and reduce cognitive load.
4. Accordion
  • Progressive disclosure (details, instructions, notes).
  • Keeps screens clean while still offering depth.
5. Carousel
  • Secondary exploration (photos, tips, highlights).
  • Good for engagement, not core task flow.
6. Icons
  • Supportive visual cues.
  • Helpful but should never replace clarity or actions.

10. Further Development

Figure 1.17 - Responsive Website across devices

Figure 1.18 - Shelter Caretaker dashboard


Final Submission(s)
Figure 1.19 - Proposal Slides

Figure 1.20 - Figma Workspace Overview

Figure 1.21 - Heart4Paws FigJam

Figure 1.22 - Heart4Paws Final Prototype
last update: 05 January 2026

Figma Workspace:

Figma Prototype:


Disclaimer:
Due to the limitations of Figma prototypes, the interaction experience is relatively rigid. Users are unable to freely go back and forth between screens, or leave the flow midway and return later, which makes it challenging to fully simulate real-world usage. And these are some user feedback on the overall user experience: 

User 1 Simon:
the check in button is not visible, the word leader bone is ambiguous, replace paws icon to dog head/ dog, micro -copy for icon button such as choose this; photograph is good, bio of dog and shelter is good, integration with street view increase accuracy of completion of task.

Reflection

Experience
The journey for this module began with significant uncertainty. This theme was never my ideal choice because I lacked a clear vision of the final outcome. Despite it being a digital product, one of my primary personal goals was to avoid heavy coding. The proposal phase was particularly difficult; I received a low grade despite believing I was on the right track. This experience taught me the importance of consistent communication and the necessity of applying past learning materials to current projects. Throughout the semester, I struggled with an intense cycle of anxiety and frustration triggered by the Competitive Analysis and User Flow phases. This led to procrastination and eventual burnout, as my high expectations and perfectionism clashed with low motivation, making it difficult to meet deadlines.


Observation
I observed that the idea I eventually chose was the only one that truly resonated with Mr. Vinod and Mr. Razif, as it focused on the unspoken needs of minority groups. Regarding the design process, I have become much more observant of color theory and placement. I observed that mid-tone palettes did not align with my project’s objective of being "fun" to sustain user turnover. While volunteering at a pet shelter is a serious responsibility, I observed that a cheerful interface is necessary to balance that challenge. Therefore, I decided that a palette of dark brown and orange was the most effective choice to represent the brand’s identity while remaining engaging for the user.


Findings
I found that my primary struggle throughout my studies consistently boils down to time management. To rectify this, I realized I must practice better discipline and find a balance between my expectations and reality. During a consultation, I found comfort in Mr. Vinod’s perspective that quality design and content creation naturally require time. Similarly, Mr. Razif’s helpfulness during consultations provided much-needed support. However, a turning point occurred in Week 13 after a review with Ms. Anis. The feedback was discouraging, labeling my work as "new learner standard." This finding was a blow to my confidence, forcing me to question my progress and skills as a UI/UX designer, even though I had previously felt confident in my UI aesthetics.

Link(s) & Resource(s) 


3. Drive Folder:


Resources

Popular posts from this blog

Typography - Task 1: Exercise 1 & 2

-
Image
30 Aug 2022 - 26 Sept 2022 (Week 1 -Week 5) Vincent Lee // 0359386 Typography // Bachelor of Design (Hons) in Creative Media // Taylor's University (TDS) Task 1: Exercises (Text Expression and Text Formatting) Instructions Exercise 1: Type Expression Exercise 2: Type Formatting Feedback Reflection Further Reading LECTURES LECTURE LIST Lecture 1:  Typo_0_Introduction Lecture 2: Typo_1_Development Lecture 3: Typo_2_Basic Lecture 4: Typo_2_Text_P1 Lecture 5: Typo_3_Text_P2 Lecture 6: Typo_5_Understanding Lecture 7: Typo_6_Screen&Print Week 1 Class Summary 1 Mr. Vinod showed us how to use the Typography Facebook group and create an e-portfolio using a YouTube video. He also gave us advice on how to succeed in his class by explaining the dos and don'ts in the Module Information Booklet. Mr. Vinod suggested that we read not only our own feedback but also feedback given to others. This ...
Read more