Labels

Application Design I - Project 3: Lo-Fi App Design Prototype

Start from 1.7.2024

01.7.2024 -22.7.2024 /Week 11- Week 14
Zhao GuanMei/ 0363166
Application Design 1 / Bachelor of Design (Hons) in Creative Media 
Project 3: Lo-Fi App Design Prototype
INDEX

1. Lectures
2. Project 2/ Mobile Application Proposal
3. Feedback
4. Reflections

Lectures

Lecture 9: Wireframes and UI Kits

Wireframes

  • A wireframe is a two-dimensional blueprint and visual guide that shows the basic structure of a mobile app.
  • It visually illustrates different steps in the user journey to identify potential pain points before development begins.
  • Wireframes provide a clear overview of the page structure, layout, information architecture, user flow, functionality, and intended behaviors.
  • They do not include any colors, styled graphics, images, logos, fonts, or mobile app design elements. They are simple sketches showing how the app will be used.
  • Tips: Keep it simple, maintain style consistency, and ensure clear information hierarchy.
Fig 1.o Wire frame sample from Pinterest

UI Kits

  • A UI kit is a pre-packaged collection of all the UI components for a mobile app or website.
  • With a UI kit, designers don’t need to create every design component from scratch.
  • Many UI kits can be used as templates for specific use cases. For example, all e-commerce apps should have a similar user interface, so a designer can start with an e-commerce UI kit and customize it from there.
  • Good UI design impacts how much time users spend in an app. If the app is well-designed, easy to navigate, and responsive, users are less likely to leave or uninstall it.

Lecture 10: Usability Heuristics for User Interface Design

Usability Heuristics

  • These are general principles or guidelines that designers and usability experts use to evaluate and improve the user-friendliness and overall usability of products like websites and apps. They ensure a positive user experience.

  1. Visibility of System Status

    • The system should provide feedback to users about its current state.
    • This helps users see and understand the system's status.
    • Immediate feedback on user actions is essential.
    • Predictability and control are important for users.
    • More information generally leads to better decision-making.

  2. Match Between System and the Real World

    • Design interfaces to align with users' real-world experiences and expectations.
    • Use familiar concepts, language, and conventions for a seamless experience.
    • Visual metaphors: Use icons/images representing real-world objects (e.g., a trash can for deleting files).
    • Familiar language: Use words and concepts users recognize.

  3. User Control and Freedom

    • Ensure users feel in control of the interface.
    • Provide flexibility to undo or redo actions.
    • Good practices:
      • Allow users to go back a step.
      • Meet users' expectations when using a back link.
      • Allow users to easily cancel an action.
      • Provide a "Close" link to dismiss new views.
      • Support undo functionality.

  4. Consistency and Standards

    • Maintain uniformity and predictability throughout the user interface.
    • Use consistent design elements, patterns, and behaviors across the system.
    • Visual Consistency: Consistent colors, typography, icons, and layout.
    • Functional Consistency: Similar actions behave the same way across the system.
    • Feedback Consistency: Consistent feedback for user actions (e.g., success messages, error notifications, loading indicators).

  5. Error Prevention

    • Design interfaces to reduce user mistakes and provide error correction mechanisms.
    • Key strategies:
      • Clear Instructions: Provide concise guidance for tasks.
      • Confirmation Prompts: Ask for confirmation before irreversible actions (e.g., deleting a file, making a purchase).
      • Validation: Check user inputs in real-time (e.g., password strength indicators, email format validation).

  6. Recognition rather than Recall

    • Design interfaces to help users recognize information rather than recall it from memory.
    • This reduces cognitive load and enhances user-friendliness.
    • Menu Navigation: Provide clear, accessible navigation menus or icons for easy recognition and access to features.
    • History and Favorites: Allow users to access recently used items or mark favorites to avoid remembering specific details or locations.

  7. Flexibility and Efficiency of Use

    • Design interfaces to cater to both novice and experienced users.
    • Allow users to accomplish tasks according to their expertise and preferences.
    • Customization: Enable personalization of interface settings (e.g., preferred shortcuts, layout configurations).
    • Shortcuts: Provide advanced users with shortcuts or features to streamline tasks and enhance efficiency.
    • Adaptability: Create interfaces that adjust to user proficiency, offering simpler or more detailed options based on experience.

  8. Aesthetic and Minimalist Design

    • Simplicity: Include only essential elements and features that enhance user experience and functionality.
    • Visual Hierarchy: Organize content to naturally and intuitively guide users' attention.
    • Whitespace: Use ample whitespace to create breathing room between elements, enhancing readability and visual clarity.
    • Consistent Typography and Colors: Use a harmonious palette and consistent typography for a cohesive visual identity.

  9. Help Users Recognize, Diagnose, and Recover from Errors

    • Clear Error Messages: Provide specific, understandable messages explaining the issue and suggesting fixes.
    • Visual Cues: Use icons or color coding to highlight errors and direct attention to areas needing correction.
    • Guided Recovery Paths: Offer step-by-step instructions or links to help pages for resolving errors and continuing tasks.

  10. Help and Documentation

    • Contextual Help: Offer tooltips, hints, or on-screen guidance during interactions.
    • User Guides and Tutorials: Provide documentation, tutorials, or walkthroughs explaining system features and functionalities.
    • Searchable Knowledge Base: Offer a searchable database of articles, FAQs, and troubleshooting guides for common issues.
    • Online Support: Provide access to customer support, forums, or community resources for questions and assistance.

