Major Project - Final Compilation

4.2.2025 - 25.3.2025 (Week 1 - Week 7)
Chong Hui Yi / 0363195
Major Project / BDCM

Final Compilation

TABLE OF CONTENT

1. Lectures

2. Instructions

3. Task 1

4. Task 2

5. Task 3

6. Feedback

7. Reflection

LECTURES

-

INSTRUCTIONS

Timeline Breakdown

1. Discovery (Week 1 -3):

What is PetNav
Problem Statement
Project Aim & Objectives
Target Audiences
User Research

2. Define (Week 4 -5):

User Persona
User Journey Map
Proposed Solutions

3. Ideate (Week 6 -7)

Information Architecture
User Flow
Brand Guidelines
Visual References
Sketches
Concept presentation

Task 1: Proposal Development

Week 1

In Week 1, we were told that UI/UX students could only form teams with others in the same specialisation, with a limit of four people per team. My team consists of:

Janice Marie Eng Chia Hui (Group leader)
Alyssa Aisyah Binti’Arief Nasran
Chooi Cheng Yue
Chong Hui Yi (Me)

In class, we first listed out potential issues we could explore. Then, we did more detailed research on topics that interested us.

Fig. 1.0 Draft idea for the topic

Since I’ve always been interested in pet-related topics, I decided to look into Pet-Friendly Travel and Animal Behaviour. Through my research, I gained a basic understanding of both topics, which helped me figure out which direction I wanted to explore further.

Fig. 1.1 Week 1 Initial Research

Here is a summary of the problem issues I found from my research:

Pet-Friendly Travel:

Hard to find pet-friendly hotels, attractions, and restaurants.
No unified platform for international pet travel regulations.
Safety and health concerns for long-distance pet transport.

Animal Behavior:

Owners misinterpret pet signals, causing stress and issues.
Lack of knowledge about animal body language.
Pets change behaviour due to stress, but owners may not notice.
Training difficulties due to misunderstanding how animals learn.

Fig. 1.2 Research about Pet-Friendly Travel & Animal Behavior

Week 2

Later, we realised that three of us, including myself, had chosen pet-related topics. So, we decided to combine them into a broader pet care theme. However, pet care covers a wide range of areas, so we needed to do more in-depth research. At this stage, I focused on pet training, pet-friendly places, and pet diseases to explore the topic further.

Fig. 2.0 Everyone's Research

Fig. 2.1 My Research on Pet Training

Fig. 2.2 My Research on Pet Friendly Places

Fig. 2.3 My Research on Pet Diseases

After finishing our research, we realised that Pet Care was still a huge topic, and we had no idea where to start. Therefore, we conducted a quick survey to understand what pet owners actually need. This really helped us figure out what to focus on and what problems matter most to them.

Fig. 2.4 Pet care google form survey to find out user needs

Week 3

We collected 40 responses in total and analysed the survey data to gain better insights.

Fig. 3.0 Survey Analysis

To find our target audience, I did some research and found that 51.1% of Malaysians own pets, and cats are the most common. I also learned that people aged 18 to 24 and those living in cities are more likely to buy pet gifts every month. Around the world, Gen Z and millennials are the biggest group of pet owners.

Fig. 3.1 Target Audience Research

We finally decided that our target audience would be pet owners and pet care providers (vets, pet groomers, and pet hotels). After that, we divided the interviews among our team members. I was responsible for interviewing three pet owners.

Fig. 3.2 Interview Target Audience & Team Distribution

We also designed our interview questions, making slight adjustments for different target audiences to ensure the questions were relevant to them.

Fig. 3.3 Interview Questions for Pet Owners, Pet Staff, Groomers & Pet Business

I interviewed three pet owners and one pet business owner. They all preferred to communicate in Chinese, so I conducted the interviews in Chinese. After that, I translated the transcripts into English.

Fig. 3.4 Interview Transcript & Summary (mine only)

We then summarised key points from each interview on sticky notes and created an affinity diagram based on all our findings.

Fig. 3.5 Affinity Diagram (All Interview)

Later, we realised that we were supposed to create individual affinity diagrams, so I made mine as well. Finally, we completed our Task 1 slides.

Fig. 3.6 Individual Affinity Diagram (mine)

Final Proposal (Task 1)

Fig. 3.7 Proposal Presentation Slide - PDF

Task 2: Design Proposition

Week 4

For Task 2, we needed to create a User Persona and a User Journey Map. To define our User Persona, we identified three key user types:

A pet owner who wants to take their pet to a groomer
A pet owner who wants to take their pet to the vet
A vet

Fig. 4.0 User Persona 1

Fig. 4.1 User Persona 2

Fig. 4.2 User Persona 3

Based on our user persona, we created three user journey maps. We decided to show both without solution and with solution scenarios, where the solution refers to the app or website we are designing.

Fig. 4.3 User journey map (without solution) for Lily Lee

Fig. 4.4 User journey map (without solution) for Vanessa

Fig. 4.5 User journey map (without solution) for Dr. Ahmad

I first created the user journey map (after solution) for Lily Lee (Fig. 4.6), focusing on the detailed steps of how she would use the app. However, we realised it should be more broad rather than just the in-app experience.

