Labels

DST 61004 APPLICATION DESIGN II - TASK 1: SELF-EVALUATION AND REFLECTION

22.4.2024 - 26.7.2024 (Week 1 - Week 7)
Er Xin Ru (Melanie) | 0354939 
Bachelor Of Design (Hons) In Creative Media | Taylor's University
Subject: DST61004 - Application Design II
Task 1: App Design II Self-Evaluation and Reflection 

INSTRUCTIONS 

Task 1: App Design 1 Self-Evaluation and Reflection
In our Application Design 1 course, we were tasked with writing a blog post that involved a thorough self-evaluation and reflection on the final project we completed. This exercise was designed to help us document and analyze the issues, challenges, and difficulties we encountered during the mobile app design process, and to propose solutions for improving the app’s aesthetic and user flow.

Mobile app design is inherently iterative, requiring continuous refinement and enhancement. This reflective task aimed to aware of the ongoing nature of improvements in app design, emphasizing that perfection is a moving target and that user feedback and self-assessment are critical to this process. To facilitate constructive feedback, we were required to submit their self-evaluation and reflection documentation via Google Docs. This platform was chosen for its ease of commenting, allowing the module coordinator to provide detailed feedback directly within the document.

Previously, there were a total of 4 tasks for my Application Design 1 module course. Here is a review of my blog post on Application Design 1.

E-Portfolio Links: Application Design 1
1. TASK 1 - APPLICATION DESIGN I: PROJECT 1 | Task 1 - (20%) App Design Proposal

2. TASK 2 - APPLICATION DESIGN I: PROJECT 2 (UX/UI DOCUMENTS) | Project 2: UI/UX Design Document 20 %

3. TASK 3 - APPLICATION DESIGN I: PROJECT 3 (LO-FI) | Project 3: Lo-Fi App Design Prototype 20%

4. TASK 4 - APPLICATION DESIGN I: PROJECT 4 (HI-FI) FINAL PROJECT | Final Project & E-portfolio 40%

1 | (HI-FI) High-fidelity prototype from APPLICATION DESIGN 1

The flow of my apps - Process in AI & Adobe XD
In Application Design 1, we were required to share a post on our blog about self-evaluation and reflection on the app design we created.

Here is my Hi-Fi (High-Fidelity) prototype from App Design 1:
For this project, Creating this Hi-Fi prototype was a learning experience that taught me a lot about user-centered design and the importance of visual clarity in App development. This is just a preview of the full design work I did for the prototype, and updates will be made in the next sections.

Fig 1. Design in AI Illustrators before making it at Adobe XD 

Fig 2. Design in AI Illustrators before making it at Adobe XD 

Before starting the prototype, I conducted extensive research and exploration since it was my first time using Adobe XD. Although I found it challenging but I was determined to do my best. After that, I exported the project to Adobe XD and after several hours of dedicated effort, I completed the prototype.

Fig 1. Making it at Adobe XD of my Shopee Apps and how it flows

2 | COMPARISON OLD & NEW DESIGN - REDESIGN & UPDATES
Here are the details of each Hi-Fi app page, organized into sections with comparisons between the old and new designs.

  1. Log In/ Register page 
  2. HomePage - Daily Discover
  3. My Profile
  4. Search Filter
  5. My Purchase
  6. Discover : Live/Findings
  7. Shopee Mall 
  8. Message and Notifications
  9. Type to Search Here - Trending Search
  10. My Wallet
  11. Product page : Description and Variation
  12. Checkout & Payment
Adobe Illustrator - NEW DESIGN
Here are New Design for Application Design II

Fig 1. Adobe Illustrator - New Design

Fig 2. Adobe Illustrator - New Design

ADOBE ILLUSTRATOR - OLD & NEW DESIGN COMPARISON
  1. Log In/ Register page 
  2. HomePage - Daily Discover
  3. My Profile
  4. Search Filter
  5. My Purchase
  6. Discover : Live/Findings
  7. Shopee Mall 
  8. Message and Notifications
  9. Type to Search Here - Trending Search
  10. My Wallet
  11. Product page : Description and Variation
  12. Checkout & Payment
Fig 1. Adobe Illustrator - Old and New Design Comparison

Fig 2. Adobe Illustrator - Old and New Design Comparison

Fig 3. Adobe Illustrator - Old and New Design Comparison

Fig 3. Adobe Illustrator - Old and New Design Comparison


1. 
Log In/ Register page [ Comparison Old & New Design ]

Old Design
 
Fig 1. Log In / Register [ Old Design ] 


Fig 2. Log In / Register [ Old Design ] 


New Design



Fig 1. Log In / Register [ New Design ] 

Fig 2. Log In / Register [ New Design ] 

Here is a comparison of the old and new designs. Most of it will remain the same, I believe it was a good decision to only make updates to the choose an account section after clicking on it, in order to enhance and make it look more professional.

2. 
Homepage - Daily Discover [ Comparison Old & New Design ]
The design are mostly remaining but I want to create a simpler, more stylish appearance that conveys a clean and minimalist design feel. The original design felt the details are not satisfied as u can see (type to search here are too big) and some of the picture and words are not align perfectly which could be not satisfied for users. so I decided to redesign it with several key improvements:

