Application Design 2 Task 1
Jie Xuan/ 0356515
Application Design II/ Bachelor of Creative Media/Taylor's University
Task 1: Application Design Self Evaluation & Reflection
TABLE OF CONTENTS
1. Lectures
2. Instruction
3. Task 1: Self Evaluation And Reflections
4. Feedbacks
5. Reflections
LECTURES
- A comprehensive analysis of your app design.
- Feedback by AI and your argument to either agree or disagree
- Your Old and New design to show the changes/improvements Presentation Video
- A recording of you presenting your analysis must be included.
- This is a formal presentation. Camera view of yourself must be included.
- If you don't have a webcam, use your phone camera as a webcam OR you can join a Google Meet session with your laptop and your phone, can capture from there.
- Embed/link the presentation video on your blog. Submit your blog link.
1. Imagery and Style
Before:
- Flat illustrations with a minimal color palette (mostly blue and white).
- White backgrounds dominated each screen, giving a sterile and basic look.
After:
- More visually engaging illustrations with a light blue gradient background.
- The illustrations remain consistent in style but are now placed against a more modern and appealing backdrop.
- The background gradient adds depth and warmth, creating a more welcoming tone.
Reflection:
The improved style helps modernize the interface and better captures user attention during the onboarding process. The consistent gradient background also creates a seamless experience across screens.
2. Text
Before:
- Plain, brief descriptions with limited context.
- Text alignment and spacing felt tight and utilitarian.
After:
- Text has been slightly refined for clarity and consistency.
- Enhanced line spacing and better alignment improve readability.
- The text now appears more polished and easier to scan.
Reflection:
These changes were likely made to enhance clarity and reduce cognitive load, ensuring users quickly grasp the process without needing to reread.
3. Call to Action (CTA)
Before:
- Bright yellow buttons with large text (“Next,” “Start!”).
- Slightly inconsistent CTA wording (“Start!” vs. “Next”).
After:
- Button colors remain yellow for visibility, but text has been unified and softened (“Start” instead of “Start!”).
- Addition of “Back” and “Skip” options for better navigation control.
Reflection:
More consistent and user-friendly CTAs improve usability. Giving users the option to skip or go back respects their control and comfort, aligning with best UX practices.
4. Visual Hierarchy
Before:
- Elements had equal weight, making it hard to focus on what mattered most.
- The lack of background variation meant less distinction between sections.
After:
- Better spacing and contrast between illustrations, text, and buttons.
- The use of a background gradient and more breathing room gives a clear visual flow from top to bottom.
Reflection:
Improved visual hierarchy helps users intuitively follow the onboarding process, making navigation smoother and comprehension faster.
5. Logo
Before:
- The KTM logo was shown only on the initial loading page.
- Placement was minimal and not repeated throughout the experience.
After:
-
The KTM logo appears consistently on every screen, subtly reinforcing brand identity.
Reflection:
Repetition of the logo builds brand recognition and credibility throughout the user journey.
6. Why These Changes Were Made
- Enhance Visual Appeal: The gradient background, improved illustrations, and overall color consistency modernize the app and make it visually engaging.
- Improve Usability: Clearer text, better navigation controls (Back, Skip), and consistent CTAs reduce friction for new users.
- Strengthen Branding: Frequent and subtle logo usage enhances trust and familiarity with the KTM brand.
- Support Accessibility: Better contrast and spacing improve readability and accessibility for a wider user base.
Conclusion
The redesigned onboarding sequence is a clear improvement in terms of both design and user experience. It reflects an intentional effort to create a more professional, intuitive, and welcoming interface for KTM users. The changes support usability principles and brand communication effectively.
1. Imagery and Style
Before:
- Plain white background with minimal visual design.
- Basic input field styling with sharp edges.
- Social media icons appear unstyled and loosely placed.
After:
- Introduction of a clean blue gradient background, giving a more modern and professional look.
- Rounded input fields and login container create a smoother and friendlier visual impression.
- Social icons are now more visually integrated and appropriately spaced.
Reflection:
The updated style increases visual appeal and conveys professionalism. The added curvature and color gradient improve the aesthetic without overwhelming the user.
2. Text
Before:
- Minimal text labels, lacking additional information.
- Slight inconsistency in font hierarchy (e.g., “SIGN UP” emphasized but contextually weak).
After:
- Added subheading: “KTMB INTEGRATED TICKETING SYSTEM” below the logo for brand clarity.
- Inclusion of the privacy/terms agreement line provides context for data handling.
- Cleaner layout of “SIGN UP” text and clearer placement of supporting actions.
Reflection:
Text improvements enhance clarity, inform users of the platform's identity, and increase legal transparency.
3. Call to Action (CTA)
Before:
- One prominent yellow “LOG IN” button.
- Social logins and reset password links are available but visually disconnected.
After:
- Maintains strong yellow “LOG IN” button but includes a mandatory checkbox for Terms and Privacy Policy – a vital compliance addition.
- Better grouping of CTAs like Facebook/Google login and "Reset/Forgot Password" links under the main action.
Reflection:
The redesigned CTA area improves usability and ensures GDPR/privacy compliance while maintaining visual hierarchy.
4. Visual Hierarchy
Before:
- All elements placed in a linear and equally weighted manner.
- Poor spacing leads to a visually cluttered experience at the bottom.
After:
- Grouped visual blocks: form fields, CTA button, support text, social login.
- Strategic use of white space and background color gradients to guide the user’s focus.
Reflection:
Enhanced hierarchy improves navigation flow, helping users to intuitively follow the login steps.
5. Logo
Before:
-
Bold KTM logo without additional branding context.
After:
-
Logo remains but now includes “KTMB INTEGRATED TICKETING SYSTEM”, reinforcing purpose and legitimacy.
Reflection:
Stronger brand identity builds user trust and reduces ambiguity about the platform.
6. Why These Changes Were Made
- User Trust & Branding: Addition of full brand name and legal text increases user confidence in data privacy and system legitimacy.
- Visual Clarity & Modernization: Blue gradients and rounded corners modernize the look, aligning it with contemporary UI trends.
- Legal Compliance: Terms and Privacy checkbox ensures the app adheres to standard regulations.
- Improved Usability: Better grouping, spacing, and emphasis reduce cognitive load and create a more pleasant login experience.
Conclusion
1. Imagery and Style
Before:
- Dull gradient background with strong color contrast (blue and green) that feels outdated.
- Visuals were mostly utilitarian, with limited personality.
- Iconography and layout felt flat and basic.
After:
- Softer, more modern color tones (sky blue and white) dominate the interface, creating a friendly and inviting atmosphere.
- Use of character illustration (e.g., personalized greeting and rounded voucher visuals) adds warmth and user engagement.
- Icons have been updated for consistency and simplicity.
Reflection:
The new style feels more polished and approachable, reflecting modern design trends that enhance user trust and comfort.
2. Text
Before:
- Generic labels like “Start,” “Destination,” and “Seat Number.”
- Voucher section had dense and rigid text layout.
After:
- Personalized greeting (e.g., “Hello, Jie Xuan”) introduces a conversational tone.
- Fields are now labeled more intuitively (e.g., “Departure” and “Arrival”).
- Voucher descriptions are cleaner and more readable, with a clear call-out of voucher codes and expiry.
Reflection:
Textual changes promote clarity, friendliness, and personalization—important elements for improving user engagement and reducing ambiguity.
3. Call to Action (CTA)
Before:
- Single yellow “Search” button with no trip type options.
- CTAs for vouchers and booking actions were less emphasized.
After:
- “Search” remains prominent but now includes trip type toggles (One Way / Round Trip) above the form, improving functionality.
- The voucher CTA is clearer and highlighted with supporting visuals.
Reflection:
The enhanced CTA structure allows for more intuitive trip planning and draws attention to key actions without overwhelming the user.
4. Visual Hierarchy
Before:
- Dense layout with multiple sections vying for attention.
- Recent searches and deals were presented with little visual distinction.
After:
- Clear segmentation of form, deals, and navigation.
- “Search” is prioritized, followed by a concise “Deals & Offer” section.
- Bottom navigation bar added for consistent access to core features (Home, Ticket, Rewards, etc.).
Reflection:
Improved hierarchy reduces cognitive load, enables faster navigation, and guides users toward priority actions.
5. Logo
Before:
-
Large KTM logo occupying top screen space with strong emphasis.
After:
- KTM logo reduced in size and integrated more subtly into the layout.
- Emphasis is now placed on user interaction rather than branding dominance.
Reflection:
This shift allows content and functionality to take center stage while maintaining brand presence in a less intrusive manner.
6. Why These Changes Were Made
- Enhance Usability: Trip planning is now easier with clearly labeled input fields and the addition of the trip type toggle.
- Modernize Aesthetics: A softer color palette, rounded components, and updated icons bring the interface in line with current UI standards.
- Personalize Experience: Greeting users by name adds emotional warmth and connection.
- Improve Engagement: Cleaner voucher display, more prominent deals, and better visual balance help maintain user attention.
- Simplify Navigation: A bottom navigation bar offers quick access to key sections, improving flow across the app.
Conclusion
The home page redesign transforms a functional but outdated interface into a modern, user-centric entry point for the KTM app. The changes improve clarity, usability, and emotional connection with users, ultimately enhancing both the aesthetic and practical quality of the experience.
1. Imagery and Style
Before:
- Harsh yellow gradient header and flat ticket cards.
- Blue background for ticket listings caused a cluttered look.
- Basic visual structure with minimal styling enhancements.
After:
- Refined blue header with cleaner background and softer tones.
- Ticket cards are redesigned in cream/yellow with rounded corners and icons for features like WiFi, meals, etc.
- Visual tags (e.g., “One-way,” “Breakfast”) are used to highlight value-added features.
Reflection:
The updated style improves visual harmony and professionalism. It adds sophistication without overwhelming users and better aligns with modern UI standards.
2. Text
Before:
- Minimal formatting and repetitive structure for ticket info.
- Route and class details shown in a list-like format with limited hierarchy.
After:
- Key details such as class, price, departure and arrival times are clearly structured.
- Text is organized with readable fonts and informative sub-labels (e.g., “2 Adults,” “Breakfast”).
Reflection:
Better text organization makes it easier for users to scan and compare options, improving decision-making during booking.
3. Call to Action (CTA)
Before:
- “Sort Ticket” button was isolated and small.
- No clear tabs or options for sorting preferences.
After:
- Prominent sorting options added (e.g., Most Relevant, Fastest Route, Lowest Price).
- Each ticket card now functions as an actionable unit, with visual cues to encourage selection.
Reflection:
The enhanced CTA design supports user autonomy and speeds up the decision-making process by surfacing useful filters upfront.
4. Visual Hierarchy
Before:
- Overuse of similar colors and equal weight for all tickets made it hard to distinguish important details.
- Lack of filtering tabs meant all information was processed equally.
After:
- Clear segmentation with filtering tabs above the ticket list.
- Important details like departure/arrival time and price are bolded or separated visually.
- Icons and tags are used effectively to chunk information.
Reflection:
Stronger hierarchy guides user attention toward key information and available sorting logic, improving the efficiency of the booking experience.
5. Logo
Before:
-
KTM logo prominently displayed in the header with a strong gradient background.
After:
- KTM logo minimized and subtly placed in the top-right corner.
- Branding takes a back seat to task-oriented elements.
Reflection:
Reducing logo dominance improves usability and ensures user focus remains on the primary task: selecting a ticket.
6. Why These Changes Were Made
- Improve Usability: Clearer information hierarchy, visual tags, and filter tabs help users make quicker, more informed decisions.
- Modernize Aesthetics: Soft colors, rounded cards, and minimalistic layout bring the interface up to current design standards.
- Enhance Functionality: Sorting options make the booking system feel responsive and intelligent.
- Support Mobile UX: New layout feels more touch-friendly and scalable on mobile devices.
- Emphasize Value: Highlighting class features and add-ons (e.g., breakfast, WiFi) makes pricing more justifiable.
Conclusion
The redesigned ticket booking page is a major upgrade in both form and function. It provides users with a visually pleasant and highly usable interface to browse, compare, and book tickets with ease. The improved structure, styling, and interactive elements contribute to a more efficient and enjoyable booking experience.
1. Imagery and Style
Before:
- Harsh yellow-blue gradient background with strong visual contrast.
- Seat colors (green, red, white) appeared flat and overly saturated.
- Visual representation of the coach felt basic and less modern.
After:
- Clean blue header with subtle gradient for a more modern look.
- Refined seat icons with rounded edges and softer, more appealing color tones.
- Addition of coach tabs (A, B, C, D) improves the sense of structure.
Reflection:
The updated design is cleaner and more polished. It introduces a friendlier, more intuitive visual style while maintaining functionality.
2. Text
Before:
- Route labels used “Start” and “Destination” in uppercase, less aligned with natural language.
- Seat info displayed in a large blue box, which felt bulky.
After:
- Route labels now use “Departure” and “Arrival,” and are shown in sentence case with better alignment and spacing.
- Seat details (e.g., seat numbers, pax, price) are now cleaner, displayed in a modern modal box.
Reflection:
Refined text ensures better comprehension and aligns more with user expectations in a ticketing context.
3. Call to Action (CTA)
Before:
- “Cancel” and “Proceed” buttons were functional but lacked visual hierarchy.
- Buttons were small and blended into the background.
After:
- CTA buttons are now more prominent and easier to tap, especially for mobile users.
- Visual contrast makes the “Proceed” button more actionable while maintaining a clear option to “Cancel.”
Reflection:
Stronger CTA design improves usability and decision-making confidence.
4. Visual Hierarchy
Before:
- No coach tabs, so everything was cramped into a single coach view.
- Seat status legend and user inputs were scattered or repetitive.
After:
- Seat legend moved to the top with visual icons and better alignment.
- Coach selection separated into clearly labeled tabs (A to D), making navigation smoother.
- Selection summary is placed at the bottom in a visually distinct box.
Reflection:
A clearer hierarchy improves seat selection experience and reduces cognitive load during navigation.
5. Logo
Before:
-
KTM logo placed prominently in the gradient header, competing with page title.
After:
-
KTM logo remove within the header, reducing distraction.
Reflection:
This change shifts focus to task completion rather than brand identity at this stage of the user journey.
6. Why These Changes Were Made
- Improve Usability: Introducing coach tabs and clearer seat status makes navigation easier and less cluttered.
- Enhance Visual Experience: Softer tones, modern layout, and balanced spacing create a friendlier interface.
- Clarify Information: Updated labels like “Departure” and “Arrival” reduce ambiguity and align with ticketing norms.
- Support Mobile Interaction: Larger, touch-friendly CTAs and cleaner layout suit mobile usage better.
- Promote Focused Interaction: Deprioritizing branding in favor of clearer actions supports goal-oriented behavior.
Conclusion
The redesigned seat selection page transforms a dense and slightly outdated interface into a user-friendly, visually organized, and mobile-ready experience. These changes reflect thoughtful improvements in usability, aesthetics, and user confidence during a critical interaction point.
1. Imagery and Style
Before:
- Bright yellow color blocks dominated the interface.
- Layout appeared dense and text-heavy.
- Inconsistent design between different stages (e.g., voucher vs. non-voucher screens).
After:
- Soft blue and white gradient used for backgrounds, offering a more modern and calming interface.
- Consistent design language applied throughout all screens.
- Refined icons and illustrations during payment processing and confirmation.
Reflection:
The updated imagery enhances readability, reduces visual strain, and brings a more professional tone to the checkout process.
2. Text
Before:
- Heavy use of capital letters (e.g., “PAYMENT DETAIL”) and compact lines.
- Voucher and payment details cramped into small spaces.
After:
- Text is now presented with proper casing and more breathing room.
- Payment information is grouped logically with clearer labels and spacing.
- Voucher section includes dropdown-style interaction for applying discounts.
Reflection:
Improved text formatting and layout enhance understanding and reduce cognitive load during a critical step.
3. Call to Action (CTA)
Before:
- “PAY RM XX.00” button in bold yellow, but often crowded below dense form elements.
- No clear separation between form inputs and CTAs.
After:
- CTA button remains bold and yellow for consistency but is now placed within a cleaner, structured layout.
- Clear spacing between payment details and the final action enhances focus and intent.
Reflection:
A cleaner CTA environment ensures that the payment action is prominent and free from visual clutter, reducing user hesitation.
4. Visual Hierarchy
Before:
-
All information was treated with equal emphasis, making it hard to distinguish priority areas (e.g., ticket vs. payment vs. promo).
After:
- Key areas like seat info, platform, and time are clearly grouped under “Ticket Details.”
- Payment summary and total are aligned near the bottom for review before payment.
- Smooth progression: Ticket Details → Promo/Voucher → Payment Option → Pay Button.
Reflection:
Strong visual hierarchy guides the user step-by-step through the payment journey, improving accuracy and trust.
5. Logo
Before:
-
KTM logo repeated across multiple stages with a bold gradient banner.
After:
-
Logo is subtly integrated into headers and confirmation screen, allowing the task at hand to take focus.
Reflection:
Reduced logo dominance respects user attention and aligns with a more minimal, task-driven interface.
6. Why These Changes Were Made
- Enhance User Confidence: A cleaner design with structured ticket and payment information reassures users before committing payment.
- Improve Accessibility: Better spacing, typography, and form design improve usability across devices.
- Modernize UI: Gradient backgrounds, streamlined components, and updated icons align with contemporary app standards.
- Simplify Experience: Reducing visual noise and organizing the flow helps users complete transactions with ease.
- Support Consistency: A uniform look and feel across all screens from detail to confirmation builds trust and familiarity.
Conclusion
The redesign of the payment flow from ticket detail to confirmation focuses on clarity, usability, and visual simplicity. It transforms a dense, outdated experience into one that is user-friendly, modern, and trustworthy. The new payment page and its flow present a major upgrade in clarity, usability, and aesthetics. Users can now navigate payment with more ease, apply vouchers confidently, and complete purchases in a visually calming environment. These improvements support both functional efficiency and emotional reassurance crucial in a transactional setting.
1. Imagery and Style
Before:
- Yellow box dominates the central portion with a mix of fonts and spacing.
- A mix of shadows, boxes, and colored text blocks gave the interface a somewhat cluttered appearance.
- Icons and QR code were squeezed within a tight container.
After:
- Cleaner design with a light blue gradient background that feels more breathable and modern.
- Yellow is used only for key information sections (not the entire block), which reduces visual fatigue.
- The QR code is now centered and isolated for better visibility.
Reflection:
The updated design uses white space more effectively and applies color purposefully to support clarity and user focus.
2. Text
Before:
- Text was compact, with many different font sizes and bold weights.
- Some details like "Train Order Summary" and "Dear JR user" felt verbose and unnecessary.
After:
- Text is more concise and uniformly formatted.
- Labels like "Depart Time" and "Train Class" are clearly aligned, making scanning easier.
- Redundant text (e.g., long instructions) has been removed.
Reflection:
This shift improves scanability and ensures users quickly find relevant ticket information, especially when boarding.
3. Call to Action (CTA)
Before:
- “Share Ticket” button was available at the bottom, possibly encouraging unnecessary ticket sharing.
- Button competed for attention with the QR code.
After:
- Single, clear “Back To Home” button with rounded styling.
- No unnecessary secondary CTAs distracting from the QR code and travel info.
Reflection:
The redesigned CTA supports user flow by simplifying options after purchase—either use the ticket or return to the homepage.
4. Visual Hierarchy
Before:
- Everything was tightly packed into one container, which made information harder to differentiate.
- Ticket details and QR code were placed too close together, making it feel dense.
After:
- QR code is now prominently featured with breathing room.
- Ticket information is listed below in neat yellow-highlighted rows with consistent alignment and spacing.
- Labels and values are separated visually to aid quick comprehension.
Reflection:
Improved hierarchy ensures essential elements (e.g., QR code, station, time) are immediately visible and well organized.
5. Logo
Before:
-
KTM logo appeared twice (once in header, once in ticket block), making it redundant.
After:
- KTM logo appears once, integrated naturally at the top with platform info.
- This keeps branding present but subtle.
Reflection:
Streamlining logo placement reduces visual clutter while maintaining brand presence.
6. Why These Changes Were Made
- Enhance QR Code Scanability: Isolated and enlarged QR code helps ensure smoother boarding experience.
- Reduce Cognitive Load: Simplified text and consistent formatting make details easier to read and recall.
- Modernize Look & Feel: Gradient backgrounds and cleaner button styling align with current UI standards.
- Improve Functionality: The “Back to Home” button provides a clear next step post-purchase, reducing decision friction.
- Support Mobile Usability: Touch-friendly elements and better vertical spacing enhance the mobile user experience.
Conclusion
The new ticket summary page is not only visually cleaner but also significantly more practical. By focusing on clarity, prioritizing essential information, and improving layout structure, it offers a more confident and professional user experience—especially important for users during time-sensitive tasks like boarding. The new ticket summary page brings a cleaner, clearer, and more functional layout that improves user readability, QR scanning efficiency, and post-purchase reassurance.
1. Imagery and Style
Before:
- Harsh gradient banner (blue to green) at the top of the screen.
- Ticket cards used blue tones with minimal styling.
- Icons were small and not visually emphasized.
After:
- Gradient banner replaced with a clean, modern blue header.
- Ticket cards adopt a softer cream/yellow background with clear dividers.
- Ticket visuals now resemble real ticket stubs, enhancing familiarity and emotional connection.
- Icons (e.g., breakfast, WiFi) are clearer and add visual interest.
Reflection:
The new style is more visually appealing, modern, and emotionally engaging, helping users quickly identify ticket details at a glance.
2. Text
Before:
- Labels like "Today" and "Tomorrow" were used to separate ticket dates.
- Ticket content was mostly text-based and formatted with minimal hierarchy.
After:
- Ticket details now follow a structured layout with grouped content (departure, arrival, duration, extras).
- Descriptive labels (e.g., "One-way," "2 Adults") are visually highlighted with pill-shaped tags.
Reflection:
Text is now more organized and readable. Using badges and labels improves scanability and user comprehension.
3. Call to Action (CTA)
Before:
- Each ticket had a “View Details” button in yellow, repeated for each ticket.
- Ticket History was accessible via a small yellow button beside the header.
After:
- View Details buttons are removed from the main view, likely to streamline interaction.
- Tabs labeled “Upcoming” and “Past” let users filter tickets more intuitively.
- Navigation is now handled at the bottom with a tab bar, including “Home,” “Ticket,” “Rewards,” “E-wallet,” and “Profile.”
Reflection:
The new interaction approach simplifies decision-making and reduces repetitive actions, while still giving users control through filtering.
4. Visual Hierarchy
Before:
- All tickets were stacked and visually similar, making it hard to differentiate them at a glance.
- There was little emphasis on critical details like departure time or station.
After:
- Visual hierarchy is improved through use of bolded titles (e.g., class, price), large departure times, and grouped content.
- Information is chunked logically: route, date/time, class, price, and perks.
Reflection:
This reorganization makes the page far more user-friendly, helping users compare tickets and remember key details faster.
5. Logo
Before:
-
KTM logo prominently placed at the top, competing with the page title.
After:
-
KTM logo subtly placed within the top header alongside the "My Ticket" title, minimizing distraction.
Reflection:
This allows branding to remain visible without interfering with content-focused tasks.
6. Why These Changes Were Made
- Improve Ticket Management: Filtering tickets into “Upcoming” and “Past” simplifies tracking, especially for frequent travelers.
- Modernize Visual Design: Replacing gradients with soft backgrounds, badges, and rounded corners aligns with current mobile app standards.
- Enhance Readability: Grouping and labeling information (e.g., trip duration, class type) improves quick understanding and reduces error.
- Reduce Cognitive Load: Removing repetitive buttons and replacing them with intuitive navigation creates a smoother, more enjoyable user flow.
- Strengthen User Engagement: Ticket cards with visual cues (like icons and stubs) make the experience more engaging and human-centered.
Conclusion
The redesigned check ticket page is a significant step forward in usability and visual communication. It reduces clutter, enhances clarity, and brings a contemporary, user-friendly look and feel. These thoughtful enhancements elevate the entire post-purchase experience, ensuring travelers stay informed and confident. The redesigned check ticket page streamlines how users view and organize their tickets. It improves readability, reduces clutter, and emphasizes functionality through cleaner visual design and clearer navigation.
1. Imagery and Style
Before:
- Flat white background with a simple card layout.
- Minimal use of illustrations or design accents.
- Harsh gradient banner with strong yellow-blue tone at the top.
After:
- Modern light-blue gradient background introduces a softer, more inviting tone.
- Vouchers retain the ticket stub design but now feature cleaner spacing and icon enhancements.
- The reward illustration on the success page remains but is better integrated with spacing and layout.
Reflection:
The updated visuals are more consistent, modern, and visually balanced, enhancing the sense of reward and clarity.
2. Text
Before:
- Vouchers displayed minimal supporting info and had redundant text (e.g., "Only Can Use Once" repeated across all vouchers).
- Code and expiry were visible but lacked hierarchy.
After:
- Vouchers now show clear, consistent info: title, code, eligibility, expiry, and point requirement (if applicable).
- “Used” vs. “Redeem” tabs offer clearer categorization of active/inactive vouchers.
Reflection:
The improved text formatting promotes readability and helps users quickly understand voucher terms at a glance.
3. Call to Action (CTA)
Before:
- A single “View Voucher” button after redemption.
- No ability to switch between voucher states (e.g., active vs. used).
After:
- Redemption success screen includes a cleaner, clearer “Back” button that fits modern UI practices.
- Tab structure (“Redeem” / “Used”) makes navigation easier and more intuitive.
Reflection:
The updated CTAs guide users more effectively and reduce confusion, improving post-redemption navigation.
4. Visual Hierarchy
Before:
- All vouchers looked similar, and there was no method to sort or distinguish used from unused.
- Important elements like voucher code and expiry were visually buried.
After:
- Tabbed interface clearly separates active and used vouchers.
- Points required for redemption are highlighted (e.g., "100 points", "300 points"), helping users prioritize.
Reflection:
Better structure and hierarchy streamline the user journey and help users focus on redeemable offers.
5. Logo
Before:
-
KTM logo was displayed prominently in a large header, drawing unnecessary attention.
After:
-
KTM branding is minimal and seamlessly integrated within the screen layout, allowing content to take priority.
Reflection:
Reduced logo prominence makes the interface feel more task-focused and less promotional.
6. Why These Changes Were Made
- Enhance Usability: Tabs for “Redeem” and “Used” simplify navigation and improve content organization.
- Improve Engagement: Cleaner cards with visual appeal (icons, structure) make vouchers more attractive and easier to evaluate.
- Support Modern Design: Use of gradients, spacing, and simplified CTAs modernizes the interface.
- Increase Redemption Clarity: Showing point cost and eligibility up front helps users make informed decisions.
- Strengthen User Flow: The redesigned success screen improves post-redemption clarity with a clear next step (“Back”).
Conclusion
The redesigned voucher page demonstrates a thoughtful balance between aesthetic appeal and user functionality. It successfully transitions from a static, text-heavy layout to a clean, categorized, and motivating interface. These enhancements increase redemption engagement and improve the overall rewards experience. The new voucher page offers a more organized, engaging, and user-friendly experience by enhancing visual clarity, navigational ease, and reward transparency. These changes reflect a clear focus on user satisfaction and efficient access to offers.
1. Imagery and Style
Before:
- Plain layout with limited use of visuals.
- Overuse of yellow and white with harsh gradient banner at the top.
- No images to visually represent rewards.
After:
- Modernized look with a clean blue gradient background.
- Use of icons (e.g., trophy, gift box, magnifying glass) to represent actions.
- Visual reward cards featuring real train imagery to engage users emotionally.
Reflection:
The new style increases visual appeal and makes rewards feel more tangible and desirable. The colorful icons and imagery also help guide user action intuitively.
2. Text
Before:
- Basic text presentation with little variation in size, weight, or emphasis.
- Information like “Refer & Earn” and “Offers” was informative but presented like a static notice board.
After:
- Points are shown as progress (e.g., “200 / 1000”) for motivational impact.
- Descriptive text is reduced, with key info summarized in visuals or icons.
- Rewards include short, action-focused descriptions (e.g., “Discover today’s top deals”).
Reflection:
The revised text approach focuses on clarity, motivation, and call-to-action effectiveness, while minimizing overload.
3. Call to Action (CTA)
Before:
- CTAs like “More Detail” were small, generic, and not visually prominent.
- Actions were not clearly separated from static content.
After:
- Interactive buttons like “Browse Rewards,” “Check Voucher,” and “History” are visually distinct and icon-enhanced.
- Rewards are now clickable tiles, encouraging browsing behavior.
Reflection:
The improved CTA structure encourages user engagement by making action points obvious and inviting.
4. Visual Hierarchy
Before:
- All sections were stacked with similar weights and colors, creating a visually monotonous layout.
- The most important data (reward points) didn't stand out clearly.
After:
- Your Points section is now prioritized at the top with a visual progress bar.
- Content is grouped logically: Actions → Deals → Popular Rewards.
- Bold headers and spacing make each section easy to scan.
Reflection:
Clear visual hierarchy leads to better focus, allowing users to quickly understand where they stand and what they can do next.
5. Logo
Before:
-
KTM logo shown at the top in a large gradient header, dominating the screen.
After:
-
KTM logo minimized and integrated in the header space, giving priority to reward-related content.
Reflection:
Reducing brand emphasis supports a task-focused layout that enhances user experience without compromising identity.
6. Why These Changes Were Made
- Increase Engagement: Interactive visuals and rewards tiles encourage exploration and redemption.
- Improve Motivation: Progress indicators (e.g., points out of 1000) gamify the experience and drive user action.
- Enhance Usability: Categorized actions and clean layout reduce cognitive load and improve task clarity.
- Modernize Look & Feel: Iconography, image use, and structured cards bring the design in line with modern mobile app trends.
- Support Accessibility: Better spacing, icons, and visual contrast aid comprehension and navigation across devices.
Conclusion
The redesigned rewards page is a clear upgrade in functionality and user appeal. It moves from a static, admin-like interface to a dynamic and motivating rewards ecosystem. The new layout fosters user engagement, encourages reward redemption, and creates a more enjoyable and rewarding experience overall. The redesigned rewards page shifts from a static and text-heavy layout to a more dynamic, engaging, and visually-driven interface. It enhances interactivity and makes reward management more intuitive and motivating.
Before:
- Harsh yellow-blue gradient header with limited styling.
- Input fields dominated the layout, making the page feel like a form submission screen.
- Minimal use of icons or visual cues.
After:
- Modern gradient blue background provides a cleaner and more polished aesthetic.
- Use of a large wallet balance display at the top immediately gives users the info they care about.
- Card visuals are sleeker and more prominent, with a neat "+" icon for adding new cards.
Reflection:
The new style feels more aligned with contemporary fintech apps (like Grab or Boost), making the interface more intuitive and appealing.
Before:
- Label-heavy: "Card Holder," "Card Number," and "Bank Name" presented in a form-like layout.
- Static and minimal financial information shown.
After:
- Clear wallet balance displayed at the top (e.g., RM 231.00) with supportive link (“View balance details”).
- Field labels have been replaced by visuals (e.g., card and + icon), making the design more minimalist.
Reflection:
Text is now purposeful and limited to only what users need, increasing clarity and reducing visual noise.
Before:
- “Add New Card” appeared as a small label with no strong visual emphasis.
- The CTA relied on form completion, which felt cumbersome.
After:
- Prominent “+” add card button appears as a large, tappable box.
- An “Add Money” button is clearly placed near the balance display for top-up actions.
Reflection:
CTAs are now easy to identify and access, improving task completion speed and mobile usability.
Before:
- No clear visual flow: card info, form fields, and logo competed for attention.
- Important content (e.g., card info) was buried beneath form fields.
After:
- Wallet balance sits at the top as the main visual anchor.
- Card information is centralized and emphasized with spacing and clean styling.
- Actionable elements (add card, add money) are visually distinct and logically placed.
Reflection:
Improved hierarchy ensures users find key financial data and actions immediately, improving satisfaction and reducing friction.
Before:
-
KTM logo was large and placed in a dominant banner, taking up valuable screen real estate.
After:
-
KTM logo is removed from the top banner to make space for functional content.
Reflection:
Removing the logo from the header reinforces a clean, task-oriented layout that prioritizes utility over branding.
6. Why These Changes Were Made
- Improve User Experience: Shows what users care about most (balance, card info) without overwhelming them with forms.
- Modernize Aesthetics: Gradient background, minimalist design, and icon-driven interaction reflect current digital wallet design trends.
- Streamline Navigation: Action buttons are more intuitive and accessible for quick task execution.
- Support Mobile Behavior: Large CTAs and cleaner layout enhance touch interaction and on-the-go access.
- Reduce Cognitive Load: Less text, clearer structure, and removal of redundant input fields improve focus.
The wallet page redesign transforms a static, admin-style interface into a dynamic, intuitive, and engaging digital finance experience. With a focus on clarity, modern design, and user empowerment, the new version ensures users can manage their finances quickly and confidently. The redesign of the wallet page transitions from a static, form-based interface to a streamlined, user-centric digital wallet display. The update significantly improves clarity, function, and visual appeal, while aligning with modern fintech app standards.
Observation
The original app design, while functionally complete, lacked cohesion, modern appeal, and user-centric structure. Across multiple screens onboarding, login, ticket booking, wallet, rewards, and voucher management the visual style was inconsistent and overly reliant on flat layouts, strong gradient headers, and static text blocks. CTAs were either repetitive or buried, while elements like logos took up unnecessary space and distracted from key actions. Most of the user interface did not align with current mobile UI design standards.
The redesign shows a major transformation:
- Gradient tones softened, replaced by calming blue themes.
- Layouts became more intuitive with clear hierarchy.
- Buttons, icons, and progress indicators are now interactive and mobile-friendly.
- Branding was kept minimal to emphasize functionality.
Finding
The redesign emphasized several important principles that greatly improved the overall user experience. First, consistency across screens played a critical role in enhancing usability. By applying a uniform visual language and layout structure throughout the app, user confusion was significantly reduced, resulting in a more intuitive and seamless navigation experience. Additionally, the introduction of clearer visual hierarchy helped address the issue of information overload. Instead of overwhelming users with dense content, the new design highlighted key information such as wallet balance, ticket details, and action buttons—making it easily accessible at a glance.
Personalization and timely feedback also contributed to higher user engagement. Elements like personalized greetings, visible reward progress, and illustrated confirmation screens added warmth and made the app feel more human and interactive. Finally, the adoption of a clean, modern user interface helped foster trust. The refined layout, distinctive call-to-action buttons, and effective use of icons created a sense of professionalism, which is particularly essential for sensitive processes such as payments and ticket bookings. Together, these improvements not only enhanced the app’s aesthetic but also significantly elevated the user’s confidence and satisfaction.
Experience
Redesigning the KTM app offered an insightful journey into transforming a utilitarian interface into a user-centered digital experience. The biggest takeaway was realizing how small changes such as reorganizing content, rewording labels, or updating visuals can have a significant impact on user perception and behavior. This redesign process reinforced the importance of balancing aesthetics with usability, and the power of design in building user confidence.
Ultimately, the new design is not only more visually appealing but also more intuitive, accessible, and emotionally engaging successfully modernizing the KTM digital experience while remaining functional and familiar to existing users.
Comments
Post a Comment