Project 3: Low Fidelity wireframe

-

SIMON KO JING LIANG
0364359
Bachelor of Creative Digital Media
Application Design 
Project 3: Low Fidelity wireframe 

INSTRUCTION


Fig 1
Instruction-PDF

Progression - Part 1

After finished the project 2 which is UIUX Document, I followed the instruction to start doing the low fidelity wireframe of my application (KTMB). 

Below is my low fidelity wireframe of the app (KTMB) and UI kits.


Fig 2 
Low Fidelity wireframe and UI kits - PDF

Feedback

-Need to have 3 scenarios for the users when using the app.
- Maybe add the onboarding page

Progression - Part 2

After received the feedback from Mr. Zeon, I started to do the 3 scenarios in low fidelity.



Fig 3
Low Fidelity Wireframe(Booking Ticket)


Fig 4
Low Fidelity Wireframe(Accessibility-Multi Language Support)


Fig 5
Low Fidelity Wireframe(Checking Rail Time)

Due to the feedback from Mr. Zeon,  the scenario which is the accessibility scenario is a few pages only, so I added checking personal information scenario, booking page and rewards page. (For the adding scenarios I put them into the high fidelity wireframe)

Scenario 1: Booking Ticket
Scenario 2: Adjust accessibility
Scenario 3: Checking rail time

Usability Test

After that, I sent it to my friends to test. 


Fig 6
Check Out Page
For this page (Check Out), the online banking button not completed, it may can click and there have lots of different banks to choose.

Fig 7
Rewards Page
Notification icon cannot click.


Based on the feedback, said that overall is good but the process of the booking ticket (Check Out) can put more options such as online banking (lots of different banks to choose.), not only use credit card. Then there's something still not completed.

Final Low Fidelity Wireframe


Fig 6
Final Low Fidelity Wireframe

Here is the Link

Video


Video 1

Here is the Figma Link