Fig. 4.6 Draft of user journey map (after solution) for Lily Lee

Fig. 4.7 Draft of user journey map (after solution) for Vanessa

Fig. 4.8 Draft of user journey map (after solution) for Dr. Ahmad Adam

We also noticed that Lily Lee and Vanessa’s journeys were quite similar, so we decided to merge them. In the end, we created two broader User Journey Maps—one for Pet Service Providers (Fig. 4.9) and another for Pet Owners (Fig. 4.10).

Fig. 4.9 User journey map (after solution) for pet care service providers

Fig. 4.10 User journey map (after solution) for pet owners

Week 5

During week 5, we gathered all our team members' ideas, which came from the opportunities identified in our user journey map. Then, we voted on the most popular ideas and grouped them into categories.

Fig. 5.0 Brainstorming Idea & Voting

Fig. 5.1 Grouping Ideas

From this, we identified three key themes:

Community
Convenience
Pet-ivities

Fig. 5.2 Key theme 1: Community

Fig. 5.3 Key theme 2: Convenience

Fig. 5.4 Key theme 3: Pet-ivities

Final Outcome (Task 2)

Fig. 5.5 Week 1 - Week 5 Progress Slide

Task 3: Concept Presentation

Week 6

In Week 6, we started by listing out all the screens and features of our app to get a clear overview of its structure. After that, we created individual user flow charts for each feature to map out the interactions and navigation. Finally, we combined all the individual flows into a single, unified user flow chart.

Fig. 6.0 All Screens & Features

User Flow Chart:

Pet Care Service Booking
Pet Care Provider
Pet Taxi Finder
Personalised Pet Date Planner
Community Posting
SOS Emergency Signal
Adding a Pet Flow

Fig. 6.1 Individual User Flow

Fig. 6.2 Combined User Flow

Next, we conducted card sorting to better understand how users naturally categorise the app's features. I collected responses from 3 participants, while our team received a total of 10 responses. After gathering the data, we proceeded with analysing the results to identify common patterns and insights that could inform our app’s information architecture.

Fig. 6.3 Card Sorting

Fig. 6.4 Card Sorting Matrix

Fig. 6.5 Card Sorting Results

Week 7

After finalising the information architecture, we moved on to the design phase, starting with sketching our ideas. We divided the work as follows:

Huiyi (me): Designing the user flow for booking a pet care service and brainstorming ideas for design guidelines.
Chery: Creating the user flow for setting up an account for a pet care service business.
Alyssa: Designing the user flow for calling a pet taxi.
Janice: Developing the user flow for planning a personalised pet date using our randomiser feature.

I started by gathering design references and case studies to find inspiration. I explored different UI/UX designs, similar pet care apps to help me generate ideas and refine the direction for our design.

Fig. 7.0 Design References

Then, I created the first draft of the booking flow wireframe (Fig. 7.1). After refining and improving the design, I developed a more detailed version (Fig. 7.2).

Fig. 7.1 Pet care services booking sketches

Fig. 7.2 Refining pet care services booking sketches

At the same time, I also refined and expanded our draft design direction, including the moodboard, typefaces, colours, logo style, iconography, and graphic elements. During our group meeting, we discussed and decided on the typefaces and colours, but we struggled to make a final choice, especially regarding how the colours would look in the app. To resolve this, we started designing a homepage in Figma, experimenting with different typefaces and colour combinations until we found the best fit.

Fig. 7.3 Draft Design Direction

Fig. 7.4 Testing typography, colours, and icons in Figma for design guidelines

I then summarised our design guidelines (Fig. 7.5). We decided to use Outfit for headings and subheadings because of its modern, clean, and rounded look. For body text, we chose Nunito as it is highly readable and friendly.

Our main colour palette consists of light blue, light yellow, and vibrant blue, creating a friendly and trustworthy feel. Additionally, we selected rounded and playful icons to align with the approachable and pet-friendly theme.

Fig. 7.5 Final Design Guidelines

For our overall UI design, we aimed for a clean, minimal, and professional look, while still being friendly and cute. Since our app is pet-related, we specifically chose blue and yellow as these are colours that most pets can actually see. The design uses bright and flat colours to capture users’ attention and enhance the overall user experience.

Fig. 7.6 Homepage Key Visual

Fig. 7.7 Before (left) & After (right) presentation

During our presentation, we received feedback suggesting that we should explore more international apps for our competitor analysis. Based on this, I conducted a competitor analysis on PetBacker

Fig. 7.8 PetBacker Competitor Analysis

Fig. 7.9 Updated competitors analysis

Final Outcome

Google Drive Link (Task 1 + 2 Slides + Interview recordings):

https://drive.google.com/drive/folders/1kwB42dxrTh3qDzr5q8EimtSmjXMjnrf2?usp=drive_link

Fig. 8.0 Group 8 Leslie Cheung: PetNav Presentation Slide

Fig. 8.1 Group 8 Leslie Cheung: PetNav Presentation Slide - PDF

Fig. 8.2 Miro Board

FEEDBACK