Application Design II-Task 1
INSTRUCTIONS
Task 1
We were required to perform a self-evaluation and reflection based on our mobile application design from application design 1 module.
Reflection
Reflecting on my previous semester's project redesigning the Public Bank app, I approached the task with zeal, conducting thorough research and surveys to inform my design decisions. Initially satisfied with my efforts, upon revisiting the project for self-evaluation, I discerned numerous 'mistakes' through the lens of the laws of UX, highlighting areas ripe for improvement. This process underscored the iterative nature of UX design, emphasising the importance of continual evaluation and refinement. It served as a humbling reminder of the dynamic nature of the field and the necessity of remaining receptive to feedback.
Changes made:
Colour palette
The old colour palette used is too bright, I decided to lower the brightness of the colour choose.
|
| Fig 1.1 new colour palette |
Interface-I did not made too many changes on my original design, just make some adjustment to balance on the visual.
Homepage
According to the law of UX, specifically the Von Restorff Effect, I replaced the black and white icons with brightly coloured ones. The original black and white icons appeared dull on the screen, so I opted for circular, vibrant icons, which enhanced the overall visual appeal.
Additionally, I replaced the bright red heading background at the top with a darker gradient background, adding depth to the screen and enhancing its overall visual hierarchy.
|
| Fig 1.2 home page comparison |
I redesigned the bottom navigation bar and initially hesitated between the third and fourth options. However, when viewed on a mobile device, it became evident that although the dark blue colour is part of the colour scheme, it made the nav bar overly prominent and distracting, as the nav bar is not a call-to-action element. On the other hand, the lighter-coloured nav bar appeared more gentle and visually pleasing, ensuring that it did not overshadow the main content on the screen.
|
| Fig Different attempt of nav bar |
|
| Fig Comparison |
I did not get a chance to consult with Mr. Razif, but from conversations with friends, I learned that creating a hamburger menu is necessary in an app, so I added one. The close button is a CTA button, so I decided to use blue as the fill colour to ensure it stands out effectively.
|
| Fig Hamburger menu |
Transfer money
In addition to changing the heading background colour to a deeper hue and updating the bottom CTA button to a contrasting blue, I also enhanced the overall visual hierarchy. By refining the colour scheme of the heading background and the CTA button, I aimed to create a more cohesive and aesthetically pleasing design. These adjustments not only improved the visual appeal but also contributed to a more engaging and user-friendly interface.
I relocated the "Recent Accounts" section above the "Favourite Accounts" section since the recent accounts tend to change frequently. This adjustment aims to improve user convenience by prioritising easy access to accounts that are likely to be accessed more frequently due to their dynamic nature. By placing the "Recent Accounts" section at the top, users can quickly locate and access their most recently used accounts, enhancing the efficiency and user experience of the app.
Although not a recent improvement but a design element present in the previous version, I realised, after studying the laws of UX, that the "Add New" feature placed in the "Favourite Accounts" section aligns with Lévinasian Design principles. This approach emphasises the ethical responsibility of design to anticipate user needs and empower them with intuitive features, in this case, facilitating the addition of new favourite accounts seamlessly within the familiar context of their existing favourites.
|
| Fig 1.3 Comparison of transfer page |
I chose the final design for its clarity and visual distinction. Initially, the 'add new' button had a red border and white fill with a red '+' sign, while the recipient buttons had a red fill with white text. I experimented with reversing the fill and border colours and changing the recipient button color to blue with white text. Ultimately, I decided to keep the original 'add new' button design, as its red border and white fill effectively draw attention without overwhelming the interface. For the recipient buttons, I opted for a blue fill with white text, providing a clear visual contrast that enhances usability and maintains a cohesive yet distinguishable look within the app.
|
| Fig Different design attempt |
Below is a comparison between the red border with white fill and the red fill with white icon designs. As you can see, using a red fill alongside a blue fill makes the screen appear heavy and visually overwhelming. The red border with white fill for the 'add new' button maintains visual balance and ensures the design remains clean and user-friendly.
|
| Fig Overview of different design |
To enhance clarity and indicate text input areas more effectively, I replaced gridlines with simple lines in areas where users can input text. This subtle yet intuitive design change makes it clearer to users that these are indeed text input fields, as the lines mimic the shape of text boxes commonly associated with input areas. This adjustment aims to improve the user experience by reducing ambiguity and providing visual cues that align with user expectations, ultimately enhancing usability and accessibility within the app.
|
| Fig 1.4 transfer page comparison |
Loading page
I enhanced the loading page by adding a loading bar, allowing users to visually track the progress of the loading process. This addition provides transparency and reassurance, ensuring users are aware of the loading status.
Furthermore, I adjusted the colour of the call-to-action (CTA) button on the onboarding page from red to blue, creating a contrasting effect with the red elements above it. This alteration enhances visual hierarchy and draws attention to the CTA, guiding users seamlessly through the onboarding process while maintaining a cohesive and engaging interface.
|
| Fig 1.5 loading page comparison |
[New Update]
Log In page: When I am planning the flow map, I found that I need a log in page to connect the steps.
Pop up: In a lecture class I learned to make an error pop up with code, and I found that I should add a confirmation pop up at the last steps of the transaction, so I added.
Comments
Post a Comment