Labels

APPLICATION DESIGN II: TASK 01

ALICIA TENG YI LING [0345159]

APPLICATION DESIGN II [TASK 01] 



Task 01: App Design I Self-Evaluation & Reflection

Todo:
  • Write a reflection on the outcome of App Design I's work
  • Determine what should be changed and updated
Reflection:

In the previous semester, I re-designed an app and called it "Meal Planner". In the given time span of 14 weeks, I was extremely happy with the outcome and I still am, it's just that there are changes that can be done to improve the UI/UX of this app design.

I  started by identifying its strengths and weaknesses. As well as considering aspects such as usability, visual appeal, intuitiveness, and overall user experience.

General Design Changes:
  • Colour palette
    • A little too green or the shade feels off
    • Solution: I can consider swapping out some elements with neutral shades to add more depth to the overall design. Neutral shades like grays, beiges, or whites can help balance out the green and create a more visually appealing and less monotonous interface. Additionally, the new colour scheme should aligns with the app's purpose and the emotions and thoughts I want to evoke in users (e.g., freshness, ease to cook or good organisation).

Displayed below is the new color palette I have come up with, carefully chosen to align with the visual theme and evoke the emotions that I wish to convey to users.


Fig 1.1 New Colour Palette

Notes:
  • The beige-grey tone is for the background
  • The orange tone is for the main call to action interactions
  • The green is for text, paragraphs and large buttons
Interface Changes:
  • One of the primary things I was thinking about was: 
    • How can I make it easier for users to understand the app? How can I make their access to necessary information better?
    • Solutions I came up with:
      • Clear and intuitive navigation: Ensure that the app's navigation is intuitive and easy to understand. Use clear and descriptive labels for menu items, buttons, and icons. Consider organizing the navigation in a logical hierarchy, such as using a bottom tab bar for primary sections and a hamburger menu for secondary options.
      • Streamlined onboarding process: Make the onboarding process smooth and user-friendly, guiding users through the app's key features and functionalities. Use visual cues, tooltips, or interactive tutorials to educate users about how to use the app effectively.
      • Consistent and familiar UI patterns: Stick to familiar UI patterns and conventions that users are already accustomed to. This can help users quickly understand how to interact with the app and find the information they need. Avoid complex or unconventional interactions that might confuse users.
      • Clear ingredient and cooking instructions: Ensure that the ingredient lists and cooking instructions are presented in a clear and easy-to-follow manner. Consider using bullet points, numbered steps, or collapsible sections to improve readability and organization.

Previous Semester App Design


Loading Screen

I made changes to the logo of the app as it felt slightly off-center, which was bothering me. I decided to make the logo more elaborate by adding additional details and elements. Moreover, I found that aligning the app title straight made the overall design cleaner and more visually appealing.

Initially, I added a drop shadow to the logo to make it stand out more. However, after consulting my friends who are graphic designers, they suggested that it would look cleaner without the drop shadow. Taking their advice into consideration, I removed the drop shadow from the logo and it did look more clear, especially from further away. 

