App Design II - Task 1: Self-Evaluation & Reflection

21/4/2025 - 12/4/2025 | Week 1 - Week 4
Edwin Choo Quan Rong | 0348305 | Bachelor of Design (Hons) In Creative Media
DST61004 | Application Design II
Task 1: App Design 1 Self-Evaluation & Reflection

Task 1: Self Evaluation and Reflection

Reflection

During Application Design I, the redesigned app I worked on was WeatherBug, which provides live and forecasted weather data. Originally released in 2008, I noticed flaws in its user interface and user experience compared to my knowledge of app design today.

After the rework is done, I still see the potential for further improvement of the app in terms of usability, user interface, user flow, visual aesthetics, intuitiveness, as well as the overall user experience.

Identified Improvement Points:

Color scheme consistency
Clustering of icons
Color cohesiveness
Color palette

In order to dive into the specifics of the app redesign, I took a look at each specific menu of the application. Some key points to consider:

Is the UI clear and easy to understand? Does it provide intuitive navigation? Are the icons and text visible?
Is the onboarding and first use process smooth sailing? Does it provide the necessary visual cues, tooltips, or interactive tutorials to create a seamless user experience?
Is the UI consistent with familiar UI patterns? Does the user easily recognize this icon’s feature by looking at it through past experiences?

Feedback & Review

Chapter 1: Home Menu

Fig 1.0 - Home Menu Compilation

UXLab Assistant's Feedback + Personal Comments

✅ What Works Well

1. Strong Visual Aesthetic & Brand Tone

The use of the illustrated sky background sets a unique mood, giving the app a warm, emotional tone. This aligns well with weather-related content and creates an engaging entry point.

Personal Comment: Engaging the users with the screen is important as long as the visuals displayed do not override the key information shown. Adjustments can be made to improve the visual clarity of the information by contrasting it with the background.

2. Clear Temperature Focus

The temperature is prominently displayed (27°) with supporting high/low values. This respects Jakob’s Law — users expect weather apps to highlight this information first.

Personal Comment: I agree, the original idea was to display prominent information upfront.

3. Consistent Navigation System

The bottom navigation is uniform across screens, improving usability and learnability (Nielsen’s “Consistency and Standards” heuristic). Icon labels reinforce clarity.

Personal Comment: The universal icons are used to streamline usability with common knowledge. If improvements are to be made, it's to update the iconography to modern standards.

4. Effective Use of Cards

The weather detail cards (humidity, wind, visibility, UV) are consistently styled and clearly grouped, aiding scanability and information chunking (Gestalt: Proximity & Similarity).

Personal Comment: The weather detail cards were to display specific information together in one area. However, it does increase its clustering around a small area. Improvements to it were to accommodate more space to display its information, like a scrollable section the size of the screen in modern design practices.

5. Detailed Information Expansion

Additional info panels and weekly forecast overlays demonstrate progressive disclosure — a strong UX pattern that avoids overwhelming users upfront.

Personal Comment: While the idea of progressive disclosure is practiced, improvements can be made to reduce the information cluster on the screen.

6. Alert Design (Hurricane)

