Labels

Application Design II/ Task 2 Interaction Design Proposal and Planning

23/10/2024 - 12/11/2024 / Week 5 - Week 8
Janice Marie Eng Chia Hui /0361521
Application Design II/Bachelor of Design in Creative Media / Taylor's University 
Application Design II: Task 2 Interaction Design Proposal and Planning

Table of Contents:

Instructions


Lectures

Week 5:
Micro interaction: 
  • Animation of smaller elements
Marco interaction: 
  • animation of a larger interaction
Class Activity
This week we were taught how to make component sets in Figma as well as how to animate things. 

Figure 1.1 Outcome of class activity (26/10/24)

Task

To-Do List:
  • Develop a comprehensive interaction design plan
  • Include detailed wireframes
  • User flow diagrams
  • Prototype both micro and macro interactions

Amendments to the prototype


Selangor Image
Since the image I was using before did not properly convey Selangor, I decided to google places to visit in Selangor and picked out images from there. I eventually settled on an image of Sunway city and dimmed it out before placing it in the prototype.

Figure 2.1 Image of Sunway City taken from this website (26/10/24)
 
Sign Up Page
Since Sir mentioned that the IC was unnecessary, I asked SSP helpdesk to figure out what the IC number information was for. 

Figure 2.2 Response I gotten back from SSP helpdesk (26/10/24)

Ya this info doesn't really answer any of my questions. I think I should have asked if it's required to provide our IC number instead. 

But anyway, I decided to just remove the IC number option and phone number (cause I think that email is enough). I added a re-enter password text field as per Sir's request. 

Figure 2.3 Final Outcome of redesign based on feedback given (26/10/24)

Interaction Design Document

Main issues with the old SSP design:
  • Confusing User Flow
  • Unlabeled icons make it hard to understand icon functions
  • The unintuitive design makes it hard for new users or less tech-savvy users to learn how to use the app
Hence the macro and micro interactions will be more focused on:
  • Feedback: To help provide users with relevant information so that they know they are on the right path.
  • Rule: To ensure that users can browse through the app without needing to learn and remember new symbols or elements 
This would include providing colour changes or highlighting elements that are done. Additionally, the interactions have to follow what users are used too as well. So lets get into it. 

Flowchart & Masterplan

1. Flow chart

I'm not too sure about the flowchart's purpose, but I used it to map out my transition animations across the screens. 

I limited the interactions for the transitions to fade in/out and move in/out as to not overwhelm them, seeing as how there is already a lot of elements in my design. 

2. Masterplan

The masterplan was used to chart out the interactions happening in the app.

Having the Flowchart and Masterplan really helped when I was designing the prototype later on. If I was confused on what I was suppose to do for a specific scene, I could just refer back to them.

Figure 2.4 Flow Chart (9/11/24)

Figure 2.5 Masterplan (9/11/24)

Prototyping
I started putting in all the macro interactions first to ensure that I do not get confused by them later on. Following that, I put in all the micro-interactions.

Splash Screen

The initial splash screen animation was just a normal fade-in and fade-out. But I wanted to spice it up a bit, so I created a new animation.

Macro Interactions:
  • Logo Animation:
    • Logo fades in
    • Text moves out
    • Logo moves to the centre and morphs into the SSP logo
    • Logo shrinks and fades out
Figure 2.6 Splash Screen Animation (11/11/24) 

Log In/Sign up Screen

Macro Interactions:
  • Fade-in screen transition
  • Elements move in from the bottom after the background loads (only for the first screen)
