Students will synthesize the knowledge gained in task 1, 2 and 3 for
application in task 4. Students will create integrate visual asset and
refine the prototype into a complete working and functional product
experience for a selected task.
Introduction
The MyJPJ app, developed by the Road Transport Department (JPJ) of
Malaysia, serves as a digital gateway for Malaysian citizens to access
essential road transport services. It allows users to view their digital
driving license and road tax, check for summons, and access other
JPJ-related information. While the app is a significant step towards
digitizing government services and offers the convenience of a paperless
system, it has been met with numerous challenges concerning its usability
and user experience.
This project addresses the critical issues reported by the MyJPJ user
community, including difficulties with poor app performance, and a
confusing user interface. A detailed analysis in this proposal will
highlight specific pain points such as error messages, outdated UI design,
and the need for more intuitive navigation. The goal of this redesign
project is to refine these weaknesses and simultaneously introduce highly
requested features, such as improved reporting functionality and a more
user-friendly experience, ultimately creating a more reliable and
efficient digital platform for all Malaysian road users.
UI KITS
Color
For the color selection, i decided to use color shade of blue representing
the main color of Malaysia JPJ department, below is a softer blue color
pallet, with just monochromatic combination
Figure 1.1 color pallet 1
White:#FFFFFF
Light Periwinkle:#CFCFFB
Light Gray-Blue:#A8ACB8
Medium Blue:#354291
Dark Blue:#1F2656
Black:#000000
Below is main color from MyJpj apps, shaper blue with as soft blue
Figure 1.2 color pallet 2
White:#FFFFFF
Light Periwinkle:#CFCFFB
Medium Blue:#1F4A96
Royal Blue:#4066C0
Bright Blue:#699AF2
Black:#000000
But, after that I think that just shades of one color seem boring, and will
lose focus for user, the color combination contrast lost that might let user have issue with the readability to the importance information. so I added a highly contrast color to it, as a focus point in
the app's user interface.
The addition of the goldenrod color (#A37B3E) provides a strong accent color. This can be very effective for highlighting important calls-to-action (CTAs), notifications, or alerts.
Figure 1.3 color pallet 3
White:#FFFFFF
Light Periwinkle:#CFCFFB
Goldenrod:#A37B3E
Royal Blue:#4066C0
Dark Navy:#1F2656
Black:#000000
In the official myjpj apps, it use multple san serif font, to stay
consistent, I am using Roboto family only for the font as it provides a clean, modern, and friendly look, its uniform stroke weight and clear letter shapes reduce eye strain,
Figure 1.4 UI kit
Usability testing
Figure 1.5 Usability testing problem 1
After I did the full ui design for Myjpj, I let my friends and family to test it, they said that the gold color might look inaccuracy, that can desribe as the percentage of using a high contrast color from the color pallet above are too high that will make user think that it's look not logical, and because of the blue background, it decrease the readability of it,
Figure 1.5 Usability testing problem 2
Also with readability problem, the text in the button can't be seen, so I increase the text inside to make it well
Figure 1.5 Usability testing problem 3
This is that box with blue color, make it like same with info, so what have I done is that I make it outline to contrast with the info box
I'm really proud of how Project 4 turned out. It was a great opportunity to apply all my learning to a real-world problem. By developing a new UI kit and focusing on a more efficient flow, my goal was to create a product that was not only functional but also intuitive. I find out that I will need to learn a lot more in figma software to increase my efficiency on designing it, it almost took 24 hours to done this ui, as in my expectation it will only need 3 hour as I have my wireframe and research with me already. And also with the compilation part, after I have done my prototype, I think all is over until I will need to gather all my process for this module, it is quite frustrating. But it is a pleasure to redesign MyJpj, this is actually what I hope for MyJpj apps design, as MyJpj apps is just a usable apps, it's not a necessity apps for me if the design and function still not change.
Comments
Post a Comment