Task 3: Interactive Component Design and Development
9/6/2024 - 30/6/2024 / Week 8 - Week 11
Tee Jia Ern / 0348512
Application Design 2 / Bachelor of Design in Creative Media
Task 3: Interactive Component Design and Development
LECTURES
Week 8We learned about how to create a simple login, register and home page. Connecting the button interactions to navigate through pages. I added some decorative elements to make the login screen more appealing.
Mr Razif introduced us to display details of a product through fire store and query collection. This is useful for various e-commerce platforms, especially when the user is browsing through products. 
The viewer is introduced to a auto play carousel displaying the promotional banners available. The home screen features vertical scrolling that reveals different categories and products. Icons and product listings are displayed in a horizontal carousel, which users can manually swipe through.
Fig 1.1: FlutterFlow Workspace
Fig 1.2: FlutterFlow Prototype
Week 10
Fig 1.3: Product List
Fig 1.4: Product Description 1
Fig 1.5: Product Description 2
Fig 1.6: Product Description 3
INSTRUCTIONS
1. Splash Screen
I animated the splash screen on the previous prototype platform which is Figma with the built in object smart animate. I then turn the screen recording to GIF and uploaded to Flutterflow.
I chose to design the apostrophe in the Lotus's logo to resemble the shape of a lotus flower, gradually transitioning into an apostrophe. This creates a visual link between the brand name and the symbolic lotus flower.
Fig 1.7: Splash Screen Animation
2. Onboarding Page
I added a page view widget to have a nice seamless horizontal scrolling effect. There are a total of 3 pages each with it's own image, heading and body text. I added a circle arrow button as ChatGPT suggested to be consistent with the call to action button on the 3rd page which the end of the page view. The page view widget also came with animated progress indicator dots which is helpful.
Fig 2.1: Flutterflow Pages
Fig 2.2: Onboarding Page Flutterflow Widget
Fig 2.2: Onboarding Page Animation
3. Login
I wanted to apply page transition throughout my design based on the task 2. I added a slide up page transition in the login screen. I haven't apply page transitions to most of the pages so it'll have to wait for the next task. The text fields also have label text on the top when you click into it. The border changes colour based on which text field the user clicks into.
Fig 3.1: Login Page Flutterflow
Fig 3.2: Login Page Animation
4. Home
Fig 4.1: Home Flutterflow
Fig 4.2: Home Animation
5. Search
After clicking on the text field, the search screen which includes history and available products which are suggestions by ChatGPT in Task 1. There are some staggered animation with the history list, along with a keyboard popping up from below the screen.
Fig 5.1: Search Flutterflow
Fig 5.2: Search Animation
Upon clicking on the keyboard, the text field will appear a preset product category name, followed by suggestion list with matching keywords, animated in a staggered way.
Fig 5.3: Search After Typing Flutterflow
Fig 5.4: Search After Typing Animation
6. Search Feed
Selecting the chosen product will lead to the search feed. Upon entering the page, the filter tags appear from the right side while the product grid has a staggered animation.
Fig 6.1: Search Feed Flutterflow
Fig 6.2: Search Feed Animation
7. Product Description
Choosing a product will direct the user to the product description. It has a fade in page transition. As the page loads, the filter tags slide in from the right side. When the add to cart button is clicked, a circular cart icon appears and moves toward the top right corner, updating to display the item quantity and total cart price.
Fig 7.1: Product Description Flutterflow
Fig 7.2: Product Description Animation
8. Cart
When the user has clicked on the top right cart button, they will be lead to the cart section of the app. A sticky footer appears with the price and a CTA button to checkout. After clicking on the button, the footer goes down and the screen darkens, along with a new checkout footer sliding in from the bottom. There are also staggered effects to the checkout list of options.
Fig 8.1: Cart Flutterflow
Fig 8.2: Cart Animation
9. Order Confirmation
There is a slide down page transition applied to the order confirmation but the recording does not record it. A grocery bag drops down from the top of the screen, and a checkmark appears at the bottom right corner of the bag, rotating and enlarging as it settles into place.
Fig 9.1: Order Confirmation
Fig 9.2: Order Confirmation Animation
10. Order Tracking
A white box and text appear sequentially. Upon clicking the expand-linked text, an order progress bar is revealed. The progress bar animates with a green color, starting from the first circle, moving along the connecting line, and filling in the next circle. The progress bar is animated on Figma and converted into Lottiefiles, when the feature was still available from online website. I think it has been taken down already.
Fig 10.1: Order Tracking Flutterflow
Fig 10.2: Order Tracking Progress Bar Flutterflow
Fig 10.3: Order Tracking Animation
Final Submission
(View in 390x844)
Hard refresh before accessing the link! Or open incognito tab.
(The link remembers the cache from previous open version and won't update new changes)
(The splash screen sometimes lag)
Windows/Linux:
Hold down the Ctrl key and press F5.
Alternatively, hold down Ctrl + Shift and press R.
Mac:
Hold down the Cmd + Shift keys and press R.
Alternatively, some browsers allow you to hold down the Shift key and click the Reload button.
Flutterflow Web Link: https://lotus-teejiaern2.flutterflow.app/
Video Walkthrough
FEEDBACK
Week 11General Feedback: When opening a web Flutterflow, use the Inspect > Toggle device toolbar > Dimensions: Responsive
Specific Feedback: The background colour of web Flutterflow depends on the browser.
REFLECTION
Experience: I gained an understanding of containers, rows, columns, and stacks. These are the foundation of Flutterflow and sets the base of other widget such as image and icons. From the lessons I also learned about setting up fire store and query collection to create a unified design of product details. I will explore this further in the next project.
Observations: The app bar disappears in the web deployment, causing issues with padding. Since I deployed the site quite late, I do not have time to fix it currently. It would be resolved in the following project.
Findings: Huge respect to app designers for creating a seamless app design. I will never take for granted for the social media apps and the various restaurant apps that I use on a daily basis.
Comments
Post a Comment