Application Design 2 // Task 1

  29.08.2023 - 01.10.2023// Week 1 - week 5

Lim Yi Xvan 0354552

Bachelor of Design in Creative Media 

---

Instruction

<iframe src="https://drive.google.com/file/d/16HXMGEtbdF6Uqu7g3qvDEREVNHFZo-uQ/preview" width="640" height="480" allow="autoplay"></iframe>

---

Task 1 // App Design 1 Self-Evaluation and Reflection

In this task, we are required to perform a self-evaluation and reflection based on our mobile application design 1 final project. This project aims to document the issues, problems, and difficulties and propose solutions to improve the aesthetic and user flow of the mobile app design.

I redesigned an app called "Period Tracker App by Gp Apps" during the previous semester. The app's main function is to let the user track their period date prediction, track their symptoms, record their period dates, and get informational and educational resources from the app which may help them to know more about themselves.

I was really pleased with its interface design and user flow results, and I still am. However, due to the time restriction and my bad time management, I didn't get to complete some parts of the app which makes it not a much functional and useful app to the user yet. Besides, there are also adjustments that might be made to enhance the UI/UX of this app design.

Previous semester App Design submission:

https://www.figma.com/proto/snLo2py9ksyXDGLQ8w3kVb/High-Fidelity-Prototype---Period-Tracker-App?page-id=0%3A1&type=design&node-id=1-6&viewport=-3478%2C895%2C0.64&t=fzW2g6GlVeOwDMjF-1&scaling=scale-down&starting-point-node-id=1%3A6&mode=design

I began by listing its advantages and disadvantages. Along with taking factors like usability, visual appearance, simplicity, and overall user experience into mind. Here are the few notes that I've listed down to bear in mind while redesigning the apps for better improvement and engagement:

1. Clear Goals and Objectives:

• Define clear and measurable goals for the redesign. What specific problems or shortcomings from the previous version should the redesign address?

2. Information Architecture:

• Plan and organize the content and features of the app in a logical and intuitive manner.
• Consider the hierarchy of information, ensuring that essential features are easily accessible and prominently displayed.

3. Visual Design:

• Develop a cohesive and visually appealing design that aligns with the app's purpose and target audience.
• Ensure consistency in color schemes, typography, iconography, and UI elements throughout the app.
• Pay attention to the use of whitespace and layout to enhance readability and user comprehension.

Issues found & Solutions Made:

1. Color Palette

Issue: The main color scheme related to its logo, which is the color combination of white, magenta, and black, it represents slightly strong and contrasting vibes instead of feminist, soft, and relaxing looking as it should as a period tracker app.

Solution: It's an app where users get to comfortably track and record their menstrual cycle instead of making them panic and alert. Hence, I've looked up on Pinterest to see which colors can be also related to the key color of the logo, magenta, at the same time, represents feminism and brings a soft look.

fig 1.1 - color palette reference1

fig 1.2 - color palette reference2

Adjustment Made: 

Here's the new color palette I decided on for my Period Tracker App along with a comparison of the old one.

fig 1.3 - previous color palette

fig 1.4 - new color palette

2. Log In & Set Up Page

Issue: Some of the text sizes are a bit too small for readability, which were sizes of 10 or 11pt. It might seem to be minimalist and clean but it might be not user-friendly for users who have vision impairments. 

Solution: I've readjusted the sizes of the texts which were originally 10/11pt to 12/13pt to enhance the readability.

Adjustment Made: 

fig 2.1 - adjusted text sizes

fig 2.2 - adjusted text sizes

Issue: The action text "Continue As Guest" wasn't visible and clear enough for readers to notice that it's clickable. 

Solution: Make the text bold and non-italic, also to ensure consistency in typography, throughout the app, all the action texts are in the same text family style and color.

Adjustment Made: 

fig 2.3 - adjusted text sizes and style changes for texts

Issue: 

• The previous pop-up panel after the "reset password" and "face ID" were successfully set up isn't that user-friendly and might create visual clutter due to the placement below.
• Verified and confirmed iconographies aren't that visible due to the usage of only stroke outlines.

Solution: 

• Using Fitt's Law, I altered it and moved the pop-up panel to the middle, closer to the user's most likely former location.
• Removed the stroke outlines and filled them with contrast colour instead to create contrast.

Adjustment Made: 

fig 2.4 - Alteration of pop-up panel and icons

Issue: The buttons on the birthday entry page weren't clear enough to represent specific actions.

Solution: In order to make the dropdown icon more noticeable and draw the user's attention, I added a black circle behind the icons so it looks more like a button that is clickable for them to enter and edit their birthday.

Adjustment Made: 

fig 2.5 - Refinements of  dropdown buttons

Issue: 

• The dates on the calendar of the "add period dates" weren't clickable previously.
• Duplicated pages for the "add period" page when users set up their profile and also when they had their period started.
• Dates were too small and the days of the week weren't stated in full-text form.

fig 2.6 - Duplicated pages for adding period date

Solution: 

• Made the date on the calendar clickable.
• Delete the "history period" page and use one page instead.
• Increase the size of the dates, add full-text form for the days, and also make the month bold and in color pink for easier differentiate.

Adjustment Made: 

fig 2.7 - Adjustments made for add period dates

3. Footer Navigation Bar

Issue: 

• The buttons on the navigation bar have poor contrast which might not be a clear indicator that which page the users are currently on.
• The text sizes are a bit small and might be hard to see.

