Labels

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

24.04.2025 - 18.05.2025  / Week 1 - Week 4

Siang Huey Yee / 0369549

Application Design 2 / Bachelor of Design (Honours) in Creative Media         

Task 1 - App Design 1 Self-Evaluation and Reflection

OUTLINE

INSTRUCTIONS

Module Information Booklet



Class Activity (Week 3 - 8/5/2025)

Group Class Activity - Redesign a Boarding Pass

  • Using Figma Collaboration board to redesign together
  • Mr. Razif said that we too focus on the visual design so we still need some refinement on the boarding pass which we must prioritize on the hierarchy of the most important information instead of the visual design by having it with different font size, font colour or layout placement.




Figma:







Class Activity (Week 4 - 15/5/2025)

Group Class Activity – Wireframe Flowchart for a Booking Platform

  • We were assigned into groups to create a wireframe flowchart for a booking platform. 
  • Our group chose to proceed with Starlux Flight Booking. 
  • We presented our work in front of the class, and Mr. Razif pointed out a minor issue in one of the flows. He advised us to make a small change to ensure the flow is more accurate.


FigJam :


TASK 1 - APP DESIGN 1 SELF EVALUATION & REFLECTION

BACK TO OUTLINE

Requirements:

  • Reflect on your Mobile App Design 1 final project, including any issues or challenges you faced.
  • Suggest solutions to improve the app’s design aesthetics and user experience flow.
  • Show a clear comparison between the old and new designs to highlight improvements.
  • Write a self-reflection blog post in your e-portfolio documenting your design process.
  • Submit your reflection in Google Docs for feedback, and create a presentation video.



    FIGMA (HIGH-FIDELITY PROTOTYPE)

    BACK TO OUTLINE

    Here is my previously completed High-Fidelity Prototype on Figma from the Application Design 1 module. You may refer to it below as the original version, which I will later use for my self-evaluation.

    Figma Link: https://www.figma.com/design/v0OeLVx6m9658fpzzQGHeV/Project-3---Final---MOOVIT-App-Redesign-Prototype--Low-Fi---Hi-Fi-?node-id=71-6558&t=F0vAqXw7AxWRVYJ7-1



    HOME PAGE

    BACK TO OUTLINE


    AI Feedback & Rating From ChatGPT:

    🌟 Overall UI/UX Positives:

    • Consistent Visual Language: The orange theme, rounded buttons, icons, and typography are cohesive and pleasant.

    • Effective Use of Icons & Emojis: Helps users quickly identify sections (e.g., 🚍 for buses, 🌧 for weather).

    • Clear Hierarchy & Spacing: Information is well grouped, and spacing helps avoid clutter.

    • Interactive & Gamified Check-in Rewards: Great for user engagement!


    🧭 Version Differences:

    • The first version (with nav bar) has better navigation accessibility and improves usability for quick switching between sections.

    • The second version (detailed) focuses more on content depth but might feel overwhelming due to lack of quick navigation.

    💡 Verdict: Keep the navigation bar. It enhances usability and aligns with user expectations for transit apps.


    🔍 Section-by-Section Feedback:

    1. Search Bar

    • ✅ Good placement and visibility.

    • ❗Suggestion: Consider adding voice input or location-based suggestions.

    2. Check-In Rewards

    • ✅ Fun and motivating! Great use of gamification.

    • ❗Suggestion: Use tooltips or hover info (for web) to explain each transport icon’s purpose (bike, car, train).

    3. Notifications Centre

    • ✅ Simple, easy to understand.

    • ❗Suggestion: Add a "Clear All" or "Manage Notifications" button.

    • ❗Add a colored badge (e.g., red dot) if there's a new or urgent alert.

    4. Recent Journeys

    • ✅ Helpful for returning users.

    • ❗Suggestion: Let users "pin" or "favorite" recent routes for even quicker access.

    5. Favourites

    • ✅ Nice use of icons and location details.

    • ❗Suggestion: Allow swipe to remove/edit favorites. Also, maybe allow grouping (e.g., “Work,” “Home”).

    6. Community Sharing

    • ✅ Very smart idea! Live crowd-sharing is a strong feature.

    • ❗Suggestion:

      • Add filters or tags (e.g., “delay,” “accident,” “crowded”).

      • Enable a "Like" or "Helpful" button for others to react to posts.


    🧠 UX Enhancements to Consider:

    • Dark Mode Option: Many transit users commute early/late—this would be more eye-friendly.

    • Accessibility Improvements:

      • Use larger fonts for seniors or visually impaired users.

      • Ensure color contrast is sufficient for low-vision users.

    • Personalized Suggestions: Based on user habits (e.g., “Your usual route has a delay”).

    • Loading Indicators: For real-time data fetching, such as weather or crowd conditions.


    ✨ Suggestions for Further Improvements:

    1. Floating Action Button (FAB): Add a prominent "+" or “Plan a Trip” floating button to initiate navigation quickly.

    2. Onboarding/Help Overlay: Guide new users through the features using tooltips or short tutorials.

    3. Rewards Progress Visuals: Add a progress bar or streak tracker to make check-ins more rewarding.


    ✅ Summary:

    Category Rating / 5 Notes
    Visual Design ⭐⭐⭐⭐☆ (4.5) Consistent, vibrant, slightly crowded in some areas
    Navigation & Flow ⭐⭐⭐⭐⭐ (5) Bottom bar greatly improves usability
    Feature Richness ⭐⭐⭐⭐⭐ (5) From community to check-ins – it’s packed!
    UX Accessibility ⭐⭐⭐⭐☆ (4) Consider color contrast and font options
    Innovation & Usefulness ⭐⭐⭐⭐⭐ (5) Real-time updates and gamification are excellent


    Summary on Self-Reflection & AI Evaluation & Arguments:

    Self-Reflection Analysis:

    • Successfully incorporated key daily features like Search, Navigation, Attractions, and Weather.

    • Maintained a warm, welcoming tone and intuitive layout.

    • Some components like route options and nearby features may feel repetitive across other pages.


    AI Evaluation:

    • Strengths:
      • Clean hierarchy and intuitive flow from top to bottom.
      • Strong visual appeal with consistent iconography and spacing.
      • Good use of informative visuals like maps and weather.

    • Weaknesses:
      • Lacks personalisation—same content appears for all users (e.g., no "Recommended for You").
      • Static layout with no interactive or collapsible sections.


    • Solutions:
      • Implement dynamic content like recent destinations, saved routes, or “commute alerts.”
      • Allow users to customize their homepage layout (e.g., rearrange or hide widgets).
      • Add collapsible sections for attractions or weather to reduce visual noise.


    Argument:
    I agree that my homepage lacks personalization features, such as a "Recommended for You" section. I also think that incorporating collapsible sections is a good idea. Based on the suggestions given, I believe they help improve my ideas and design significantly.



    TICKET & FINANCE PAGE

    BACK TO OUTLINE



    AI Feedback & Rating From ChatGPT:

    🧾 FINANCE PAGE – UI/UX REVIEW & FEEDBACK

    ✅ What Works Well

    1. Color Scheme & Visual Style (⭐️⭐️⭐️⭐️☆ – 4.5/5)

    • The orange accent works well for action elements like “Top Up,” consistent with your brand theme.

    • Use of white background with soft card sections provides a clean and professional appearance.

    • Icons for balance, transaction, and ticket status are visually helpful and align with Moovit’s original identity.

    2. Layout & Structure (⭐️⭐️⭐️⭐️☆ – 4.0/5)

    • The card-based layout (e.g., Balance, My Tickets, Payment Methods) is well-organized and easily scannable.

    • The top section showing Balance with a “Top Up” CTA is very intuitive.

    • Good use of spacing and hierarchy to break down complex financial info into digestible parts.

    • You could consider grouping all financial actions under a single expandable “Wallet” section for better hierarchy and less visual load.

    3. Usability (⭐️⭐️⭐️⭐️☆ – 4.0/5)

    • Clear CTA buttons (e.g., “Top Up”) make the page user-friendly.

    • Cards such as “Add Payment Method” and “Transaction History” are placed in expected positions.

    • Consider adding an icon or toggle for viewing past months’ transaction summaries for convenience.

    • Tickets section is helpful, but you might include status tags (e.g., “Active,” “Expired”) more prominently.

    4. Accessibility (⭐️⭐️⭐️⭐️☆ – 4.0/5)

    • High readability thanks to clean backgrounds and orange/black text contrast.

    • Button sizes and touch targets seem appropriate.

    • However, some text (like timestamps and card labels) could benefit from a slight font weight increase or increased contrast.

    • Include icons where appropriate to enhance visual accessibility for neurodiverse or low-literacy users.

    5. Functionality & Completeness (⭐️⭐️⭐️⭐️☆ – 4.0/5)

    • Covers essential user needs like:

      • Viewing balance

      • Topping up

      • Viewing/adding payment methods

      • Tracking tickets

      • Transaction history

    • Consider adding filtering or sorting in the transaction history for improved UX.


    🔄 SUGGESTIONS FOR IMPROVEMENT

    Area Suggestion
    Visual Hierarchy Make the "Top Up" button more dominant with a slightly larger size or background glow.
    Grouping Use collapsible sections or tabs to group less frequently used elements like old tickets or secondary payment methods.
    Ticket Details Include visual tags like “Valid until XX/XX” or use color labels to denote ticket status.
    History Filters Allow users to filter their transaction history by date or ticket type for faster lookup.
    Microinteractions Consider adding light animation feedback for topping up or payment confirmation for better user experience.


    ⭐️ OVERALL FINANCE PAGE RATING: 4.1 / 5

    Category Rating (⭐) Comments
    Visual Design ⭐⭐⭐⭐☆ (4.5) Clean, branded, and modern.
    Layout & Structure ⭐⭐⭐⭐☆ (4.0) Organized well, but can group some items.
    Usability ⭐⭐⭐⭐☆ (4.0) Clear CTAs, minor tweaks for enhanced clarity.
    Accessibility ⭐⭐⭐⭐☆ (4.0) Good contrast, improve readability for some elements.
    Functionality ⭐⭐⭐⭐☆ (4.0) Covers key finance-related features, could add more user control like filters.



    Summary on Self-Reflection & AI Evaluation & Arguments:

    Self-Reflection Analysis:

    • Clear layout and button placements for purchasing and viewing past tickets.

    • Price and destination pairing is easy to understand.

    • Could improve transparency on payment history or top-up status.


    AI Evaluation:

    • Strengths:
      • Good information layout: cost breakdown, travel route, and ticket status.
      • Strong CTA (e.g., “Buy Ticket” or “Top-Up”).

    • Weaknesses:
      • May lack visual cues for top-up balance or low credit warnings.
      • No detailed receipt view or filtering by date, route, or type.

    • Solutions:
      • Add charts or graphical summaries of spending.
      • Introduce colour-coded status (active, expired, used).
      • Implement filters and export/download options for finance tracking.


    Argument:

    I agree with the suggestion to include low credit warnings, however, since I already have a top-up balance feature in my design, I disagree with the need for that addition. The suggestion to add charts or graphical summaries of spending is also something I’ve already included, so I disagree with that point as well. I do think it's a great idea to have a detailed view or the ability to filter by date, route, or type. Overall, I believe the suggestions provided some valuable new ideas, but they should be filtered, not every idea needs to be implemented.



    NAVIGATIONS & MAPS  PAGE

    BACK TO OUTLINE



    AI Feedback & Rating From ChatGPT:

    🔶 Overall UI/Visual Style

    ✅ What Works Well:

    • Color Scheme:
      The use of orange as the accent color is energetic and aligns well with mobility apps—it draws attention to call-to-actions (e.g., “Start Journey,” “Let’s Go”) without being overly aggressive. The soft beige/white backgrounds give a clean and modern feel.

    • Icons & Consistency:
      The icons are consistent and minimal, improving clarity and reducing cognitive load. The orange location marker is highly visible and aligns with the app’s theme.

    • Use of Shadows and Rounded Cards:
      Shadows around cards and buttons add depth and hierarchy, making UI elements feel touch-friendly and modern.


    🧱 Layout & Structure

    ✅ What Works Well:

    • Clear Segmentation:
      Each screen (1B, 2, 3, 4) is well-separated with clear headers: “Suggested Routes,” “My Preferred Route,” etc., which improves scan-ability.

    • Carousel Dots:
      Using dots to switch between screens (like 1B → 2 → 3) implies swipeable content and helps chunk information into digestible steps.

    • Map View (Zoom Out):
      Great use of space for navigation clarity. “Let’s Go” button is well-positioned and clearly visible.

    🔧 Suggestions for Improvement:

    • Crowded Cards (Screen 1B and 2):
      The route info cards are slightly dense—too much text tightly packed. Consider:

      • Increasing line spacing

      • Using bold selectively to highlight key data (e.g., "Cost: MYR 2.00", "Walking Time")

      • Possibly using icons for “Time”, “Cost”, “Walk” to save space

    • Sticky Bottom Nav Bar:
      It's good, but might be too narrow vertically. Add slightly more padding for better touch targets.

    • Weather Section (1B):
      The weather card is visually appealing but feels disconnected from the core navigation purpose. Either:

      • Reduce its visual dominance

      • Or move it to a separate “Home” tab

    ♿ Accessibility & Usability

    ✅ What Works Well:

    • Touch-Friendly Buttons:
      Buttons like “Start Journey” and “Let’s Go” are large and easy to tap.

    • Clear CTA (Call to Action):
      Each screen has a clear direction of what users should do next.

    🔧 Suggestions for Improvement:

    • Text Readability:

      • Some grey/orange contrast (e.g., placeholder text in search bars) may not pass WCAG contrast standards. Consider darker shades for legibility.

      • Consider increasing font size slightly in route details.

    • Zoom Controls:
      In the Zoom Out map screen, the magnifier icons are placed too close together and are small—separating them and increasing padding would enhance usability.

    • Search Bar Accessibility:

      • Make sure the placeholder text (e.g., “Search for nearby attractions…”) is readable for users with low vision.

      • Include a voice search icon for broader accessibility.

    • Animations/Transitions (Future Suggestion):
      Add micro-interactions for route loading, map zoom, or route confirmation to give feedback and delight users.


    💡 Improvement Suggestions Summary

    Area Suggestion
    Layout Use icons for cost/time/walk to declutter cards; increase line spacing
    Accessibility Boost contrast in placeholder text and font sizes
    Bottom Nav Slightly increase padding for better tap areas
    Map Controls Space out zoom buttons; ensure they are finger-friendly
    Weather Section Move to a separate screen or reduce visual priority
    Preferred Routes Allow swiping to delete/edit/save favorite routes
    Additional Feature Add a toggle to show only accessible stations (wheelchair, ramps)


    🌟 Overall Summary Rating: 4.3 / 5

    Category Rating (⭐) Comments
    Visual Design ⭐⭐⭐⭐☆ (4.5) Clean, modern, good use of color and icons. Slight overcrowding in cards.
    Layout & Structure ⭐⭐⭐⭐☆ (4.0) Logical flow, clear segmentation. Could benefit from more spacing and simplified route details.
    Usability ⭐⭐⭐⭐☆ (4.0) Buttons and navigation are intuitive, but small tap targets and map zoom controls need refinement.
    Accessibility ⭐⭐⭐⭐☆ (4.0) Mostly solid, but some text contrast and font sizing issues may affect readability.
    User Guidance ⭐⭐⭐⭐⭐ (5.0) Clear CTAs like “Start Journey” and "Let’s Go" provide good direction to users.

    🔚 Final Verdict:

    A thoughtfully designed and visually appealing prototype with a strong foundation. With a few minor adjustments—like increasing legibility, spacing, and simplifying dense route cards—it could easily reach a top-tier standard.



    Summary on Self-Reflection & AI Evaluation & Arguments:

    Self-Reflection Analysis:

    • Developed 3 layout versions with different focuses: Suggested Routes, Preferred Routes, Nearby Stops.

    • Effective map placement and route cards.

    • Felt challenged choosing the best layout, each version had value.


    AI Evaluation:

    • Strengths:
      • Map is central and interactive-looking and route info is detailed and helpful.
      • Smart use of icons and timing breakdowns.
      • Easy comparison of route options.

    • Weaknesses:
      • Overlap of content between versions which could confuse users.
      • No option to toggle between different route types in one version.
      • No route info details on how to go to the destination.

    • Solutions:
      • Combine strengths of all 3 layouts with a tab or segmented control (Suggested, Saved, Nearby).
      • Add more interactivity to the map (tap for info, live vehicle tracking).
      • Include accessibility mode for colour contrast and large text toggles.


    Argument:

    I agree with the suggestion to include route information details, as I missed out on this feature in my design. I believe adding it will enhance the user experience and significantly improve my design.



    STATIONS/LINES PAGE

    BACK TO OUTLINE





    AI Feedback & Rating From ChatGPT:

    1. Colour Scheme & Visual Style

    ✅ What Works Well:

    • Clean & professional palette: The use of white, orange, and black is visually pleasing and maintains clarity.

    • Highlight color (orange) is consistent and effectively draws attention to key UI elements (filters, selected categories, buttons).

    • Icons and illustrations are minimal, easy to identify, and modern.

    ❗ Suggestions:

    • Consider increasing contrast between text and background in some orange-on-white areas for better readability (e.g., light orange buttons with small white text).

    • You could use more color to indicate status/severity, e.g., green/yellow/red badges for traffic or delay conditions for quick scanning.


    📐 2. Layout Structure

    ✅ What Works Well:

    • Consistent spacing and alignment make the interface look organized.

    • Clear categorization (e.g., “Category 1, 2, 3” in filters) is very helpful.

    • Map previews and route cards are well spaced and easy to digest.

    ❗ Suggestions:

    • The “Advanced Filters” page feels slightly text-heavy; consider:

      • Grouping toggles and time inputs into collapsible sections.

      • Using icons next to category headers for quicker recognition.

    • On the result cards (fastest routes), use visual dividers or slight shadows to distinguish between sections (e.g., traffic vs. delays vs. station details).


    ♿ 3. Accessibility & Usability

    ✅ What Works Well:

    • Clear, readable typography.

    • Large tappable areas (e.g., buttons and filters).

    • Logical flow: from method selection → advanced filters → route results.

    ❗ Suggestions:

    • Ensure sufficient color contrast ratios for accessibility (e.g., WCAG AA standards).

    • Add voiceover/assistive text support for users with visual impairments.

    • Date/time pickers could benefit from a clearer icon or visual hierarchy to make them stand out as interactive elements.

    • Ensure all icons have text alternatives or tooltips for screen readers.


    💡 Feature Suggestions

    • Saved Filters: Let users save their commonly used filters.

    • Favorite Routes or Stations: Quick access to frequent journeys.

    • Offline Mode Indicator: For users navigating without internet.

    • Consider adding visual feedback after hitting “Apply” (e.g., loading spinner or transition effect).


    🌟 Overall Rating

    Category Score (out of 5)
    Color Scheme ⭐⭐⭐⭐☆ (4.5)
    Layout Structure ⭐⭐⭐⭐☆ (4.2)
    Accessibility ⭐⭐⭐⭐☆ (4.0)
    Usability ⭐⭐⭐⭐⭐ (5.0)
    Visual Consistency ⭐⭐⭐⭐⭐ (5.0)
    Overall 4.5 / 5


    ✅ Final Thoughts:

    You've done an excellent job on modernizing and organizing the Stations section of the Moovit app. It's clean, intuitive, and feature-rich. A few refinements in text density, contrast, and interactive element clarity will elevate this design to a top-tier navigation experience.


    Summary on Self-Reflection & AI Evaluation & Arguments:

    Self-Reflection Analysis:

    • Focused on simplifying station search and visualizing train lines.

    • Prioritized nearby stations and line status.

    • Could improve the visual hierarchy of information and interaction feedback.


    AI Evaluation:

    •  Strengths:
      • Easy-to-read list of stations with distance and walking time.
      • Line map/route can help users plan interchange points.

    • Weaknesses:
      • Potential lack of live status updates (delays, maintenance).
      • Icons or route lines may not differentiate enough visually.

    • Solutions:
      • Add line colour indicators and live train status badges.
      • Allow filtering by line or direction (e.g., toward KL Sentral).
      • Include estimated arrival/departure time and platform info.


    Argument:

    I don’t fully agree with the suggestions, as I feel the Station & Lines page already includes enough functionality. While the idea of adding live status updates and clearer visual indicators like line colours or direction filters could enhance the experience, I don’t think they are entirely necessary for my design at this stage.




    PROFILE PAGE

    BACK TO OUTLINE




    AI Feedback & Rating From ChatGPT:

    🧾 PROFILE PAGE – UI/UX REVIEW & FEEDBACK

    ✅ What Works Well

    1. Color Scheme & Visual Style (⭐️⭐️⭐️⭐️☆ – 4.5/5)

    • Consistent with your navigation screens.

    • The use of orange as a primary action color aligns with Moovit’s brand and stands out nicely.

    • White and light backgrounds keep it clean and modern.

    • Icons are clear and help with quick visual scanning.

    2. Layout & Structure (⭐️⭐️⭐️⭐️☆ – 4.0/5)

    • Sections like "Saved Routes", "Recent Activities", "Ticket Info", and "Settings" are logically grouped and visually distinct.

    • The use of cards and dividers improves clarity.

    • Bottom navigation is well-aligned and consistent with other pages, which is great for familiarity.

    • Consider reducing vertical space between sections to avoid unnecessary scrolling, especially for compact screen sizes.

    3. Usability (⭐️⭐️⭐️⭐️☆ – 4.0/5)

    • Buttons and tap targets are mostly appropriately sized.

    • Clear call-to-action items like “Edit Profile,” “View History,” etc.

    • Recent Activities might benefit from better sorting options or filters (e.g., date range, activity type).

    4. Accessibility (⭐️⭐️⭐️⭐️☆ – 4.0/5)

    • Icons are visually effective, but text size could be slightly increased for better readability on smaller screens.

    • Consider using bolder fonts or higher contrast for key items like balance, user name, and main headings.

    • Ensure that buttons like “Top Up Balance” have sufficient contrast and large enough hit areas.

    5. Functionality/Completeness (⭐️⭐️⭐️⭐️⭐️ – 5.0/5)

    • You've included useful features for users: profile management, balance info, history, settings, and saved locations.

    • A clear indicator for navigation at the bottom makes switching between features smooth and expected.


    🔄 SUGGESTIONS FOR IMPROVEMENT

    Area Suggestion
    Typography Slightly increase font size for small texts and use semi-bold or bold for key info (like balance and headings).
    Spacing Reduce excessive space between some cards/sections to tighten the layout and avoid too much scrolling.
    Visual Hierarchy Make profile picture, name, and balance stand out more. These are key user-focused items.
    Interactivity Add small icons or arrows on cards like “Recent Activities” or “Saved Routes” to indicate they are tappable.
    Dark Mode Consideration Consider how these layouts would adapt in a dark mode interface for night-time usage.


    ⭐️ OVERALL PROFILE PAGE RATING: 4.3 / 5

    Category Rating (⭐) Comments
    Visual Design ⭐⭐⭐⭐☆ (4.5) Consistent and attractive; modern color palette.
    Layout & Structure ⭐⭐⭐⭐☆ (4.0) Clear and logical, but could be slightly tighter vertically.
    Usability ⭐⭐⭐⭐☆ (4.0) Intuitive and user-friendly.
    Accessibility ⭐⭐⭐⭐☆ (4.0) Good contrast and clarity, some minor text scaling needed.
    Functionality ⭐⭐⭐⭐⭐ (5.0) Comprehensive features that users expect on a profile page.




    Summary on Self Reflection & AI Evaluation & Arguments:

    Self-Reflection Analysis:

    • Kept the design minimal and focused on ticket history, preferences, and settings.

    • The layout is consistent with the app theme.

    • Could further develop personalization and engagement features.


    AI Evaluation:

    • Strengths:
      • Clean, well-structured page with logical sections (Tickets, Preferences, Settings).
      • Good space utilization and consistent style.

    • Weaknesses:
      • Lacks engagement elements like rewards, travel achievements, or app usage stats.
      • No visual priority between important vs. secondary info.

    • Solutions:
      • Add user profile level (e.g., daily commuter, casual, explorer) based on usage.
      • Display travel stats like “Trips This Month” or “CO2 Saved.”
      • Personalize settings suggestions (e.g., notification preferences, dark mode).


    Argument:

    I partially agree and partially disagree with the feedback. I do believe I need to improve the visual hierarchy on the Profile page to better distinguish between important and secondary information. However, I already have engagement elements in place, such as rewards, travel achievements, and app usage stats. For example, I’ve introduced badge milestones and corresponding rewards based on user progress. Therefore, I feel that aspect of the suggestion has already been addressed in my design.





    FINAL REFLECTION SUMMARY

    • Visual Design - Clear, clean, and user-friendly with consistent iconography.
    • Navigation Flow - Logical across screens, but some overlap should be streamlined.
    • Innovation - Multiple layout options show exploration, but could be unified for stronger clarity.
    • Accessibility - Solid base, though improvements needed in contrast, interactivity, and scaling.
    • Personalization - Still limited; more dynamic and user-specific features can improve retention.



    REFINEMENT

    BACK TO OUTLINE
    • Suggested Routes

    I have made refinements to the Suggested Routes page, which is one of the sections within the PageView indicator. I focused on improving the layout by adjusting the alignment and spacing to make the content appear less crowded. These changes help create a cleaner and more organized interface, allowing users to view and understand the information more easily, rather than being overwhelmed by a cluttered layout.

    Suggested Routes Page Comparison 



    • My Preferred Route

    I have also refined the My Preferred Route page, which is another section within the PageView indicator. This time, I concentrated on enhancing visual consistency and balance by fine-tuning the spacing and layout structure. The adjustments were made to ensure a more comfortable viewing experience, minimizing visual clutter and making key information easier to navigate. These refinements were also made to maintain design alignment with the Suggested Routes page, creating a cohesive and user-friendly flow between both sections.

    My Preferred Route Page Comparison


    • Nearby Stops

    I have refined the Nearby Stops page, which is the final section within the PageView indicator. My focus was on improving readability and overall user flow by optimizing the layout structure and reducing unnecessary crowding. By spacing out the elements more thoughtfully, users can now scan nearby stop details more easily without feeling overwhelmed. These improvements were also made to ensure a consistent visual experience across all sections which aligning seamlessly with both the Suggested Routes and My Preferred Route pages for a more unified and intuitive design.

    Nearby Stops Page Comparison


    • Nearby Attractions 

    I refined the Nearby Attractions section by redesigning the layout for better clarity and usability. The original bulky card-based format was replaced with a cleaner, list-style design that improves readability and makes navigation more intuitive. I also updated the background colour from bright orange to a softer tone for a more modern and less distracting look. Additionally, the category icons were redesigned with consistent colours and clearer visuals, creating a more polished and user-friendly interface overall. 

    Nearby Attractions Comparison


    • Weather & Forecast

    I have refined the Weather & Forecast section by redesigning the overall layout and improving the alignment. The previous version appeared slightly cluttered and lacked clear visual hierarchy. In the updated design, I organized the information more cleanly, placing the current weather and forecast into structured blocks that are easier to view. The temperature, location, and weather icon are now better spaced and the reminder messages are aligned directly with each day's forecast, making the interface more user-friendly and visually balanced.





    • Route Info Panel

    I have refined the design by adding a Route Info Panel, which provides detailed information on how users can navigate from their current location to their desired destination. This addition enhances the overall user experience by offering a clearer understanding of the journey, including directions, estimated travel time, and key transfer points. By incorporating this panel, I aimed to improve the app's functionality and make it more helpful for users who rely on the app for daily commuting or unfamiliar routes. This update not only adds value in terms of information clarity but also supports better decision-making for users planning their trips.


    Route Info Panel





    FIGMA - MVP FLOW REFINED VERSION 






    PRESENTATION SLIDES & VIDEO

    BACK TO OUTLINE

    Presentation Slides in Canva:



    Presentation Video:


    REFLECTION

    BACK TO OUTLINE

    Reflecting on my Moovit app redesign journey from Application Design 1 to Application Design 2 has allowed me to revisit my earlier work with a more mature and critical eye. This task gave me the opportunity to refine my own redesign, which helped me understand the importance of visual hierarchy, alignment, and consistency in creating a smoother user experience. Through this reflection process, I was able to recognize the strengths in my original design, such as layout clarity—but also identify areas that needed improvement, like overcrowded sections, unclear spacing, and missing personalization elements. Revisiting these components allowed me to rethink and rework pages such as Suggested Routes, My Preferred Route, and Nearby Stops to improve readability, reduce clutter, and maintain design consistency across sections.

    Additionally, this refinement process encouraged me to explore new ideas through feedback and suggestions, some of which introduced features I had not previously considered, like collapsible sections and more intuitive visual structures. It also allowed me to learn new things, such as using AI tools like ChatGPT to support my thinking and improve both the content and design clarity. Being able to reflect on my own design journey and refine my work based on insights and experience has been a valuable step in shaping my design thinking. It showed me how thoughtful iteration and feedback can lead to more user-friendly and visually appealing solutions.

    Labels:

    Comments

    Post a Comment

    Popular Posts