Task 4| Change "Figma" to "Professional Edition"

 16 /12/2024-3/1/2025(week 12-week 14)

Tang Yu Ying - 0370676

App Design II | Bachelor of Interactive special design

Task 4| Change "Figma" to "Professional Edition"

Introduction

  In Test 4, the focus is on refining and modifying the Figma designs created in Task 1 and Task 2, aiming to upgrade them to a professional version.

Feedback Given:

Suggestions provided by AI:

1. User Experience (UX) Optimization

Issues:

• Information Hierarchy and Structure:
  • Login and registration pages have repetitive information, causing potential user confusion. Simplify content.
  • The main page navigation ("Message," "Search," "My Home") has a cluttered layout and needs better menu logic and hierarchy.
• Interactive Feedback:
• Lacks operational feedback, such as friendly prompts after form submission or noticeable display of error messages.
• Add user guidance (e.g., placeholder text when filling out forms).

2. User Interface (UI) Optimization

Issues:

• Typography and Layout:
  • Inconsistent font sizes (e.g., the "Log in" button and other text are not proportionate).
  • Lacks a sense of hierarchy; improve content readability through better use of color, weight, and alignment.
• Color Scheme and Consistency:
• Some pages have a dull or inconsistent color scheme, with insufficient contrast between buttons and backgrounds.
• Lacks a unified brand color design, weakening the overall coherence.

The changes I will make are as follows:

1. Add animation feedback- Lacks operational feedback, such as friendly prompts after form submission or noticeable display of error messages.
2. Adjust font size and typography, coordinate theme colors and color schemes so that they can be unified.
3. Make an animated page to open the app.

Improvement:

1、Add animation feedback

    I increased the number of response pop-ups to give the user a response in each section that requires a response.

  The additions include:

• Registration Page
• Friend Requests — Pop-ups for accepting or rejecting friend requests
• Personal Profile — Pop-up confirming successful updates to personal information
• Sharing — Pop-ups for successful forwarding, link sharing, and QR sharing
• Personal Browsing History — Pop-up confirming successful deletion
• Photo, Video, and Text Sharing Page — Pop-up confirming successful publication

    

2、Make an animated page to open the app

    

    You added an introductory animation page to the app.

3、Improved the photo-taking process for the app

    In this part, I refined the entire process that users might go through while taking photos, ensuring it forms a complete and seamless flow. Additionally, I added a pop-up window as an interactive element to clearly inform users that the post has been successfully published.

Test flow 1

    Test flow 1 primarily follows the perspective of a new user registering and logging into the app. Afterward, they browse the main interface, exploring different video and text content under Follow, Explore, and Nearby sections. Next, they navigate through the Message and Search interfaces.

Test flow 2

    Test flow 2 unfolds from the "avatar" section. First, users see the business card sharing feature, which allows them to share their personal information card through QR codes, links, or other methods. Next, they enter the personal information editing page, where they can update their details as needed. They can then view their previously favorited items, liked content, videos, and text, as well as information under "History," which records their browsing activity. Users can choose to delete entries from this section. Finally, by clicking the hamburger menu in the top-left corner, they can access the settings page, which includes options for Account, Notification Settings, and Background Mode.

Interview video

(video link)

Interview question:

1. Do you find the login and registration process of "SOULMATE" simple and user-friendly?
2. Are you interested in the app's main features (e.g., messaging, browsing history, nearby exploration)? Why?
3. Do you feel there is enough freedom and appeal in the personalization features (e.g., editing profiles)?
4. What are your thoughts on the content-sharing and interaction features (e.g., likes, private messaging)?
5. What aspects of the overall user experience do you think could be improved?
6. 
   

Feedback summery:

    I think we can add new registration guidelines, which will make it more clear how to register and retrieve passwords. In the homepage section, nearby, follow, explore more popular users, you can find people around, explore different things. It is hoped that the comment function can be added, which will increase more interaction opportunities.

Reflection 

       In the third semester, I personally gained a lot of knowledge and experienced significant growth.

    First, during Test 1 and Test 2, we reflected on and improved the app we created last semester in Application Design 1. With the guidance of our lecturer, we refined the test flow of our app. The lecturer's suggestions were incredibly helpful, solving many of the issues I faced and making my app design more complete.

    Test 3 was undoubtedly the most challenging for me, leaving me feeling overwhelmed at times. However, I am grateful for the experience because the ample time provided allowed me to experiment continuously. During the process of learning how to create a website, I mastered skills like adjusting webpage size, colors, layouts, animations, and more. Although much of what I learned came from YouTube tutorials, I truly enjoyed the sense of accomplishment that came from my own efforts. Of course, the lecturer also provided invaluable feedback, helping me identify and correct the issues on my website. Even though many of the problems I encountered were basic, the lecturer was patient and thorough in assisting me.

    For Test 4, our task differed from that of other students. We aimed to polish our Figma design into a professional app prototype. This gave me more opportunities to examine the finer details of my app, such as fonts, image sizes, the completeness of the test flow, and user experience.

    As part of this process, we interviewed users and observed how they interacted with the app to identify its shortcomings. I realized that the “Settings” feature of my app was lacking and that it could benefit from more interactive elements.

    Nevertheless, I am incredibly thankful for the understanding and opportunities provided by the lecturer, allowing us to work on Test 4 within Figma. The lecturer did their best to support us, ensuring that even with limited foundational knowledge, we could still achieve some level of web design.

    In summary, I feel that gratitude outweighed the difficulties this semester, and I truly believe that everything I experienced will contribute to my growth.

    Lastly, I would like to express my heartfelt thanks to Mr. Rahman. Thank you for your guidance and support. I wish you happiness and success in both your work and life ahead!

Figma link: Dev mode link