Application Design I / Project 4

19.11.2023 - 09.12.2023 (Week 13 - Week 15)

Loke Yan Ling / 0344602 

Application Design I  / Bachelor of Design in Creative Media

Project 4 : High Fidelity Prototype


Link to other project

Project 1: Proposal




Instructions



Project 4 : High Fidelity Prototype


Instruction

Fig 1.1 Requirement of Project 4

User Flow

Fig 1.2 User Flow 2

Miro board link: User Flow 2

Same as project 2, the jpeg quality exported from miro still not good enough although using pdf -> jpeg. Thus, I provide the link below. The difference has been made are consider more from user perspective which refer to project 3 usability test. 

The element I removed was the map style, the reason for using a light coloured map as a background was to contrast with the highlighted routes and buses with station icons to draw the user's attention to important details. There would not have been enough time to use a different map style and the whole user interface would have had to be redesigned with a new colour scheme.


Wireframe


Fig 1.3 Wireframe


Considering two bus in one route and not all the users are familiar with which routes is operating (because I put out all the route in one time for them to select). Therefore, I need to redesign the info board and also bring out the message of which route is operating. At first, there are two selection for pop out message. First option is after they selecting the route, then jump out the message; Second option is pop out the message at the start. My decision was to combine the two, and I still think it's important to let the user know this first, and then when they explore the app, the alert message remains on the non-running route to remind them that which route is running at the current time.

For the bus driver details, the wireframe on the right were the final selection, isolate the car plate from the info, can make them noticed the car plate first then the info and also increasing the negative space to make sure the message not crowded together.


Guide & Tutorial

Fig 1.4 Guide for Ios system


Guide tutorial: https://uxplanet.org/figma

To make sure the component fit well in ios system (not being interrupt by the border and the line at the bottom), I did some research and find a clear guide from uxplanet website: For the top, 44px height, 34px height on the bottom and 24px space from the left and right.


Fig 1.5 Improvement


From the user testing in project 3, I noticed that user didn't know that the map can be scroll. So, I added this info into guide and tutorial. Also, I make the bus icon on the map clickable that can directly jump to the bus driver detail.


Fig 1.6 Bus icon with car plate


Because the colour of bus icon is the same, to differentiate them, car plate were added accordingly with hover effect, the car plate also place horizontally although the bus tilted vertically for user readability.


Info board

Fig 1.7 From inconsistent to consistent

Fig 1.8 Changes Made


While arranging the information in info board, I feel inconsistent appear because of the information sometimes on the right sometimes below the label. Then, I found that maybe arrange them as a table form, the label instructions set on the left, then the information set on the  right, user will clearly known all the information they want was on the right. The label instruction was aligned to the first car plate button, while the information was aligned with the second car plate button above.


Important Message

Fig 1.9 Progression


The important message: 
- Current operate route
- Weekday Morning route
- Weekday Afternoon & Night route
- Weekend route
- Remind them of existing of bus scheduled timetable.

The progression of arranging the important message was categorized the information so they won't feel too much information together. Categorized the information help them to process information more easy. The way I used to categorized the info was using different colour of background.


Investigation

Fig 1.10 Check the car plate


TU1C:    FA  913   & WA 6901 B
TU2B: BME 2999 &  BPB 7555

To know the specific car plate used by different route, I check the route on friday and mark them down.


Map


Fig 1.11 Google Map Update

https://www.google.com/maps/sharing

Same as project 3, I used google map to illustrate out the direction of all 6 routes so that I could draw them manually on Figma.


Fig 1.12 Draw out 6 routes

Fig  1.13 Info for not operating route 


Why I'm keeping the routes that are not operating? I want to let the user to have a view of the station that the bus will go on that route, although is not operating. Some of the user are familiar with the map, they can understand the location without keep opening the bus schedule timetable to minimize the frustration. For the info board, I was placing N/A at every section at first, but thinking about the thing I mentioned in wireframe that want user to notice the the message, the info board being totally blank with the important message would be enough.


Prototyping

Fig 1.14 Prototyping

Fig 1.15 Adding login details


