Application Design II / Task 1

25.4.2024 - 19.5.2024 (Week 1 - Week 4)

Loke Yan Ling / 0344602 

Application Design II / Bachelor of Design in Creative Media

Task 1 - App Design 1 Self-Evaluation and Reflection 

---

Instructions

---

Task 1: App Design 1 Self-Evaluation and Reflection

On week 1 of the class, Mr Razif have clarified that we have 2 option for this task:

• Continue the work of Application 1 to self-evaluation and reflection
• Design a new app with evaluation and reflection

Brainstorm

Before decision being made, I asked Mr Razif for feedback on previous app design, because the app is designed quite formal and less feature, that have nothing to improve on. 

Fig 1.1 App Design 1 app interface

Sir then pointed out that the routes and fonts of the bus icons were so close to the logo that users would think they were grouped together having similar function (Based on law of ux).

Fig 1.2 Draft of conceptualize app features

In the end I decided to make a new app to have a new try and experience. The app I had conceptualized what I wanted to do while in sembreak was to design a pet app. The idea came to me while browsing through various platforms, when people shared videos about pets, there were always comments shared from other users that made me learn new knowledge, such as how to take care of them, what to do when they give birth and spay or neuter them, and so on. So I wanted to make an app that contains this knowledge and allows booking appointments with clinics and grooming salons. However, at the end of the day, due to time constraints, I was only able to choose one of the features to develop.

Proposal of the app

Fig 1.3 Proposal of pet app

Fig 1.4 Few page wireframe

Progress

Name of the app

I named the app with "Pet Nexus".  The word "nexus" means a connection or a central link. It implies that the app serves as a nexus or central point for connecting pet owners with various pet-related services and resources in their vicinity. This aligns with the app's core functionality of booking appointments at clinics and grooming salons while also helping users find nearby pet stores. And also, if any features added in features, the name still valid.

Logo

Fig 2.1 Typeface for Logo

At first, the draft logo I had in mind was a cursive writing typeface. I listed 4 fonts from figma that have cursive writing characteristics without losing readability. Before taking too much time to decide, I asked Claud.AI help me to choose one of it that fits the warm and friendly tone of the designed pet app. 

Claud.ai pick the second typeface with following reason

• The handwritten-style font for "Pet" adds a playful, approachable vibe that aligns well with the pet-focused nature of the app, conveying a sense of warmth and friendliness. 

• Clean sans-serif font for "Nexus" balances it out with a more professional and modern look, suggesting reliability and expertise.

• This combination strikes a nice balance between the playful, pet-centric side and the practical, service-oriented aspect of the app, making it an ideal typographic choice for the "Pet Nexus" brand identity.

• The other options, while visually appealing, may not fully capture the desired tone. The first and third options with uniform fonts might appear a bit too formal or impersonal for a pet-related app. The fourth option with an overly stylized font could be perceived as less legible or professional.

Fig 2.2 Logo icon

When said the word "link", two elements come to mind, line and earth. Earth is a link between man and nature. With the simplicity of the design, the appearance of the earth is simplified to a circle. While the lines are the main body and the circle is the background, it's still kind of boring without a focal point. So I added another circle at the end of the line. based on design principles, the jagged lines give the overall look more movement.

Fig 2.3 Final Logo appearance

The colour scheme were applied into the overall design of logo. Why there are three line having a different colour from others? Just to mention three are only three features on this app (booking appointment for clinic, grooming salon, nearby pet store). 

Fig 2.4 Low Fidelity Prototype

Due to booking clinic appointment have so many information to put in. I try with designed that user no need to transfer too many time from a page to another to reduce user frustration. User can see the information and make an appointment on the same page by sliding up and down the bar.

On week 3, I received feedback from Mr Razif about the overall of low fidelity prototype.

Items that confirm required for this task:

• Logo
• Side Bar Menu
• Bottom navigation bar

Improvement must made:

• Image for clinic
• Service list icon
• Mobile design pattern

Fig 2.5 Logo added

Fig 2.6 Bottom Navigation Bar

I designed two bottom navigation bars and picked the one that is more favored. I personally prefer the right navigation bar. 

However, ai has a different opinion than I do. 

He thinks the left one has a higher contrast, making them easier to distinguish, especially for users with mild visual impairment. Icons often use a limited color palette to improve recognition of smaller icons. The white background reduces the risk of color mixing and makes it easier for users to identify the icons.

