Major Project 2 - GoodPats

-

 03/02/2025 - 17/03/2025  / Week 1 - Week 7

Velicia Raquel Dewi Setiawan | 0369188 | Bachelor of Design (Honours) in Creative Media

Major Project 2 

JUMPLINK: 

  1. Lecture
  2. Instruction
  3. Final Project & E-portfolio
  4. Feedback
  5. Reflection


1. Project Direction

I’m sticking with my original group with Kong and Gawai, and we’re keeping our original idea of a pet adoption app. We did consider changing to a new topic, but that would mean redoing all the research we did last semester.

In the first week, Mr. Shamsul asked us what would keep users from leaving, since adoption is a one-and-done process. In our previous presentation, we decided on adding a basic community feature and a pet care articles section. However, after discussing with Mr. Shamsul, we realized that those features would not be “enticing” enough to keep users from uninstalling the app.

So, Gawai and I started brainstorming what features we could add to keep users returning to the app.

The reasoning behind the community and pet care guide features before was to allow pet owners to connect, share pictures of their pets, and give advice. But these features alone would not make the app profitable. Mr. Shamsul shared how e-commerce apps use top-ups and premium features to sustain and grow.

Based on that, we decided to explore features involving top-ups. We added a pet sitting feature (suggested by Mr. Shamsul), and after reviewing competitor research, we noticed most pet apps are separated (adoption, sitter, store, etc.). So we combined them into one app, along with adding pet-friendly locations, a pet store, and pet gamification.

The pet sitting feature helps owners find sitters when they go out of town.
The pet-friendly location feature helps users quickly find cafés or parks that allow pets.

The pet gamification feature is a virtual pet system where users can customize their pet, feed it, and decorate it. It is paired with a scheduling system for tasks like feeding, walks, and vet visits. Completing tasks rewards users with “Pat Points,” which can be used for customization or exchanged for store discounts.

Originally, we also wanted to add profile badges and more customization, but we didn’t have enough time.

Feature summary:

Features kept:

  • Pet Adoption: Browse pets, submit applications, track status
  • Community: Post and connect with other pet owners

New features added:

  • Pet Sitting: Book sitters for overnight stays or visits
  • Pet-Friendly Spots: Find pet-friendly cafés and parks
  • Care Guide: Pet care tips and guides
  • Pet Store: Buy products, earn and use “Pat Points”
  • Pet Gamification: Virtual pet + task system + rewards

2. Wireflow & Design Process

We then started working on the wireflow. I handled the home, adoption, pet sitter, pet-friendly location, and care guide flows, while Gawai worked on the virtual pet, store, profile, and community since she understood those better.


We used layout references from our previous presentation and began with simple wireflows to figure out what buttons and features were needed. After that, we connected everything into a working prototype.


Fig 1.1 Login Wireframe, Week 3 17/03/2026

Fig 1.2 Adopt Wireframe, Week 3 17/03/2026

Instead of focusing only on adoption, the app became more of a pet task and lifestyle app. So I added a date and schedule section on the home page, instead of just featuring adoptable pets like in Major Project 1.

Fig 1.3 Pet Sitter Wireframe, Week 3 17/03/2026

Fig 1.4 Pet Friendly Location Wireframe, Week 3 17/03/2026

Fig 1.5 Care Guide Wireframe, Week 3 17/03/2026

Fig 1.6 Community Wireframe, Week 3 17/03/2026

Fig 1.7 Pet Wireframe, Week 3 17/03/2026

Fig 1.8 Store Wireframe, Week 3 17/03/2026

Fig 1.9 Profile #1 Wireframe, Week 3 17/03/2026

Fig 1.10 Profile #1 Wireframe, Week 3 17/03/2026

Fig 1.11 Pet Wireflow, Week 3 17/03/2026


3. Feedback & Improvements

During feedback with Mr. Shamsul, he helped us group information better since our app became more like a super app with many features. He also suggested adding email verification for user security.

He encouraged us to think from the user’s perspective and how things would work in real life — like how users contact shelters or pick up pets. From this, I realized each shelter has different criteria and locations, so I added a general user info system and an interview scheduling feature so users and shelters can coordinate directly.

