Labels

Application Design 1/Final Project: Completed Mobile Application Design

15/7/2024 - 5/8/2024 / Week 13 - Week 15
Janice Marie Eng Chia Hui /0361521
Application Design I/Bachelor of Design in Creative Media / Taylor's University 
Final Project: Completed Mobile Application Design

Table of Contents:

Lectures

Week 14


Task

To-Do list:
  • Update the UI kit
  • Import in icons, images and elements needed.
  • Identify words and content used in the app
  • Update and fine-tune the prototype with colour and elements
Sites used to get icons, images and elements:

1. UI Kit

I used a template from Figma Community for the UI Kit (shoutout to Hui Yi for finding it and sharing it with me <3).


Colour

Colours were based on the Smart Selangor logo and the Selangor Emblem. I used ArtyClick to find some transition shade colours.

Figure 1.1 Colours used in the app (4/8/24)

Typography
Figure 1.2 Open Sans used in both heading and body text (4/8/24)

Iconography 

Figure 1.3 Solar Icon Set from Figma Community Used (4/8/24)

The Rest of the Stuff

Figure 1.4 The rest of the UI Kit (4/8/24)

2. Components

I made some components for my Hi-Fi app design. Wanted to steal some from Figma Community but decided not to and made my life harder. 

Components consisted of mainly dropdown menus, a time counter and radio buttons. 

Figure 2.1 Components Made for HiFi prototype (4/8/24)

3. User Testing

Will go over Hi-Fi prototype in the next section, putting user testing here first so I don't have to repeat myself in Hi-fi prototype section

I sent my initial HiFi Prototype to Sir and got some feedback from him. So I amended the prototype based on his Feedback. You can view full feedback in the Feedback Section.

I also did 2 user tests (not 3 as there is not enough time). The 2 users I tested with were User A and User G. I made them do all 5 scenarios again. The whole video was 1 hour long, I sped it up for convenience. 

Figure 3.1 HiFi prototype User Testing timelapse (4/8/24)


Figure 3.2 Notes taken during User Testing (4/8/24)

To conclude the user testing:

Sign In/Sign Up:
  • User G mentioned that I could add one scene after the splash screen where it promotes the function of the app (ie. pay for parking and compound etc.). Besides that, I could put an image of people smiling. They mention Tenaga as an example. 
Figure 3.2 Tenaga Website landing page that was being referenced by User G (5/8/24)

Pay for Parking:
  • Minor issue with User A, after entering the car plate number there is no indication of the next action. User A did not know what to press next.
Compound:
  • No major complaints. User G just said they couldn't really see the 'Show More' button. They recommended I change it to a different colour. 
Credit Transfer:
  • Both users mainly had questions about how would the receiving party receive the money. They were confused about how QR functions. I was recommended to elaborate more on how the other user would receive the money. 
Contact Us
  • No major issue, just that the confirmation pop-up can be elaborated. Recommended to me by both users. 
Other than that there were no issues or complaints from the user. User G mentioned that the use of red is a good choice as it is a striking colour. 

4. Doing the HiFi Prototype

I made some changes to the buttons in the HiFi prototype after reading the lecture slide. In general, I made:
  • The buttons are more squarish rather than fully round.
  • Longer and wider to fill up more space.
  • Made the buttons that were originally small fill up almost the whole screen.
Figure 4.1 Changes made to the buttons, with the red one being the updated version(5/8/24)

Sign in/Sign Up Page

Some changes made to the sign/sign-up page after the LoFi Prototype were that I added in some illustrations I got from StorySet. I changed their colours to red to fit my colour scheme. 

Additionally, I added a picture to the Sign/Sign up screen after getting feedback from User G. The picture of Selangor was taken from the Tourism Selangor website.

Figure 4.2 Some examples of illustrations used, the image used in the Sign in/up page (5/8/24)

Onboarding Page