Project 3: Lo-Fi App Design Prototype

1. Wireframe

I began the redesign of H&M in Figma by setting up the project and planning the key elements I wanted to improve. This involved identifying areas for enhancement, such as navigation, product pages, and the overall user experience.

I developed my low-fidelity prototype using Figma. I initially learned to do only buttons and animation effects and gallery functions.


 I started by sketching low-fidelity wireframes for the new H&M layout. This included rough outlines of the homepage, product categories, product detail pages, and the shopping cart. These wireframes served as a blueprint for the design, focusing on the placement and structure of key elements.


Complete redesign of lo-fi overview

Start prototyping with Figma
To better demonstrate the design concept, I started prototyping in Figma. This process allowed me to visually demonstrate interface interaction and user flow, and to facilitate user testing and feedback in subsequent stages.

Complete redesign prototype of lo-fi overview

2.  UI Kit
the UI Kit will include:
1. Brand Logo
2. Brand Colour
3. Colour Palette
4. Typography
5. Iconography
6. Grid System

website :



3. User Testing

Scenario 1: Browsing and Purchasing New Clothing

Description: The user wants to find the latest clothing styles in the H&M app and make a purchase. They want to find clothes that suit them and enjoy a seamless shopping experience.

Steps:

  1. Open the H&M app and log in to your account.
  2. Browse the latest clothing recommendations and popular items on the homepage.
  3. View the product detail page to see product images.
  4. Select the appropriate size and color, then click "Add to Cart."
  5. Go to the shopping cart and confirm all selected items.
  6. Choose the shipping address and payment method.
  7. Complete the purchase and view the order confirmation and estimated delivery time.
  8. Receive a purchase success notification.

Feedback: The user finds the app interface simple and easy to use, with clear product categories and a smooth purchasing process.

Scenario 2: Managing and Tracking Orders

Description: The user wants to view and manage their order status on H&M, including viewing order details, tracking delivery status, and requesting returns or exchanges.

Steps:

  1. Open the H&M app and log in to your account.
  2. Select "My Orders" from the main menu.
  3. View the order list and select the order you want to check.
  4. View order details, including product information, order number, purchase date, and amount.
  5. Click the "Track Order" button to view the logistics delivery status and estimated delivery time.
  6. If need customer service click button or linked words.


Feedback: The user finds the order management interface intuitive and the information clear, with a convenient return/exchange process.

