Application II

 Ding Jiaqi/0379388

Application 2/ Bachelor of interactive spatial design

Week 1

In today’s class, our lecturer introduced the learning structure for the Application 2 module, and it really helped me get a clearer and more complete understanding of the process, principles, and technical aspects of mobile app design. The course mainly focuses on the concept of usability, teaching us how to design apps that are not only functional but also provide a great user experience from the user's perspective.
We also got an overview of the main things we’ll be working on throughout the semester — three key tasks and one final project:

• Task 1 is all about reflection and self-evaluation. We’ll look back at our past designs, find areas for improvement, and learn to see design as a process that constantly evolves and improves.
• Task 2 focuses on the core of interaction design. We’ll be creating user flows, wireframes, and animation prototypes to plan out the user experience in detail.
• Task 3 takes things to the next level by turning those ideas into real, working features. We’ll be using HTML, CSS, and JavaScript to build interactive components — which is a great way to level up our frontend development skills.
• Then comes the final project, which combines everything we’ve learned. We’ll design and develop a fully functional app, and we’ll also document the whole process in our E-Portfolio as part of our final submission.

Overall, this class gave me a solid understanding of what’s coming, and I’m really looking forward to building up my design and coding skills throughout the semester!

Week 2

The teacher explained the content of these two PPT slides and asked us to design a new boarding pass in groups. 

Our problems：

1.The name shouldn't be the most prominent element, so it shouldn't be this large or placed at the front.
2.There are errors in the information on the right - hand side.

3.

What I have learned:

I learned from the class and the works of other classmates that, in the design of boarding passes, the main audience is passengers. In the stressful airport environment, they urgently need boarding passes that are easy to read, can be scanned quickly, and have simple and clear content. The secondary audience is airline staff. They need to use boarding passes to quickly check passengers' seat numbers, flight numbers, and boarding groups. This has made me understand that in the design of any product, we should not ignore the differences in the needs of different user groups. Only by deeply understanding the needs of each audience can we optimize product functions and design details in a targeted way. This can improve the practicality of the product and the user experience. It also ensures that the product can function efficiently in real-life scenarios and meet the expectations of all users. 

 Week 3

Course Content Review

This lesson focused on mobile app design, a subject we had been previously introduced to during last semester’s interface redesign project. Building on that foundation, this session introduced several new and practical components:

1. Common design patterns and interface layout strategies for mobile applications

2. Understanding and analyzing user flow and its significance in user-centered design

3. Case studies showcasing interface designs from existing apps

4. A hands-on task: designing the user flow for either the library book borrowing process or discussion room booking within a library app.

Group Practice Reflection

Our group selected the book borrowing process as the target for our user flow design. We used an online whiteboard tool to create the flowchart. At the start, due to a long gap since our last experience with flowcharting, we overlooked proper use of shape and color differentiation—resulting in a uniform, less readable diagram. Although we made corrections later, the visual clarity was still not ideal, and we agreed to revisit and review standard flowchart conventions after class.

To ensure logical accuracy, I first sketched out the process manually on paper. This helped me clarify the sequence and logic before digitizing it. Ultimately, we presented a detailed and complete flow from login to successful book pickup, covering key stages such as login, search, borrow request, and confirmation.

However, based on the teacher’s feedback, there are two areas needing improvement:

• Use directional arrows instead of plain straight lines to clearly indicate flow direction

• Simplify the logistics section, which was overly detailed with 4–5 granular steps; some steps should be merged for clarity and efficiency.

Main Takeaways

1. Process Optimization Awareness
   Efficient user flows benefit from the logical merging of related steps. Avoiding unnecessary complexity enhances both clarity and usability.

2. User-Centered Design Mindset
   Always prioritize the user’s perspective. Beyond designing visually appealing interfaces, it is essential to consider how intuitive and user-friendly the process is during actual interaction.

Week 4

Wesak Day （Public Holiday）

Project 1

Analyze last semester's application design, incorporating AI feedback and personal review.

Identify key strengths and weaknesses in visual hierarchy, accessibility, and UI logic.

Apply design heuristics and visual strategies to improve the application.

Present a detailed rationale and walkthrough of the improvements made.

ORIGINAL DESIGN

Below is the original version of my application design. While the interface shows a consistent layout, several issues were identified regarding color usage, hierarchy, and accessibility.

(Insert screenshot of the original application home screen here)

AI ANALYSIS SUMMARY

Areas for Improvement:

Lack of Color Usage / Insufficient Hierarchy

Some interfaces lack distinctive color blocks, making it hard for users to identify sections and prioritize content visually.

Unclear Visual Hierarchy

Repetitive text styles and similar component spacing result in a monotonous layout that challenges readability.

Accessibility Issues

