Major Project

-

04/02/2025 - 25/03/2025  / Week 1 - Week 7

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

Major Project

JUMPLINK:

1. LECTURE


2. INSTRUCTION



3. MAJOR PROJECT 

*This will mostly explain my thought process during making my part, but I will still talk briefly about other members' work to fill in the gaps.

Task 1: Proposal Development (20%)  

  • Finalize project title, propose a group name, timeline, and project development plan.
  • Identify problem/issue, project aim and objectives, and targeted users.
  • Develop a "How Might We" (HMW) statement.
  • Empathize:
    • Conduct user research: Prepare user interview guide/questions.
    • Each team member MUST interview at least three targeted users (proof of individual work).
    • Synthesize user interview data using an affinity diagram and identify patterns for user insights.
1. Topic

After the lecture, me, Tracy, Gawai, and Marsya made a group together and discussed ideas on a topic. Miss said that we should think about the problem first, not the solution, so we began to think about what troubles us in our day-to-day life and made a list of them. We compiled them all in a Google Doc below.


Fig 3.1 Brainstorm Ideas, Week 1 (04/02/2025)

Then we made the FigJam to expand on the ideas. The one that was the most solid and that we all had in common was the pet adoption idea, so we began to throw ideas around, writing down the problems, project aim, objectives, and targeted issues. We also tried to make a second idea, which was a sleep management app, but it was not as fleshed out as the first idea.


Miss suggested we go with the first idea as we had already established a clear foundation for it and could continue.

Fig 3.2 Brainstorm Ideas, Week 1 (04/02/2025)

This was my input during the initial brainstorming for the recommended pet quiz for the users.

Fig 3.3 Brainstorm Ideas, Week 1 (04/02/2025)

Then Tracy made the project development timeline and project development plan. (Thank you a lot to Tracy for carrying us throughout this project, taking on the workload, making most of the PPT, and organizing the FigJam. I owe her so much.)

Fig 3.4 Project Timeline, Week 2 (10/02/2025)

Fig 3.5 Project Development Plan, Week 2 (10/02/2025)

This was my suggestion for the HMW question, but I didn't realize that we needed to write it down in the doc. Instead, I wrote it down in FigJam.

Fig 3.6 HMW Ideas, Week 2 (10/02/2025)



Fig 3.7 Proposal Doc, Week 2 (10/02/2025)



2. Empathize (Interview)

Then Marsya wrote down the questions for the interview, and after feedback from Sir, it got revised. Each of us interviewed three people and wrote down the answers on the same answer template so it was easy to read.


Fig 3.8 Interview Questions, Week 3 (18/02/2025)

For me, the interview took quite long, usually due to the interviewees sharing their experiences, and I needed to explain more about the questions. Some of the wording there was a bit too vague and loose. Most of the interviewees got confused by the questions, and I had to explain what the words meant. For us members, we had already consumed the information about pets and the lingo, but that was not the case with all the interviewees. Definitely could have used easier sentences to digest in the future when making interview questions.


Fig 3.9 Interview Answer, Week 3 (18/02/2025)

It took longer to transcribe all of the conversation into the doc than to put the key points in the affinity diagram, which I am grateful for.

Fig 3.10 Affinity Diagram, Week 3 (18/02/2025)

Then each of us wrote down the key points according to five factors in FigJam. After that, we analyzed and compiled our findings into one affinity insight.

Fig 3.11 Affinity Diagram, Week 3 (18/02/2025)

Then Tracy made the PPT, and we got to record the presentation and send it to Marsya to be compiled. Only one of us needed to submit it.

Fig 3.12 PPT Progress, Week 3 (18/02/2025)


3. Final Submission

Final Proposal Research Docs 

Fig 3.13 Final Proposal Research Docs, Week 4 (25/02/2025)


Fig 3.14 Final Figjam Board, Week 4 (25/02/2025)


Final Proposal Research Slides

Fig 3.15 Final Proposal Research Slides, Week 4 (25/02/2025)


Fig 3.16 Final Video Presentation, Week 4 (25/02/2025)



Task 2: Design Proposition (30%) 


This is the improved affinity diagram by Tracy after Sir suggested using this template.