After getting feedback from the user in the LoFi Prototype about how an onboarding page is important for less tech-savvy users, I decided to read up more on what an onboarding page actually is. 

Websites I read for a better understanding of how to make an onboarding page:
After that, I got the idea to insert images from my app redesign and point out each function in the onboarding process to the users. I also included location and notification access for the heck of it. 

A skip button was also placed on the onboarding page as per User G feedback.

Figure 4.3 One page of the onboarding screen and the Location access screen (5/8/24)

Pay for Parking Now

I changed how the pop-up looked for the parking function. I realised that the old pop-up looked unprofessional, so I read up on how to design a pop-up and redid it.

The pop-up website read up: 
Additionally, I change the flow of the location and plate number selection. Instead of making the user press back to go back to the Parking pop-up, I made use of the after-delay function and made the screen automatically change back to the parking pop-up after the user's selection. 

I also made dropdown components for the location and vehicle selection part. Finally, an hour counter was also made for the parking pop-up. 

Figure 4.4 Parking Pop-up Before (left) VS After (right) amendments (5.8.24) 

Figure 4.5 One of the dropdown menus made (5/8/24)

Figure 4.6 Time Counter (5/8/24)

Reload

I made a dropdown menu with radio buttons for the payment option sections. 

Additionally, I changed the confirmation pop-up to look and sound more professional. There was a heavy reference on TnG confirmation page. 

Finally, I changed the layout of the credit card details section to fill up the white space more. The layout was based on the DIGI payment screen.

Figure 4.7 Confirmation Screen before (left) VS after (right) amendments (5/8/24)

Figure 4.8 Credit Card detail page before (left) VS after (right) (5/8/24)

Figure 4.9 Payment options dropdown (5/8/24)

Pay for Compound

No major changes here except changing the colour of the 'Show More' button from grey to light red.

Credit Transfer

Changed the 'Choose Transfer Amount' layout into radio button options. Additionally, I added one more step into the 'How-To Guide' to aid users in how they should transfer the money.  

Figure 4.10 Credit Transfer Screen before (left) vs after (right) (5/8/24)

Closing off:
The original Smart Selangor Parking (SSP) app landing page interface was cluttered with buttons. Additionally, some of these buttons seem to have repeating functions. With the redesign, I removed any unnecessary buttons to make it clearer to the user what they need to press. Labels were also placed for each of the necessary icons so that users could better identify their function. 

To help with further clarity of the app functions, a detailed onboarding process was created, explaining the whereabouts of the functions to the user. 

Finally, not as important, the offline function 'Credit Transfer' was made online in my redesign as per the request of the users.

Final Submission


Figure 5.1 Smart Selangor Parking Redesign (5/8/24)



Figure 5.4 Walkthrough of High-Fidelity Prototype(5/8/24)

Feedback

Week 15:
Specific Feedback:

Yall I'm too lazy to type it out pls just look at the pictures instead 🥺🥺.


Reflection

I'm going to be honest with you, I have no idea what I am doing. This entire redesign process was just me grasping around in the dark and trying random things, hoping that it worked. I did find reading redesign case studies very helpful. Scrolling on Behance or Pinterest for inspiration was also very helpful. 

I am not really satisfied with the final redesign. Partly because it does not look like what I have in mind and partly because it is not something I would design personally (I even forgone my favourite font Montserrat to to make the app T^T). I tried making the redesign look as professional??? (is that the right term) as possible, but I feel as though my skill level is not at a level where I can produce a well-designed app with good user flow.  

Finally, I just wanted to add that the timeline for this project was not it. Granted we might have been screwed over by the many public holidays that were occurring on Monday. But man, I had never rushed any module project as much as I did with Application Design 1. It was stressful, extremely stressful and I had lost many hours of sleep because of this module. Of course, I am thankful for my lecturer cause I can tell he's trying his best.

That's all for now. Keep slaying yall.

Comments

Post a Comment