Application Design II - Assignment

Assignment 1 

In this assignment, we are required to evaluate and revise our previous application design from Semester 1. By gaining experience from various resources and platforms, I have identified several areas for improvement in my previous project. I plan to enhance my UI design to make it more appealing and improve the overall user experience.

Typography

For typography, I should have used serif fonts instead of sans-serif fonts for the art gallery website. Serif fonts are elegant and sophisticated, making them ideal for headings on an artistic site. In contrast, sans-serif fonts are better suited for professional websites due to their clean and modern look. Pairing serif fonts with high-quality images of the artwork would have created a more elegant and informative presentation for the art gallery.

Figure 1.1 Typography

Use of Negative Space

In my previous website design, the negative space was unbalanced, making the landing page look empty and weak in visual hierarchy. Some sections were too minimalist, lacking grids or boxes to separate information. To improve, the negative space should be balanced and used to visually divide content sections. This helps users distinguish between different types of information and ensures the design isn't too cluttered or too sparse.

Figure 1.2 Use of negative space

Overall Consistency

In my previous design, there were inconsistencies such as varying button designs, different patterns and grids across screens, and inconsistent font sizes. These issues made the design look messy and less impactful. For example, the booking page background changed before and after payment, which should remain the same for consistency. Although the 'payment successful' page is not very attractive, it maintains consistency by keeping the background unchanged.

Figure 1.3 Overall consistency

User flow

Our website lets users book tickets or appointments for workshops, but it doesn’t have a pricing page. Users only see ticket prices at the payment stage. To improve user experience, we should add a page that clearly lists ticket prices upfront. This way, users can see the cost before deciding to buy, which helps them make informed choices, builds trust, and reduces confusion and frustration during booking.

Our art gallery is in the metaverse and can be accessed via a link to Spatial.io. However, the website doesn’t clearly explain that the gallery is virtual or how to access it. This can confuse users. To fix this, the landing page should clearly state that the gallery is virtual, include the link to the metaverse, and feature a short preview video of the gallery.

It’s important to include a floor plan of our art gallery. Our gallery has exhibition spaces, workshops, and art studios, making it quite large in the metaverse. Since visitors need tickets to access it, a clear directory or floor plan helps them explore and understand the layout before purchasing tickets. An online directory also helps visitors navigate the gallery, especially if they get lost without physical kiosks. This way, visitors can find their way more easily through our gallery.

Reflection

Designing a website or app is a complex and demanding task that goes beyond just creating a visually appealing user interface. It involves a deep understanding of user experience (UX), which is crucial for ensuring that the design not only looks good but also functions effectively. During my previous application design assignment, I encountered several challenges, such as crafting an aesthetically pleasing layout and ensuring that the design was user-friendly to facilitate easy task completion.

As this was my first experience with website design, I faced confusion and had to self-learn to master UI design principles and familiarize myself with tools like Figma. This process was both challenging and enlightening, highlighting the intricate balance between design aesthetics and functionality.

Looking back at the project, I recognize there is significant room for improvement in various aspects, including the visual appeal, user flow, and overall usability. One challenge was the difficulty in merging ideas with my groupmate. We had different perspectives and design preferences, which made it challenging to create a cohesive final design. However, by stepping back, listening to each other, and combining our ideas, we were able to develop a design that incorporated both of our viewpoints.

Through this self-evaluation assignment, I have gained a deeper understanding of user needs, building on the knowledge I acquired in the Embedded System assignment from last semester. This experience has emphasized that effective design is not just about creating a visually appealing interface but also about understanding and addressing the user's journey and needs. It is crucial to identify user flows, ensure usability, and design with the user in mind to enhance the overall experience and enable users to complete their tasks efficiently.

This reflection has underscored the importance of putting myself in the users' shoes to better understand their perspectives. By recognizing and addressing weaknesses in my application design, I have learned to make informed improvements that prioritize user satisfaction and ease of use. This insight will be invaluable in future design projects, guiding me towards creating more effective and user-centered designs.

Assignment 2 & Final

In this assignment, we are required to build a prototype for our app design using Figma. This task specifically addresses our client, Dr. Marina's, needs to solve the problem faced by the healing center. From our research, we found that this problem also generally occurs in many psychiatric hospitals in Malaysia. Therefore, we decided to create an app that can be used across Malaysia and potentially globally.

Problem statement

• Insufficient number of counselors
• Inefficient appointment scheduling system
• Post-pandemic patient burden increases

Objective

• Reduce waiting time for appointments
• Reduce unnecessary overcrowding
• Streamline care management

Design concept

• Nature-themed relaxation - brings relaxation and calmness which creates a serenity vibe for our application.
• Gamification for interactivity - reduce stress, enhance interactivity
• Guidance by Zenzen - little fairy that guides and solves user's problem

Patient's interface

• Log in/Sign up page
• Verification
• Homepage
• Reminders
• Library
• Chat
• Profile
• My bookings
• Book appointment
• Find psychiatric hospital
• Mood tracker
• Check past result
• Daily mood analysis
• Mental health assessment

Figure 2.1 Patient's interface

Staff's interface

• Log in
• Homepage
• Schedule
• Patient's database
• Surveillance
• Notify me

Figure 2.2 Staff's interface