Fig 3.17 Affinity Diagram Improvement, Week 4 (26/02/2025)

Tracy also made an Empathy Map board. This is the result of that.

Fig 3.18 Empathy Map Canvas, Week 4 (26/02/2025)



1. User Personas & User Journey Map

For user personas and the user journey map, each of us was delegated personas we needed to do, and I got the animal shelter worker.


Fig 3.19 User Persona Delegations, Week 4 (26/02/2025)

So then each of us made the personas according to our interview answers, trying to align them based on the insights we got but still according to our delegated persona.

Fig 3.20 My Persona, Week 4 (27/02/2025)

Mine was easy enough to do, though I did it in FigJam instead of Canva as I was supposed to. And while I didn't get to screenshot it and it has already been erased, I also made a user journey map based on a scenario I wrote down in the persona. But as it turns out, Sir wanted a different template for it that didn’t require a scenario, so I had to redo it.

Fig 3.21 My User Journey Map, Week 4 (28/02/2025)

This is the result of everyone’s personas and user journeys in FigJam.

Fig 3.22 Everyone Persona, Week 4 (28/02/2025)



2. Market Research & Competitor Analysis

This is the market research & competitor analysis done by Tracy after looking at where our interviewees get their info on pet adoption from. There are social media platforms such as YouTube, Facebook, Instagram, and WhatsApp. There are also apps and websites on pet adoption or services in general, such as Pet Finder, Adopt a Pet, Pet Backer, Benji, and We Rescue. These apps will be further explored by me in the next task.

Fig 3.23 Market Research & Competitor Analysis, Week 4 (27/02/2025)



3. Final Submission

Final Proposal Research Slides 

Fig 3.24 Market Research & Competitor Analysis, Week 5 (11/03/2025)



Fig 3.25 Final Figjam Board, Week 5 (11/03/2025)



Task 3: Concept Presentation (40%)

1. Info Archi / Card Sorting

For task 3, my part was supposed to be the information architecture and card sorting, but I was busy with another module. Tracy handled the card sorting with UXtweak.


Fig 3.26 Competitor Analysis, Week 5 (11/03/2025)

To decide on the features for the app, I looked at the previous competitor analysis and examined those apps to see what features they had. I also considered how the flowchart would work, including the layout and how buttons would navigate to different pages.

From the affinity diagram, I identified the most important features for the app—those necessary for functionality and the features suggested in interviews.

Fig 3.27 Card Sorting, Week 5 (11/03/2025)

Here is the list of apps and websites I found and reviewed for features in the eventual card sorting. However, I only managed to download Adopt A Pet and Pet Backer. The rest were either websites or unavailable for download on Google Play.

Nevertheless, I still reviewed both apps and websites to see what features they had. It was also good exposure to see how pet apps are typically structured, which helped me while making my wireframe.

Pet Finder
Fig 3.28 Pet Finder Website, Week 5 (11/03/2025)

Fig 3.29 Pet Finder Website, Week 5 (11/03/2025)


Adopt a Pet
Fig 3.30 Adopt a Pet App, Week 5 (11/03/2025)


Pet Backer

Benji
Fig 3.32 Benji App, Week 5 (11/03/2025)


We Rescue
Fig 3.33 We Rescue Website, Week 5 (11/03/2025)

Fig 3.34 We Rescue Website, Week 5 (11/03/2025)

This is the card sorting list of features I gathered from the apps and websites.

Fig 3.35 App Features, Week 5 (11/03/2025)

Then, Tracy and I organized it to make it easier to input into UXtweak. The red outline in the general feature list indicates the ones that didn’t make it into UXtweak due to its 20-card limit.

Fig 3.36 List of Card and Categories, Week 6 (12/03/2025)

Tracy then uploaded it to UXtweak, and our team collectively shared it with friends for sorting.

Fig 3.37 Analysis of UX Tweak Answer, Week 6 (15/03/2025)

Fig 3.38 Standarization Grid on UX Tweak, Week 6 (15/03/2025)

Afterward, we organized the results in FigJam, finalizing the card sorting method.

Fig 3.39 Final Card Sorting Result, Week 6 (15/03/2025)

Next, we created the information architecture. The initial attempt was done before the card sorting method.

