Labels

Application Design II: Task 1/Self-Evaluation and Reflection

25/9/2024 - 20/10/2024 / Week 1 - Week 4
Janice Marie Eng Chia Hui /0361521
Application Design II/Bachelor of Design in Creative Media / Taylor's University 
Application Design II: Task 1/Self-Evaluation and Reflection

Table of Contents:

Instructions


Lectures

Week 2

This week during class, we were given a refresher course on the coding we learned in interactive design. However, for this module, we will be coding an app instead of a website. 

To help us familiarise ourselves with coding again, we were instructed to code the below layout. All images were provided to us by the lecturer.

Figure 1.1 Layout We were instructed to code

Any questions I had regarding the coding, I just consulted my good friend Mr Google for help. Google provided me with helpful videos on how to code stuff so yea.

Figure 1.2 Outcome of the exercise

Week 3

This week we learned about JavaScript. 
  • He introduced us to Bootstrap again
  • DOM is a Document Object Model 
  • Web browsers now have the capability to run Javascript. 
  • HTML is the base, CSS changes the characteristics adding style to it. But with Javascript it changes the behaviour
  • Javascript selector has the same features as CSS or you can use the code <get id from 'id name'>.
  • Can share same class but ID is totally unique. 
Commonly used DOM methods in website development:
  • document.getElementById(id): Selects an element by its ID.
  • document.querySelector(selector): Selects the first element that matches a CSS selector.
  • document.createElement(tagName): Creates a new HTML element.
  • element.appendChild(newNode): Adds a new child node to an element.
  • element.innerHTML: Gets or sets the HTML content of an element.
  • element.textContent: Gets or sets the text content of an element.


Task/Self-Evaluation and Reflection

To-do List
  • Identify any improvements that can be made to the SSP redesign
  • Carry out the redesign
  • Display a before and after shot of the redesigns
The self-evaluation and reflection will be focused on a few sections, namely:
  • Onboarding page
  • Log in/Sign up page
  • Home page
  • Parking payment process pages
  • Reload page
Changes were made to the app design based on my own reflection + AI reflection. 

*Claude AI was used to help find elements that needed improvement in the app design.  

Onboarding page

Figure 2.1 Initial Onboarding pages (10/10/24)

Reflection:
  • The information provided in the onboarding pages is based on difficulties faced by users (info collected in user feedback sesh and survey). 
  • Additionally, a simple transition animation has been applied to the onboarding pages, making the experience immersive to the users. 

Ai Reflection:
  • Streamline the onboarding process by combining similar screens (e.g., screens 6-9) to reduce redundancy.
Changes made:
  • Removing one of the onboarding pages to reduce the number of onboarding screens to 4.
Figure 2.2

Log In/Sign Up page

Figure 2.3 Initial Log in and sign up page (10/10/24)

Reflection:
  • The app logo is properly displayed, improving brand visibility. 
  • A brief explanation of the functions of the app was displayed below the app logo, providing first-time users with general information on what they need to know about the app.
  • The button has heavy contrast against the background making it easier to see.
  • One way of logging in/signing up, limiting the ways a user can create an account to use the app.
  • Empty text field font and filled text field font have not apparent visual difference.
AI reflection:
  • Loading states: Add loading indicators for actions like logging in or signing up.
  • Readability: Increase the contrast between the text and background, especially for smaller text like "Already have an account? Sign In" on the sign-up page.
  • Navigation: Add a back button or clear way to navigate between screens.
Changes made:
  • Adding in another log in/sign up option (Google)
  • Italicising and changing the empty text field font to red.
  • Changing the 'Already have an account? Sign In' from regular to semi-bold.
Figure 2.4 Before VS after Redesign (13/10/24)

Home Page

Figure 2.5 Initial homepage design (10/10/24)

Reflection:
  • Usage of text plus icons to help describe and visualise each icon/text function.
  • The main features of the app are highlighted in their own card, this helps draw in users' attention to the main features. 
  • Icons have inconsistent style design. Some are outline only while others are filled icons. The line weight of the icons is also inconsistent. 
AI Reflection:
  • Colour and contrast: The red background may be too intense. Consider a softer shade or use red as an accent colour instead.
  • User feedback: Add subtle animations or visual feedback for button presses and interactions.
  • Navigation: The centred circular button breaks the flow. Consider a standard bottom navigation bar.
  • Empty state: The "No active parking session" card could be more actionable. Consider adding a "Start Parking" button within this card.
Changes made:
  • Redesign the icon style to have only 2 colours, be outline-only icon and have a standard line weight. 
  • Changed the header colour to a darker shade to allow the text to be read easily. Buttons were changed to a lighter shade to stand out more against the darker red.
  • 'No active parking session' phrase changes to a more actionable phrase
  • Spacing between icons in the nav bar was increased to prevent the nav bar from looking interrupted by the floating QR scanner icon.
Figure 2.4 Before VS After Redesigned Home page (13/10/24)

Parking payment process (Parking Pop-up)

Figure 2.5 Initial Parking Pop up design (10/10/24)

Reflection:
  • All parking payment-related processes are grouped in one place making it easier for users to access. 
  • Empty text field font and filled text field font have not apparent visual difference.
