Application Design II - Task 1 : Self-evaluation & Reflection

29/08/2023 - 0/0/2023
Week 1-Week 14
Tan Pei Yun / 0345386
Application Design II /Bachelor of Design in Creative Media


Instructions 

 



Task 1: App Design  
Self- Evaluation & Reflection

Task 1 - Application Design - Self-evaluation & Reflection

After looking back at my GongCha app prototype from previous Application Design I , I find that the overall user interface design and user experience are likely to satisfactory. As now, we moving on to application II where we have to deal with the real deal to start coding, I understand that we need to be really pay more attention and detailed to make sure the interface design works well in the actual app and everything app flow functions smoothly.




Feedback given

Feedback given by Mr Razif (Nav, Menu , Order Summary)

During the first week, Mr. Razif provided feedback that encouraged us to dig deeper and gain a better understanding of the areas where need to be cautious, as well as identifying opportunities for improvement and refinement in the app design. 

Few different part were mentioned during feedback session:
1. Navigation Bar
2. Steps / Flow when click the menu button 
3. Order Summary and Check out Page

While others page in terms of design and functionalities given feedback by Mr Razif is that the are overall simple straight-forward and clear. 



Problem found
With the feedback given, I made some changes based on it. I identified three different issues and made improvements to address them. These are the current problems I have identified so far and I will continue to make updates as needed :)

1. Poor Colour Contrast in Navigation Bar 
Problem #1 - Colour Contrast in Navigation

Issue - The navigation bar colour have a poor contrast with the text and icons on it, making it difficult for users to read or distinguish the navigation options.

Solution -  Therefore the solution is to choose a background colour for the navigation bar that provides good contrast with the text or icons. 



2. Steps and Flow under the menu section

Problem #2 - Colour Contrast in Navigation

Issue founded - The steps required to navigate the menu are perceived as too many and complicated.

Solutions - Simplified and reduce the number of steps required to the menu page  OR Just keep it straight forward and directly lead users to the "Product Listing Page" 


3. Lack of detailed in order summary to check out 
Problem #3 -Lack of Detailed under the order summary > check out 


Issue - The "Add to Cart" page lacks detailed information about the selected items and may leave users with uncertainties for instance the “sub total” 

Solutions - Combine both page (order summary at the top while check out at the bottom) Display delivery or pickup details, including the selected location or address, estimated arrival time, and any special instructions.



Improvement made 
Improvement #1 - Navigation bar

Before and After Colour Changes 


What I have discovered is that even small improvements in detail can have a profound impact. Sometimes, for me , it's easy to underestimate the importance of colour choices. After make the changes in Figma. I'm really pleased with how the overall design has evolved, I am happy with how the design now looks fresh and new loooking.


Getting more and more complicated in figma prototype

Navigation Bar Before and After 

When I look back at it, I notice that it feels better when you click on it. The icons and their colours are much clearer now. Before that, I can't really noticed well the icon from far and even from near apart, glad that now it had fixed this problem. 




Improvement #2 - Steps / Flow when click the menu button 

Refinement in menu steps 
 

To refine this, is one of the easiest, when Mr Razif give the feedback on this, I do agree that Yes the steps and flow to menu is takes tooo banyak form live orde rpage , locator and only takes to menu. Due to that  from previous application 1 it requires us to redesign based on the official application, however now no more ! we can make our own decision, therefore I decided cut down the flow and make it easier 


Improvement #3  - Order Summary and Check out Page

This third improvement is an extra step I took in the refinement process. I noticed that the order summary to checkout page still lacked some essential details, particularly in the 'sub-total' section, which seemed somewhat non-functional. As a result, I felt it was necessary to make some additional adjustments

Updated Order Summary

I added "special remarks" where allow customers to communicate specific instructions or preferences for their order. Next, I also add the offering "packaging options" like straws and paper bags allows customers to make eco-friendly choices as some customers may prefer to reduce waste by opting out of certain packaging items, while others might prefer the convenience of having everything included. Lastly,   "Voucher" to provides an avenue for promotions and discounts. 


Compilation Slides 

Lastly, I also created a compilation of slides that provide an overview of the issues identified in the app interface design, as well as the refinements that were implemented


Figma : Refinement GongCha Application Design

 

 



Reflection
The journey of doing the refining this application task 1 has been both slightly challenging and enlightening and enjoying (maybe a little) , as it requires lots of observation and one thing I found out is that , It's incredible how the tiniest details can make the application interface design of difference in the overall user experience. The feedback from previous usability testing was instrumental in guiding the changes I made along with Mr Razif feedback too.  It revealed issues that I had overlooked in the initial design and underscored the importance of real user testing. Each piece of feedback was like a stepping stone, leading me to create a more user-friendly and visually appealing app.

One of the most significant changes was the use of contrasting colors to improve button visibility. It's astonishing how this simple adjustment made the app more user-friendly, especially for older users. The addition of 'special remarks,' 'packaging options,' and 'vouchers' in the order summary section was another game-changer. These features not only enhance customization but also address sustainability concerns and customer loyalty. Overall, I have learned that UI/UX design is not just about creating a visually appealing product but it's also about creating and make sure that an experience that users find enjoyable and effortless.

Comments

Popular Posts