Fig 3.40 Information Architectures Attempts, Week 6 (15/03/2025)

Then, I organized the final version of the information architecture in FigJam after the card sorting method.

Fig 3.41 Final Information Architectures, Week 6 (15/03/2025)

Tracy created the user flow based on the final information architecture.

Fig 3.42 User Flow Diagram, Week 6 (15/03/2025)

*The FigJam can be seen in the final submission.



2. Low-fi Wireframe

This is the inspiration and references I gathered from Pinterest, though I mostly compiled screenshots directly in Figma. Pinterest

Note: This is just my initial layout design for the app and is not final. I chose to explore variations of the main page layout first before refining other pages to establish a consistent design. If I had designed all the pages at once, it would have felt rushed and lacked cohesion. I plan to explore this further next semester. This also serves as a list of other design ideas.

Fig 3.43 Pinterest Reference, Week 7 (17/03/2025)

Pet App WireFrame – Figma

Home Page

I followed the usual hierarchy and familiarity rules from other apps. The search bar is at the top, followed by pet categories, then featured pets. The user’s location is displayed above the search bar since the app will indicate how far each featured pet is from them.

This design was mostly inspired by the Grab mobile app, as discussed in our group. There’s also an AI chat button at the bottom right for help.

For the middle variation, I moved the recommended pet quiz to the top instead of the bottom, as seen in the left variation.

For the right variation, I added an indicator that the images can be scrolled.

  • Could be featured pets.
  • Could be articles or news about pets (this would require a change in the flowchart).

Fig 3.44 Home Page, Week 7 (18/03/2025)

Pet Browsing Page

The layout is mostly the same, except with additional filters to help users search. Favorited pets from previous searches are also displayed.

I'm still unsure about the my thougts on this:

  • “The design is too similar to the home page, making it repetitive.”
  • “It’s similar to the home page, which makes it easy for users to use. Changing it might cause confusion, but it also makes the pet browsing page feel unnecessary.”

Fig 3.45 Pet Browsing Page, Week 7 (18/03/2025)

Adoption and Care Page

This page is mainly for user information—how to use the app and general pet care guides/articles.

I'm still not satisfied with this design. There’s too much empty space, and it’s not visually appealing. I didn’t want to rely on color alone for aesthetics. A couple of possible solutions:

  • Add illustrations and make the info cards bigger.
  • Change the layout (tried in the last variation, but with only three cards, there wasn’t much I could do).
  • Add more content or illustrations under the title before displaying info cards.
  • Make the top info card have a dropdown when the page loads, though that might be difficult since each card has a lot of content.

Fig 3.46 Adoption and Care Page, Week 7 (18/03/2025)

Community Page

I’m also not satisfied with this design. I had a hard time figuring out how to separate the pet app profile (for pet profiles) and the community user profile (for viewing posts and likes).

I need to resolve this before adding the user profile and the “Make Post” button.


Fig 3.47 Community Page, Week 7 (18/03/2025)

Offers and Extras Page

I’m unsure whether to place the deals section at the top or bottom. I decided on the bottom since people might prefer to see pet-friendly locations first.

I also added filters for searching locations, such as:

  • “Open”
  • “Nearest/within a certain distance”
  • “Most visited”

Possible alternatives:

  • Put the pet-friendly locations and deals on separate pages that users must click on. But this might cause users to miss out on “extra” content, as it’s unclear what “Extras” refers to.


Fig 3.48 Offers and Extras Page, Week 7 (18/03/2025)

Profile Page

This can be accessed by tapping the user icon in the top-right corner. However, I now realize the icon is too small for people to notice and click on.

This page contains:

  • Adopted pet list.
  • Badges and rewards.
  • Emergency contact highlighted in its own box with an icon.
  • Quick access icons below the username.
  • App settings at the bottom.

The user profile photo follows the same design as the main navigation to maintain design consistency.


Fig 3.49 Profile Page, Week 7 (18/03/2025)

Live Chat

For chatting with adopters or shelters. It has a basic layout, but I’m still figuring out the design I want.


Fig 3.50 Live Chat, Week 7 (18/03/2025)

Pet Profile

