Application Design 2 - Task 1: App Design 1 Self-Evaluation and Reflection

24/04/2025 - 15/05/2025  / Week 1 - Week 4

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

Application Design 2 

JUMPLINK:

1. LECTURE

Week 1 – MVP Redesign & Animation Planning

This week, the main focus was on redesigning a previous project from App Design 1, but specifically for the MVP—meaning a vertical slice of the app. That includes everything from button animations to page transitions, aiming for a polished interactive experience.

Tasks:

  1. Redesign MVP features focusing on animations (button animations, page transitions).

  2. Plan the animations and interactivity clearly—whether using Figma, Canva, or After Effects, the idea must be visually demonstrated. For example, if a button glows, you have to show it.

  3. Implement the planned animations for real in the prototype.

Resources Provided:

  • UXLab Assistant AI (via WhatsApp link) — useful for asking follow-up and in-depth UX questions.

  • LottieFiles — for adding animations easily.

  • FlutterFlow — no-code tool to build apps and integrate with Figma. (Note: FlutterFlow University access will be ready in 15–20 days via email; meanwhile, tutorials on YouTube are helpful.)

I was encouraged to make full use of these resources to enhance the app’s interactive feel.




Week 2 – Labour Day Holiday

No classes this week due to Labour Day holiday.




Week 3 – Information Architecture & Group Task

This week we worked on arranging information based on information architecture principles and user personas.

Group Task:

  • Organize onboarding info effectively. For example, group flight details with departure and arrival times, gate closes, etc.

  • Prioritize what information is most important: the flight number is more important than the date, so layout accordingly.

  • Group related info such as departure and arrival times and dates together for clarity.

We made the target audiance first.
Fig 1.1 Target Audiance, Week 3 (08/05/2025)

Then from the references below, we take the information and redesign it.

Fig 1.2 Booking Information, Week 3 (08/05/2025)

This is our result after the redesign.

Fig 1.3 Redesign, Week 3 (08/05/2025)

After some more feedback from the lecturer, we redesign it again.

  • He told us about information grouping, such as the date, from–to, and where departure and arrival time should be in one place.

  • While "first" and "gate" should be in one place.

  • While "seg no." and "booking no." are not that important, so they don't need to be that visible/put it lower in the hierarchy.


Fig 1.4 Redesign after Feedback, Week 3 (08/05/2025)




Week 4 – Mobile App Design & User Journey

The focus this week was on designing interconnected mobile app systems, keeping the interface consistent and intuitive.

Key Concepts:

  • Design Continuity: Buttons should follow the same style (e.g. yellow, rounded) throughout the app to preserve consistency.

  • Task Completion: The interface should guide users toward finishing tasks without friction.

  • User Journey: Mapping how a user moves through the app—from entry to goal completion.


Standard App Layouts:

  • Screen Types:

    • Home

    • Master-Detail

    • Form

    • Confirmation

Consistency in layout types is key to not disorienting users.


Navigation:

  • Types:

    • Bottom nav bars

    • Tab navigation

    • Hamburger menus

  • Decision factors: Should be chosen based on user behavior and app complexity.

  • Universal Icons: Icons must be instantly understandable—no guessing games.


User Flow:

Defined as the sequence of steps a user takes to complete a task.

  • Start with a User Flow Chart before moving into wireflows.

  • One page can have multiple outputs (e.g., success or failure).

  • Group work required a minimum of 5 pages.


Important Tips:

  • On arrows in user flow diagrams:

    • Write labels directly on lines to clarify where they're coming from—especially if from a different page.

    • Feedback/confirmation states must be added, e.g. "When sign-up fails" → show error message or retry prompt.

    • Arrows should connect from the specific button, not the whole screen.

Fig 1.5 Flow Diagrams Reference, Week 4 (15/05/2025)

Lecturer Feedback:

  • Decisions must be binary: Yes or No. Not “Yes and yes.”

  • Use visual cues to show interaction clearly (e.g. highlight clicked icons).

  • Your version is more like a finalized wireframe—it’s okay, but keep it iterative.

  • Avoid vague language like “feel.” Every design must be justified with UX rules.

  • Emphasize spacing, alignment, and visual hierarchy


Fig 1.6 Screen Wireframe, Week 4 (15/05/2025)

