Welcome to My PROJECT 3 on Application Design 1 !
WEEK 11-Introduction to PROJECT 3
LEARN：
In the class, the teacher first showed us how to design the interface of the application we chose. We can check some examples of App design through websites such as ChatGPT, behance, mobbin, etc. We can find inspiration for our own redesigned applications through these examples, but we should learn from them instead of copying other people's designs.
Through these, we have to redesign each functional layout and interface design of the App we want to make on Figma, and then ask three people to do a test. We will first write three different processes or scenarios. For example, each different person will try different functions of different application interfaces, such as shopping, chatting and creation, and ask them to try to do these functions. They can operate face to face on ZOOM. After the operation, they can be asked to give feedback and answer some questions, and summarize their feedback.
Then summarize their feedback and go back to improve our App interface design.
After that, the teacher conducted three lectures in the class for the following weeks.
These three lectures mainly talked about improving the user experience and design quality of APP. Usability testing evaluates products through specific processes to find problems and improve prototypes; usability heuristics provides 10 principles and examples to guide the creation of friendly and easy-to-use interfaces; interface visual elements elaborate on various elements, navigation components and controls, emphasizing their key role in improving usability, guiding operations and conveying information. The three lectures provide comprehensive and in-depth guidance for APP design from different angles.
- Usability testing: Evaluate the product through representative users, with participants completing specific tasks and observers recording to identify problems, collect data, and evaluate satisfaction. The operations include preparing low-fidelity prototypes, recruiting participants, defining scenarios, developing task lists, conducting tests, collecting and analyzing feedback to improve the prototype. The test report lists problems such as participants' difficulty understanding the AR part and icon functions, as well as corresponding improvement suggestions.
- Usability Heuristics: Introduces Jakob Nielsen's 10 usability heuristic principles, covering system status visibility, matching with the real world, user control and freedom, consistency and standards, error prevention, recognition over recall, flexibility and efficiency, aesthetics and simple design, helping users deal with errors, help and documentation, etc. Each principle is explained through positive and negative examples to illustrate its application and importance in user interface design, aiming to guide designers to create user-friendly and easy-to-use products.
- Interface visual elements: It elaborates on various visual elements in APP interface design, including lines, shapes, colors, textures, spaces, texts, shadows, buttons, icons, pictures, illustrations, cards, blank areas, etc. It also introduces navigation components such as search bars, breadcrumb navigation, paging, sliders, labels, icons, carousels, etc., as well as interface controls such as drop-down menus, radio buttons, check boxes, switches, date and time pickers, etc. It also mentions relevant specifications for mobile terminals, such as considering heat maps, visible labels, avoiding multi-column grids, including keyboard pop-ups, etc. It emphasizes the role of various elements in improving interface usability, guiding user operations and conveying information. For example, color affects readability and visual hierarchy, button style and height have specific specifications, and icons need to be of a unified style and placed in a bounding box of an appropriately sized size.
Reflection
When designing with Figma, I find myself sometimes getting caught up in details and neglecting the overall design process. For example, when adjusting the style of interface elements, I may spend too much time on subtle color and font adjustments, without timely examining the rationality of the design from the perspective of overall layout and user flow, resulting in low design efficiency.
For some commonly used operations and shortcut keys, I have not yet mastered them, and still rely on the mouse to operate, which to some extent affects the speed of design. When dealing with complex interfaces or multiple elements, frequent mouse clicks are cumbersome and reduce work efficiency.
WEEK 12-Low-fidelity prototyping
Before I made a low-fidelity prototype, I downloaded several other apps of the same type as red book, such as Kuaishou, Instagram and Douyin, to study their design and layout.
I first made a UI KIT about REDBOOK, including colors, fonts, layout, charts, etc.
This is the whole process of me making a low-security prototype.
After that is done, I will conduct usability testing. We need to have three scenarios for user testing of low-fidelity prototypes. Provide written instructions for each scenario and recruit three participants, assigning one scenario to each user. Conduct the test via online connection or offline video recording, and send them a figma link to prepare some questions for them to answer after the test, and ask them to give feedback on the experience process. Collect feedback and use it to improve our high-fidelity prototype.
测试场景加问题，作者 tian dongReflection
In the process of using Figma to make low-fidelity prototypes, I deeply felt that my understanding of the tool functions was still inadequate, especially in terms of improving efficiency and ensuring design consistency.
First, when using Figma's component function, due to a lack of in-depth understanding, I failed to effectively reuse design elements, resulting in repeated manual adjustments of details when designing multiple pages, which was not only time-consuming but also prone to inconsistencies. I realized that component-based design thinking is an important way to improve efficiency and maintain design specifications.
Second, when setting the interaction logic, my understanding of the Prototype mode was not clear enough. For example, when adding basic operations such as button jumps and page transitions, I often encountered path errors or the effects did not meet expectations during my attempts. This directly affected the coherence of the low-fidelity prototype and made the overall user experience seem stiff. This made me realize that I need to learn more systematically how to design smooth and intuitive interaction processes.
In addition, I also encountered troubles in style management. Although Figma provides a powerful style library function, I failed to make full use of it in actual operation to unify global design elements such as fonts, colors, and spacing, resulting in the need to adjust each page one by one when modifying the design style, which seemed inefficient. This also exposed my shortcomings in standardized design.
In general, the production of this low-fidelity prototype made me realize that mastering the tools is only part of the design work. What is more important is to understand and apply its design concepts, such as modular thinking, interaction logic and style specifications. In the future, I need to further improve my tool use ability through systematic learning and practice, so as to complete design tasks more efficiently and better realize my creativity and design goals.
WEEK 13-Low-fidelity prototype Improvements
In class today, the teacher talked about the knowledge related to color and typography in user interface design, including color matching, color ratio rules, use of gradient colors, font layout hierarchy, font matching, and introduction to related design resources.
LEARN:
Color related
Color matching method:
• Monochromatic Color: Use different shades and shades of a single color to design. It is suitable for minimalist design or scenes that need to create a sense of calm and unity, but it may lack visual interest and elements are easy to confuse.
• Analogous Color: Select a combination of adjacent colors on the color wheel. The hue gradient is easy to see, but the contrast may be insufficient, appearing monotonous or too uniform.
• Complementary Color: Use opposite color pairs on the color wheel to make the design more vibrant and dynamic, but pay attention to balance, otherwise it may be dazzling.
• Triadic Color: Select three colors evenly distributed on the color wheel to achieve a balance between contrast and harmony, making the design stand out, but improper use will appear messy or lack consistency.
60/30/10 rule:
A classic color ratio guideline, where 60% is the primary color for the overall color and large background area, 30% is the secondary color for minor parts such as buttons and navigation bars, and 10% is the accent color for important elements such as action buttons, links or reminders to create a balanced and attractive visual effect. This rule has been widely used in many design fields.
Gradient color use:
A gradient is a transition effect between two or more colors, which can be linear (from one side to the other) or radial (from the center to the outside). It can increase visual appeal, create a sense of depth and dimension, and guide users to focus on specific elements.
Color tools:
• ColorZilla (browser extension): a common tool for designers and developers to quickly get color codes and create gradients in the browser.
• Colorz, Kuler, Designspiration: used to generate color schemes and get inspiration, you can choose initial colors or create color palettes according to rules.
Typography related
Typography hierarchy
• Font size and weight: Use different sizes and weights for titles and texts at different levels to distinguish importance, such as large fonts for emphasizing important content and small fonts for body descriptions.
• Italics and capitalization: Italics can be used for emphasis, but should be used with caution; capitalization can be used in specific situations, but all capitalization will reduce readability.
• Line spacing and alignment: Appropriate line spacing makes text easier to read, and left alignment is usually the best choice.
• Paragraph width: A paragraph width of 6-12 words per line provides a comfortable reading experience.
Font pairing:
• Contrast pairing: Combining highly contrasting fonts, such as serif and sans serif, can create visual hierarchy.
• Same family pairing: Use different fonts from the same font family to ensure consistency.
• Emotional style pairing: Combine fonts with similar emotions or styles, such as modern style with modern style, and classic style with classic style.
Font Selection Guide:
Various fonts are recommended based on different styles (such as playful, classic, sophisticated, dramatic, simple, futuristic, professional, etc.), and font size, weight, and opacity setting suggestions are provided for different elements (such as modal titles, header titles, various buttons and form titles, body text, timestamps, and footers, etc.).
设计作者：tian dong
Teacher’s feedback and subsequent improvements
1. The teacher thought that the homepage design in my low-fidelity prototype was very similar to the layout of Instagram, and I should make some changes.
Improvement plan:
I changed the page-turning layout in the homepage interface, changing the previous up and down sliding to four posts arranged sliding. I changed the design of the nearby people interface and added a quick map interface for searching nearby people. As for the interface of the people I follow, I still kept the up and down sliding arrangement, and added the function of publishing the moment to improve interaction.
2. The teacher thinks that I should add a successful purchase interface to the shopping interface.
Improvement plan:
I added an interactive connection to the last level of the shopping interface. After we pay, we can directly jump to my order to view the order we bought.
3. The teacher thought the redesign of my personal page was good, but he thought the bottom part should be moved up, so that it would appear more layered.
Improvement plan:
I moved the bottom up two lines.
4. Some minor font errors should also be improved.
Improvement plan:
I changed some fonts, such as bolding and adjusting the size. I unified all interface fonts and arrangements to make them the same.
5. When the teacher was looking at my low-fidelity prototype, he found that I couldn't exit the interface after changing the menu bar.
Improvement plan:
I added an exit shortcut key, and you can exit the interface by pressing this key.
6. I also showed the teacher some of the test questions I listed. The teacher thought I should list the test questions for each scenario.
Improvement plan:
I added different questions in different scenarios, and I summarized all the questions together.
Reflection
During this low-fidelity prototype design and modification process, I realized that my design was not perfect enough in terms of details and user experience, and some shortcomings were exposed. First, in the design of the homepage, I referred too much to the layout of similar applications and lacked innovation. The teacher's advice made me understand the importance of adjusting the interface structure and adding personalized functions, such as changing to a four-post arrangement and adding a quick map function to make the interface more interesting and practical. Secondly, there is a lack of feedback steps for successful purchases in the shopping interface, which reminds me that I need to pay more attention to the user's complete experience when designing the interaction process, so I added the function of jumping to "My Order" to ensure more coherent logic.
In addition, the layout hierarchy and font details of the personal page made me realize the importance of unity and hierarchy in visual design. By adjusting the layout and unifying the font style, my design became more standardized and clear. For the problem that the menu bar cannot exit, I added a shortcut key function, which made me realize the criticality of the user's exit path and the convenience of operation. At the same time, the teacher suggested that I classify and summarize the test problems, which made me realize that a clearer and more organized expression is needed in the user testing link to better guide the testing process.
Overall, this reflection made me realize that design is not only about the beautiful interface, but also needs to be continuously optimized in terms of user experience, logical integrity and detail specifications. In the future, I will pay more attention to innovation, logic and detail optimization to improve the overall quality of the design.
WEEK 14-Low-fidelity prototype testing and high-fidelity prototyping
We didn’t have classes this week, so I asked three classmates to do a low-fidelity prototype test and summarized the feedback. Then I started to make changes and produce a high-fidelity prototype.
I edited their test process into a video and put the answer results into a pdf.
Video：
Low-fidelity prototype test questions and answer summary：
High-fidelity prototyping throughout the process：
Reflection:
Through this low-fidelity prototype test, I deeply realized the importance of starting from the user's perspective. Even if I think the design is relatively perfect, users may find some problems that I overlooked during actual use. These feedbacks provide valuable directions for improvement.
Some seemingly minor details, such as font differentiation, button size and clarity, may have a greater impact on the user experience. In future designs, we must pay more attention to details and not miss any place that may affect the user experience.
WEEK 15-High-fidelity prototype changes plus testing
This week I showed my high-fidelity prototype to my teacher, and she gave me some feedback:
1. The interface of the release moment I made is very conflicting with the brand color of REDBOOK, and it doesn’t match. The color scheme should be changed.
So I changed the color scheme. It was mainly black before and now it is mainly white.
2.The layout of the post details is a bit monotonous. You can turn this design into a card shape that looks like a publishing space, add an interactive dynamic connection for clicking to collect or like, and add more steps.
I tweaked the layout and added interactive links for the collection.
3. The teacher asked me to add three welcome screens on the startup page.
The teacher talked about the requirements of our final assignment in class, test videos, UI KIT, Figma full display (high fidelity, low fidelity), pre video (high fidelity, low fidelity), (additional content: homework process, some display posters)
About High-Fidelity Prototype Testing：
Reflection:
Through this practice, I found that I still have a lot to learn and improve in design. I will further study and research the principles, methods and techniques of UI/UX design, improve my design ability and aesthetic level, so that I can design better APP design works in future projects.
In general, the production and feedback process of this high-fidelity prototype has taught me a lot of valuable experience and lessons, and also made me more clear about my shortcomings in design and future efforts. I will apply these experiences and reflections to future learning and practice, constantly improve my abilities, and create a better APP design experience for users.
Low-fidelity prototyping final
Summary of low-fidelity prototype design testing and scenario problems
Final figma low-fidelity prototype
Low-fidelity prototype demonstration
Comments
Post a Comment