Emergency alerts are visually distinct with clear iconography and a strong color contrast, effectively drawing attention to critical content (Fitts' Law: target visibility & prominence).

Personal Comment: Visual & layout improvements to the existing design will improve this feature greatly.

⚠️ Areas for Improvement

1. Visual Hierarchy Needs Clearer Contrast

In some versions, particularly with the background gradient, the temperature and text blend into the visual noise. This can be improved by:

Adding a subtle overlay or gradient mask behind text blocks.
Slightly increasing text stroke/contrast or drop shadows for readability (Accessibility: WCAG contrast ratio).

Personal Comment: Agreed, changing the background to one with suitable color tone will aid with readability as well.

2. Clutter Risk in Expanded Views

Screens with multiple days and hour-by-hour breakdowns start to feel dense. Consider using:

Toggle segments (e.g., Today / Weekly / Saved Locations).
Horizontal scrolls for hourly data to maintain visual economy.
Progressive loading or collapsible cards to prevent cognitive overload (Hick’s Law).

Personal Comment: Combining collapsible cards with toggle segments would be the best way to still present the information without cluttering the page, only showing its full display when clicked. Horizontal scrolls should be changed to vertical ones as users commonly scroll vertically due to ease.

3. Inconsistent Visual Weight for Icons & Text

Some icons (like in the Detailed Info modal) are more dominant than the accompanying text, which can confuse prioritization. Ensure:

Text size and weight match the level of importance.
Padding and alignment are balanced around all icons for rhythm and flow.

Personal Comment: Adjustments to text size and spacing will definitely improve readability, importance, and overall smoothness of the app.

4. Alert Action Hierarchy (Hurricane Screen)

In the alert screen, "Understood" and “Learn More” are close in size and weight, possibly causing confusion. To improve:

Make “Learn More” the primary CTA visually (color or filled button).
Consider a modal or bottom sheet for deeper alert info to reduce height overload.

Personal Comment: I disagree, although confusion may be caused, I'd argue it's precisely what causes users to slow down and look at the information displayed on the screen, instead of brushing off a crucial notice with muscle memory of closing pop-ups via CTA buttons. Once the grey-colored "Understood" button is pressed, users would have acknowledge the details of the notice, which has served its purpose.

5. Accessibility Gaps

Time labels and weather icons are small, particularly for visually impaired users. To meet basic accessibility:

Increase tap target sizes to minimum 48x48dp.
Ensure all icons are paired with text labels or accessible ARIA tags in implementation (especially in FlutterFlow).

Personal Comment: By combining this practice with collapsible cards or toggle segments mentioned in feedback No.2, text and button sizes can be increased to improve visual clarity.

6. Icon Redundancy & Density in Bottom Bar

Some icons (home, graph, calendar, settings) could be better distinguished with stronger visual metaphors or animations (e.g., active state highlighting).

Consider using color shifts or micro-interactions on active state for clarity.

Personal Comment: Agreed, color shifts will highlight which menu is currently selected, with micro-interactions further reinforcing the information for an improved user experience.

🔄 Suggestions for Refinement

Use a modular design system in Figma or FlutterFlow to unify component spacing, iconography, and card patterns across screens.
Integrate subtle Lottie animations for weather types (e.g., light rain, sunshine pulse) to increase delight and feedback responsiveness.
Introduce a smart forecast summary, like “Rain likely in 30 mins” — helps deepen the core experience beyond just presenting data.

🟢 Summary Design Snapshot Score

Clarity: ★★★★☆
Consistency: ★★★★☆
Layout & Structure: ★★★★☆
Accessibility: ★★★☆☆
Usability: ★★★★☆
🟢 Total: 19/25 – Great foundational design with strong structure and visual tone. Focus next on accessibility refinements and reducing visual density in expanded views.

Personal Review - Home Page

Fig 1.1 - Home Menu

The color scheme of the home menu does not gel well in a cohesive manner. The aesthetic from top to bottom starts with a detailed, artistic artwork as the background to the simple and less flashy features. The color palette needs to be consistent and touch ups are required to produce a user interface that looks professional. A consistent background color will bring balance and order to the entire menu interface.

Additionally, the features regarding the app are clustered. Spacing between the elements is necessary to produce a sleek and clean design while maintaining its provision of information.

As a side note, I noticed the WeatherBug logo was only used at the bottom of the screen as a small display. A loading screen featuring it will add to the flow of the design. (apply when loading up the app)

Fig 1.2 - Popup Info Menu

The popup information when clicking on the weather by hour feature appears awkwardly as its off-center from the screen. Instead, a detailed overview popping up a whole page to showcase the info fixes its awkwardness as it's consistently used in other apps to temporarily overlay a menu.

Fig 1.3 - Navbar

Regarding the navigation bar, indication between the logo buttons to separate each menu would help in visibility. The house icon can be upgraded to a more detailed one for easy understanding while the map icon can be changed to a “pinpoint” icon design similar to the one from Google Maps.

Fig 1.4 - 7 Day Forecast Popup

This is a popup menu displaying the 7 day forecast when clicking on the plus icon (+). However, this looks awkward due to the inconsistency in color scheme, the cutting of the edge of the side-scrolling view, and the clustering of the design. The fix will be same as the one proposed in the Popup Info Menu, consisting of a detailed overview that temporarily takes up the whole space will fix its awkwardness as it will be similar to how other apps use overlay menus. This can also maintain consistency in terms of visuals and functions with the overlay menu from the Popup Info Menu that houses weather details. The proposed design for the full page menu will be similar to the calendar menu feature in most apps, with arrow buttons allowing the user to browse through the different days on top, a vertical scrolling menu to display the weather conditions as well as sufficient spacing to reduce clustering.

The overall font across the app should remain consistent in its respective normal, header, and title text to maintain a cohesive typeface design.

Chapter 2: Calendar Menu

Fig 2.0 - Calendar Menu

UXLab Assistant's Feedback + Personal Comments

✅ What Works Well

1. Clear Functional Grouping

The layout logically separates search, calendar, and forecast results. This respects the principle of progressive disclosure and supports a task-oriented flow. Personal Comment: In order to better support the idea of progressive disclosure, updates can be made to present only the search bar and calendar dates at first, with the pinned dates section be added on after selecting it from a chosen date.

2. Location-Based Filtering

The integration of the location dropdown (with a pin icon) is intuitive and aligns with mental models users have for map-based or weather-based searches. It's helpful for context-specific weather queries. Personal Comment: The pin was meant for specific dates forecast, however, I believe its intuitiveness can be improved. The current design enables you to pin when you click on a specific date. Updates can be made to have a small icon pop-up menu, where the pin icon can be selected. This will help user pin their desired date onto the menu.

3. Forecast Cards Are Consistent

Hourly forecast cards are visually uniform, making them easy to scan. The consistent icon style, spacing, and label structure (time + icon + temp) aid recognition over recall. Personal Comment: Yes I agree, utilizing repetition and consistent iconography combined with text helps users distinguish important information in chunks.

⚠️ Areas for Improvement

1. Visual Hierarchy in the Calendar Panel

The calendar feels visually “flat” and doesn’t emphasize today’s date or selected days clearly.
Suggestions:
- Use a bold highlight or a circle indicator for today’s date.
- Add an active state (filled background or outlined box) when a user selects a date.
- Slight contrast adjustment between active/inactive months (currently, 29–31 and 1–2 blend too closely).

This would align with Fitts’ Law and improve immediate visual feedback for selected states.

Personal Comment: The bold highlight for the current date is a good addition to easily indicate the info to the user. The active state already exists with it being highlighted blue once a date is manually selected. The contrast on the 3rd point can be adjusted to better distinguish the states of the dates.

2. Spacing & Alignment

The search field at the top has extra vertical padding and inconsistent left margin compared to the calendar block.
Suggestions:
- Align padding and margins for visual rhythm.
- Reduce vertical space between search and calendar to bring the forecast section into view sooner.

Use a vertical spacing grid (e.g., 8pt or 4pt scale) to maintain typographic and structural consistency.

Personal Comment: Although I find the sizing alright personally, I do agree it can be adjusted to stay consistent with future padding margins when designing the new layout.

3. Pinned Location Visual Feedback

The pin icon (🧷) beside each date is not clearly labeled, and its purpose may be ambiguous to some users.
Suggestions:
- Add tooltip text like “Pinned” or a toggle state (e.g., filled for pinned, outline for unpinned).
- Consider a small animation or micro-interaction for feedback when pinning a location.

Improves discoverability and feedback, key Nielsen heuristics.

Personal Comment: Yes I agree, additions like a tooltip and micro-interactions can reduce the ambiguity of the icon's purpose.

4. Color & Accessibility Considerations

Light blue backgrounds and thin fonts may reduce contrast for users with low vision or color blindness.
Suggestions:

Test background/foreground contrast (aim for WCAG AA: contrast ratio of at least 4.5:1).
Increase font weight slightly for better legibility, especially for location name and calendar text.

Personal Comment: A test through WCAG for contrast checks can be conducted first, then the color change required can be derived from its findings. Fonts and be adjusted in thickness to provide the right amount of visual information without overriding the contents of the page.

5. Forecast Overload

Displaying hourly weather for three dates may overwhelm or confuse users.
Suggestions:
- Collapse forecasts under expandable sections (accordion-style).
- Show one day's forecast by default; let users expand others on demand.

This supports Hick’s Law by reducing the number of visible choices at once.

Personal Comment: One way to support Hick's Law in this context is to show the latest pinned forecast on the screen, with previous pinned forecasts being selected to be shown from the pin menu by the user.

🛠️ Additional Functional Suggestions

Smart search for locations: Consider adding auto-suggestions or a list of recent/pinned locations.
Calendar shortcuts: Add “Today,” “Tomorrow,” and “Next Weekend” quick buttons.
Weather preview in calendar: Mini weather icons or color-coded dots in each date cell could preview weather conditions at a glance.

🟢 Summary Design Snapshot Score

Clarity: ★★★★☆
Consistency: ★★★★☆
Layout & Structure: ★★★☆☆
Accessibility: ★★★☆☆
Usability: ★★★★☆
🟢 Total: 18/25 – Solid foundation with intuitive layout and good modular structure. Improvements in visual hierarchy, clarity, and progressive loading will enhance usability and accessibility.

Personal Review - Calendar Menu

Fig 1.5 - Calendar Menu

A cohesive color scheme design will bring a sense of balance and unity to its visual aesthetic. The main features of this menu is the calendar being able to forecast the hourly weather conditions on a specific day and location. The sub-feature is being able to pin it to the home page for easy viewing.

The text regarding the date and location, as well as the Pin icon looks cramped. Along with the hourly time being a side-scrolling display, it is awkward for user experience. In order to improve this, the calendar feature will be on its own at first, while clicking on a date will generate a display of the specific weather details of that day. The page layout and details loaded in will be akin to the detailed overview of the one in Home Menu. It will display information with a vertical scrolling manner, with adequate spacing to reduce clustering. This way, the user will have a smoother and broader experience when using the calendar feature of the app.

Fig 1.6 - Pin Feature

The Pin feature allows you to keep track of the weather of a specific date and location. It appears in the home menu like this. One particular thing I noticed about the design is that the scroll gets cut off by the screen, that will be altered by having a simpler version of 4 at a time. Although this is side-scrolling, I would want to keep it as this acts as a compact, mini-view of the weather details. Thus, the incorporation of the best of both worlds is to include the 4 at a time hourly feature, while also implementing an icon that allows you to check the full page view of the weather details like the one from the calendar menu. The pin icon will be re-positioned to appear less clustered visually, and it will be positioned next to the full view icon.

Chapter 3: Map Menu

Fig 3.0 - Map Menu Compilation

UXLab Assistant's Feedback + Personal Comments

✅ What Works Well

1. Strong Use of Contextual Overlays

The popup card showing current location weather (24°C, Heavy Rain) is minimal yet highly informative. It respects Fitts’ Law by placing key actions near the point of attention.

Personal Comment: The popup aims to show the current weather condition in the selected area, if any improvements can be made, it will be micro-animations to show the pop-up appearing from the clicked point, it being the location button near the center of the screen.

2. Modular Weather Layers Panel

The scrollable “Weather Layers” selector uses circular previews — a smart UI choice that’s both visually appealing and functionally clear. This aligns with Gestalt’s Law of Similarity and Figure/Ground.

Personal Comment: Improvements on padding margins can be made to improve its alignment with the rest of its contents as a whole, otherwise, I personally think the circular previews are clean and easy on the viewer's eyes.

3. Minimalist Map Controls

Icons for toggling layers and location (bottom right) are well-spaced and unobtrusive. Their sticky placement respects thumb zone ergonomics.

Personal Comment: Yes, the main idea is for easy usage as the finger placement of users tends to be in the bottom right area (for right-handed users), only improvements to be made is to add accessibility features for left handed people, with the icons being on the bottom left side of the screen.

4. Good Search System UX Pattern

The search bar is predictably placed and consistently styled across screens. Including a pin/submit mechanic is intuitive for users, which aligns with Jakob’s Law (users expect familiar interactions).

Personal Comment: Yes, the bar is placed on the top along with the rest of search bars in the app to stay consistent with familiar search bar placements in other apps.

⚠️ Areas for Improvement

1. Weather Layer Activation Feedback

When a user taps a layer (e.g., Precipitation), there is no visual indicator in the selection screen that it's active.
Suggestions:

Apply a highlight ring, checkmark, or pressed state to the selected layer.
Optionally, show a floating label or toast confirming “Precipitation Layer On”.

This ties into Nielsen’s “Visibility of System Status” heuristic — users need instant feedback for action.

Personal Comment: A pressed state to provide feedback for the user will improve the user experience. The floating label suggestion would contribute to overloaded information, plus the precipitation status and menu color is already provides the information needed for them to know they're currently in the precipitation menu.

2. Map Detail Card Contrast

The overlay card with weather (24°C, 17:00, Heavy Rain) sits over a busy map background and could suffer from low readability.
Suggestions:

Add a subtle semi-transparent backdrop or blur behind the card.
Consider using white or bold icons/text to ensure high contrast per WCAG accessibility standards.

Personal Comment: The way the blur can be implemented is an overall transparency layer on the screen except for the location pin icon and the pop-up info. Looking back on the design, the text for location name, celcius and time can be increased in font size and boldness for better readability.

3. Button Size & Tap Target Caution

The bottom-right control icons (map layer toggle, eye icon) appear slightly small.
Suggestions:

Ensure all interactive icons are minimum 48x48dp as per Google’s Material Design for touch areas.
Increase padding rather than icon size to retain visual balance.

Supports accessibility and touch ergonomics.

Personal Comment: I disagree with the icons appearing small. It would take up too much space if they were enlarged and had their padding adjusted accordingly.

4. Search Confirmation Step May Feel Redundant

In the second screen (MAP_Input), the “Enter” dialog pop-up may disrupt flow — it adds an extra step when the user could just press “Search”.
Suggestions:

Either auto-search as the user types or embed the confirmation action into the keyboard’s submit button.
Use a floating toast or loading spinner to show that the app is fetching weather data post-search.

Reduces friction, aligning with Hick’s Law by minimizing unnecessary decision points.

Personal Comment: I do agree with the pop-up being redundant. To streamline the user experience, having the search bar proceed with finding the location after entering the text will abide with Hick's Law, reducing friction.

🛠️ Suggestions for Enhancement

Location History Dropdown: Consider showing recent locations below the search bar.
Mini legend for weather layers: Adding a toggleable legend would improve clarity for color-coded layers like precipitation or wind speed.
Micro-animations: Add subtle zoom/pan transitions when a user selects a location or switches layers to improve immersion and feedback.

🟢 Summary Design Snapshot Score

Clarity: ★★★★☆
Consistency: ★★★★☆
Layout & Structure: ★★★★☆
Accessibility: ★★★☆☆
Usability: ★★★★☆
🟢 Total: 19/25 – Excellent modular flow and solid weather visualization. Focus next on enhancing real-time feedback, contrast handling, and touch targets.

Personal Review - Map Menu

Fig 1.7 & 1.8 - Map Menu & Weather Layers

The map menu showcases the weather conditions in a specific area, and specializes in a multitude of weather layers for users to gather different and unique data from. An update can be made to the search bar to reduce its border thickness, and applying the shadow effect to match the 3 button icons on the bottom right.

Fig 1.9 - Precipitation Weather Layer

This is one of the weather layers that provides info about the precipitation in the area. The text underneath the precipitation color bar is quite small for viewing. Thus, its size will be increased while the words "Light, Moderate, Heavy, Extreme" is positioned above the bar instead while the percentage values maintain their position below. In this manner, it will improve the readability of both while fixing its space issue from having too many words in a small area. If need be, the title of "Precipitation" as well as the entire white box can be pushed upwards to increase its size to accommodate for space.

Fig 2.0 - Location Input

The color for both the background and the button is inconsistent with the rest of the app design. A fix in the box to match the white color of the layout design, along with the button to match the blue color of the navbar will bring cohesiveness to the design. Additionally, the search bar borders will be reduced with shadow effect added to match the consistency of the other search bar.

Fig 2.1 - Weather Preview Popup

The weather preview popup is inconsistent with color when compared to the previous location input feature. This can be solved by matching the background color to white, while changing the text to black, the icon maintaining the same blue color as the ones shown in the Home Page to maintain consistency. This would bring about a more cohesive design.

Chapter 4: Settings Menu

Fig 4.0 - Settings Menu Compilation

UXLab Assistant's Feedback + Personal Comments

✅ What Works Well

1. Clear Widget Preview

The large, centered widget preview draws attention effectively, allowing users to see exactly what they’re customizing — a strong application of visibility of system status (Nielsen).
Including a carousel-style interaction (dots beneath the widget) for alternate views is a nice touch for encouraging exploration.

Personal Comment: Yes, the large centered widget directs the user's attention to a focal point, conveying the needed information with ease. Further improvements can be made to text boldness and size to contrast better with the rest of the page.

2. Accessible Temperature Unit Selection

The use of a dropdown + modal selection offers a familiar and accessible pattern for toggling between Celsius and Fahrenheit.
The modal is clear, focused, and visually distinct, ensuring decision clarity and reducing the risk of accidental input.

Personal Comment: The original concept was not a drop-down model, but rather a pop-up with screen blur. However, I do agree that having the selection come from a drop-down model will improve feedback.

3. Good Thematic Consistency

The night-sky theme (clouds, moon, dark tones) creates a cohesive visual environment that supports the app’s context (weather).
The interface maintains consistent card styling and spacing across screens.

Personal Comment: As long as the visual design stays consistent with the redesign's themes, the visual tone of the app will be conveyed well.

4. Primary Action Visibility

“Add to Home Screen” is prominently placed and clearly the main CTA, adhering to Fitts’ Law for ease of access.
Good contrast and button sizing help ensure it's tap-friendly and visible.

Personal Comment: Applying contrast with drop-shadow, boldness, and outline to the CTA button can help improve its visibility amidst the rest of the features available.

⚠️ Areas for Improvement

1. Hierarchy of Temperature Unit Selection

The label “Temperature Unit” appears quite small and secondary; however, it’s a functional control.
Suggestions:

Increase its typographic emphasis (weight or size) to better indicate it's an interactive setting.
Add a label above the dropdown, not just inline, for clarity — especially if more settings will be added in the future.

Improves scanability and aligns with form design best practices.

Personal Comment: With the amount of space below the widget where the temperature unit toggle is located, the function's size can be expanded vertically to increase visibility. Adjusting the arrow label to face downwards for a drop-down menu and increasing boldness will help ensure this setting is interactable.

2. Modal Action Contrast

The “CANCEL” and selected unit radio buttons in the modal are low contrast compared to the background.
Suggestions:

Use bolder button styles, or background highlighting for primary actions.
Ensure radio buttons are clearly large enough and have sufficient contrast (target: WCAG AA).

Critical for accessibility compliance and readability in low-light environments.

Personal Comment: One way to improve both buttons and text contrast is to darken it to pair with the brighter white background.

3. Carousel Feedback Not Obvious

The dots below the widget suggest multiple views, but there’s no other prompt or visual cue that the cards are swipable.
Suggestions:

Include microcopy like “Swipe to view other styles” or animate the first swipe on first load.
Consider adding a slight shadow or edge preview of the next card to visually hint swiping is possible.

Aligns with Progressive Disclosure and improves user discoverability.

Personal Comment: Implementing the auto-swipe after a few seconds on first load for the widget will give users the knowledge that the contents can be swiped. It's not essential as the dots follow familiarity concepts such as dot swiping indicators on apps like Instagram, but adding it will improve the usability of the app.

4. Redundant Visual Weight in Multiple Elements

In some screens, the date and time, temperature, and location all carry equal weight. This creates a slight clash in hierarchy.
Suggestions:

Reduce font weight or scale for secondary data (e.g., city name).
Consider grouping weather and location info in a lighter sub-section visually.

This supports a stronger visual hierarchy and cleaner reading rhythm.

Personal Comment: Yes I agree, adjusting the fonts of the information listed above will improve contrast and distinguish info for better visual hierarchy.

🛠️ Suggestions for Future Enhancement

Theme customization toggle (e.g., Light/Night Mode for widgets).
Live preview animation to show how the widget updates over time.
Accessibility toggle (e.g., large font size preview for the widget).

🟢 Summary Design Snapshot Score

Clarity: ★★★★☆
Consistency: ★★★★☆
Layout & Structure: ★★★★☆
Accessibility: ★★★☆☆
Usability: ★★★★☆
🟢 Total: 19/25 – Strong personalization flow with effective preview and clear actions. Focus next on contrast improvements, label hierarchy, and enhanced feedback for discoverability.

Personal Review - Settings Menu

Fig 2.2 - Settings Menu

The color scheme for the settings menu is the most cohesive overall from my previous design as it matches the navbar smoothly as well. This color palette will act as the basis for future refinement. Regarding the text, the "Settings" title as well as the "Weather Widgets" will change to white color to enhance readability and maintain consistency with the other text colors. Additionally, the gear icon next to the "Settings" title should be removed as it appears awkwardly that off-centers the balance of the text as a whole, the "Settings" text will be positioned at the center for alignment.

Fig 2.3 - Unit Change Popup

The only thing I will change here is the text color for the "CANCEL" button to black to be consistent with the other text color. The "CANCEL" text will then be slightly enlarged to strengthen its emphasis lost from the blue, standout color.

To summarize, the analysis above are the changes I aim to refine in the touch-up of the app design when creating the detailed wireframes in Task 2.

Task 1 - Video Presentation
Fig 3.0 - Task 1 Video Presentation