Fig 1.7 Flow Diagrams Tutorial, Week 4 (15/05/2025)

Feedback from Lecturer:

  • Decisions should be clear yes or no, no mixed answers.

  • Visual cues need to clearly show what’s clicked.

  • The version presented was more like a finalized wireframe, but that’s acceptable.

  • All design choices must be backed by UX principles—avoid subjective phrases like “feel.”

  • Pay attention to spacing, alignment, and visual hierarchy.





Week 5 – Micro and Macro Animation Principles

This week was about understanding the difference between micro and macro animations in UI/UX:

Concepts:

  • Micro animations: Tiny details (e.g., button hover, toggle switch).

  • Macro animations: Full-screen transitions, onboarding flows.


Examples:

  • Micro:

    • Button hover → color change

    • Bottom navigation → icon animation

  • Macro:

    • Transition from splash screen → home

    • Fade between full pages


Tools & Platforms:

Note: Some seniors used After Effects to make Lottie animations for UI roles. Duolingo also uses LottieFiles—clear sign it’s industry-relevant.


Animation Principles (Val Head – Adobe):

  1. Clarity

    • Don’t animate everything

    • Give visual feedback (e.g., loading, download complete)

    • Don’t animate multiple elements at once

  2. Timing

    • Not too fast or too slow

    • Gigs (larger transitions) are slower, micro interactions are faster

  3. Easing

    • Linear – no speed change

    • Ease-in – speeds up

    • Ease-out – slows down

    • Ease-in-out – accelerates, then decelerates

  4. Visual Continuity

    • Keep elements that persist between screens visible (e.g., header image)

    • Animate similar elements the same way


Reference Articles:


Task 2 Requirements:

Macro Animation

  • Build in FigJam:

    • Map user flow

    • Annotate animation descriptions

    • Include linked animated GIFs (either made or sourced)

Micro Animation

  • Show interactions (e.g., button color on hover)

  • Focus on bottom navigation bar animations

Storyboarding

  • 1 app screen per board

  • Sections:

    • On Enter

    • On Screen Load (each element gets its own animation timeline)

    • On Exit

  • Write detailed description beside GIFs


Fig 1.8 Animation Practice in Lottiefiles, Week 5 (22/05/2025)




2. INSTRUCTION


3. TASK 1: APP DESIGN 1 SELF-EVALUATION AND REFLECTION

Description
Students are required to perform a self-evaluation and reflection based on their mobile application design 1 final project. This project aims to document the issues, problems, and difficulties and propose solutions to improve the mobile app design aesthetic and user flow. Mobile App design is an iterative process, and this task will expose to students the constant improvements one can make to their app. Students are required to submit the documentation in Google Docs for ease of commenting and feedback by the module coordinator.

Requirements
To submit a self-reflection blog post on the app design refining process with a clear comparison between the old and new design. Refer to example past students’ blogs for more details.

Submission
1. Online posts in your E-portfolio as your reflective studies
2. Presentation Video


1. Topic

For this task, we need to analyze the app design we made in the last module with the ChatGPT UI/UX assistant from Sir. We need to upload the screenshot of the app and ask it for feedback and analysis.


Fig 3.1 UI/UX Assistant ChatGPT, Week 3 (08/05/2025)

The MVP that I chose is the search function: to search for songs to download and then find the downloaded songs and play them. Below is the described flow for the function:

Search Function

The user wants to listen to songs by Aurora. The user searches for the artist "Aurora," then clicks on the "Runaway" song in the search results. The user likes the song and wants to download it for offline listening. The user clicks on the "Music" menu at the bottom, then clicks on the "Downloaded Song" section and finds the song there.



2. Progress

This is the Figma link to see the "before and after" of the feedback. LINK Figma

I put all of the feedback and analysis inside this doc to keep track of it more easily. 

Then I started to make the changes based on what could be improved. I’ve already mentioned the main changes in the PPT and presentation, so this next part is just the little things I missed explaining or my further thoughts on the redesign. (I’ve only paid attention to the pages that are part of the MVP, so I didn’t analyze the whole app.)

Fig 3.2 Screen Redesign in Figma, Week 3 (08/05/2025)

Some issues I already saw since the last module — like the low contrast between the background and text, and the visual hierarchy of the headers.

