Application Design II | Task 2 ：App Animations Prototype
Feng weijie | 0349058
Application Design II | B' in Creative Media
03.04.2023 -28.6.2023 (Week 14 -Week 1)
.jpg)
- Create a prototype that presents all the animations the final app should have
I first constructed the application flow, from the startup screen to the functionality of "booking hotels." In the initiation of the interactive design process, I established a clear application flow, outlining the user journey from the startup screen, through login, to the homepage, and various functionalities like "touring hotels." This initial phase primarily focused on building overall animations and defining key actions and transitions within the entire application.
By concentrating on overall animations, my goal was to create a compelling visual experience that seamlessly guided users from one page to another. This involved determining how different screens enter and exit views, as well as identifying crucial moments when significant changes occur in the application interface.
At this stage, I carefully considered the overall user flow and made sure that the animations for each page remained consistent with the purpose and functionality of the application. Therefore, my final design decision was to maintain a clear and concise transition style, yet with enough dynamism to prevent the entire screen from feeling too static. I laid the foundation for a cohesive and intuitive user experience by illustrating key actions on the screen.
Summary of the key points of the above information:
Establish application processes
Create impactful visual experiences
Cohesive and intuitive user experience
Summary of the main process
1. Startup Screen + Login
1. Startup Screen + Login
Display the startup screen when the application is launched.
Users can log in.
2. Homepage + Search Query
Enter the homepage, which may include elements like a navigation bar, image browsing, etc.
Users can input text in the search bar for queries.
Browse search results, featuring typing effects, and click on interesting boxes to change colors.
3. Hotel Booking
Select a hotel of interest from search results.
Click on "Book" to navigate to the ordering interface.
4. Viewing
In the ordering interface, there might be a swipe-right interaction.
Users can view orders or related information.
5. Outline
After completing all ordering steps, observe a fading animation as content gradually moves away.
This summary covers the application's startup and user login, browsing and searching on the homepage, the hotel booking process, and viewing orders.
Users can view orders or related information.
5. Outline
After completing all ordering steps, observe a fading animation as content gradually moves away.
This summary covers the application's startup and user login, browsing and searching on the homepage, the hotel booking process, and viewing orders.
#Startup Screen + Login Process
Figure 1.1 Splash Screen + Login Flow, Overall Plan
Figure 1.2 Splash screen + login flow, storyboard
As the user enters the page, the backpack logo will gradually appear with a captivating pre-set animation. Initially, the backpack will bounce and rotate, while the surrounding circles will rotate and undergo alternating color changes. This sequence will continue in a loop until completion, seamlessly transitioning the user to the login page.
Figure 1.3 Home's master plan
Figure 1.4 Home's storyboard
Welcome to the homepage, where the bottom navigation bar smoothly emerges from the bottom of the screen, seamlessly transitioning to the login page. All content will gracefully dissolve and appear on the screen. You can navigate through recommended landscapes by swiping through images and scrolling down to explore other suggested scenes. This interactive design aims to provide you with a smooth and enjoyable browsing experience.
# Search query flow
Figure 1.5 Search query flow
In the homepage's search section, when you input text into the search bar, the keyboard fades in. You can click on the search section of interest, and the text will change color, accompanied by visual feedback upon clicking. After completing the search, the page will automatically navigate to the relevant content.
Figure 1.7 Hotel booking flow
Upon entering the hotel details page, you will find "Hotel Images" and related information, including the hotel's star rating and pricing details. Subsequently, the "Reviews" panel will slide up from the bottom, showcasing the latest comments about the hotel. Clicking the "Book Now" button seamlessly navigates to the corresponding booking interface, and by dragging the panel upwards, you can expand and explore more content.
# Interactive Design Planning Compilation
Figure 1.8 Interaction Design Planning
Figure 1.9 Interaction Design Planning
# Interaction Design Planning presentation video
In summary, my design consists of five main sections, each showcasing its features and functionality through multiple pages. Firstly, the loading animation and login page guide users into the app. Secondly, the main page displays curated images of tourist destinations worldwide, allowing users to explore more by swiping and to bookmark places of interest. The third part is the search bar, providing a convenient way to search for destinations through buttons or text input. The fourth part involves hotel booking and payment, with seven pages designed for users to view hotel details, reviews, and complete a straightforward booking and payment process. Finally, the fifth part is the user account, where users can manage their bookmarked content and view order history. The overall design aims to provide users with an intuitive, enjoyable, and efficient travel app experience.
# Interaction design planning figma
Rethink
Engaging in the design of the same module once again has allowed me to witness a significant improvement in my design skills. This progress extends beyond just an enhancement of design knowledge; it also reflects a more advanced level of creativity. The entire journey of interactive design planning and the creation of micro-interaction prototypes has been both enjoyable and profoundly inspiring. This experience is not merely about completing a project; it's an opportunity to "reassess" my previous work.
Throughout this process, my proficiency in using Figma has deepened continuously. I am not only adept at applying the skills learned in the current Design 2 module but can also flexibly apply them to other modules. This cross-module application not only elevates my design proficiency but also establishes a solid foundation for my professional development.
A crucial takeaway is the importance of believing in oneself. Work is an iterative process, with each step building upon previous experiences and applications. By confidently embracing this journey, I can better manage anxiety and effectively tackle challenges. This experience marks a significant step in my growth journey and fuels my anticipation for future design endeavors.
.jpg)
Comments
Post a Comment