Micro Interactions: 
  • Buttons turn a darker shade when pressed
  • The text field font is red and italics when unfilled and black when filled (for visual difference)
  • Buttons are inactive when text fields are not filled and active when text fields are filled up (to ensure users don't click on them first)

Figure 2.7 Log In/Sign Up Pages (11/11/24)

Onboarding Screen

Macro Interactions:
  • NA
Micro Interactions: 
  • A slider at the bottom of the onboarding screens indicates which page users are on
  • Images have a small morphing effect
Figure 2.8 Onboarding Screen Animation (11/11/24)

Home Page 

Macro Interactions:
  • Background loads in first then only all the other elements in the page move in from the bottom
  • The menu tab moves out from the left when the menu button is clicked
Micro Interactions: 
  • Buttons turn a shade darker when clicked on 
Figure 2.9 Home Page Animation (11/11/24)

Parking Pop-Up Screen

Initially, there was no loading animation after users confirmed they were going to pay for parking. However, having a leading animation would help users understand that their payment is processing so I added it in.

Macro Interactions:
  • Pop-up moves in from the bottom and moves out from the bottom offload.
Micro Interactions: 
  • Before confirming that you will pay for parking
    • Buttons turn a shade darker when clicked on 
    • An hour counter to help user easily enter in their preferred hour
    • Buttons will be inactive when users have not filled up all required text field
    • Pop up notification that informs users that their location or vehicle plate number has been added. 
  • After confirming that you will pay for parking:
    • Loading animation that plays after users confirm that they will be paying for parking (to show users that the info is processing)
    • Parking session information moves in from the bottom of the tab

Figure 2.10 Parking Pop Up page before  payment (left) vs after payment (right) (11/111/24)

Location & Add/Edit Vehicle Screen

Macro Interactions:
  • Screen moves in from the right
  • Background loads first then all the rest of the elements moves in from the bottom
Micro Interactions: 
  • Location Screen:
    • Pop up window fades in to ask users if they wish to use the GPS to select their location
    • Dropdown menus present containing information about location (put into dropdown menus to prevent visual overload)
    • Heart icons that can be filled when clicked. Will make the locations be placed in the 'FAVOURITE LOCATIONS' dropdown menu (personalised experience for users)
  • Add/Edit Vehicle Screen
    • Dropdown menu to select type of vehicle
    • Text field for will be red in colour when text field is empty
    • Buttons will be inactive when text field is not filled up
    • Radio buttons that can be filled up when clicked (with a tick in the middle)
    • Card change from off-white to white to show that the card is filled up with info
    • Car image fades in when plate number is added
    • Selected card will be highlighted with a rim of red
    • Added plate number will be automatically selected

Figure 2.11 Location screen (left) vs Plate number screen (11/11/24)

Reload Screen

Macro Interactions:
  • Screen moves in from the right
  • Background loads first then all the rest of the elements move in from the bottom
Micro Interactions: 
  • Radio buttons
  • Dropdown menus
  • Loading animation
  • Tick animation
  • Pop up notification
Figure 2.12 Reload Screen (11/11/24)

Figure 2.13 Workspace screenshot as proof of work or something (11/11/24)

Final Work

Last Update: 11/11/24

Figma Jam (Flowchart & Masterplan)

Figma Prototyping File

Figma Prototype 

Walktru Video

Presentation Video (Timestamps in Video Description)


Feedback

Week 5:
  • The transition references you have chosen are ok. But try not to make it too complicated, keep it simple because you are going to code it later. 
  • Additionally, some of the animation you can do it in your Figma prototype, but you don't have to do it in the coding.
Week 7:
  • You can try changing the phrase of the 'Parking' option. As the function is related to PAYING for parking, it is wise to include pay into the title.
  • The animation for the logo is a bit fast, you can try slowing it down a bit so that people can see it. 
  • For the + - sign in the hour selector, you can change the minus one to red and the plus one to green as it would make sense for - to be red and plus to be green. 
  • You can play around and try to add in a call to action button in the empty space when there is no parking session
  • Dim out the bg for all the pop-ups

Reflection

My experience with this entire process was a rocky one. I did not know what I was doing and did not have much time to figure out what I was supposed to be doing. What I ended up doing was basically just using the micro-interactions that I already had in my last project for this one. I of course added in the macro interactions as well. But in general, I really felt lost this entire task.

I observed that having a plan before performing the animation prototyping can really help speed up the process. This is because we now have a guide to refer to whenever we are prototyping. 

I realised that whenever I work, my workspace tends to get very messy. It is a bad thing to me as I see others workspaces and its so neat. I shall work on improving it.

Comments

Post a Comment