Application Design Final Project
16 December 2024 - 7 January 2024
WANG ZILONG(0361141)
Application Design II| Bachelor of Design in Creative Media | Taylor's University
Final Project
Introduction
The main process
Based on the progress of Task 3, I focused on enhancing the interactivity and overall user experience of the carrier app through various animations and linking all components together seamlessly. This involved using HTML, CSS, and JavaScript to achieve a smooth and user-attractive interface. I developed a variety of animations to add dynamic effects to the app, including smooth page transitions, gradual fading of content, interactive sliding, animated pop-ups, and enhanced button interactions. These animations are designed to provide a unified browsing experience, making the app interface more dynamic and user-friendly.
After completing these animations, I integrated them into Figma's high-fidelity (Hi-Fi) wireframes, which visually presented the final appearance and interaction effects of the app. Through the high-fidelity prototype, I ensured that all elements worked in harmony so that users could feel consistency and smoothness. In addition, I also updated the flowchart and master plan of the app to reflect the latest UI design changes. The updated flowchart clearly shows the logical order of all new animations and transitions to ensure intuitive user operations. The master plan records the overall structure and layout of the app in detail, and adjusts and optimizes it for the newly introduced animations and design elements.
By carefully designing and integrating these animations, and updating supporting documentation, I brought the carrier app closer to its final form, ensuring that users would enjoy a refined and smooth experience. In Task 3, I completed the primary and secondary animations and integrated all functional components into the final application using HTML, CSS, and JavaScript.
The final product includes all major animations in the carrier app, such as page transitions, content fade-in, swipe actions, popup animations, and button interactions. In addition, I refined the flow chart and master plan to ensure that all design updates and edits were reflected, presenting a clearer and smoother app experience for users.
Interactive Features Overview
Artspark Final Wireframe
Page Transition(The animation mainly presents the video)
Final Project
Improvement / Changes
1. Optimization of page animation and transition
Figma prototype design: In the Figma high-fidelity prototype, we designed a simple transition effect for page switching, aiming to reflect the coherence and logic between functional modules. However, the transition effect is limited in static design and cannot fully reflect the user's operating experience.
Final implementation: In the finished application, we used JavaScript and CSS to achieve smooth transitions between pages and increase the fluency of animations. For example:
The "fade in and fade out" animation is used when switching pages to avoid abrupt jumps.
The dynamic effect of sliding between modules enhances the naturalness of the transition.
Improvement highlights: These animations not only enhance the visual appeal, but also optimize the user's operating experience, making the entire process more coherent and intuitive.
2. Dynamic interaction of the bottom navigation bar
Figma prototype design: The static design of the bottom navigation bar in the prototype is clear, but lacks the presentation of dynamic interaction. For example, there is no corresponding visual feedback when the user clicks the menu item.
Final implementation: In the finished product:
The floating animation and background highlight effect of the selected menu item are added to make the user operation clearer.
Using JavaScript to dynamically track the current page status and update the display effect of the navigation bar in real time, the feedback of the navigation experience is improved.
Improvement highlights: Enhanced dynamic interaction makes the operation of the navigation bar more directional and provides users with clear path guidance.
3. Fuzzy query and result display animation
Figma prototype design: In the prototype, the display of the fuzzy query function is presented in the form of a static list, lacking animation effects, which may lead to insufficient user perception of dynamic result loading.
Final implementation: In the online version:
The search box is given a dynamic expansion animation, and the input box gradually expands when the user clicks, and the visual effect is natural and smooth.
The query results are loaded one by one in a "bottom-to-top" order, and are presented through a fade-in effect, which appears more organized and vivid.
Improvement highlights: The dynamic search experience not only optimizes the visual effect, but also enables users to understand the loading logic of search results faster and more intuitively.
4. Enhancement of payment and bill modules
Figma prototype design: The design focus of the payment page and bill module in the prototype is on the clarity of the functional layout, but the details of the interaction are not presented in depth.
Final implementation: In the online version:
Progress indicator animation is added to the payment module, so that users can understand the specific progress of the payment in real time, reducing anxiety.
Dynamic visual effects (such as gradual scrolling of numbers and progress bar updates) are added when the bill is loaded, so that users can have a more intuitive feeling of the changes in the bill.
Improvement highlights: These dynamic enhancements make the payment and bill modules more technological, while effectively improving the user's trust and sense of participation.
5. Pop-up window and button interaction effect
Figma prototype design: The pop-up window and button interaction design in the prototype are mainly static, and the dynamic response effect after the user's operation is not reflected.
Final implementation: In the finished product:
The pop-up window uses the "elastic zoom" animation effect, fading in from the center of the page, creating a strong sense of visual focus.
Button interaction adds zooming when hovering and gradient animation after clicking, and the operation feedback is more timely and clear.
Improvement highlights: Through these micro-animations, the user's operation experience is more sensitive and the comfort of interaction is improved.
6. Update of Figma design and process documents
Process improvement: During the development process, I continuously updated Figma high-fidelity prototypes and supporting documents based on the final implementation of the application functions:
Flowchart update: Adjusted and improved the flowchart to ensure that it reflects the latest page logic and animation transition design.
Overall planning optimization: Recorded changes to the overall structure and layout of the application, especially detailed descriptions of the newly added animations and dynamic interactive elements, providing clearer guidance for team collaboration.
1. Performance
The app performs well in terms of performance, with fast loading speed, small resource size, and smooth animation.
The initial loading time is short, and the optimization of key resources such as HTML, CSS, and JavaScript files enables them to load quickly.
The animation and page transitions are smooth, and there is no obvious delay in user operation, providing a better interactive experience.
The response speed is excellent, and the resource loading management is reasonable, so users can get stable performance in different network environments.
2. Accessibility
The app shows high compliance and friendliness in terms of accessibility:
The HTML structure is highly semantic, and standard tags such as header, main, and footer are used to facilitate auxiliary tools to parse content.
The design of buttons and interactive elements supports recognition by most screen readers and meets basic accessibility standards.
The page layout is simple and clear, and the visual presentation is clearly layered, which can provide a more comfortable user experience for different user groups.
3. Best Practices
The app shows good design and implementation in terms of best practices:
HTTPS deployment is used to ensure data transmission security, which is a basic requirement of PWA.
The interface is fully responsive, and the page can be displayed adaptively on both desktop and mobile devices to ensure a good user experience.
The layout and functional logic of the application are clear, the interaction is intuitive, and the animation transition is natural, which meets the design standards of modern web applications.
4. Search Engine Optimization (SEO)
In terms of SEO, the basic settings of the application are complete and can provide the necessary information to search engines:
The page contains clear <title> and <meta description> tags, which can effectively describe the content theme and improve search rankings.
A clean URL structure is used to facilitate search engines to crawl the page content.
The HTML code is well-semanticized, which helps search engines understand the page content and assign it appropriate weight.
Github link:https://github.com/wanghao7598/communication2
Google drive link:https://drive.google.com/drive/folders/1LXrhRptKjHor2sElq7l3Jqkrw2mZv-ie?usp=drive_link
Reflection
Reflection on the progress of the operator application development project
In the operator application development project, I focused on designing and implementing a variety of animation effects for the application through the advancement of Task 3, and seamlessly linked all functional components together, which comprehensively improved the interactivity and overall user experience of the application. This is not only a process of technical implementation, but also a comprehensive practice of design logic and user experience optimization. Throughout the process, I successfully built an attractive, smooth and user-friendly interface through HTML, CSS and JavaScript, giving the application more vitality and usability.
Animation design and implementation
Animation is the core part of this task and the key to user experience optimization. I designed and implemented a variety of animations, including:
Page switching animation: Through smooth page transition effects, the user's sense of jumping when switching between different modules is reduced, and the coherence of the interface is increased.
Content fade-in effect: A gradual fade-in animation is added to the loaded content, making the presentation of the page content softer and reducing the visual abruptness.
Interactive sliding animation: In scenarios such as bills and package selection, the interactive method of sliding cards makes user operations more intuitive and natural.
Pop-up window animation: Use dynamic effects that combine enlargement and fading in pop-up windows to attract user attention and enhance the visual experience.
Button interaction animation: Add hover and click effects to all function buttons so that users can get timely visual feedback when operating.
The goal of these animation effects is to provide a coherent and smooth browsing experience, making the application interface more vivid and modern, while helping users quickly understand and complete tasks.
High-fidelity prototype and integration
After completing the animation design, I integrated these effects into the Figma Hi-Fi fidelity wireframe to ensure that the animation is fully integrated with the overall design logic of the application. The high-fidelity prototype not only shows the visual design of the application, but also intuitively reflects the interactive relationship between all elements. This process allows me to observe the actual effect and overall coordination of the animation, thereby further optimizing the user's operation path and the smoothness of the application.
Figma's high-fidelity prototype also provides an intuitive reference point for team collaboration, allowing developers and designers to communicate and adjust the design more efficiently. At this stage, the prototype showed the following:
Dynamic transition effects when switching pages;
Visual feedback of function buttons;
Animation loading methods of search, billing and other modules;
Expansion and interactive experience of menus and sidebars.
Update of flowchart and master plan
In order to ensure that each stage of development is closely connected, I fully updated the flowchart and master plan.
Update of flowchart:
I readjusted and optimized the logical flow of user operations and clearly planned the presentation of new animations and page transitions. This improvement makes the user path more intuitive and ensures that all new designs are logically coherent in actual use.
Update of master plan:
In the master plan, I recorded the overall structure and layout of the application in detail, including changes made to support new animations and design elements. For example:
Layout adjustments between page modules to adapt to dynamic effects;
Design logic of animation trigger conditions;
Connection and interaction methods between components.
This process helped me track the development progress more systematically in project management and ensure that all parts of the application can work together.
Improvement of user experience
By designing and implementing these animation effects, the functionality and usability of the operator application have been significantly improved. Animation not only optimizes the visual experience, but also improves the user's operating efficiency in many aspects:
Intuitive page interaction: The introduction of animation makes the interface clearer and easier to understand, helping users quickly understand the operation path. For example, in the package switching module, the dynamic effect of sliding cards makes the user's selection process simpler and more intuitive.
Improving user satisfaction: Smooth page switching and soft content presentation reduce the user's visual pressure, and the overall operating experience is more pleasant.
Modern application image: Animation effects make the application look more technological, which meets the user's aesthetic and functional expectations of modern applications.
Overall progress and gains of the project
Through the advancement of Task 3, I not only completed the main animation design and function integration of the operator's application, but also further strengthened my ability in Web development and user experience design. This process made me deeply realize the importance of animation design in improving user interaction and optimizing application functions, and also made me realize that there needs to be a high degree of coordination between design logic and technical implementation.
This project also taught me how to flexibly adjust the plan during the development process, and communicate efficiently through tools such as high-fidelity prototypes and flowcharts to ensure that the design concept can be fully implemented. By carefully polishing every detail, I finally delivered a smooth, modern and user-friendly operator application, which brought a good experience to users.
Comments
Post a Comment