APPLICATION DESIGN 1 - TASK 3


23/10/2024-14/10/2024 (Week 01-14)

Chan Suet Yee 0358427

Bachelor of Design (Honours) in Creative Media

Application Design 1 | DST60504 | Class 01 Sec 01

Task 3 | Lofi App Design Prototype


 LIST 

TABLE OF CONTENTS:

1. INSTRUCTIONS

2. PROJECT 03

3. SUBMISSION

4. FEEDBACK


 INSTRUCTIONS 



 PROJECT 3 

Low Fidelity App Design Prototype 

 UI Toolkit 

I started by making a design system using a Figma community file. I chose Poppins as the font and used Senheng’s brand colors with some neutral tones. For the icons, I used Iconify, a tool in Figma’s plugins and widgets, which has many great styles to pick from.

Link to Figma File 





 User Scenarios 

Next, I worked on creating the 3 main scenarios my users are likely to experience: registering and logging in, browsing products, and purchasing a product. I then decided which screens to design based on these scenarios.





 Research & Inspiration  

I started by browsing Pinterest to get ideas for the new design. I looked for simple and user-friendly layouts that could improve the Senheng app. This helped me imagine how I wanted the app to look and work. 


Fig1.0 Visual References



Fig1.1 Visual References



 Sketching The Wireframe 

After getting some ideas, I sketched a wireframe on paper. This included the layout of the pages, buttons, and menus. The sketch gave me a clear plan before starting the digital design.


Fig 1.2 Sketches



 Designing in Figma 

Next, I used Figma to create the design based on my sketches. I added all the elements, like buttons, text, and images, and arranged them neatly. I made sure the layout looked clean and easy to use.

Link to Figma : 


Fig1.3 Prototyping in Figma



 Making the Design Interactive 

Once the design was done, I learned how to add interactive features, like scrolling and typing fields, by watching tutorial videos on YouTube. I applied what I learned to make the prototype feel more real and functional.


Fig1.4 Horizontal and Vertical Scroll in Figma Tutorial



Fig1.5 Swipe to Delete Tutorial



Fig1.6 Input Field Tutorial


Below are the components I've created after watching all the tutorial videos.


Fig1.7 Prototyping in Figma



 Testing the Flow 

After adding all the buttons and interactions, I tested the prototype. I clicked through the buttons to check if they linked to the right pages and fixed any mistakes I found.


Fig1.8 Prototyping in Figma



Finally, I reviewed the entire prototype to ensure everything worked smoothly and looked good. This process helped me create a simple and user-friendly app design for the Senheng app.


 SUBMISSION 



 User Testing & Feedbacks 




Lofi Prototype Video Walkthrough





 FEEDBACK 

  • Need to put the icon for the battery, wifi etc.. 
  • For the bottom navigation bar, should have description under the icon, cannot just put icon only.






Comments

Post a Comment

Popular posts from this blog

GAMES DEVELOPEMNT - TASKS

Image
23/04/2025 -21/05/2025 (Week 01-14) Chan Suet Yee 0358427 Bachelor of Design (Honours) in Creative Media Games Development  | DST611104 | Sec 01  LIST  TABLE OF CONTENTS: 1. INSTRUCTIONS 2. TASKS   INSTRUCTIONS   TASKS  TASK 01 & 02 : GAMES DESIGN DOCUMENT & GAME ASSETS  TASK 01  For  Task 1  of our Game Development module, our group was formed during  Week 2 . I teamed up with  Mei Hui  and  Emily , and together, we began brainstorming ideas for our 2D side-scrolling game. After some discussion, we decided to draw inspiration from a tabletop game we previously created in one of our past semester projects, titled  "Sudsprite Spin."  We felt that the characters and gameplay mechanics from that game had potential to be developed into a fun and whimsical digital experience. In our 2D game adaptation, the  Sudsprite  becomes the main character. We wanted to preserve the bubbly, playful the...
Read more

APPLICATION DESIGN 2 - TASK 2

Image
19/05/2025 -08/06/2025 (Week 05-07) Chan Suet Yee 0358427 Bachelor of Design (Honours) in Creative Media Application Design II | DST60504 | Sec 01 Task 02 | Interaction Design Proposal & Planning  LIST  TABLE OF CONTENTS: 1. INSTRUCTIONS 2. TASKS 3.REFLECTION   INSTRUCTIONS   TASKS  INSTRUCTIONS For this assignment, we are required to develop a  comprehensive interaction design plan  for our final  web-based mobile application . The goal is to  visually and conceptually prepare the user interactions and animations  that will enhance the overall user experience. The key components of the assignment include: 1. Interaction Design Documents Create  detailed flowcharts and wireframes  to map out the user journey. Clearly show the  layout of each screen  and the  navigation structure  of the app. 2. Animation Prototyping Micro Animations : Design small interactive effects (e.g., button clicks, loading in...
Read more

ADVANCED INTERACTIVE DESIGN - TASK 02

Image
23/05/2025-13/06/2025 (Week 05-08) Chan Suet Yee 0358427 Bachelor of Design (Honours) in Creative Media Advanced Interactive Design | DST60804 | Sec 02 Task 2 | Interactive Design Planning & Prototype  LIST  TABLE OF CONTENTS: 1. INSTRUCTIONS 2. EXERCISES 3. TASKS 4. REFLECTION   INSTRUCTIONS    EXERCISES  WEEK 5 - BOUNCING BALL ANIMATION In Week 5, we learned how to create a simple bouncing ball animation using Adobe Animate. The first step was to draw the ball using the  Oval Tool  and turn it into a  symbol . After that, we used the  Pencil Tool  to draw a curved path showing how the ball would bounce. Next, we added  keyframes  at the starting and ending points of the path. Then, we applied a  motion tween  so the ball would follow the path smoothly. To make the animation more realistic, we slightly adjusted the  speed and motion  using easing. This exercise helped me understand how keyframes an...
Read more