After the pet’s image, I highlighted the age, weight, and breed, similar to the user profile, to maintain consistency. Below that:

  • Pet owner’s name and location.
  • Introduction/bio of the pet (can be scrolled).
  • Sticky buttons: Adoption, call, and message.

Fig 3.51 Pet Profile, Week 7 (18/03/2025)

Main Navigation

I wanted to keep it smooth and uncluttered, so I came up with this design. It’s quite similar to other members’ designs.

I haven’t designed the logo yet, as it needs to align with the app’s visual style, which I haven’t finalized.


Fig 3.52 Main Navigation, Week 7 (18/03/2025)

Iconography

Mostly circles and rounded rectangles. I feel like a pet app should have a soft aesthetic—not sharp—because pets like dogs and cats have soft fur. (Though they have teeth and claws, but that’s beside the point.) The interviews also showed that people seek companionship.


Fig 3.54 Iconography, Week 7 (18/03/2025)

Pet Card Design

I created several variations and settled on the top middle one.

I was deciding on how I wanted the app to feel:

  • If I chose top or bottom left, the app should have a sleek design.

  • If I chose bottom middle or right, the design should be more straightforward.

  • If I chose top middle or right, the design should have depth/indents.

For now, I picked top middle, but I may find a better design later.

I experimented a lot with this card because it’s the core of the app—browsing available pets. The pet card’s design is crucial as it sets the tone for the entire app’s visual style.


Fig 3.54 Pet Card, Week 7 (18/03/2025)

Other Cards (Offers, Posts, Pet-Friendly Locations)

I kept these designs simple for now. Once the pet card design is finalized, it will likely influence these as well.

Fig 3.55 Other Card, Week 7 (18/03/2025)

This is the final spread in Figma, along with my submission in the FigJam group.

Fig 3.56 Final Spread in Figma, Week 7 (18/03/2025)

Fig 3.57 Color Pallate & Typography, Week 7 (18/03/2025)

Fig 3.58 UI Component, Week 7 (18/03/2025)

Fig 3.59 My Wireframe, Week 7 (18/03/2025)

Fig 3.60 The Team Wireframe, Week 7 (18/03/2025)


3. Final Submission


Fig 3.61 Final Proposal Research Slides, Week 8 (25/03/2025)


Fig 3.62 Final Figjam Board, Week 8 (25/03/2025)



4. Feedback

Week 1

  • For the first idea about pet adoption and care, Dr. Chui said we could move forward since the explanation was already clear. The thing to consider now is how to make it unique compared to competitors in this field.

  • For the second idea, she gave examples from other sleep apps that have breathing exercises, podcasts, etc., but we can’t just copy those features.

Week 2

  • The project timeline should follow the template she sent in the Teams chat.

  • The target audience needs to be more specific, focusing on people who have adopted pets before or are considering adoption.

  • There are only two HMW statements so far, so two more need to be added.

  • The interview questions should focus more on app development criteria.

  • The project development plan still needs to be done, but overall, things are going well.

Week 3

  • If unable to attend the physical session, an email should be sent for submission, and the file should also be submitted on Teams.

Week 4

  • For user personas, the number of pets owned by the user should be included.

  • The journey map should follow the given template.

  • The information architecture can be created now but doesn’t need to be submitted yet, as it’s for the next task.

Week 5

  • User insights from interviews should follow the given template.

  • The user persona and user journey are fine.

  • The final task doesn’t require all features to be completed, only the initial stage. Either sketches or wireframes can be chosen, but doing both isn’t mandatory.

Week 6

  • The information architecture looks fine, and UX Tweak can be used since many other groups are also using it.

  • The app name should be consistent across all group members.

  • The presentation slides should include everything from task 1 to task 3.

Week 7 (Before & On Presentation Week)

  • Before the presentation, Mr. Nedu said that overall, the work was fine, but for the UI guidelines, the reason behind choosing certain colors or fonts should be explained.

  • The user flowchart can be summarized during the presentation.

  • The prototype display was too small, so the size needs to be adjusted so all lecturers can see it clearly.

  • Think about what content should be included in the lo-fi prototypes.


5. Reflection

1. Experience 

I want to say thank you to my group that has cooperated and to Tracy, who has organized us, kept us in check, and taken on most of the workload for us. I won’t lie—I was in a bit of a slump this semester, don’t think I have recovered from the last semester, and have been submitting my work last minute too, only coming back to it during the last task.