He also suggested adding progress bars for processes like adoption and including loading screens.

We also realized that Gawai and I had slightly different design styles despite using the same moodboard, so we needed to check each other’s work to stay consistent.


Fig 1.12 Login High-fi, Week 6 7/04/2026

Fig 1.13 Adoption High-fi, Week 6 7/04/2026

Fig 1.14 Pet sitter High-fi, Week 6 7/04/2026

Fig 1.15 Pet Friendly Location High-fi, Week 6 7/04/2026

Fig 1.16 Care Guide High-fi, Week 6 7/04/2026

Fig 1.17 Community High-fi, Week 6 7/04/2026

Fig 1.18 Pet High-fi, Week 6 7/04/2026

Fig 1.19 Store High-fi, Week 6 7/04/2026

Fig 1.20 Profile High-fi, Week 6 7/04/2026

After that, we added colors. We reused our previous color palette, but it wasn’t very strong — the colors clashed, and there was no clear CTA or brand color. However, we continued due to time constraints.

We then added transitions, scrolling, and images. Mr. Shamsul said the colors were fine, so we proceeded to the presentation.



Figma Prototype A


4. Final Feedback & Redesign

During the final presentation with another supervisor, she pointed out that the color palette was inconsistent, there was no clear brand identity, the typeface was hard to read, and there were accessibility issues with the bottom navigation. We also missed the top navigation (battery, time, etc.).

So we decided to completely change the color palette. She also explained app branding (e.g., green for Grab, pink for Foodpanda, orange for Shopee), which influenced us to move to a monochrome color palette.

While experimenting, we realized the layout also needed changes, since our previous design relied heavily on multiple colors to separate features. We looked at monochrome app references to understand how layout and color should work together.


Fig 1.21 Moddboard Redesign, Week 7 24/04/2026


One thing I noticed is that monochrome apps use a lot more white than expected. So I prioritized using white first before adding colors to backgrounds, sections, and buttons.

Fig 1.22 App Redesign Experiment, Week 7 24/04/2026

I also added a bit of orange to indicate filters and current states (like progress bars), since blue was not noticeable. I kept red for errors and green for success states. 

Another change was the bottom navigation — active icons now use the brand color while inactive ones are grey, which looks much better.

Fig 1.23 Bottom Nav Before, Week 7 24/04/2026

Fig 1.24 Bottom Nav After, Week 7 24/04/2026


Gawai also updated the logo color and loading animation to blue.

Fig 1.25 New Loading Screen, Week 7 27/04/2026

Fig 1.26 New App Logo, Week 7 27/04/2026

After that, it was mainly about recoloring the entire prototype.

Fig 1.27 Login Redesign, Week 7 27/04/2026

Fig 1.28 Adopt Redesign, Week 7 27/04/2026

Fig 1.29 Pet Sitter Redesign, Week 7 27/04/2026

Fig 1.30 Pet Friendly Location Redesign, Week 7 27/04/2026

Fig 1.31 CAre Guide Redesign, Week 7 27/04/2026

Fig 1.32 Community Redesign, Week 7 27/04/2026

Fig 1.33 Pet Redesign, Week 7 27/04/2026

Fig 1.34 Store Redesign, Week 7 27/04/2026

Fig 1.35 Profile Redesign, Week 7 27/04/2026


Figma Final Prototype

Final Canva Presentation


Fig 1.36 Login Redesign, Week 7 27/04/2026



4. Feedback

5. Reflection

1. Experience 

For this project, I continued with my group and our pet adoption idea, but we had to rethink it into a more complete pet lifestyle app. The process became more complex as we added more features, and it was sometimes overwhelming, especially towards the end when rushing to finalize everything. But overall, it was a challenging but fun experience, especially for a group project.

2. Observation

I noticed that having too many features can make the app messy, so grouping and structure is very important. i also realised that designing based on real-life scenarios, consistency in design, and having a clear color/branding system all play a big role in making the app usable and clear.

3. Findings

I learned that it’s not about having many features, but how they work together to keep users engaged. user experience also depends on real processes, not just the interface, and having a strong brand identity and consistent design is important.

Comments

Post a Comment