Additionally, I updated the background color of the app to align with the new color scheme. This change helped create a more cohesive and harmonious visual experience throughout the app. These modifications to the logo and background color contribute to a more polished and unified visual identity for the app design.


    Fig 2.1.1 Loading Screen Changes

    Onboarding

    I replaced the old logo with the new one, giving the app a fresh and updated look. Additionally, I made some improvements to the navigation buttons. I increased their size by 2 pixels to enhance usability, and I also changed their color to align with the overall design aesthetic. 

    Furthermore, on the final onboarding screen, I made adjustments to the main button. I increased the font size to 18 pixels to improve readability and make it more prominent. Along with the font size change, I also updated the button's colors to ensure consistency with the app's new color scheme. 

    These changes not only enhance the visual appeal but also improve the user experience by providing clear and easily recognizable navigation elements and a more engaging onboarding process


    Fig 2.2.1 Onboarding Screens Changes

    I then decided to completely redo the design direction and scrap all the vector art. I chose to go the route where the backgrounds are just food-based images as I felt it looked more professionally and visually appealing as a food app.


    Fig 2.2.2 Final Onboarding Screen Designs
    Log In

    I performed several updates to improve the app's design. Firstly, I updated the logo, giving it a fresh and modern look that better represents the brand or app identity. This change helps create a more appealing visual presence. 

    Secondly, I revamped the color schemes used throughout the app. By selecting new colors or adjusting existing ones, I aimed to create a harmonious and visually pleasing experience for users. The updated color schemes bring a sense of cohesiveness and enhance the overall aesthetics. 

    Additionally, I increased the font sizes of buttons by 2 pixels. This adjustment ensures better readability and makes the buttons more easily tappable, leading to a more user-friendly interface. 

    These updates collectively contribute to an improved app design, providing users with a refreshed logo, visually appealing color schemes, and enhanced usability through enlarged button font sizes.


    Fig 2.3.1 Log In Screen Changes

    Sign Up
    I made some changes to enhance the app's visual appeal and create a more welcoming atmosphere. One of the key changes I implemented was replacing the plain background with a homey-style image. This alteration aimed to add warmth and make the app feel more inviting, while also preventing the plain colors from becoming monotonous. It was important to me that the new background image (retrieved from pexels.com) aligned well with the app's new color palette, maintaining consistency throughout. 

    Furthermore, I updated the logo in the top center area once again to ensure it harmonized with the overall design changes. Additionally, I made adjustments to the color scheme, aligning it with the new background image and maintaining a sense of visual unity. 

    These changes collectively contribute to a more welcoming and visually engaging app experience, while maintaining a cohesive look and feel through the updated logo and color scheme.


    Fig 2.4.1 Sign Up Screen Changes

    Home

    To improve the user experience, I extended the length of this page to alleviate the cramped feeling of the buttons in the bottom section. By providing more space, I was able to enlarge the buttons, ensuring better readability and making them easier to interact with. 

    Additionally, I introduced a new section that features inspirational quotes. This addition aims to provide users with encouragement and motivation while using the app. The quotes serve as a positive and uplifting element, enhancing the overall user experience. 

    By extending the page length and enlarging the buttons, as well as incorporating the new inspirational quotes section, the app now offers improved usability, and enhanced readability.


      Fig 2.5.1 Home Page Changes

      I then made several more major design changes such as shifting the carousel from centre starting to the left (I felt it would make more sense to start chronologically from breakfast) as well as resizing some UI elements. I also introduced a new page holding a summary of that day's meals, which is the largest UI change to this page, allowing users to quickly glance at their entire consumption plan for the day (+convenience). Additionally, I resized and arranged the smaller sections at the bottom to show hierarchy of importance between sections and it also looks and feels cleaner + easier to digest.


      Fig 2.5.2 Final Home Page Design


      Fig 2.5.3 Add on Meal Summary Page

      Daily Meal Plan

      Currently, I have updated the color scheme, but I am also exploring ways to improve the display of information and make it more accessible to users. My focus is on finding a solution that presents information in a clear and user-friendly manner. 

      In my experimentation, I tried out a new layout by combining the daily meal planning page with the actual recipe page. This approach aims to streamline the user experience, allowing users to seamlessly transition between planning their meals and accessing detailed recipe information. 


      Fig 2.6.1 Daily Meal Plan Ideas

      Recipes
      For this section, I simply updated the color scheme to align it with the updated overall color palette.


      Fig 2.7.1 Recipes Page Changes

      This page has arguably the biggest design and UI changes from the original. After Mr. Razif's feedback, he highlighted that the most important function of the app is to review and keep track of meals as well as select that so I must make that apparent in this app design. Therefore, I allocated sections where the users can choose their meals for days and I updated the UI design for the food carousels as I believe it looks more aesthetic, easier to understand and more suitable for a meal planning application. Additionally, I updated the UI for the pop up meal selections. 


      Fig 2.7.2 Final Recipe Page Design


      Fig 2.7.3 Pop up sections for meal selection

      Recipe 2
      I made adjustments to the alignment and spacing of the numbering circles in the 'Directions' section, ensuring a more consistent and visually pleasing layout. 

      I also made changes to the color palette to match the new colour scheme.


      Fig 2.8.1 Recipes 2 Page Changes

      Calendar

      I updated the color of various UI elements to create a more cohesive and visually appealing interface. Additionally, I implemented a new feature that includes a pop-up panel when the user taps the "+" button. This addition provides a convenient and intuitive way for users to access additional functionality or information within the app.


      Fig 2.9.1 Calendar Screen Changes

      Another major design change was the calendar section. I changed the colours around, resized elements and updated the UI for the meals.


      Fig 2.9.2 Final Calendar Page Design


      Fig 2.9.3 Updated pop up section design for calendar

      Calorie Counter

      I simply updated colours for this section.


      Fig 2.10.1 Calorie Counter Screen Changes
       
      Daily Water Intake

      For this section, I updated the UI colours and I implemented a new feature which is a pop-up panel when the user taps the "+" button. This allows the users the ability to input their own information. However, it will likely only be for prototyping and appearances only and not functionality. 


      Fig 2.11.1 Daily Water Intake Screen Changes


      Fig 2.11.2 Updated pop up section design for daily water intake

      Shopping List

      I noticed that the intuitiveness of the add/minus option was not optimal, so I conducted several tests and experimented with new designs to address this issue. Based on previous user feedback and insights, I made significant updates to the user interface (UI) to improve its user-friendliness. 

      As usual, I updated the colour scheme to keep a cohesive look throughout the app.


      Fig 2.12.1 Shopping List Trial & Errors

      Fig 2.12.2 Final Colour Palette Comparison

      I expanded the shopping list section by introducing two new screens. One of them is an empty list screen, which gives users a more interactive experience by allowing them to manually add their groceries through tapping. This approach aims to create a sense of interactivity and involvement for the users, making the shopping list feature more engaging and immersive.


      Fig 2.12.3 Two new pages [empty shopping list], groceries options and filled up shopping list

      Dropdown Menu

      Updated background colours


      Fig 2.13.1 Dropdown Menu Screen Changes               


      Known General Issues:
      1. Animation glitches during transitions between screens 
      2. Challenges with Adobe XD responses and functionality


      Fig 2.14.1 Previous Design Screens


      Fig 2.14.2 Progressing Design Screens


      Fig 2.14.3 Final Design Screens


      Fig 2.14.4 Final Design Screens with grid layout

      Fig 2.14.5 Final Design Screens with prototype interactions

      Final Redesign of App "Meal Planner" for Viewing

      Feel free to try it out!

      Feedback
      • Regarding the shopping list:
        •  Enhance the information hierarchy design by utilizing appropriate colors and font sizing, ensuring that important information stands out prominently.
        • Ensure that the UI (+ / - button for ingredients) for important interactions and buttons are easy to notice and user-friendly 
      • Analyze the significance of various elements on each page/screen, such as the calorie counter and others, to prioritize the most important information effectively. 
      • Reconsider the layout of recipe screens to enhance user comprehension and facilitate easier access to essential information

      Reflection 

      Throughout the redesign of this app project, I embarked on a journey of exploration, learning, and improvement. The process allowed me to dive deep into the intricacies of UI/UX design and consider the impact it has on user experiences. One of the key takeaways from this project was the importance of constant iteration and user feedback. This way of thinking enabled me to refine the app's interface, addressing issues and enhancing usability along the way. 

      I also discovered the significance of color schemes and their impact on the overall visual appeal. Through careful consideration and experimentation, I revamped the color palette to create a more cohesive and visually pleasing experience. This process not only improved the aesthetics but also contributed to a more engaging and immersive interface. 

      Another valuable lesson I learned was the importance of intuitive navigation and clear information presentation. By simplifying the app's interface, organizing content, and providing seamless transitions between screens, I aimed to enhance user understanding and accessibility. The challenges during this project involved animation issues and hurdles with Adobe XD responses.

      Overall, this project allowed me to apply my design skills, experiment with new ideas, and push the boundaries of my app design skills. The process of redesigning the app deepened my understanding of user-centered design principles, and also honed my attention to detail. . As I conclude this project, I am happy with the progress made and the improvements achieved. 
        Labels:

        Comments

        Post a Comment

        Popular Posts