Solution: 

• Ensuring that essential features are easily accessible and prominently displayed, lighter and different shades of color were used for the currently viewing page's icon.
• To enhance readability and user comprehension, shadows were added for texts and icons for better visibility.
• Text sizes were increased from 11pt to 13pt.

Adjustment Made: 

Can see that the "self-care" is more contrast and stands out better compared to the previous design after with shadows added. 

fig 3.1 - Adjustments made for footer nav bar

4. Home Page Layout

Issue: 

• The "Period Starts" button has poor contrast.
• The position of the cloud outline graphics caused confusion in the "Period Starts" button.

Solution: 

• The "Period Starts" button was enhanced in its readability and accessibility by giving a lighter shade and also to achieve consistency with all the buttons.
• Graphic doodle cloud is repositioned to make sure it's empty behind the button for clear readability.

Adjustment Made: 

fig 4.1 - Adjustments made for homepage visuals and buttons

Issue: 

• The home page should have all the important key features and a summary of the Period. However, the "Forum" section on the home page has been misled as the main feature of the app.
• Hard to understand which is the main features of the app.
• Lack of some interaction buttons to represent certain actions such as adding symptoms and editing diary.

Solution: 

• By ensuring the content and features of the app are planned and organized in a logical and intuitive manner, in order to achieve good information architecture, the important features of the app were rearranged altogether in widget form.
• I removed the "Forum" section to make sure that crucial features are readily available and to prevent critical information on the main page from being misrepresented.
• Created a stronger contrast for the "+" button at the "add symptom" widget by adding a pink circle behind.
• Added an "edit" icon for the "my diary" widget to indicate users to click that if they want to edit their diary.

Adjustment Made: 

fig 4.2 - Adjustments made for homepage features

Overall Adjustment Made for Homepage: 

fig 4.3 - Overview of adjustments made for the home page

5. Edit Period & Add Symptom Page

Issue: The darker shade which is brown used as the border background color, leads to poor readability and contrast of the icons.

Solution: To create clarity and better visual appeal, the background color was changed to beige enabling users to view the icons and texts better. It also helps in holding the user's attention as well.

Adjustment Made: 

fig 5.1 - Edit Period adjustment made

Issue: Stroke outlines of the border have lowered the readability of the texts and might have created visual clutter. 

Solution: 

• Removed the stroke outline and added shadows instead.
• Colour of the border was changed to align with the new colour template.

Adjustment Made: 

fig 5.2 - Add symptom page adjustment made

6. Add Note Page

Issue: 

• The diary entry lacks a clear date to be stated.
• The date of the week was hard to be seen.
• Minimalism wasn't achieved here due to the complicated layout.

Solution: 

• Increased the sizing of the dates for better readability.
• Added a circle with shadows below the date of the day and also with the wording "today" stated above it.
• Added the date of the day on the writing note border.
• The yellow background and stroke of the border were removed and replaced with a solid grey scheme background to achieve a clean and intuitive look.

Adjustment Made: 

fig 6.1 - Refinements of the date made

7. Calendar Page - Month

Issue: 

• The calendar did not specify today's date.
• The current layout could potentially lead to overlooking the notes added for the day.

Solution: 

• Added a circle with shadows below the date of the day.
• Consider the hierarchy of information, ensuring that essential features are easily accessible and also enhance user comprehension, the layout below was rearranged into a logical manner where users get to see the notes they have added previously and if they wish to edit, their vision will only then be directed below to the buttons for edit.

Adjustment Made: 

fig 7.1 - Refinements of the date and layout made

8. Educational Materials Page

Issue: 

• Looking back to the usability testing feedback I've gotten from the previous semester, I've decided to fix the issue which is the lack of educational resources on the "self-care" page. There should be materials for it as one of the main features of the app is to get educational information while they're facing period cramps.

Solution: 

• Added two educational resources pages in the section.

Adjustment Made: 

fig 8.1 - Educational resources added

Figma of Adjustments made for Period Tracker app:

fig 9.1 - Design file of Figma

fig 9.2 - Prototype file in Figma

---

Feedback

Week 1

You should think about the app's benefits, and when users click on the app, the important features should be shown on the home page. Besides thinking of logging symptoms, periods etc., think about what will it caused after the data are input.

---

Reflection

I set out on an investigation, learning, and improvement path while redesigning this app. The procedure gave me the chance to delve deeply into the nuances of UI/UX design and think about how it affects user experiences. The value of continuous iteration and user feedback was among the most important lessons learned from this project. I was able to improve the app's interface thanks to this method of thinking, fixing problems as I went and increasing usability. 

I also learned the importance of color schemes and how they affect the overall aesthetic appeal. I redesigned the color scheme after giving it serious thought and conducting several experiments to get a more harmonious and aesthetically pleasant experience. This method enhanced the interface's usability and immersion while also enhancing its attractiveness. 

I also realized how important it is to have simple navigation and good information presentation. I tried to make the app more accessible and understandable for users by streamlining the user interface, organizing the material, and offering smooth screen transitions. 

Overall, this project gave me the chance to put my design skills to use, try out fresh concepts, and push the limits of my app design abilities. My grasp of user-centered design principles has grown as a result of the process of rebuilding the app, which has also improved my attention to detail. As I complete this project, I am pleased with the advancements made and the successes realized.