Low-contrast text (e.g., grey subtitles on white) and small tap targets may cause usability problems, especially on mobile.

STRENGTHS IDENTIFIED

Despite its flaws, the original design has several strong points:

Consistent Visual Style

A fixed color palette and rounded components create a sense of unity across screens.

Clear CTA Placement

Important buttons (e.g., "Submit", "Save") are placed intuitively at the bottom for easy reach, aligning with Fitts’ Law.

Meaningful Icon Usage

Icons support text labels, enhancing recognition and lowering cognitive effort (Nielsen’s heuristics).

DESIGN IMPROVEMENTS

1. Color Enhancement & Font Adjustment

The background color was changed to reflect the brand’s identity. Font color was unified to #000000 to ensure maximum readability and contrast.

Before: Grey text on white

After: Black text on colored background

(Insert comparison screenshot here)

                                     

2. Navigation Bar Redesign

The bottom navigation bar was resized for better accessibility. Transparent background and clearer labels were added to improve the user’s orientation.

Before: Small icons without labels

After: Enlarged icons + text for clarity

(Insert redesigned navigation bar screenshot here)

3. Improved Visual Hierarchy

Font weights and sizes were revised to emphasize titles and divide sections. Accent colors were used to highlight buttons and key actions.

Before: All text with equal emphasis

After: Clear distinction between titles, content, and actions

4. Accessibility Enhancements

Contrast levels were revised for all text elements. Interactive buttons were enlarged for thumb-friendly interaction.

Before: Low visibility and touch targets

After: High contrast and large tap areas

CONCLUSION

In conclusion, this redesign successfully improves the overall visual hierarchy, readability, and accessibility of the application. By implementing AI feedback and applying user experience principles, the revised design delivers a more intuitive and inclusive experience. While the original layout offered consistency, it lacked strong visual rhythm. The improvements made reflect a balance of visual appeal and functional clarity.

Old link：https://www.figma.com/design/uscrCymp4PxmfG21M9IdU1/Untitled2?node-id=0-1&m=dev&t=WBbZBLtzlWwK7n3d-1

New link：https://www.figma.com/design/SIgPsB8iAVUCBYRJGF8WtE/Untitled?node-id=0-1&m=dev&t=jeDKxluYYdNhvnvU-1

PPT link：https://www.canva.cn/design/DAGnw4b0ATY/492TEc8ZzSI2WItc63A1Jg/edit?utm_content=DAGnw4b0ATY&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

Presentation link：https://youtu.be/Ywp9_Pakp50

Week 5

The teacher set up an online teaching link for us, assigned Task 2, and provided a detailed explanation. In short, we needed to make functional modifications to our previous App 1 project, such as adding animation elements, listing all the parts that required improvement, and organizing them into a complete flowchart.

Next, the teacher began a lesson on animation design. He introduced us to a very useful tool—LottieFiles.  This tool is directly compatible with Figma and can be used to create and import animation effects. He gave a live demonstration on how to break down Google’s icon, first by separating it into several groups, then adding keyframes, and finally changing the shape, size, and rotation of the elements. In the end, he successfully created a dynamic version of the Google logo, rather than a static display.

During the practice session, the teacher gave us time to try it ourselves. I also worked with the Google icon and added animation effects such as rotation, scaling up, and scaling down. After completing it, I sent the animation to the teacher via WhatsApp for review. He gave me very positive feedback on my work.

Week 6

 Public Holiday

Week 8

This week, we finally had our offline class. The teacher patiently guided us through the process of using LottieFiles to design App pages step by step. At the start of the lesson, we built a basic interface together: First, we added a Column component and set its alignment to center. Then, we searched for "Input" on the platform, added a text input box, and adjusted the spacing above and below it (around 10 units). Lastly, we added a Button to complete the basic layout. The teacher specifically reminded us to give clear and meaningful names to each component, such as "Login" or "E-mail", to make it easier to manage and connect logic in later steps. After that, we registered and logged into the Mealplan platform under the teacher's guidance. Once all the steps were completed, the small page we created was able to run and be tested successfully. Towards the end of the class, the teacher explained the details of Task 3: We are required to use LottieFiles to present a complete functional flow within App 1. This time, Figma is no longer allowed. Instead, we have to develop and build a real, interactive page. The task will be more complex and time-consuming, as it involves a full, structured project.

Week 11

As with the past few weeks, the teacher continued to guide us this week in utilizing FlutterFlow for designing pages and creating animation effects. From the basic interface layout to more advanced dynamic interactions, the teacher walked us through each step, helping us gain a deeper understanding of the powerful features of this tool. In contrast to traditional design tools, FlutterFlow places a stronger emphasis on the logical connections between components and the transitions of animations, making it especially well-suited for developing applications that offer rich, interactive user experiences.