Old Design
Fig 1. Main Page [ Old Design ] 

New Design


Fig 1. Main Page [ New Design ] 

There are several changes have been made for the New Design :
  • Scroll View 
  • Type to Search Here Bar: Minimise it more smaller to have a greater world, include the search and camera icons, as well as shopping cart and message icons.
  • My Wallet Bar: I've add the My Wallet bar with the following: Scanning option | Wallet balance | Total Shopee coins |Vouchers/discounts
  • Mistake (there are blank part in you might like section)
  • Shocking Sales Section: Add colour icons above the section & Color the icons to make it easier for consumers to identify, as too many options can be messy.
  • Shortcuts: Add shortcuts for Discounts, Shopee Food Near Me, and Daily Discover.
  • Product Display: Ensure product pictures catch consumer attention by highlighting features such as Free Returns and discounts.
3. 
My Profile [ Comparison Old & New Design ]
Here's the profile page. The old design was outdated and didn't look very professional, so I took the opportunity to make it simpler and more modern. I aimed to create an engaging and visually appealing design for users. My goal was to improve the user experience by adding elements that are attractive and easy to use while keeping the unique style that makes it recognizable as a Shopee app.

Old Design
                          
Fig 1. Profile [ Old Design ] 

New Design

Fig 2. Profile [ New Design ] 

There are several changes have been made for the New Design :
  • Scroll View
  • Most of the design structure has been changed, including adjustments to the profile picture and cover. 
  • The design is now simpler and makes it easier for consumers to quickly find what they are looking for.

4. 
Search Filter [ Comparison Old & New Design ]
The profile page's new design structure retains similarities to the old design, with several key enhancements for improved usability and visual clarity. The updated colour scheme now look more contrast using of orange and light grey below of words, making the interface clearer and easier to navigate. 

Old Design

Fig 1. Search Filter [ Old Design ] 

New Design

