23.4.2026 - 23.7.2026 (Week 1 - Week 14)
Caitlin Ong Lynn Dee / 0343801 / Bachelor of Design (Hons) in Creative
Media
Collaborative Design Practice
Final Compilation & Reflection
INSTRUCTION
Important Link:
Task 1: Research & Empathy
This module is a collaboration with the business students. Where we are task developed an app called PetEase.
PetEase is a digital platform that connects Malaysian pet owners with trusted pet service providers, including grooming, boarding, veterinary care, and pet transportation.
Rather than searching across multiple social media platforms, users can
discover, compare, and book verified pet services through a single,
convenient application.
Empathy Map
The business team conducted interviews with Malaysian pet owners to better understand their needs, behaviours, motivations, and pain points. Based on the interview findings, we organised the insights into an empathy map to identify common user experiences and challenges.
.png)
Target Audience
Based on the research findings, the target audience includes:
- Young working adults
- Busy pet owners
- Families with pets
- First-time pet owners
Market Positioning
We analysed existing pet service platforms in Malaysia to identify opportunities for PetEase to deliver a more convenient, centralised, and user-friendly experience.
- Convenience
- Reliability
- Transparency
- Trust
.png)
User Persona
Based on insights gathered from user interviews, we created user personas that represent our primary target users.
Personas helped us better understand users' goals, pain points, behaviours,
and motivations, allowing us to make more informed design decisions
throughout the development process
.png)
Competitor Analysis
We compared existing pet service platforms to understand their strengths, weaknesses, and feature offerings. The findings helped us identify opportunities to improve PetEase's navigation, streamline the booking process, and create a more user-centred experience.
As part of this activity, each team member was assigned a competitor to
analyse. My task was to evaluate the Petsmore app and identify its
strengths, weaknesses, and potential opportunities that could be applied to
the PetEase platform.
Petsmore App Analysis
Petsmore is a modern, lifestyle-focused pet retail brand that provides premium yet accessible products and services for urban pet owners. Besides retail products, the platform also offers pet grooming services and emphasizes a clean, modern shopping experience.
Petsmore is a useful reference for studying e-commerce and lifestyle-based pet platform UI/UX. Its strengths include intuitive category navigation, clear product organization, strong product visibility, seamless shopping flow, integrated loyalty systems, and a structured homepage layout that makes browsing easy and visually appealing.
One weakness is that the Petsmore pet care blog contains limited and somewhat unorganized educational content. This creates an opportunity for PetEase to build a more structured and beginner-friendly pet care guidance section focused on educating new pet owners.
.png)
Task 2: Ideation
Using the research findings, we began the process of planning the overall application. Our primarily focus was to simplify the booking journey while simultaneously making the interface approachable and intuitive for both new and experienced pet owners.
User Flow
.png)
Information Architecture
The Information Architecture was developed based directly on the four primary user flows identified during the planning phase. By organizing the application into distinct, clear sections, we enabled users to navigate easily between core features. These include booking services, managing pet information, requesting transportation, and accessing their account settings.
The sitemap also takes into consideration different user roles within the
platform.
While standard customers primarily interact with booking and pet
management features,
merchants are provided with a dedicated dashboard to manage appointments
and update service progress efficiently. This clear separation of functions ensures a simple, organized,
and user-centered navigation experience for everyone
Wireframe
Following the establishment of the Information Architecture, we began creating low-fidelity wireframes. This step was crucial for visualizing the application's layout and navigation structure before any visual design was applied.
These wireframes allowed us to maintain a strict focus on user experience, screen hierarchy, and interaction flow without being distracted by colors or branding elements. This early-stage visualization also facilitated easier feedback collection, enabling us to refine the interface significantly before transitioning into high-fidelity designs.
Task 3: Prototype Development
After validating the wireframes, we developed PetEase's visual identity and translated it into a high-fidelity prototype. The design aligns with the brand's core principles to deliver a clean, approachable interface.
Visual Direction
In the end we decided that our application utilizes warm colors and
intuitive layouts to communicate trust, friendliness, and
accessibility.
Logo & Brand Guide
Since I am the only graphic designer in the group, I am responsible for
creating the Logo Design and Brand Guide for PetEase.
UI Design
To reduce booking complexity and maximize readability, each screen was thoughtfully designed across the entire core flow:- Home
- Search
- Service Detail
- Booking
- Payment
- User Profile
.png)
High-Fi Prototype
Once wireframes were finalized, we translated the layouts into high-fidelity UI designs that reflect PetEase’s brand identity.
To create a warm, approachable experience for pet owners, the UI incorporates soft color palettes, rounded components, and deliberate spacing. Every screen was optimized to enhance readability and minimize friction in the booking process.
Interactive Prototype
We built an interactive prototype in Figma to simulate the end-to-end
user experience prior to development. This allowed stakeholders and
testers to seamlessly navigate services, book appointments, and manage
pet profiles.
Key Outcomes:
- Validated navigation architecture and key interaction patterns.
- Uncovered usability friction points during testing for further iteration.
View Prototype in Figma:
https://www.figma.com/proto/8drJXqMUBsi8rXg7Lxy4mP/PetEase?node-id=332-39&t=fzzHKcPGpOr74W9K-1&starting-point-node-id=332%3A39
Mobile Screen & Collaterals Mockup
To imagine what does the brand look like in the real-world mockups are
made to help us visualized it. Tao is responsible for the mockups.
Social Media Brand Kit
Creating the social media brand kit was definitely the most challenging task for me in this module since I had no prior experience with it. While online resources felt complex and overwhelming, early time pressures forced me to rely on other groups' work as a visual template.
Thanks to key insights from Mr. Hafiz, I was able to break down the
fundamentals. I pushed past my initial drafts and successfully
redesigned a unique, fully customized final brand kit.
Task 4: Testing End Product
We conducted usability testing to validate our design decisions, identify friction points, and refine the final prototype.
User Testing
To evaluate the application's user experience, participants were
tasked with completing core flows using the interactive Figma prototype.
Key Findings & Outcomes:
- User Feedback - Participants appreciated the organized layout and found the booking process intuitive. Feedback primarily focused on refining navigation clarity and optimizing booking efficiency.
- Design Iteration - Based on insights gathered during testing, we implemented key UI and navigation refinements to enhance overall usability and visual consistency before finalizing the build.
Task Allocation
- Gan Yi Kian - UI/UX design, Animation, Slides
- Tao Yuze - UI/UX design, Mockup, Video walkthrough design
- Caitlin Ong Lynn Dee - Brand Guide, Social Media Brand Kit
- Alan Firgianto - User Persona
Final Presentation Slides:
https://www.figma.com/slides/gYn3JYVLlg3MkXGBcX6DJA
Presentation Video
FEEDBACK
Week 8- Focused on busy pet owners and urban users.
- Simplified the booking and service discovery experience.
- Added trust features (reviews, ratings, transparent pricing).
- Introduced pet pickup & delivery services.
- Enhanced support for pet service providers.
- Refined the brand identity to feel more caring, reliable, and user-friendly.
- Need to think about how can earn money
- Want to add one service about the delivery
- Offer delivery services. For those who are busy at work or students who don't have time to bring their pets to the pet store, we can provide a delivery service to take the pets to the pet store
REFLECTION
Experience
This project was one of the more challenging group experiences I have had. During the development of the brand guidelines, tasks were fragmented and responsibilities were unclear. While one teammate designed the logo, I handled the color palette, typography hierarchy, and button specifications. Because the logo was incomplete and the requirements were not clearly communicated, I had to recreate the brand guidelines from scratch. I also faced difficulties using a complex Figma template and received limited guidance when designing the social media content kit.
Observation
I observed that the team lacked clear communication and proper task management. Project requirements were not explained well that some teammates were unresponsive, and design systems were introduced without sufficient guidance. These issues led to confusion, repeated work, and an uneven distribution of tasks.
Findings
This experience showed me that effective communication, clear task allocation, and proper documentation are essential in group projects. Providing clear instructions and ensuring all team members understand shared tools and workflows can improve collaboration and create a more efficient working environment.
Comments
Post a Comment