I'm sure it's just because of the color. The right one has more modern aesthetic, more suitable for user demographic for this app. The high contrast and recognition of the icon can be achieved if the colors are used appropriately. Drop shadows applied to separate out the area of navigation bar,

Fig 2.7 Coloured bottom navigation bar

Fig 2.8 Changes made

Vid 1 Animation for bottom navigation bar

For the homepage (Fig 2.8), icon is added to having a better recognition of what the features about. The bottom navigation bar have designed with a small feedback to have a smoother user experience. The icon will enlarge when the user pressed it/ or on that page.

Fig 2.8 Sidebar Menu

In the side bar menu, user profiles is put on the top while logout features is at the bottom for easy access by the user. When applying the colour scheme to overall design, I think the logout features may put above the setting feature as logout is an important action that ends the user's session. Prioritize important action first could make it more easily accessible when needed.

Fig 2.9 Mobile pattern design

I raised my concern with Sir about how to let users know that the horizontal bar can be swiped up and down, since IOS users are usually aware that the lines used in the iPhone navigation system indicate swiping up. But for Android users, they may not know the function of the lines. Therefore, we added text and icons to inform users about the sliding bar.

Fig 2.9 Icon for serving list & image icon

After adding all the icon for the service provided by clinic, I feel much better for readability. As preventing all the information mixing together, negative space added to achieve law of common region and law of proximity. The information of working hour, contact number and website are seperated with the service, there also negative space between them to help user navigate and organize the info more easily.

Fig 2.10 Colours for icon

In clinic info on the left are the first draft i have made, but I feel the rigid black icons have a very strong contrast. Contrast is okay, but it lack of visual harmony. So, I made with another two option, rigid solid dark coco icons (#512c00) which is one of the colour scheme and rigid line coco icons. The rigid line icons have inconsistent in stroke thickness, I have tried to make it more. 

I found that rigid solid coloured icon are the most visual appealing,  strikes a balance between visibility and aesthetic appeal. By using a solid color that matches the brand's color scheme, these icons create a cohesive and visually appealing user interface. 

Additionally, the buttons for more images about the clinic have added the drop shadow and icons to labelled it. This would help the user to recognize the feature and differentiate it from the background.

Laws of UX that applied:

• Law of Similarity: Similar elements like the yellow buttons for actions (Login, Register, Next, etc.) use consistent styling to indicate their shared functionality.

• Law of Figure/Ground: Important elements like the app name, icons, and calls-to-action stand out clearly from the background.

• Goal-Gradient Effect: The clear artificial progress in Intro page (left top) provides user motivation to complete the task.

Fig 2.11 Same color applied to the button

• Law of Common Region: Elements within outlined regions like the service section are perceived as belonging together.

Fig 2.12 Categorized the section by negative space

Fig 2.13 Variation of box size

• Law of Continuity: The flow from login/register to booking appointments to confirmation of booking follows a logical continuity.
• Law of Symmetry: The layout maintains a sense of balance and symmetry, especially in sections like the clinic info service category.

Fig 2.14 Steps of Booking Appointment

• Law of Aesthetic Unity: The warm color palette, friendly illustrations, and consistent styles create a cohesive and pleasing aesthetic experience.

Final Submission

Fig 3.1 Final Design

Fig 3.2 Final Design with prototype interaction

Figma Link: https://www.figma.com/design/dev

---

Reflection

I quite excited to redesign a new app based on my own opinion. This decision help me to revise back the step and procedure from initial concept to final design of an app. With a limit of time, the preparation is not that enough to showcase every step I have made when I'm designing the user interface.

The Law of UX is a useful guide while designing the app as we are designing user centered app. The power of visual design became evident as crafted the app's aesthetic. Therefore, the colour scheme is applied with sufficient contrast between text, background, and interactive elements for optimal readability and usability. 

Following the laws of aesthetic unity, a warm and friendly color palette was used to have a cohesive visual language that aligns the spirit of the application and also delivers an enjoyable user experience.

Actually, I feel there's a room for improvement for the overall colour scheme design. This is quite challenge for me as I was the first time trying colour that is delightful to bring out the energetic and friendly tone. Also, i learned to prioritize user need first such as when user finding a veterinarian clinic, they will look for the environment first after reviewing the details of clinic. Position the important features first also prioritizing user need.

I enjoy the process of developing in this task, to see how the design of the app improve. What I learned in this task provide a insightful experience in designing an app that met user centered design and user experience.

---