Application Design 2: Task 3
Interaction Component Design & Development ㅤ
Table of Contents
✿ Lectures
- Todo
- Setup and Configuration
- Animations
- Navigation Bar
- Onboarding
- Home Page
- Product Detail Page
- Cart Page
- Conclusion
- Final Submission & Web Deployment
Instructions
Find out other information about this module below
Module Information
Lectures
Week 8
➜ Flutterflow Map Testing
Today we referred to this link to learn how to add map API in Flutterflow. We used the
same file as our W6's file and worked on the project
on Google Cloud Console. Given that it was confusing, I only managed to learn
till the part where I have to add places. Although there's
a error message indicating that Google Maps could not load
properly, this tutorial helped us understand how to
connect map data using documents and task marker
functionality.
Generate Map Keys:
Flutterflow Document
Map Tutorial from
Flutterflow
Tutorial from Mr Razif:
Stream Link
Week 9
➜ Flutterflow Adding Reviews
I learnt how to add reviews on Flutterflow in today's
class. To refer back to recording ,Youtube link.
Figure 2.1 Week 9 Recording
Week 10
➜ Add to Cart & Checkout Flow
Today we referred to this
link
to learn how to "add to cart" and "checkout". To refer
back to recording,
Youtube link.
Figure 2.2 Week 10 Recording
Task 3: Interaction Component Design & Development
Todo:
- Build actual interactive elements using HTML/CSS/JS
- Examples: pop-ups, side menus, transitions
- Submit working HTML file, walkthrough video, and e-portfolio post
Setup and Configuration
Firstly, I finalised the foundational
configuration for the Temu app under the app
details section in Flutterflow. The process
included Firebase intergration and theme
customization. I connected the app to Firebase
using the built-in Firebase Project Creator
and configuration tools. Besides that, I
adjusted the typography and colour scheme to
align with Temu's branding (orange).
Figure 3.1 App details settings in
Flutterflow
I’ve successfully completed the Firebase
setup for the Temu app, marking a crucial
milestone in backend integration. This
foundation enables key features such as user
authentication, real-time database
interactions, and cloud storage
capabilities.
Figure 3.2 Firebase Project Setup
Project name: App Design 2 Temu
Package name: com.noelle.temu
Entry page: SplashPage
Logged in page: HomePage
With Firebase now fully configured, I’m set
to move ahead with implementing user login
and organizing the app’s data structure. In
the coming weeks, I’ll focus on integrating
and testing core functionalities to ensure a
smooth and scalable user experience.
Figure 3.3 Firebase Authentication
I set up Firebase Authentication as
shown above in the screenshots. Only the
email/password sign-in method is
activated under the Firebase
Authentication settings. This requires
users to register and log in using their
email credentials.
I kept the setup simple for this MVP,
with only the email and password
required to sign in. Originally, there
is other sign-in methods and its'
buttons on my Figma wireframes. Firebase
also offers advanced sign-in options
like SMS Multi-Factor Authentication,
which can be enabled later if higher
security is required.
Animations
For the animations, I used Lottie Files
to animate my SVGs and then export them
as JSON to upload into Flutterflow. To
edit the SVG, I made sure to convert my
initial icons and designs from Figma
(PNG) to SVG, with a free converter
online.
If there is any edits needed, I will go
ahead and re-design in Adobe Illustrator
and export as SVG.
The animation interactions not only
enhance the visual appeal but also help
foster a more engaging experience for
users. Key screens like splash loading
screen, sign-in and sign-up, with
incorporated animated elements such as
transitions, bouncing icons, moving
icons, keeps user more entertained in a
playful way. I made sure to layer the
time sequence and applying custom ease
out effects as its' transitions, to make
each screen page feel intuitive and
smooth.
Figure 3.4 Lottie Animation Files
Figure 3.5 Figma SVG Icons
(Vectors)
I converted the PNG to SVG, and then
uploaded the SVG files into Fluttericon.com to convert them into the
compatible files for custom navigation
bar icons. I then imported these files
into the settings of Flutterflow.
Figure 3.6 Navigation Bar Custom Icons
Figure 3.7 Close Up of Navigation Bar
Icons
But, after some trial and error, I
realised there are a few limitations
and not much customisation allowed for
the navigation bar. For example, I
cannot find a way to change the size
of the navigation bar texts or icons,
or even change the indicator of
current page on, etc. Hence, I decided
to design my own navigation bar using
components.
Figure 3.8 Navigation Bar (Home)
Figure 3.9 Navigation Bar (Cart)
Onboarding
After setting up the general project
details, I went ahead and created 3 pages in
the onboarding folder. These 3 pages
include, Splash Page (Loading), Sign In
& Sign Up:
-
Splash Page (Loading)
After importing the animation from Lottie Files, I made sure this page is set as the entry page, and that it will automatically redirect to Sign In page after 3s delay.
Figure 3.10 Splash Page
-
Sign In Page (Login)
As usual, the animations are imported from Lottie File, and then I started designing this page to replicate my Figma wireframe designs. The Temu logo is an image, while the rest of the components are texts, containers and buttons. I learnt to make good use of the padding to make sure the components have enough white space in between.
Figure 3.11 Sign In Page
-
Sign Up Page
When designing this page, I had to learn how to make the animations stay put in one place in the mobile and web view. In the end, I made duplicates and arranged them according to the desired position on both mobile and web resolution, and then make sure to on/off "responsive" for the elements that are out of place. I think this is a great hack and made the process much easier rather than having to try different methods to make sure certain elements do not go out of position in different screen sizes.
Figure 3.12 Sign Up Page
Homepage
I connected Firestore to power the
product list. In Firebase, each product
document includes fields like name, price,
rating, and image URL. These were mirrored
in FLutterflow's schema under the products
collection.
Figure 3.13 Products Collection
For the page design, I replicated it based
on the design I did on Figma (Wireframes).
To keep navigation simple, I only included
one listing which is the Potato Couch. The
product listing is inside a container, once
tapped, it will trigger a navigation to the
Product Detail page, passing the product
reference as a parameter.
Figure 3.14 Flutterflow Homepage Screen
Product Detail Page
I successfully connected the Firebase
Firestore products collection to my
Flutterflow project. I created the
necessary field in Flutterflow and
Firebase, including name, image, price,
rating, and so on, ensuring consistent
schema mapping.
Figure 3.15 Backend Query
On the product detail page, users can
adjust the quantity and also add item to
cart. After triggering the "Add to Cart"
button, it will redirect to the cart
page. I also created the bottom bar as a
component and added it into the main
page into a container.
Figure 3.16 Bottom bar
Figure 3.17 Add to cart button actions
Figure 3.18 Flutterflow Product
Detail Screen
Cart Page
After adding product to cart , or
pressing the cart button on the
navigation bar on the
homepage, it will be redirected to this page. I
added the backend query I have created
on both Flutterflow and Firebase.
Besides that, I started focusing on
designing the navigation bar as a
component and making sure the design
aligns with my Figma wireframes.
Figure 3.19 Backend Query
Figure 3.20 Navigation Bar
Component
Figure 3.21 Flutterflow Cart
Screen
Conclusion
To conclude what I have done for
Task 3 in Flutterflow, I have done
the onboarding, home page, product
detail page, cart page. The next
screens to complete during Task 4
are the checkout pages and fixing
the overall backend query. Below
writes the breakdown of my
development progress.
✅ What has been done:
- Loading Page (Splash)
- Sign In & Sign Up
- Homepage
- Product detail page
- Cart page
- Custom navigation bar, page transitions (macroanimations), elements (microanimations)
⏭️ What to do next:
- Checkout pages
- Paying page
- Fixing the overall backend query
This will make sure all
features are included in
Flutterflow and a complete MVP
end-to-end shopping experience
with Temu.
Final Submission & Web Deployment
Web URL Link:
Temu App (Web Version or Iphone 15 Pro
Max)
Walkthrough Video:
Google Drive
Presentation Video:
Google Drive
Figure 3.22 Walkthrough Video
Figure 3.23 Presentation Video
Reflection
In this task, it was challenging as I had
to move ahead from thinking and
brainstorming static designs, to planning
the interaction. It was really helpful
that Mr. Razif shared a few senior works
and examples of his own to get me started.
I learned that proper planning is the
smoothest way to progressively complete
the tasks to complete. For example, I
thought going straight to editing the
wireframes on Figma with animations is a
great idea, but I end up making alot of
changes after completing the user
flowchart and prototype storyboard.
Hence, I did learnt that proper plan and
flow is very important and plays a crucial
role in interaction planning. Besides
that, I managed to learn the use of
components and how to user prototype
interactions to smoothy make transitions
that can improve user experience. I also
did alot of research on mobile
applications to know what is great and
what is not in the UI design of e-commerce
apps, like Shopee, Lazada, Taobao, and so
on.
Overall, I learnt alot from completing
this assignment, and it is a great start
to continue onto my Task 3 which is to
actually make this into a working
interface.