Labels

Application Design 1/Project 3: Low Fidelity App Design Prototype

8/7/2024 - 5/8/2024 / Week 11 - Week 15
Janice Marie Eng Chia Hui /0361521
Application Design I/Bachelor of Design in Creative Media / Taylor's University 
Project 3: Lo-Fi App Design Prototype

Table of Contents:

Lectures

Week 11


Task

To-Do list:
  • Translate your data collected into a low-fidelity prototype design
  • Carry out at least 3 usability tests with 3 users with your lofi prototype
  • Carry out the amendments based on the feedback
  • Video walkthrough presentation

1. Sketching

I personally cannot do anything without some kind of plan beforehand, so I started sketching out some layout changes that could be done to Smart Selangor Parking (SSP).

I was heavily influenced by Touch and Go's layout design.

Figure 1.1 Heavy reference from TNG home page design

Figure 1.3 Rough Sketches for the lofi prototype (10/7/24)

2. UI Kit

I struggled to put the UI Kit initially. However, writing from the future after having done the Hi-fi prototype, I have a clearer vision of what colour, fonts and design elements I should be using.

However, for this blog post, I shall put in my really scuffed UIUX doc that I hastily put together. The design elements in this UI Kit are largely based on SSP current design.

For the updated UI Kit please visit my Final Project.

Figure 1.4 Initial UI Kit(10/7/24)

3. Lofi Prototype 

After settling everything, I started on the LoFi prototype. I started off following my usability testing scenarios which are:
  • Paying for Parking
  • Paying for Compound
  • Topping up your account
  • Attempting credit transfer
  • Accessing and contacting the helpdesk by opening a ticket
Here are some of the changes I made based on the previous usability testing done in Project 2:
  1. Making the RELOAD btn more obvious by changing the name from CREDIT to RELOAD.
  2. Reducing the number of UNNECECCERY BTNS and elements on the homepage. Users are now able to immediately identify what button they should press.
  3. Properly LABELLING EACH ICON on the screen so that even users who are not VERY TECH-SAVY can understand the icons and btn functions.
  4. Putting the CONTACT US section into the setting and side menu as users are more likely to access it from there.
  5. Added a live chat feature in
Now to go over some of the things I did.

Pay for parking

In this section, I heavily referenced TNG (popping out the parking screen). I needed a counter for the time selector. For the sake of convenience, I used a counter that I got from Figma community first. This will be changed for the HiFi prototype.

There was also the location selection page. On this page, I needed a dropdown menu. I initially used one that I got from Figma community, but I managed to stumble upon the way to make our own components so I tried it out. I managed to create a simple dropdown menu.

For the 'enter vehicle plate number' screen, it needed a dropdown menu as well. However, due to the time crunch, I chose not to make one for it first as I thought it would be a waste of time as I was going to need to make another one for the HiFi prototype. So I used one that I got from Figma community. 

Figure 1.5  Pay for Parking Now screen, the component I created can be seen in the middle image (15/7/24)

Figure 1.6 Interactive counters I used in my lofi design (source)

Figure 1.7 Dropdown I used for my lofi designs taken from Figma community (Source)

Paying for Compound

For my initial designs, I had all the elements on one page. I decided to amend it after getting feedback about it. Some amendments include:
  • Splitting the compound section into 2 screens, the first to search for your compound, and the second screen contains the results of the search.
  • I amended the offence information to sound more professional and official
  • Adding a SHOW MORE option to allow users to show more detailed information about the compound. 
  • I added an illustration that I got from STORYSET. The site was recommended by Sir. 
  • Adding in information on discounts given by SSP if you pay your compound early with them.
I also played around by adding in gradients. Did it work out, who knows, check out my Final Project blog to find out. 

Figure 1.8 Initial vs Final Compound page (31/7/24)

Topping Up your account

There were no amendments to the RELOAD page after getting feedback and usability testing. I did, however, change some things in the Hi-Fi prototype.

Things I did different from SSP:
  • Reorganised the payment options into drop-down menus for easy access. 
