24.10.2023 - 12.11.2023 / Week 9 - Week 11
Yung Siew Weng / 0339847
Application Design II /
Bachelor of Design (Hons) in Creative Media
Task 2 / Micro-interactions and Micro interaction Prototype
Application Design II - Task 2 : Micro-interactions and Micro interaction Prototype
INSTRUCTION
Create micro-interactions and animations for the final app. Explore and determine additional interactions for the designed app by developing a master plan and storyboard. Create a video presentation to showcase and explain these design choices.
EXPLORATION
Continuing from Task 1 : Self Evaluation & Reflection, we were directed to delve into the micro-interaction design flow for our application. Before embarking on constructing the flow, we were given the chance to consult with Mr. Razif concerning the final app's working screen. Due to time constraints, we were mandated to trim down and eliminate unnecessary components of the application to optimise our development efforts for the final app coding phase.
Feedback @ Week 10 / 31.10.2023
1. Enhance the preloading animation to make it more interactive.
2. Integrate "now showing" and "coming soon" on the home page without using a toggle effect to allow for seamless scrolling.
3. Feature only one movie in the movie info section, ensuring it is highlighted with a carousel poster and is the first movie in all categories.
4. Adjust the functionality of the "KECIL" button and move the image placement under the showtime section.
5. Display a visual cue for the "ticket type" to immediately convey that it is for children aged 12 years and under, eliminating the need for users to click and check.
6. Remove the virtual ticket sharing and concession sections from the app interface.
Following the consultation, I reorganised the remaining working screens before advancing to the development phase.
#Remained Main Working Screen
- Preloading Animation
- Home
- Movie
- Profile
Fig 1.1 Remaining Working Screen
#App Mapping Flow Amendment
Despite our primary focus on developing a masterplan and storyboard for the working screen, I opted to experiment with Figma animations to assess the feasibility of bringing my imaginative concepts to life and facilitating the presentation process. In the course of this exploration, I made adjustments to certain interaction flows, deeming some as essential and others as unnecessary. Some revised mapping flow that I introduced during this process would highlighted below :
#Search Queries Input Field
Fig 1.2 Search Queries Input Field
Following the removal of the toggle effect for "now showing" and "coming soon" under the home page, I perceived a decrease in interactive animations. To address this, I incorporated a mapping flow for the "search queries input field". Upon clicking the search bar, users are directed to a pop-out page where the input field is positioned slightly higher. A visual text indicator blinks, serving as a cue for users to input their queries. Once the input field is filled, an auto-suggestion system generates potential movie titles, presenting users with a list of options based on their input.
#Movie Showtime
Fig 1.3 Movie Showtime
After incorporating feedback from Mr. Razif, I implemented the suggestion to relocate the image placement under the list of showtimes. Following these amendments, I am confident that the adjustments have significantly enhanced the overall user experience compared to the previous version. Notably, I opted for a darker color scheme in the background, deviating from the original gradient type. This decision was driven by the belief that a darker hue is more aligned with the cinema theme and introduces a higher level of contrast.
#Seat Selection
Fig 1.4 Seat Selection
In the seat selection section, I applied the same colour scheme amendment as in the #Movie Showtime, opting for a darker colour scheme to improve consistency across the interface. In comparison to the previous design, I observed that the seat buttons appeared relatively small and less user-friendly for a mobile application. To address this, I decided to increase the size of the seat buttons while maintaining a consistent shape throughout the design. Additionally, I enhanced the visual representation of the cinema screen by employing lines and filter effects in Figma to create a more realistic sense of lighting within the cinema environment.
#Check Out Flow
Fig 1.4 Check Out Flow
The original checkout flow appeared lengthy, considering the inclusion of concessions, promotional codes, and the utilisation of the All Star Rewards (MBO's membership). However, upon reflection, I have reconsidered the user experience and made some refinements. Specifically, I felt that the system should automatically detecting and applying membership promotions without requiring members to manually apply vouchers.
Furthermore, drawing from my past experience at TGV, where staff often inquired about preferred drinks on the spot despite confirmation in the app, so I decide to skip the drink selection flow in my final app development to streamline the checkout process and align it more closely with typical user expectations and real-world scenarios in cinema settings.
<!-- End of #App Mapping Flow Amendment -->
#Interaction Design Planning
Fig 1.5 Overall View of app "MBO Cinemas" Flow Mapping
#Summary of Main Flow
- Splash Screen + Sign In
- Home + Search Queries
- Ticket Booking
- Check Out
- Profile
#Splash Screen + Sign In Flow
Fig 1.6 Splash Screen + Sign In Flow, Masterplan
Fig 1.7 Splash Screen + Sign In Flow, Storyboard
Upon entering the application, a dynamic preloading animation engages, showcasing an ease-out effect on the letters "M, B, O" in the MBO logo. Then, a cinema sofa playfully bounces from the top, settling into position next to the logo, accompanied by a fade-out of the shadow and popcorn elements. Upon completion, the user is seamlessly transitioned to the sign-in page, marked by a smooth fade-in. As the page loads, all contents in the sign-in page appear. Interaction with the "input field" triggers a scaling effect, along with an active coloured border and a blinking text indicator when was clicked, serving as a visual cue for user interaction. Similarly, clicking the "password input field" reveals a toggle visibility icon. When "sign in" button is clicked, the page exit by fading out.
#Home + Search Queries Flow
Fig 1.8 Home + Search Queries, Masterplan
Fig 1.9 Home, Storyboard
Fig 1.10 Search Queries, Storyboard
Upon entering the home page, the bottom navigation bar smoothly pops up from below, transitioning seamlessly from the sign-in page. All contents gracefully dissolve and appear on the screen. Within the page, interacting with the profile picture will scales up the image, and clicking "filter genre" prompts a scaling effect with a border colour change upon pressing. The carousel content responds to dragging by sliding right or left, accompanied by a visual cue change in the carousel dot. Pressing "now showing" and "coming soon" contents scales them up, and selecting "see all" navigates to the corresponding page with a scaled-up element. Upon exit, the page either fades out to transition to the search queries page or dissolves in to other pages.
In the search queries section on the home page, the search bar smoothly repositions higher with a fading effect, while the keypad fades in. Continuous blinking of the text indicator provides a visual cue. During input, a dissolve effect reveals a "cross" icon, and auto-suggestions gracefully appear with a fading effect, sliding down from below the search bar. Exiting the page sees a fade-out, and the search bar returns to its lower position on the home page with a fading effect.
#Ticket Booking : Movie Page Flow
Fig 1.11 Movie Page Flow, Masterplan
Fig 1.12 Movie Page Flow, Storyboard
Upon entering the movie page, the bottom navigation bar's active tab slides to the "movie" tab. Then, the "Now Showing" and "Coming Soon" sections gently slide down, creating a smooth entrance. All contents seamlessly dissolve and appeared on the screen. Within the page, user interactions are thoughtfully designed: clicking on "movie content" triggers a scaling-up effect for the content, pressing the "favourite" icon results in the icon filling in red to provide a clear visual feedback. Toggling between "now showing" and "coming soon" slides the content right or left, complemented by a dissolve effect. Upon exiting the page, a fade-out effect ensures a pleasing departure to the following page.
#Ticket Booking : Movie Info Flow
Fig 1.13 Movie Info Flow, Masterplan
Fig 1.14 Movie Info Flow, Storyboard
Upon entering the movie details page, the "movie trailer" contents fade in on the screen. Then, the "movie info" panel will slides up from the bottom, showing detailed movie information. Within the page, user interactions are intuitively designed: clicking the "play" button seamlessly navigates the user to the corresponding movie trailer, dragging "movie info" panel upward expands the content; while dragging it down minimises the information for user convenience. Also, clicking "read less" triggers a playful bounce-up effect, minimising the "movie synopsis" content. Conversely, clicking "read all" initiates a bounce-down effect, expanding the "movie synopsis" content for a more in-depth view. Upon exiting the page, a dissolve effect occurs when the user clicks "showtime," ensuring a smooth transition.
#Ticket Booking : Movie Showtime Flow
Fig 1.15 Movie Showtime Flow, Masterplan
Fig 1.16 Movie Showtime Flow, Storyboard
Upon entering the showtime page, a background fill featuring the MBO logo fades in. The "Movie covers" draggable contents slide down from the top. Then, the "Showtime" panel smoothly slides up from the bottom, continue with the contents within the "showtime" panel dissolve. Notably, the "Location icon" undergoes a subtle shrinking effect, coinciding with the fade-out of the location name for a cohesive visual experience.
Within the page, user interactions are carefully designed for a seamless experience. Dragging the "movie cover" initiates a corresponding slide of the "movie showtime content" right or left, complemented by a visual cue in the form of the carousel dot changing accordingly. Clicking on the "date" introduces a fade-in effect, displaying the "showtime" for the corresponding date. The "showtime" panel's versatility is evident as dragging it upward expands the content, while dragging it down minimizes the information. For "KECIL HALL", dragging the "image" triggers a slide effect, accompanied by the visual cue of the carousel dot changing accordingly. Clicking the "buy" button offers a visual cue of the button scaling up while being pressed and triggers a fade-out effect to exit the page.
#Ticket Booking : Seat Selection Flow
Fig 1.17 Seat Selection Flow, Masterplan
Fig 1.18 Seat Selection Flow, Storyboard
Upon entering the seat selection confirmation page, a curved line representing cinema screen materialises onto the screen. A stunning lighting effect gradually fades in, enhancing the overall cinematic ambiance. All contents seamlessly dissolve and appear after. Next, the "Seat Selection Confirmation" panel slides up from the bottom.
Within the page, user interactions are designed for clarity and feedback. Clicking on "Preference Seat" instantly triggers a visual transformation, changing its color and icon to provide clear feedback to the user. This action also prompts the "Seat Selection Confirmation" panel and the "Continue" button to fade in, ensuring a smooth and visually appealing experience.
Upon exiting the page, clicking "Continue" initiates a dissolve effect, seamlessly transitioning to the next page. The "Continue" button then smoothly repositions itself to the same position on the subsequent page, maintaining a sense of continuity and visual flow.
#Check Out Flow
Fig 1.19 Check Out Flow, Masterplan
Fig 1.20 Check Out Flow - "Ticket Type", Storyboard
As enter in the "Ticket Type" page, the "Continue" button maintains its position from the previous page, and all contents dissolve onto the screen. Within the page, clicking the "+" or "-" button dynamically adjusts the variables for the three tickets, with a visual cue of the button scaling up when pressed. Upon exit, the page fades when clicking "continue."
Fig 1.21 Check Out Flow - "Add On", Storyboard
Moving to the "Add-On" page, upon entry, the "Continue" button smoothly repositions itself to the same position and all contents dissolve and appear on the screen. Similar to Ticket Type, clicking the "+" or "-" button triggers a visual cue with the button scaling up and the page dissolves on exit when clicking "continue."
Fig 1.22 Check Out Flow - "Order Summary", Storyboard
In the "Order Summary" page, as enters, the “proceed payment” button updates its text to reflect the current state or information. The "movie information" smoothly slides from left to right, and all contents fade in on the screen. Within the page, the "Proceed Payment" button’s fill color changes when pressed. Upon exit, the page dissolves when clicking "proceed payment."
Fig 1.23 Check Out Flow - "Payment", Storyboard
When entering to the "Payment" page, the total payment amount and order ID shrink and slide up, and all contents fade in on the screen. While in the page, clicking preferable "Payment Method" navigates to the merchant site, and upon completing the transaction, a loading animation runs. On exit, the virtual ticket fades in on the screen.
#Profile Page Flow
Fig 1.24 Profile Page Flow, Masterplan
Fig 1.25 Profile Page Flow, Storyboard
Upon entering the profile page, the bottom navigation bar's active tab slides to the "profile" tab, indicating the user's current active page. The "Membership Card" slides from the right and all contents seamlessly dissolve and appeared on the screen. Within the page, user interactions are designed for a simple and intuitive experience. Clicking the “QR code” icon triggers a scaling-up effect, providing visual feedback and enhancing the user's engagement with the element. Upon exiting the page, a dissolve effect occurs, creating a smooth and visually pleasing transition.
<!-- End of #Interaction Design Planning Detailed Explanation -->
#Animating & Interaction
Fig 1.26 Prototype's Interaction, Figma
Fig 1.27 Interaction Design Prototype , Figma
//Figma Link : here //
#Interaction Design Planning Outcome Compilation
Fig 1.28 Interaction Design Planning
Fig 1.29 Interaction Design Planning, FigJam
//Figma Link : here //
Fig 1.30 Micro-interactions and Micro interaction Prototype, Video Presentation
FEEDBACK
Week 10 / 31.10.2023 @ Working Screen Consultation
1. Enhance the preloading animation to make it more interactive.
2. Integrate "now showing" and "coming soon" on the home page without using a toggle effect to allow for seamless scrolling.
3. Feature only one movie in the movie info section, ensuring it is highlighted with a carousel poster and is the first movie in all categories.
4. Adjust the functionality of the "KECIL" button and move the image placement under the showtime section.
5. Display a visual cue for the "ticket type" to immediately convey that it is for children aged 12 years and under, eliminating the need for users to click and check.
6. Remove the virtual ticket sharing and concession sections from the app interface.
REFLECTION
The journey of interaction design planning and creating the micro-interaction prototype proved to be both interesting and enlightening, offering opportunities for me to self-evaluation "again" of my past work. Reflecting on my growth over the past semester, I've observed improvements in my design knowledge and a more advanced sense of creativity compared to the last semester. For instance, my choice of the "teal green" colour scheme for MBO Cinemas last semester lacked exploration into various shades for enhanced contrast and cinematic feel. The task of integrating features like "add-on, concession, All-Star reward, promo code" in the previous flow felt overly complicated. In fact, the realisation struck me: why not assume the system automatically provides a "member price" upon checkout? This revelation made me question my previous approach.
The most challenging aspect of this assignment was the video presentation. Despite facing challenges such as a sore throat during the recording process, I anticipated potential sound issues the next day, so I hurriedly recorded before bed. Unfortunately, during the editing process, I discovered that the latter half of my video lacked visuals as it got stuck. Recording again was physically demanding, so I had to use the original audio as a voiceover and re-record the visual part. Aside from the challenge, it was glad to say that I had finally completed the task! 🎉😭
Comments
Post a Comment