Definitely need to regulate and pace myself so I don’t burn out during an important module like this. I'm lucky that I have reliable teammates that keep reminding me of what work to do and how much time is left.

Also grateful for the insights and feedback from the lecturers that helped shape the project today.

2. Observation

One of the most noticeable things was how much difference small tweaks made. Layout changes, color adjustments, or even spacing between elements completely shifted how things felt. It became clear that the tiniest details could affect user perception and overall readability. Another key observation was how important consistency was—whenever things felt off, it was usually because something didn’t match the established style or flow. Seeing how all these elements worked together made it easier to refine decisions along the way.

3. Findings

The final outcome highlighted both strengths and areas that still had room for improvement. Some solutions worked exactly as intended, while others needed more refinement to fully meet expectations.

Comments

Post a Comment

Popular posts from this blog

Information Design - Exercise 1&2

-
Image
03/02/2025 - 11/03/2025  / Week 1 - Week 5 Velicia Raquel Dewi Setiawan | 0369188 | Bachelor of Design (Honours) in Creative Media Information Design  JUMPLINK: Lecture Instruction Exercises Exercise 1: Quantifiable information Exercise 2: L.A.T.C.H infographic poster Feedback Reflection 1. LECTURE Week 1: Types of Infographics Infographics help people understand information faster by using visuals and text together. They make information clearer, more interesting, and easier to remember. There are different types of infographics, each with its own purpose: List Infographics – Organize information in a list format with pictures or icons, making it more visually appealing and easier to scan. Fig 1.1 List Infographics, Week 1 (04/02/2025) Statistical Infographics – Use charts, graphs, and numbers to present data in a way that is easy to understand at a glance. Fig 1.2 Statistical Infographics , Week 1 (04/02/2025) How-to Infographics – Show step-by-step guides using...
Read more

Advanced Interactive Design - Final Project

-
Image
19.11.2024 - 24.12.2024   / week 9 - week 14 Velicia Raquel Dewi Setiawan | 0369188 | Bachelor of Design (Honours) in Creative Media Advanced Interactive Design  JUMPLINK: Lecture Instruction Task 3 - Completed Thematic Interactive Website   Progress Final Submission Feedback Reflection 1. LECTURE 2. INSTRUCTION 3. Task 3 - Completed Thematic Interactive Website 1. Progress Loading screen This one is not too hard. I did have to change the middle white circle to the bottom so the anchor is on the bottom, allowing me to change the shape up and down, while the bottom bar stays in place. Then, it just took spacing in different keyframes and adding a shape tween for it. I also added the fade-in and fade-out for them. Fig 1.1  Loading Screen Animation , Week 13 (17/12/2024) Fig 1.2  Loading Screen Fade Out , Week 13 (17/12/2024) Video The beginning process of the web was, of course, putting the video in first and following the tutorial on YouTube, which worked just fi...
Read more

Advanced Interactive Design - Task 2

-
Image
22.9.2024 - 12.11.2024   / week 5 - week 8 Velicia Raquel Dewi Setiawan | 0369188 | Bachelor of Design (Honours) in Creative Media Advanced Interactive Design  JUMPLINK: Lecture Week 5  Week 6 Week 7 Week 9 Instruction Task 2 -  Interaction Design Planning and Prototype   Research Progress Finalizing Layout Planning Interactions Animating Final Submission Feedback Reflection 1. LECTURE Week 5-6 - F2F  (22-29 Oct, 2024) 1.  Button Animation Fig 1.1  Button Animation Progress , Week 5 (22/10/2024) Fig 1.2  Button Animation Result , Week 5 (22/10/2024) Week 7 - F2F  (5 Nov, 2024) 1.  Screen and Button Animation Fig 1.3 Screen and  Button Animation Progres , Week 7 (5/11/2024) Fig 1.4 Screen and  Button Animation Result , Week 7 (5/11/2024) Week 9 - F2F  (19 Nov, 2024) 1.  Transition Animation Fig 1.5 Transition  Animation Progress , Week 9 (19/11/2024) Fig 1.6  Transition  Animation Result , Week 9 (1...
Read more