Application Design II Task 1
24/9/2024-3/1/2025 Week 1 - Week 14
Wong Kai Xin / 0353027
Application Design II / Bachelor of Design in Creative Media / The Design School
Task 1
INSTRUCTIONS
Students are required to perform a self-evaluation and reflection based on their mobile application design I final project. This project aims to document the issues, problems, and difficulties and propose solutions to improve the mobile app design aesthetic and user flow. Mobile App design is an iterative process, and this task will expose to students the constant improvements one can make to their app. Students are required to submit the documentation in Google Docs for ease of commenting and feedback by the module coordinator.
Requirements: To submit a self-reflection blog post on the app design refining process with a clear comparison between the old and new design.
CLASS SUMMARY
Week 1
no class
Week 2
class activity on revisiting html and css
link: https://www.figma.com/design/29z0ulyOHONEK77cJUNUkf/App-Design-Exercise?node-id=0-1&node-type=canvas
DOM (document object model)
We did a class exercise using AdobeDreamweaver with html as well as javascript to create a to-do list. It was slightly challenging as one wrong symbol could make the whole thing not work so I followed carefully during class about which keys to enter in order to keep up.
html code
javascript code
final result of to do list
TASK 1
Self evaluation/reflection
For our very first task, we were to do a self evaluation and reflection on our Application Design I Final Project. I did an improved app for "Secret Recipe", however I still feel like it can be better.
First, I asked ChatGPT if there for feedback on my current prototype:
Moving on, I added on some things I felt was good/lacking as well. First, I will be listing out the positives.
Positives:
1. Minimalist Design: The clean, uncluttered design with ample white space creates a sophisticated and modern look
2. Consistent Color Scheme: The design uses a consistent color palette, with red as the primary accent color. This helps maintain visual cohesion throughout the app.
3. Consistent Navigation: The bottom navigation bar which is visible across multiple screens, ensures familiarity and ease of access to key features like "home", "favorites", and "profile."
4. Readable Text Styles: Headings and body text have appropriate hierarchy, ensuring readability.
5. Visual Balance: Screens like the menu and cart show a good balance between images and text.
Now, diving into the portions to be improved:
1. Member Page:
I am most not satisfied with this page as I felt like the space was not utilized properly. A progress bar was introduced beneath the points display, giving users a clear visual of how close they are to earning the next reward. The buttons were too empty, so I added icons to the call-to-action buttons, making the navigation more intuitive. These changes make the page more user-friendly, engaging, and informative.
before
after
after2. Notifications Page:
For the notifications page, I felt that it had no major problems but it could be improved to make finding messages easier for the users. Therefore, I included a search bar and changed the color for the unopened messages, as well as adding a mail symbol which indicates if a message has been opened or not. I also added the time stamps of the mail (sorted according from newest to oldest).
before
after
after3. Track Order Screen:
As the current lacked a lot of information, it could benefit from more real-time elements that show delivery stages. Adding a progress bar would enhance the user experience. I also noticed how normally food delivery apps had a "contact driver" option so I made sure to include that. As for the previous layout, it didn't include a button that could take you back to "home" so I included that as well.
before
after
4. Profile Page:
The layout feels cramped, so I decided to utilize the white space more efficiently. Not only that, I replaced the words with icons for better visual representation of information. I also added buttons for editing profile information and changing password. Overall, it has become a more visually appealing layout for personal information.
before
after
after5. Terms of Use:
This wasn't a really major issue but it bothered me that the current text-heavy screen could be overwhelming, so I tried adding a collapsible section to improve readability and navigation.
before
after
after
Week 2
- too much space in footer
- span is unnecessary
- reduce image size
Week 5
- Navigation bar put label
- More space for navigation bar (curved edges in iphone)
- Profile page profile pic use avatar
- Add skip button in onboarding screen
- Insert a SR icon for login screen to see brand identity
- login page can be wider
- ”forget password” can be bigger, shift A for auto layout
- indicator that u are in which specific page
Home page
-not very exciting,
- want to see the promotion first
- zus is a good example adidas too
- make the discounts obvious
- too many white space
Menu page
- fill up whole screen
- dont use color border
Profile page
- button make it bigger
- buttons be consistent (same shape)
Notifications page
- bigger
Refer a friend
- hierarchy not good make the code bigger
REFLECTION
This exercise of enhancing the member page of a mobile app design was insightful, allowing me to apply UI/UX principles to improve user experience. The focus was on making the interface more engaging and informative. By incorporating more visually distinct and interactive elements such as icons and intuitive button placement, I strengthened the design’s clarity and usability. Reflecting on this, I’ve learned that small design adjustments can significantly impact user satisfaction and engagement.
Comments
Post a Comment