The one flaw that I saw as glaringly obvious was the absolute lack of spacing. Some of the cards were too close to each other, the song title and the artist were too close, the header and the content were too close — most of the content on the homepage felt too tight. Admittedly, this wasn’t really shown in the PPT, because you have to scroll down to see it, but it was so bad.

Fig 3.3 Homepage Content, Week 3 (08/05/2025)

Another page I looked at was the song player. I feel like the icons could be more spread out instead of being bunched up together. It could make the user misclick an icon when they’re so close together.

Fig 3.4 Lyric Page, Week 3 (08/05/2025)

Besides the lack of spacing, there was uneven negative space. In some pages, like the search results page, the negative space for the filter and the search bar was smaller than the space for the search results. I know it’s a small thing, but it bothered me — like a vase on an uneven stool.

Fig 3.5 Search Filter Negative Space, Week 3 (08/05/2025)

Remember when I mentioned the low contrast between the background and the text? It happened on the homepage and the song lyrics page. It’s because the contrast between red and white is low, and this has appropriately been changed to improve the page’s contrast.

Fig 3.6 Before and After Homepage, Week 4 (15/05/2025)

Fig 3.7 Before and After SongPlayer Page, Week 4 (15/05/2025)

In the lyrics page is where I started to consider the need for breadcrumbs — a header for the page to tell you where you are right now. Last time I didn’t put it during the wireframe stage, so when I added the colors in, I realized it needed one, and I just slapped it in there — even though it didn’t really fit the grid and there was no visual hierarchy for it. So when ChatGPT suggested a breadcrumb header, I made sure it had a proper place and was appropriately placed within the grid.

Fig 3.8 Before and After Activities Page, Week 4 (15/05/2025)

I also don’t know why I only put an icon in the favorite card. Probably because I was making it from 9PM to 9AM and my brain was all over the place. As for making the other lists into cards too? At first, I did that to differentiate them from the playlist page. But since the playlist page is going to have images on their cards and the activity page will have icons, I decided that’s enough of a difference to go through with it.

Fig 3.9 Before and After Search Page, Week 4 (15/05/2025)

For the downloaded songs page, I remember planning to add a search bar back during Application 1. Why didn’t I do it? I forgot, or my brain was too fried. The suggested filters and grouping songs by date from ChatGPT are good additions too.

After I made the presentation, I noticed that I was way too focused on “what can be improved” and not “what already works.” I feel like I missed some opportunities I could have made if I had considered the strengths and not just the weaknesses first. In doing so, I might have even removed those strengths in favor of addressing the weaknesses — and that trade-off might not be worth it.

One other thing I noticed from then until now: I always thought the task was too hard and kept procrastinating. But when I actually started doing it, it was quite fun, and I enjoyed writing the analysis. Despite history repeating itself, it’s still hard to bring myself to start.



3. Final Submission

PPT Submission

Fig 3.10 Final Submission PPT, Week 4 (15/05/2025)

Video Submission

Fig 3.11 Final Submission Video, Week 4 (15/05/2025)

4. Feedback

Week 4: 

Specific Feedback:

  • None

5. Reflection

1. Experience 

At first, I kept putting the task off because it felt too hard. But once I started, I actually enjoyed it — especially writing down the analysis and thinking through the changes. I only focused on the MVP pages this time, and I already shared the main redesign in the presentation, and writting this helped me reflect on smaller things I missed or didn’t explain properly.

2. Observation

Some issues were already obvious before — like the low contrast between red and white, and weak visual hierarchy. But the biggest problem was spacing. Cards, headers, and text were too close together, especially on the homepage and song player. Icons were also too cramped, which could cause misclicks. I also noticed uneven negative space, like how the search bar filter had less breathing room.

3. Findings

After presenting, I realized I focused too much on fixing flaws and not enough on what already worked. I might’ve lost some strengths by doing that. I also saw how small details — spacing, alignment, breadcrumbs — really affect the experience. Some things I meant to add, like a search bar in the downloads page, I just forgot. But overall, the feedback helped me catch those gaps and improve the design.


Comments

Popular posts from this blog

Information Design - Exercise 1&2

Advanced Interactive Design - Final Project

Advanced Interactive Design - Task 2