AI Reflection:
  • Clarity and Hierarchy: The "Parking" title could be more prominent to clearly indicate the modal's purpose.
  • Action Buttons: The "Pay For Parking" button could be more prominent and possibly disabled until all necessary information is filled.
  • Consistency: The edit icons (pencil) seem inconsistent with the app's overall icon style.
Changes Made:
  • Italicising and changing the empty text field font to red to provide users with clear visual differences.
  • Increasing the size of and changing the colour of the 'Parking' title.
  • Disabling buttons when text fields are not filled up. 
  • Changing the colour of the pencil icon to ensure it is visible and more noticeable.
  • Adding in a price preview to ensure that users know how much they are paying for the parking.
Figure 2.6 Before VS After parking pop-up redesign (13/10/24)

Parking payment process (Location)

Figure 2.7 Initial design of location selector page (10/10/24)

Reflection:
  • Personalised options such as 'Recent Locations' and 'Favourite Locations' are added to allow users to quickly access specific locations.
  • Locations are placed into dropdown menus to prevent over cluttering the screen with information, users can dropdown the menus if they wish to view more.
  • No contrast in colour between the search box/dropdown menus and the background, making it hard to see them.
Friends feedback:
  • Users typically read from left to right, putting the no on the left makes me more inclined to click on 'no' rather than the other options.
AI Reflection:
  • Hierarchy: The "Location" title at the top blends with the background. Make it more prominent or use a different colour to improve visibility.
  • Background: The red background with a map overlay might be distracting. Consider simplifying it or using a more subtle design.
  • Feedback: Provide visual feedback for expandable sections (Recent Locations, Favourite Locations) to indicate they can be interacted with.
  • Content preview: Consider showing a preview of content under each expandable section to give users a glimpse of what's inside without needing to tap.
Changes made:
  • Colour and contrast: Image in the header was removed and the header colour was changed to a darker shade for consistency as well as to increase the readability of the title text.
  • Buttons were rearranged so that GPS and MAP buttons came first.
  • The dropdown menu and search bar colour were changed to white to increase contrast with the background.
  • The first dropdown menu was opened to inform users that the menus can be opened as well as to show users a preview of information in the dropdown menus.
Figure 2.7 Before VS after Location Redesign (13/10/24)

Parking payment process (Add/Edit vehicle)

Figure 2.8 Initial Add/Edit vehicle design (10/10/24)

Reflection:
  • Overall design is very simple.
  • Excessive white space in the Add/Edit vehicle screen, which makes the design look bland.
  • The user flow after users press add is very confusing. 
Lecturers Feedback:
  • The vehicle colour option is not needed, you can remove it.
AI reflection:
  • Feedback and Affordance: Add hover or touch states to interactive elements like buttons and dropdown menus to provide visual feedback.
  • The pencil icon for editing in Image 1 is small and might be difficult to tap on mobile devices. Consider enlarging it.
Changes Made:
  • Colour and contrast: Image in the header was removed and the header colour was changed to a darker shade for consistency as well as to increase the readability of the title text.
  • To reduce the recessive white space, I added in more blank boxes. The colour of an empty box and an active box was also made different to differentiate them.
  • Removed the vehicle colour option.
  • To improve the users flow, I made it so that whenever users add in a new vehicle, that option will be automatically selected for them. Meanwhile, they can still enter the vehicle screen and select the vehicle plate number added in the past. 
Figure 2.9 Before VS After Add/Edit Vehicle Redesign (13/10/24)

Reload


Figure 2.10 Initial Reload page (10/10/24)

Reflection:
  • Payment options are properly categorized making it easier for users to access them.
  • Excessive white space in the 'Choose reload amount' section.
AI reflection:
  • Performance Perception: Add a brief loading animation between screens to indicate processing.
  • Confirmation: Add a subtle transition or animation when moving to the next screen after pressing "Confirm" to provide visual feedback.
Changes Made:
  • Changed the layout of the 'Choose reload amount' to a 2x3 layout to reduce the whitespace
  • Changed the field box colours to make them stand out more against the background. 
Figure 2.11 Before VS after Reload redesign (13/10/24)

Final Submission

Figma Link 


Presentation Slides
Self-Reflection by Janice Eng

Presentation Video

Figure 2.12 Video Presenatation (17/10/24)

Feedback

Week 2

Feedback on Smart Selangor Parking Redesign
  • You can check out and see if you can implement Google sign-in or log in for SSP. Of course, you must see if this app allows for that.
  • You have a consistent design scheme going on.
  • For the icons, in the future, you can see if you can make your own icons as there is a demand for icon designers.
  • For the enter vehicle plate number, you don't really need the colour option.
  • In the reload section, he mentioned the auto-debit function, but not applicable to mine. 
  • You can try adding a splash screen and a custom loading icon. He used Zeus Coffee's app as a reference.

Week 3

  • Your 3 MVP can be the reload function, the GPS/location function and the Add/Edit car plate number function.
  • Must at least focus on 3 MVP.

Week 5

  • The image on the login/sign-up page does not seems to be Selangor. You can try finding a better image.
  • You can just dim the entire image in the log in /sign up page.
  • The sign up process is a bit lengthy. Consider changing it.

Reflection

I have a love hate relationship with this task because I did not know what I was doing. However, like always it is important to read up on areas you don't know about. So I read up on some uiux design principles and tried my best to carry out the work.

Comments

Post a Comment