Fig 2. Search Filter [New Design ] 
    There are several changes have been made for the New Design :
    • Improved Color Scheme: The updated colour scheme now has a more contrasting look, using orange and light grey below the text. This makes the interface clearer and easier to navigate, enhancing readability and reducing eye strain. By refining the color scheme and improving visual clarity, the profile page now offers a more user-friendly experience. These enhancements make it easier for users to navigate the app accurately and efficiently, addressing common issues related to misclicks and readability.
    5. 
    My Purchase [ Comparison Old & New Design ]
    Compared to the old design, I maintained most of the original elements but made significant improvements to upgrade and enhance the pages.

    Old Design
    Fig 1. My Purchase [ Old Design ] 

    New Design


    Fig 2. My Purchase [ New Design ] 

    There are several changes have been made for the New Design :
    • No Order Yet: Displayed with a light orange colour tone for a more pleasant look.
    • You Might Like: Includes information on free returns and discounts shown on the profile.
    6. 
    Discover : Live/Findings [ Comparison Old & New Design ]

    Old Design

    Fig 1. Explore: Live/Findings [ Old Design ] 

    New Design



    Fig 2. Explore: Live/Findings [ New Design ] 

    There are several changes have been made for the New Design :
    • Live Profile: Added to enhance interactions and provide shortcuts for users. An orange round shape is displayed next to the live shop profile to indicate that it is active.
    • Findings: Includes added features such as discounts, free gifts, and buy1free1 offers.

    7. 
    Shopee Mall [ Comparison Old & New Design ]
    The design are mostly remaining but I want to create a more functional compare to the old design. The original design felt the details are not satisfied as u can see (search : shopee mall) and some of the picture and words are not align perfectly and spaces as well which could be not satisfied for users. so I decided to redesign it with several key improvements:

    Old Design
                                    
    Fig 1. Shopee Mall [ Old Design ]
    New Design


    Fig 2. Shopee Mall [ New Design ] 

    There are several changes have been made for the New Design :
    • Scroll View 
    • Type to Search Here Bar: Minimise it more smaller to have a greater world, include the search and camera icons, as well as shopping cart and message icons.
    • Discount % word been display on the product profile
    8. 
    Message and Notifications [ Remain Design ]
    The design remaining as the old one as I think it is good to go. But for the animating coding ideas I've think more interactive elements compared to the old one, enhancing user engagement and functionality. 

    Remain Design

    Fig 1. Message & Notifications [ Remain Design ] 
    • Interactive Chat Icons: The design includes interactive icons that enhance the user experience. For example, icons for favorite shops or frequently messaged sellers appear, making it easy for users to revisit these stores or continue conversations.
    • Quick Access Features: Icons for frequently visited shops and recent messages provide users with quick access to their preferred stores or ongoing conversations with a simple click.
    9. 
    Type to Search Here - Trending Search [ Comparison Old & New Design ]
    I've made significant improvements to the search product/categories feature compared to the old design. The new look is simpler, with more contrasting colors that make it easy to view at first glance, and the design is more straightforward than before.

    Old Design
                                                             


    Fig 1. Search Product/Categories [ Old Design ] 
    New Design

    Fig 2. Search Product/Categories [ New Design ] 

    There are several changes have been made for the New Design :
    • Scroll View
    • Features a more simplified design for searching product categories.
    • Border: The lighter of the outer glow effect has been simplified for a cleaner look.

    10.
    My Wallet [ Comparison Old & New Design ]
    The My Wallet section provides users with a comprehensive overview of their financial interactions within the app. It includes:
    • Scanning Option: Allows users to easily scan QR codes for payments or promotions.
    • Wallet Balance: Displays the current balance available in the user's wallet.
    • Total Shopee Coins: Shows the total number of Shopee coins the user has accumulated.
    • Vouchers/Discounts: Lists available vouchers and discounts that users can apply to their purchases.
    Old Design

    Fig 1. My Wallet [ Old Design ] 

    New Design


    Fig 2. My Wallet [ New Design ] 

    There are several changes have been made for the New Design :
      My Wallet: The My Wallet section provides users with a comprehensive overview of their financial interactions within the app. It includes:
      • Shopee Pay: Displays the balance amount prominently on the page, making it look more professional and easy for users to use for payments. This improvement addresses the previous issue where users were confused because they couldn't see their balance.
      • Shopee Coins: Shows the total number of Shopee coins collected, enhancing the professional look and making it easier for users to use coins for payments. This change resolves the previous confusion where users couldn't see their coin balance.
      • Vouchers: Mostly remains the same, but now includes a bar below the Shopee Pay, Shopee Coins, Vouchers, and Deals sections. This bar categorizes vouchers into sections like Shopee, ShopeeFood, shops, and more, improving organization and usability.
      This section is designed to streamline financial management and make it convenient for users to track their balance, rewards, and savings in one place.

      11. 
      Product Page - Description & Variation [ Comparison Old & New Design ]
      Product Page: The product page is significantly more detailed and uses a more contrasting colour scheme compared to the old design.

      Old Design
                                 

      Fig 1. Product/Service Page [ Old Design ] 

      New Design


      Fig 2. Product/Service Page [ New Design ] 

      Product Details: Provides comprehensive information about the product.
      Product Variation: Allows users to choose the product colour and amount.
      Add to Cart: Features a streamlined shopping cart addition process.

      Most of the design remains the same, but there are updates primarily to the color scheme. Since there are too many details on the page, I've aimed to make it cleaner and simpler. The overall structure is the same, with only slight changes for improved clarity.

      12.
      Checkout & Payment [ Comparison Old & New Design ]

      Checkout and Payment Process: The checkout and payment process has been significantly improved in the new design, with everything aligned neatly compared to the old design. Some important parts have been highlighted, such as:

      Old Design

      Fig 1. Checkout & Payment [ Old Design ] 

      New Design

      Fig 2. Checkout & Payment [ New Design ] 

      Total Amount: The price of the product is prominently displayed.
      Select Payment Method: This section is made clearer for user convenience.

      Other elements have been retained as they were already effective.

      The new design features a streamlined checkout flow with clear progress indicators, enhanced security measures, and multiple payment options for user convenience.


      3 | VIDEO PRESENTATION - Comparison New & Old Design :

      Youtube Task 1 Vid Presentation : Comparison New & Old Design

      3 | NEW DESIGN VIEW
      Here are the details of each Hi-Fi app page, organized into sections with comparisons between the old and new designs.

      1. Log In/ Register page 
      2. HomePage - Daily Discover
      3. My Profile
      4. Search Filter
      5. My Purchase
      6. Discover : Live/Findings
      7. Shopee Mall 
      8. Message and Notifications
      9. Type to Search Here - Trending Search
      10. My Wallet
      11. Product page : Description and Variation
      12. Checkout & Payment





























      4 | MY NEW FLOW - ADOBE XD

      I exported the design I upgraded in Adobe Illustrator and started my flow in Adobe XD. I learned by watching tutorials to further improve and create new flows compared to the previous version. The old design was too simple, so I wanted to challenge myself to make it better.

      Fig 1. Design export to Adobe XD View

      Fig 2. Design export to Adobe XD Zoom View

      Fig 3. Design export to Adobe XD Prototype View

      Fig 4. Design export to Adobe XD Prototype Zoom View

      4 | VIDEO PRESENTATION - ADOBE XD MY FLOW :

      Fig 1. Video Presentation View for my Adobe XD Flow View


      Vid 1. Video Presentation View for my Adobe XD Flow View

      5 | VIDEO PRESENTATION HI-FI prototype - ADOBE XD TESTING
      Prototype Record from Adobe XD [No Presenting, Just View & Testing for Flow]


      YouTube Video : Adobe XD Testing [No Presenting, Just View & Testing for Flow]

      6 | ADOBE XD MY FLOW - PROTOTYPE VIEW :
      Adobe XD View Prototype


      Task 2: App Design II Interaction Design Planning & Prototyping will be in next E-Blogspot
      https://melanieerdesigner.blogspot.com/2024/06/dst-61004-application-design-ii-task-2.html

      Labels:

      Comments

      Post a Comment