During the session, Mr. Razif also introduced us to FlutterFlow, a no-code app development tool, and UXLab Assistant in ChatGPT to assist with user experience design tasks.
Week 2
Public holiday.
Week 3
Information Architecture (IA) focuses on organizing content for optimal user experience. Visual hierarchy uses visual elements like size, color, and spacing to guide users' attention and establish importance. Spacing and alignment are crucial for grouping related items and creating a structured layout, facilitating easy scanning and understanding.
Class Activity - Boarding Pass Redesign
Objective: The objective of this class activity is to analyze, redesign, and evaluate the boarding pass layout to improve user experience, visual hierarchy, and branding consistency. The redesign process aims to make essential information more accessible and visually appealing while considering the needs of the target audience. I worked with two other classmates.
Fig. 1.1 Target Audience and the Original Design of Boarding Pass.
πTarget Audience Analysis: Identify the primary and secondary audiences for the boarding pass, focusing on frequent flyers, business travelers, and international tourists. Evaluate the original design of the AirAsia boarding pass to determine areas of improvement in terms of clarity, layout structure, and visual hierarchy.
πRedesign Process:
Redesign 1: Focused on a more structured layout with key information segmented by sections (e.g., Flight, Gate, Seat, Date, Sequence No.).
Redesign 2: Enhanced with a more balanced visual hierarchy, clearer segmentation, and stronger brand colors (red and white). It also integrates the sequence number as a clearly defined element next to the booking number.
πComparison Analysis:
Original vs. Redesign 1: Emphasis on structuring information in separate blocks to enhance readability. Gate information remains unclear in this version.
Redesign 1 vs. Redesign 2: Further refinement of the information structure, better alignment, and the addition of a distinct section for the sequence number for quick scanning and boarding priority identification.
π Outcome and Reflection: Discuss how the redesign process impacted the overall user experience, focusing on clarity, layout, and information prioritization. Gather peer feedback to assess the effectiveness of each redesign version and suggest further improvements.
Week 4
Class Activity - A Booking App User Flowchart
Objective: The objective of this activity was to create a comprehensive user flow for the Booking App, including all essential booking processes from login to payment confirmation. The focus was on ensuring a logical flow, intuitive wireframes, and clear interaction pathways for users.
My group chose to do a Starlux Booking App User Flowchart. We created a user flow in Figma, covering major actions such as logging in, searching flights, booking, checking flight status, and payment processing. After presenting in class, Mr. Razif suggested refining the flow to better segment each process, ensuring a smoother navigation experience.
π Outcome and Reflection: The refined flowchart presents a more organized and visually structured user journey, enhancing user comprehension and app usability.
Fig. 1.4 Starlux Booking App Flowchart (Figma).
2. INSTRUCTIONS ⊹ ࣪ ˖₊˚⋆˙⟡
Fig. 2.1 Module Information Booklet - Application Design 2.
We must perform a self-evaluation and reflection based on our Mobile Application Design I final project. The goal is to identify issues, propose improvements to the app’s aesthetic and user flow, and document the refining process. are required to submit the documentation via Google Docs for feedback purposes.
Write a self-reflection blog post comparing the old and new app designs.
Refer to example blogs from past students for guidance.
Previous High-Fi Prototype of Guardian App (Application Design 1)
Working on the Guardian Mobile App redesign helped me realize that good design isn’t just about visuals — it’s about creating a smooth, user-friendly experience. At first, I focused mainly on the look of the app, but through user research and prototyping, I learned to prioritize usability.
I noticed key issues like inconsistent navigation and problems with the shopping cart, which made me rethink how the user journey should flow. The project taught me to pay attention to small details, like feedback and microinteractions, that make a big difference.
Overall, this experience strengthened my UX/UI skills, and it made me more confident in designing with users' needs in mind. I’m excited to apply everything I learned as I move forward into App Design 2.
Week 2
Fig. 3.2UXLab Assistant.
UXLab Assistant Review of My Entire Guardian App
I asked the UXLab Assistant to obtain analysis feedback by prompting a detailed evaluation of the pros and cons of my entire app’s features.
The UXLab Assistant highlighted that I did a commendable job in maintaining visual consistency, clarity, and delivering a friendly user interface throughout the app. However, the review also pointed out opportunities for enhancement — such as making the experience more dynamic with transitions and feedback, refining information hierarchy and spacing, and adding emotional design elements like celebratory animations and progress indicators to elevate the overall user experience.
Fig. 3.2UXLab Assistant Review on Guardian App Design Document.
After consulting with Mr. Razif, I decided to narrow the focus to the MVP flow of the Guardian App. This strategic shift allowed me to concentrate on essential user interactions, specifically the landing pages, sign-up and sign-in pages, home page, product detail page, and checkout/payment pages.
Throughout the process, I reviewed the existing flow and identified key pain points such as cluttered layouts, inconsistent button hierarchy, and lack of feedback during payment processing. By refining these core screens, I aimed to provide a more intuitive and streamlined user journey from landing to purchase completion.
Mr. Razif also encouraged me to consider the opinions shared by the UXLab Assistant. While some feedback aligned with my objectives, such as improving the checkout flow and enhancing the product detail page, I chose to disagree with certain suggestions that suggested additional features outside the MVP scope. Staying focused on the main flow helped maintain clarity and avoid feature creep.
Week 3
Feedback from UXLab Assistant and My Arguments (MVP Focus)
1. Loading, Landing & Login Pages
UXLab Assistant Review Summary: Clean intro and onboarding. Suggested adding animation, skip option, and clearer password toggle.
My Argument: ✅ Agree — I redesigned the visual layout to strengthen brand identity by using more orange. While I have already added animations, I improved the login screen’s spacing and hierarchy for better usability.
2. Sign Up Pages
UXLab Assistant Review Summary: Clear process but dense fields. Suggested splitting form into 2 steps and using auto-format fields.
My Argument: ❌ Disagree — I did not make any changes to the Sign Up Pages. I decided to keep the layout and flow the same as the previous design due to time focus on core checkout features. While I acknowledge the feedback, the current form remains a single-step design with all fields displayed at once.
3. Home, Product Display & Details Pages
UXLab Assistant Review Summary: Engaging virtual try-on. Home page feels banner-heavy. Suggested highlighting category shortcuts and adding a "Back to Product" button.
My Argument: π‘ Partially Agree — I made several important visual adjustments to enhance layout clarity. The advertisement section was redesigned to include more breathing space, ensuring users don’t misinterpret the ad as part of the product categories. I also fixed the horizontal scroll buttons so they no longer overlay the ad banner, creating better visual separation. In the Product Detail Page, I increased the price size and adjusted the text hierarchy, grouping related content (price, rating, stock) for easier scanning. As for the Virtual Try-On, I chose not to add a "Back to Product" button because an icon was already placed at the top-right corner for the same purpose.
4. Cart and Checkout Pages
UXLab Assistant Review Summary: Clear steps. Payment screen is too text-heavy and lacks promotion suggestions.
My Argument: π‘ Partially Agree — I intentionally chose not to add upsell or promotional suggestions in the checkout flow because I believe those elements should remain within the Home Page for better user context and to avoid mixing information during payment. Instead, I focused on improving visual clarity by enlarging the total price text, making it more noticeable and accessible without adding unnecessary distractions. This preserves a clean, focused checkout experience.
5. Checkout Status & Payment Status Pages
UXLab Assistant Review Summary: Good visual feedback. Processing steps feel static. Suggested adding loaders and estimated wait time.
My Argument: π‘ Partially Agree — I retained the clean visual style from the old design and only enhanced the total price size to make it more noticeable. I already implemented animation but I did not want to add the estimated time during processing so I partially agree with the feedback.
Week 4
Old Design and New Design to Show The Changes or Improvements
1. Loading, Landing & Login Pages (Old VS New Design)
πThe Changes or Improvements: In the new design, the visual identity of the Guardian brand is strengthened by applying the signature orange background consistently across all onboarding screens, unlike the old design which used mostly white backgrounds. The login screen was also refined with better padding, clearer spacing, and improved field visibility, enhancing usability.
2. Sign Up Pages (Old Design)
πThe Changes or Improvements: No changes were made to the sign-up pages in the redesign. The layout remains the same, presenting all input fields in a single-step format. While the form is still clean and functional, improvements such as breaking it into multiple steps and applying auto-formatting for phone numbers or dates could be considered in future iterations to enhance user comfort and reduce cognitive load.
3. Home, Product Display & Details Pages (Old VS New Design)
πThe Changes or Improvements: Several meaningful refinements were introduced in the new design. On the Home Page, spacing was added between the advertisement banner and the category navigation buttons to avoid users mistaking the two as a single unit. The horizontal scroll was repositioned so it no longer overlaps the advertisement, creating clearer layout structure. In the Product Detail Page, price text was enlarged and grouped with related content such as ratings and stock availability, reinforcing visual hierarchy and helping users scan information more effectively. As for the Virtual Try-On feature, instead of adding a separate "Back to Product" button as suggested, a navigation icon was maintained at the top-right corner, balancing functionality with a clean interface.
4. Cart and Checkout Pages (Old VS New Design)
πThe Changes or Improvements: The redesign of the checkout section focused on improving clarity while maintaining a clean and straightforward flow. The total price text was enlarged to enhance visibility and help users feel more confident during final payment steps. However, I intentionally did not incorporate promotional suggestions or upselling elements in the checkout process. Instead, all discount offers and recommendations are consolidated in the Home Page to avoid cognitive overload during critical decision-making moments. This deliberate design decision keeps the checkout experience focused, distraction-free, and user-centric.
5. Checkout Status & Payment Status Pages (Old VS New Design)
πThe Changes or Improvements: The overall structure and visual flow of these pages remained mostly the same in the redesign. However, a small yet impactful change was made by enlarging the total payment amount, making it more prominent in the invoice summary. While feedback elements like loading animations or estimated wait times were not added, this was a conscious choice to preserve the simplicity and straightforwardness of the status screens. These pages maintain a friendly tone through consistent iconography and layout, though future versions may explore additional feedback mechanisms to enhance interactivity.
*** While watching the video, please select 1080p (HD) for clear quality.
Guardian App Redesign of MVP Focus Overview in Figma
Fig. 3.5 Guardian App High-fi Prototype Redesign.
4. FEEDBACK ⊹ ࣪ ˖₊˚⋆˙⟡
Week
1
Mr. Razif mentioned that we only need to focus on coding one MVP (Minimum Viable Product), which means only certain essential pages need to be developed. Therefore, I can simplify some pages accordingly.
Week
2
After consulting with Mr. Razif, he advised me to focus solely on redesigning the MVP (Minimum Viable Product) of the Guardian App. Based on his guidance, I proceeded to review and refine the core user flow. My redesign focused on the key pages, including the landing screens, sign-up and sign-in pages, home page, product detail page, as well as the checkout and payment process.
Week 3
"Mr. Razif advised that on the Home Page, the advertisement banner and category buttons should be rearranged to avoid users mistaking them as related content. He also emphasized the need to enlarge the product price text across relevant pages—especially the total price in the checkout section—for better visibility. However, he noted that some of the existing designs were already working well and didn’t require changes.
Week 4
Mr. Razif has reviewed my work and approved it. I may now proceed with recording the presentation video and submitting it on MyTIMES.
5.
REFLECTIONS
/α - ˕ •γ
Reflecting on Task 1, I found the process of redesigning the MVP flow of the Guardian Mobile App both insightful and rewarding. After receiving guidance from Mr. Razif, I narrowed my focus to the essential pages that define the core user experience: the landing pages, sign-up/sign-in screens, home page, product detail, and checkout/payment process.
Throughout this task, I evaluated both visual and functional weaknesses of the original app, using feedback from the UXLab Assistant and Mr. Razif as a benchmark. While I agreed with most suggestions—such as improving visual hierarchy, enlarging price elements, and clarifying layout structure—I also made conscious decisions to reject or modify others to maintain a clean and focused design. For example, I chose not to include promotional upsells in the checkout flow, believing that such content belongs on the home page for a more context-aware experience.
Technically, I strengthened my skills in layout restructuring, UI consistency, and spacing logic. Visually, I improved the branding tone and hierarchy by using stronger color identity and clearer grouping of information. I also learned that even small tweaks—like enlarging total prices or adjusting scroll alignment—can have a big impact on usability.
Moving forward, I recognize the importance of user testing in validating my redesign choices. If given more time, I would explore adding motion feedback and improving microinteractions, especially in checkout and status pages. Overall, this task improved my ability to think critically about user flow, and I’m more confident in making design decisions that are both visually effective and user-centered.
⭐ 6/2/2024 - 19/3/2024 (Week 1 - Week 7) π Yan Zhi Xuan | 0369425 π Design Principles | Bachelor of Design (Hons) in Creative Media | Taylor's University π Final Compilation TABLE OF CONTENTS 1. Links to Each Task 2. Submissions / Final Design 3. Final Reflection 1. LINKS TO EACH TASK Design Principles GCD60804 - Task 1: Exploration Design Principles GCD60804 - Task 2: Visual Analysis Design Principles GCD60804 - Task 3: Design Return to the Table of Contents 2. SUBMISSIONS / FINAL DESIGN Fig. 2.1 Final Design. Yan Zhi Xuan_Preserve the Blue_Task 3 Return to the Table of Contents 3. FINAL REFLECTION Respond to the questions below: • What have I learnt in this module? • What did I enjoy the most? • What did I not enjoy the most? • What have I learnt about myself through this module? • What has changed and what has not in my learning journey? • What could be improved in this module...
.jpg)
%20(1).jpg)
Comments
Post a Comment