Application design（11-15）
Week 11
Class Summary and Reflection
The teacher showed us how to create low-fidelity designs using Figma. This demonstration included step-by-step guidance on using basic tools, setting up wireframes, and organizing elements to create a clear and functional layout. The low-fidelity approach focuses on structure and functionality without emphasizing detailed visuals, allowing us to concentrate on the core user experience.
Our task is to apply this method to the application we previously selected. Using what we learned, we need to design the user interface for three key workflows or processes within the app. These workflows should represent the main functions or interactions of the application. For example, if the app is an e-commerce platform, the workflows might include browsing products, adding items to the cart, and completing the checkout process.
We are expected to carefully plan the user journey for each workflow, ensuring that the designs are intuitive and user-friendly. This involves deciding on the layout of buttons, input fields, navigation menus, and other essential elements. By the end of this exercise, we will have three low-fidelity UI designs that clearly illustrate how users interact with the app. These designs will serve as a foundation for future refinements and high-fidelity prototypes.https://www.figma.com/design/PcxlsbMeIKImLu5R3dS5fA/Untitled?t=2kxhbD7ncnu897TP-1
Week 13
Class Summary and Reflection
We completed our low-fidelity designs and presented them to the teacher for feedback. The low-fidelity prototypes included the core structure and layout of the user interface for the three workflows we selected. These designs focused on functionality and user flow, with minimal emphasis on visual details.
The teacher carefully reviewed our work and provided constructive feedback on areas that needed improvement. This included pointing out issues with the layout, such as inconsistent spacing, unclear navigation paths, or overly complex interactions. The teacher also highlighted areas where the user flow could be simplified to make the interface more intuitive and user-friendly.
In addition to identifying problems, the teacher suggested specific solutions to improve our designs. For example, we were advised to adjust the placement of buttons for better accessibility, refine the alignment of elements for a cleaner look, and rethink certain interactions to ensure they align with user expectations.
After receiving the feedback, we made the necessary adjustments to our designs directly in Figma. This iterative process allowed us to refine the structure and functionality of our prototypes while gaining a deeper understanding of design principles. By the end of the session, our low-fidelity designs were significantly improved and ready for the next stage of development.
Week 15
Class Summary and Reflection
We had three friends test our low-fidelity designs and provide feedback. They identified issues like unclear navigation, unintuitive button placement, and overly complex workflows. Based on their suggestions, we improved instructions, simplified steps, and highlighted key elements.
After making these adjustments in Figma, we started creating high-fidelity prototypes. This step added detailed visuals like colors, typography, and icons to make the design polished, realistic, and user-friendly.My friend Yuhan suggested that the categories should not only have images but also include text for better clarity. Huier thought the size of the input field should be adjusted. experience.https://www.figma.com/design/uscrCymp4PxmfG21M9IdU1/Untitled2?node-id=0-1&t=2kxhbD7ncnu897TP-1
Assignment 3 Feedback
Our project is nearing completion. To make my app more seamless and user-friendly, I shared a low-fidelity prototype of the Taobao app I designed with three friends for testing and received some valuable feedback from them.
Low fidelity
Liutongru pointed out that there was an error in the text on the payment success page in process 2 after purchasing a product, which needs to be corrected.
Hekehua pointed out that the user phone number and password input fields need to be aligned with the login button below. They also mentioned that the "Forgot Password" button and page were missing.
AiJianuo "This button is located at the bottom of the screen on the interface. Its size is really a bit too small, and it's quite easy to press it wrongly or accidentally touch the adjacent areas. It would be more convenient if it could be made a bit larger."
Video
https://youtu.be/_iwcrTptLts
High fidelity
Link
My friend Yuhan suggested that the categories should not only have images but also include text for better clarity.
Huier thought the size of the input field should be adjusted.
Xiacheng thought this design was very simple. But he told me that he wanted to make it a bit more diverse.
Video
https://youtu.be/VNJlSZSxh9w
Step Video
https://youtu.be/6RKTqghjrBc
Comments
Post a Comment