I repeated some of the boards with same tab menu (route selection) and setting to prevent make the user feel confuse that keep jumping to another page. All the animation used were instant, only the landing page and logo page used were dissolve and smart animate. 

Also added the login details, although the user cannot type directly, the process of login still necessary for me. I provided two flow, one flow is with remember me button on, one is without the button on. 


Usability Testing

Fig 2.1  High-Fi Usability Test Result


Overall Feedback & Suggestion

User 1, Yean Wai 
Prefer zoom in and out feature for the route schedule table and the map. 
Prefer if there are guides on procedure to find the nearest bus for the location or simply a FAQ section to address some common questions for the users. 

User 2, Weng Khei
Prefer zoom in and out feature for the map. 

User 3, Donna
Add on some sound effect

User 4, Ebbie
Add on the recenter feature for the bus driver detail page

User 5, Yen Sime
The bus driver detail cannot be hidden after opening. Need to go back to the home page for a full view of the map.


Most of the feedback I received were the bus schedule timetable font size is too small. Forgot to mention, the device I asked the user to use are Laptop, because I found there was an issue occured in Project 3 before the user testing, that some of the button will missing and the pages were not fit to the screen size in mobile device. Therefore, before the user testing start, I would make sure the participants use laptop device. 

Normally, the bus schedule timetable is pdf and it can zoom in and out, same as the map (jpeg), the research I have done show that Figma does not have the function. Hopefully Figma will update this feature in the future.

I quite amazed  by the feedback given by user 1, I didn't think about the FAQ section can help to solve some common issue faced by the user. I remember that is a good example can be seen is AirAsia website, this suggestion can be used in my next project in future semester. Why I don't use in this semester? The due already close and no big changes can be made. (The FAQ question need to design from user perspective).

Adjustment

Fig 2.2 Adding the icon


As the suggestion mentioned by user 5, Yen Sime, the bus driver detail cannot be hidden after opening. This is my fault for not noticing about the issue, I just remember to link the logo to the home page but did not remember that they need the option back to the map page with the route they previously selected.

Although there is possibilities that option 2 position of bus icon would overlap on the info, I more prefer using the same position with the landing page. The possibilities can be minimize by shorten the name of the station or place it without touching the icon.


Hover effect

Fig 2.3 Adding Hover Effect


The last thing I forgot after user testing was add the hover effect !, this is so important, why I can forget it TT. After having the hover effect, I can feel the impact it bring. How it isolate with the background as an independent element. 


Smoothing UX

Vid 1 Changing the sequence of guide & tutorial


I think there is a confusion faced by the users were because the guide & tutorial page should placed it at the first page after login. Then they would know what the function of those buttons and where to find the features they want.


Final Figma High-Fidelity Prototype

Fig 2.4 Final High-Fidelity Board

Fig 2.5 Final High-Fidelity Prototype


Final Reflection

I think designing an app is a long progression. Luckily, the project we have to do is just a prototype, not a real product. If it were a real product, it would take longer than 3 months to do it. Also, I found that no matter how well the UI is designed, the user does not understand the features, then it's useless. Therefore, UX is a priority to have a survey to collect user opinions and there is plenty of user behavior, you cannot promise the app you design will fit all distinct behaviors. So, the final thought I have is the app will need to be improved time by time, because people follow trends, apps follow user behavior. There will be no ending point in improving an app or website. Nonetheless, I enjoy the design process, especially when I know that my design is going to be good enough to help a user solve a specific problem or met their needs, the satisfaction of being praised for a job well done allows me to continue with my task. But I'm still exhausted because this semester isn't just about this subject, it's about making sure that all the subjects are on track and solving problems as soon as they arise, and I can't get a good release from the stress that I'm feeling causes me losing energy. I also faced problems in figma when some of the functions suddenly didn't work, for example, the pen feature couldn't draw a stroke, layers showed its existence after adding an icon, but it was invisible. These technical issues made me feel frustrated, but I got good experience from it. What I learnt from it is that the design direction of apps and websites are different, this module gave me new knowledge about designing apps, and they will help me in my future modules and work. When I look back in the future on what I have done with this semester, I will definitely be in a position to find out the shortcomings and avoid making the same mistakes.



Comments

Popular Posts