Scenario 3: Personalized Recommendations and Wishlist Management

Description: The user wants to receive personalized product recommendations based on their preferences and browsing history, and manage their wishlist.

Steps:

  1. Open the H&M app and log in to your account.
  2. Browse the personalized product recommendation list on the homepage.
  3. Click on an interesting product to view details.
  4. If you like the product but don't want to buy it yet, click the "Add to Wishlist" button.
  5. Select "Wishlist" from the main menu.
  6. View all items in the wishlist and select the desired color and size.
  7. If you decide to purchase a wishlist item, click the "Move to Cart" button.
  8. Regularly check the stock status and price changes of items in the wishlist.
  9. Make shopping decisions based on recommended products and wishlist.

Feedback: The user finds the personalized recommendation feature very useful and the wishlist management simple, making the shopping experience more personalized and enjoyable.



4. Improvements


Based on feedback and observations, I have made the following improvements:

UI Design in Category Navigation
I reorganized the category navigation and added images for each category to enhance the user experience. Additionally, I designed two different browsing formats for users to choose from.



Profile  page Design and Functionality Upgrade
The homepage design and functionality have been upgraded. I consolidated similar functions into buttons, making it easier for users to view their information, addresses, and payment methods,and added  change button of user picture and user name.


Product Page Font  Hierarchy
The font hierarchy on the product page has been enhanced to make prices more prominent. Additionally, brief descriptions have been added for each product, allowing users to understand product features without opening the detail page.


Search Page Enhancement I improved the search page by adding history records and personalized recommendations. The barcode scanning feature has also been redesigned for better functionality.

Out-of-Stock Notification Feature
A notification feature has been added for out-of-stock products. Users can select the size and color, and will be notified when the item is back in stock.


Wishlist Size Change Function
A size change function has been added to the wishlist, allowing users to update their desired product information easily.



Package Tracking
I added a package tracking feature that provides real-time delivery progress updates and estimated delivery times. The customer service center also includes a section for suggestions and feedback, making it convenient for users to ask questions.
Online AI Assistant
A new online AI assistant has been integrated to help users with queries and navigation issues.


5. Project 3: Lo-Fi App Design Prototype

Demonstrating Video:





Feedback

Week 11 

Replacing all the linked words on the home page with buttons would be more user-friendly.

Week 12 

The price should be more obvious and the price before the offer should be in the front and the price after the offer should be in the back

Week 13

Adding more ICONS will make the buttons more intuitive for the user

Reflections

Overall Experience

During the process of redesigning the H&M app in Figma, I faced many challenges and learning opportunities. Initially, I started by setting up the project and planning key areas for improvement. This involved identifying areas that needed enhancement, such as navigation, the homepage, and product pages. Developing low-fidelity prototypes in Figma was an interesting process, but it sometimes felt stressful, especially when working under tight deadlines.

At first, I focused on creating buttons, animation effects, and gallery functions, gradually exploring more complex features and designs. Prototyping allowed me to visually demonstrate interface interactions and user flows, and to collect user feedback in later stages.


Findings

During the redesign process, I discovered several important insights. A well-structured navigation system significantly improved the user experience, making it easier for users to find what they needed. Adding images to category navigation and offering different browsing formats made the interface more intuitive and visually appealing. Enhancing the font hierarchy on product pages made price information more prominent, which is crucial for users.

Observations

In this project, I observed that continuous design improvements can lead to significant positive changes, even minor details can impact the overall UI design's presentation and functionality. The feedback and assistance from Mr. Zeon were incredibly valuable. His guidance and suggestions were instrumental in refining design elements and overall functionality.

Although the process was stressful and sometimes felt like it couldn't be completed within the time constraints, the constant learning and support from my mentor helped me a lot. Ultimately, I completed a satisfying design that not only improved my design skills but also boosted my confidence in facing future challenges.







Labels:

Comments

Post a Comment

Popular Posts