Figure 1.9 Reload page with dropdown menu components in the bottom left corner (31/7/24)

Attempting credit transfer

Initially, I copied SSP functions where it says the Credit Transfer function is offline because of updates. But I got some feedback from the users asking why can't I make it available since I'm remaking the app anyway. So I made it available. 

Figure 1.10 Credit Transfer Amended VS Initial (31/7/24)

Contact Us

No issue here.

4. Usability testing

I did the usability testing with 3 users from my interview during Project 2. The users were:
  • User D (TnG Lover)
  • User A (Not tech-savvy)
  • User G
Each user was asked to go over 5 scenarios.

Figure 1.11 Results of usability testing with the original SSP app (10/7/24)

The time taken for each scenario was not recorded as users don't know how to use the app yet and it would be unfair to compare this testing with the testing of the actual app one. Hence, I shall just state if users manage to complete the scenarios or not. 

Here are the results of the testing.

Figure1.12 User Testing for LoFi Prototype (4/8/24)


Figure 1.13 Notes taken of the usability testing (18/7/24)

Figure 1.14 Results of usability testing for lofi prototype(18/7/24)

To summarise some of the input given during the usability testing:

Pay For Parking Now:
  • Location section, after manually selecting the location, there is no indication, button or prompt that the action has been done. We can fix this to make the next move more obvious to the user.
  • The vehicle plate number section was given feedback that getting the colour and type of vehicle was not really in the city council's jurisdiction, it was mainly the police's jurisdiction, since the app was designed for city councils, and might not need it. However, the user said to just leave it for now.
  • Time selection, one user was confused with the counter element because the hours were shortformed to HR making the user unable to identify it.
Compound:
  • The user mentioned the pay button was not too obvious. Was told to make sure it was obvious later on.
  • The phrasing of the offence was questioned, one user mentioned that it sounded a tad bit unprofessional.
Reload:
  • No issue
Credit Transfer:
  • A direct quote from 2 users "SSP cannot do why do you have to follow, can't you make your own one. Isn't that the point of your assignment". (┬┬﹏┬┬)
Contact:
  • User A couldn't locate the CONTACT function. They stated that its location is not obvious enough. They wanted it to be placed on the homepage.
  • User G brought up that because some people use the Internet more than others, they can recognize where each function is commonly located. However, for people like User A, they might not know about it as they don't often use the Internet.
  • User G suggested adding a detailed instruction manual of such and adding an option to skip it because some users might not want to go through that.
Amendments made shall be gone over in the Final Project blog. 

Final Submission

Figure 1.15 Usability Testing for Lo-Fi Prototype (Amended version after usability testing) (15/7/24)

Figure 1.16 Figam Board for Lo-Fi design (4/8/24)

Figure 1.17 Walkthrough Video (3/8/24) 

Feedback 

Week 11

Specific Feedback: 
  • Try to ensure consistency with your padding on the borders of your boxes
  • You can consider adding some graphics to your designs to make them more interesting
  • If you want to copy the layout of the 3rd party screen (like the send otp page) you can but make sure you translate it into your font and design.
  • Consider which element is most important for your design (location) do you want to show the favourites or recent or the city councils first. Determine that and place the most important one on top.
  • For the buttons, the more important one you make it darker. 

Week 14 

  • Compound history, don't have to test can just make it complete
  • Parking payment: add in the scenario to change council to a different council with the manual search 
  • Add in the car number
  • Change the phrase extend
  • Add in the live chat

Reflection

(Just realised I forgot to do a reflection for this project)

My experience with this project:
Honestly, because this project deadline was the same as the final project, I kind of treated it as one. So my experience with this project was extremely rushed lol.

My observations:
Guy don't do your user testing and prototype last minute. It's not possible. Do it earlier if you want to be able to properly design and analyse the feedback.

My findings:
Wow, I pray that I never have to rush a project like this again. My Lo-fi prototype quite underdeveloped honestly. So I feel bad to the users who had to test it and try not to say my work is complete shit.

Comments

Post a Comment