Application Design I-Final Project
INSTRUCTIONS
Final Task-High Fidelity Prototype
|
| Fig 1.1 Overall prototype flow screenshot in Figma |
|
| Fig 1.2 Overall design screenshot in Figma |
At first, I was concerned that creating the high-fidelity part might be challenging, as the low-fidelity stage seemed time-consuming to me, requiring thought about layout, positioning, and content. Surprisingly, I found the high-fidelity stage more relaxed and enjoyable. Perhaps because most of the structure was already planned in the previous stage, or incorporating colours and images at this stage made it less monotonous. The key focus at this stage is ensuring consistency in the arrangement of colours, structure, images, and fonts.
Visual Design
|
| Fig 1.3 Visual elements used |
Above part: The illustration I adjust it to red colour scheme to maintain consistency and the images of other banks just use back the original pictures.
Below part: All icons used are from Figma plug in (Icons8-https://www.figma.com/community/plugin/791103617505812222), the colour changed according to the interface background colour
Functionality
|
| Fig 2.1 Interactive button in main page |
|
Total 8 buttons in home page is functioned, I mainly focus on doing the task of transferring fund, checking account details and view transaction history details.
|
Interface design of notification page, profile page and apply page. These pages are not the area I focus on, so the content and text I used back the original PB Engage MY app content, but different design.
|
| Fig 2.3 Account page flow |
|
| Fig 2.4 Fund transfer flow |
|
| Fig 2.5 Log in design |
|
| Fig 2.6 Welcome page design |
|
| Fig 2.7 User guidance design |
User Testing
Task 1-Transfer fund to a new recepient
Task 2-Transfer fund to Lee Ah Hong
Task 3-Check account balance and number
Task 4-Check transaction detail
Task 5-Go through whole app
User testing feedback questions:
|
| Fig 3.1 questions to ask user |
User #1- Qian Ee (conducted f2f)
|
| Fig 3.2 User #1 feedback |
|
| Fig 3.3 User #2 feedback |
|
| Fig 3.4 User #3 feedback |
|
| Fig 3.5 User #4 feedback |
|
| Fig 3.6 User #5 feedback |
Final prototype:
Reflection
As the app design module concludes, I am convinced that choosing this specialisation was the right decision. Despite the coding challenges that may arise in the next semester, I am currently enjoying the intricacies of this course. The assignment, focused on refining the design of an existing app, has been particularly engaging.
Throughout the course, I have gained valuable insights into the finer points of software design. Beyond the basics of visual cohesion and consistency, I've delved into nuanced details such as button curvature, font weight selection, and the artful use of shadows. It's not just about creating a visually appealing interface but paying attention to subtleties that enhance the overall user experience.
The practical application of knowledge, especially in refining an existing app's design, has been immensely gratifying. Witnessing the transformation of user interfaces and understanding the impact of thoughtful design decisions has been a valuable learning experience.
While anticipating the coding challenges in the upcoming semester, I am confident that the skills and perspectives gained from this app design course will serve as a solid foundation. Reflecting on the myriad details involved in creating a user-friendly and aesthetically pleasing app, I look forward to the creative possibilities that lie ahead in the field of application design.
Comments
Post a Comment