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

on

21st April 2025 - 15th May 2025 (Week 1 - Week 4)

Sin Jun Ming 0364638

Application Design 2 / Bachelor of Design in Creative Media / Taylor's University

Task 1 - App Design 1 Self-Evaluation and Reflection

LECTURES

Week 1 - Introduction
In the first week, Mr. Razif walked us through the Module Information Booklet and provided an overview of the semester’s tasks. He also introduced us to the UXLab Assistant based on ChatGPT, which is a tool we can utilize for Task 1 to help with design analysis and enhancement.

Week 2
Public holiday.

Week 3 - Airplane Boarding Pass Exercise
In this week, Mr. Razif assigned a group activity where we were tasked with redesigning a sample airplane boarding pass to enhance our understanding of visual hierarchy and design concepts. Each group presented their concept to the class, and Mr. Razif provided constructive feedback, focusing on layout clarity, information hierarchy, and overall usability.


Week 4 - Wireflow 
In Week 4, Mr. Razif introduced us to the concept of wireflow, which combines wireframing with user flow to visualize how users navigate through an app. For our task, we were required to design a wireflow based on a chosen app and later present our work to the class. Our group chose a cinema app for this task and designed a wireflow that maps out the user journey for booking movie tickets.


Instructions

Task 1 - App Design 1 Self-Evaluation and Reflection

Requirements:

1. Self-Reflection & Evaluation
  • 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
2. 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.

Previous Semester Work
App Design 1 - High Fidelity Prototype Demonstrating Video: https://youtu.be/9v0OwP43di0
Reflection:
In my Semester 3, I completed the module "Application Design 1" and I redesigned an app "Encode", a coding education platform. This project allowed me to explore the full UX/UI process, from identifying pain points in an existing app to rethinking its interface and experience with a design approach. Throughout the redesign process, I learned the importance of maintaining a balance between aesthetics and usability.

While the redesign showed progress, there is still room to grow in terms of UI/UX, particularly when it comes to making the interface more intuitive, accessible, and user focused. In this task, Mr. Razif introduced his UXLab Assistant based on ChatGPT to guide us through AI review and feedback in refining our prototype.

1. Log-in Page
I plan to enhance the visual clarity and user engagement on the log-in page by introducing an accent color to the primary action buttons. Currently, the “Sign up” and “Sign in” buttons appear in plain white, which doesn’t strongly differentiate them or guide the user’s attention. 

Fig 2.1 Addition of an accent color - cyan

By applying a vibrant accent color, cyan, I aim to create a stronger visual hierarchy and make the call-to-action buttons more noticeable and appealing. This color will contrast well against the dark background, improving visibility and reinforcing touchability. 

Fig 2.2 Log-in page before (left) vs. after (right)

  • Feedback from AI:

✅ What Works Well

1. Strong Visual Focus with Accent Buttons

  • The use of vibrant turquoise/teal buttons (Sign up / Sign in) stands out clearly against the dark background.

  • This creates an effective visual hierarchy, guiding users toward the primary actions without confusion.

2. Consistent Branding

  • The accent color matches your brand icon and appears consistently across other screens (course, challenge, exercise pages).

  • This creates a cohesive, professional feel across the app.

3. Clean, Minimal Layout

  • The layout is simple and focused: logo → tagline → CTAs → terms.

  • There’s no visual clutter, which supports a smooth onboarding experience — especially important for first-time users.

4. Accessible Typography

  • The contrast between white text and dark background is excellent.

  • Font sizes are readable and well spaced.

🛠️ Suggestions for Improvement

1. Button Hierarchy: Both the "Sign In" and "Sign Up" buttons currently appear equally weighted. Consider making the "Sign In" button the primary action by using a solid style, while styling the "Sign Up" button as outlined or slightly muted to create a clearer visual hierarchy.

2. Call to Action Label: There is no supporting text to clarify what happens after clicking "Sign In." Consider adding a reassuring line below the button, such as “Access your account instantly,” to give users more context.

3. Terms & Conditions Placement: The terms and conditions text is quite small and feels disconnected from the login flow. It may be helpful to move it slightly closer to the buttons or add additional spacing below the CTAs so that it feels more integrated into the overall layout.


  • Improvements
To improve clarity and guide user decision-making more effectively on the login screen, I updated the button hierarchy by setting the Sign In button as the primary action, using the app’s accent color, and styling the Sign Up button in white as a secondary option. This decision was based on the assumption that most returning users would be signing in rather than creating a new account. Other feedback was not considered as I aim to create clean and minimal layout.

Fig 2.3 Final login page before (left) vs. after (right)

2. Homepage
In designing the homepage, I aimed to create a well-structured and visually coherent layout that guides users intuitively through key sections such as the personalized greeting, recommended courses, skill selection, daily challenge, and community discussions. I used a consistent dark theme with card-based elements to support clarity and visual accessibility, ensuring that each section is clearly defined and easy to scan. 

Fig 2.4 Previous homepage design
  • Feedback by AI:

✅ Strengths

1. Clear Structure and Logical Flow

  • The homepage is well-organized: starting from Skill Selection → Challenge of the Day → Hottest Discussion → Bottom Navigation.

  • The user can easily understand what the app offers just by scrolling — supports good UX scanning behavior.

2. Consistent Visual Layout

  • All sections use cards, padding, and spacing consistently.

  • Cards for courses, challenges, and discussions follow similar shapes and margins, which creates a harmonious experience (based on Gestalt Principle of Similarity).

3. Strong Personalization Element

  • Greeting the user ("Welcome, Jun Ming") gives a personal and welcoming tone, which is important for a learning app to feel friendly and supportive.

4. Clear Section Separation

  • Each major section (Skills, Challenge, Community) is separated visually through:

    • Section headers

    • Margins and spacing

    • Slight background differences

  • This makes the homepage easy to navigate visually.

5. Typography and Color Use

  • The dark theme is maintained well across the homepage.

  • Text has enough contrast with the background for good readability.

  • Section titles are clearly bold and larger than normal text, creating a good hierarchy without needing icons or extra decoration.

🔍 Key Areas for Improvement 

1. Skill Card Differentiation: Add a thin border or slightly varied background shades to each skill card to improve visual separation and make them feel more interactive.

2. Challenge Section Highlight: Make the "Challenge of the Day" section stand out more by enlarging the header or applying a secondary accent color like soft blue.

3. Community Post Hierarchy: Improve community post readability by increasing the title's size and weight, while toning down the author and timestamp details.

4. Footer Navigation Highlight: Clarify footer navigation by visually highlighting the active icon using a brighter color, filled style, or subtle background indicator.

  • Improvements
    • Skill Card Differentiation: I plan to improve the skill card design by adding a thin static border around each card. This small change will help visually separate the cards and make them feel more interactive and selectable. It should also enhance clarity and improve the overall user experience by reinforcing the idea that each card is a distinct, clickable element.
Fig 2.5 Card visual redesign
    • Footer Navigation Highlight: I want to enhance the footer navigation by making the currently active page more visually distinct. To do this, I plan to make the active icon and text slightly brighter. This small adjustment will help users easily identify which section they are on, improving clarity and navigation flow throughout the app.
Fig 2.6 Navigation bar before (top) vs. after (bottom)
    • Search Bar:  To enhance the simplicity of the homepage design, I decided to remove the full search bar and keep only a search button instead. This change reduces visual clutter and maintains a cleaner layout, while still giving users quick access to the search function when needed.
Fig 2.7 Search bar changed to search button
    • Colored Logo:  I updated the skill logos—such as Python, Java, and HTML—from white to their recognizable brand colors. This change was made to improve visual distinction between each skill and help users more quickly associate their progress with familiar technologies. While the original white icons maintained a minimal look, they lacked individuality and made the cards feel visually uniform. This not only adds personality to the design but also helps users quickly recognize and associate each skill with its respective color, improving overall usability and visual hierarchy.
Fig 2.8 Homepage design before (left) vs. after (right)

3. Challenge Page
  • Feedback by AI:

✅ What Works Well

1. Simple and Clean Layout

  • The screen follows a vertical card layout, which is familiar and easy to scroll through on mobile.

  • Each card is clearly spaced, reducing clutter and making it easy to distinguish between different challenges.

2. Consistent Card Design

  • All challenge cards use the same structure: icon + title. This consistency makes scanning effortless.

  • Padding and alignment are visually balanced, giving a neat and polished feel.

3. Dark Theme with Good Contrast

  • The background color works well with the lighter cards and white icons.

  • The white-on-blue icon + text combination maintains accessibility and readability.

🔧 Areas for Improvement

1. Lack of Visual Hierarchy

  • All cards have equal visual weight — none stand out.

  • 🔁 Suggestion: Introduce accent color borders, shadows, or size variation for “featured” or new challenges to guide attention.

2. Monotone Icon Design

  • All icons are white, and quite large, which creates a slightly repetitive and flat visual feel.

  • 🔁 Suggestion: Add a splash of accent or brand color to one or two icons (e.g., the current or recommended challenge) to introduce subtle variation and focus.

3. Interactivity Not Obvious

  • There's no visual indication that these cards are tappable.

  • 🔁 Suggestion: Add a small arrow, a hover-like outline, or a soft shadow on press state (even if static) to improve perceived interactivity.


  • Improvements
To improve the visual clarity and engagement of the Challenge page, I updated the interface by introducing colored icons for each challenge card. By applying colored icons, I aimed to create stronger visual differentiation between challenges while making the interface feel more dynamic and inviting. 

Fig 2.9 Challenge page design before (left) vs. after (right)

4. Course Description

  • Feedback by AI:

✅ What Works Well

1. Clear Tab Navigation (Description vs. Index)

  • The toggle buttons for “Description” and “Index” are cleanly designed with clear contrast between active/inactive states.

  • This reinforces progressive disclosure, allowing users to focus on one view at a time without cognitive overload.

2. Structured Key Feature List

  • The Java features are presented in a numbered list, using bolded keywords and well-formatted text.

  • This improves readability and scanability, especially for users who want a quick overview of what Java offers.

3. Course Navigation (Index Tab)

  • The accordion-style module list in the Index is compact and user-friendly.

  • Each topic is numbered and grouped logically, helping learners track progression.

  • Good alignment and padding within each card make the layout clear and neat.

4. Consistent Branding

  • Accent color is applied selectively and appropriately — especially in the CTA button (“Start Here”).

  • Related course cards (Python, HTML, CSS) follow consistent styling, reinforcing a cohesive learning environment.

🔧 Suggestions for Improvement

1. Visual Hierarchy: Use subtle icons or alternating row backgrounds in the “Key Features” list to improve scannability.

2. Accordion Arrows (Index View): Display dynamic arrows (down for closed, up for open) to better reflect section states.

3. Related Courses Section: Add short course names below each logo to support accessibility and help users unfamiliar with the icons.


  • Improvements
I introduced accent-colored buttons to strengthen the visual hierarchy and guide user actions more effectively. This small change significantly enhances clarity, accessibility, and user focus, especially in a dark-themed interface. It also reinforces a sense of continuity, as the accent color is used selectively across the app to highlight interaction points.

Fig 2.10 Course description before (top) vs. after (bottom)

5. Exercises

  • Feedback by AI:

✅ What Works Well

1. Hierarchy is clear: The title “Introducing Java” and the progress bar clearly indicate where the user is in the learning journey.

2. Text alignment and spacing: The paragraph text is well-structured, with consistent spacing and a comfortable line length.

3. Call-to-action presence: The “Continue” button is prominently placed and easy to access.


🔧 Suggestions for Improvement

1. Use an Accent Color for the Button: According to Fitts’s Law, making primary actions visually distinct helps users locate and act on them faster.

2. Strengthen the Progress Indicator: Use a brighter or more saturated tone for the filled section.


  • Improvements
On the Exercises page, I continued the use of accent-colored buttons to maintain visual consistency and guide user interaction. Just like on the course description page, the goal was to clearly highlight primary action such as “Continue”, using a color that stands out against the dark background while staying within the app’s design system.

Fig 2.11 Exercise page before (top) vs. after (bottom)

6. Challenges

  • Feedback by AI:

✅ What Works Well

1. Progress indication is clearly shown, helping users track their learning journey effortlessly.

2. The task is well-scaffolded, guiding the user from context to instruction to action step by step.

3. Use of a visual icon adds interest, helping break up text and reinforcing the theme of reporting.

4. The “Check” button is clearly labeled, giving users confidence in what will happen next.

5. Typography hierarchy is effective, with clear distinction between instructions, input, and system prompts.

🔧 Suggestions for Improvement

1. Use an accent color for the “Check” button to visually connect it to the app’s identity and highlight it as the primary action.

2. Differentiate the input area background with a border or lighter shade to clearly indicate it’s editable.


  • Improvements
On the Challenges page, I applied the same accent color treatment to the action buttons to maintain consistency with other core screens like the course and exercise pages.

Fig 2.12 Challenge page before (left) vs. after (right)

7. Progress Tracking Page
  • Feedback by AI:

✅ What Works Well

1. Motivational Focus (Day Streak)

  • The “100 Day” streak is visually prominent, with the flame icon reinforcing the user’s momentum and achievement.

  • This kind of positive reinforcement is excellent for habit-building and user retention.

2. Achievement Badges Section

  • The icons are well-aligned and evenly spaced, hinting at a gamified progression system.

  • This is a good visual motivator, even if not interactive yet.

  • A forward arrow suggests navigating to a detailed badge page, which is a great use of progressive disclosure.

3. Learning Progress (Latest Learn + Certificates)

  • The “Latest Learn” card (Java) is clear, with a progress bar and call-to-action button (“Continue”) that encourages users to keep going.

  • The Completion Certificates section is neatly structured:

    • Uses branded icons for each language (Python, HTML, JS, etc.)

    • Circular progress bars give an at-a-glance view of completion percentages.

    • Visual stacking is clean and readable.

4. Overall Structure

  • The screen is broken into digestible vertical sections.

  • Consistent card styling and spacing help maintain rhythm throughout the scroll.

🔧 Suggestions for Improvement

1. Certificate Progress Contrast: Apply varied colors to progress bars (e.g., green for complete, blue for in-progress, grey for low progress) to improve visual hierarchy.

2. Section Labeling: Add a supportive subtitle like “Your progress so far” under “Completion Certificates” to enhance clarity and tone.

3. Progress CTA Button: Enlarge the “Continue” button or match its style to other accent CTAs for better visibility and consistency.


  • Improvements
In this page, I updated the color for the logos and did minor color adjustments. Other addition of text and icons were not considered as I want to keep the design minimal and clean.

Fig 2.13 Progress tracking page before (left) vs. after (right)

8. Day Streak
  • Feedback by AI:

✅ What Works Well

1. Clear Streak Recognition

  • The flame icon and bold “100 days” text create a strong visual cue that celebrates the user’s achievement.

  • The layout is clean and uncluttered, with a clear focus on the streak milestone.

2. Motivational Messaging

  • The supportive message (“You have been learning to code for 100 days! Keep going!”) adds emotional encouragement, which is important for retention in educational apps.

3. Effective Use of Accent Color

  • The accent-colored “Share” button draws attention without overwhelming the screen — a great use of color to guide action.

4. Minimal Distraction

  • By limiting the content to just the milestone, message, and CTA, the page stays focused and celebratory — supporting a moment of achievement without unnecessary noise.

🔧 Suggestions for Improvement

1. Flame Icon Emphasis: Add a soft glow, animation, or gradient ring around the flame icon to make the milestone feel more dynamic and exciting.

2. Text Hierarchy: Increase the font size or weight of “Keep going!” or rephrase it as a headline like “You’re on fire! Keep going!” to boost motivation.

3. Share Sheet Labeling: Add a clear label such as “Share your progress” to the share panel for better user context when it’s opened.


  • Improvements
Minor color and font weight changes were done on this page.

Fig 2.14 Day Streak page before (left) vs. after (right)

9. Certificate
  • Feedback by AI:

✅ What Works Well

1. Clear Certificate Layout

  • The structure is well-defined: title at the top ("Certificate of Completion"), followed by recipient name, course title, and issuing app.

  • Text is centered and balanced, giving the layout a formal and intentional appearance.

2. Strong Personalization

  • Including the user’s name (e.g., “Sin Jun Ming”) creates a sense of ownership and reward.

  • Displaying the completed course (e.g., Python) reinforces the specific achievement.

3. Functional Sharing and Download Options

  • Icons for download and share are clearly presented, making it easy for users to save or promote their accomplishment.

  • The inclusion of a share sheet with social icons (Facebook, Instagram, WhatsApp, etc.) reflects real-world use cases and adds value to the experience.

4. Brand Presence

  • Featuring the Encode logo at the bottom gives the certificate credibility and brand reinforcement.

🔧 Suggestions for Improvement

1. Certificate Design Depth: Add a subtle border, inner shadow, or gradient background to give the certificate card a more premium, layered feel.

2. Visual Hierarchy: Make key text elements like the user’s name and course title larger or bolder to create clear focus and distinction.

3. "Certificate of Completion" Label: Use a badge, ribbon, or icon to help the label stand out more prominently as a header.


  • Improvements
I made a few minor color adjustments to the text and added a Python logo next to the course name to enhance clarity and visual recognition.

Fig 2.15 Certificate page before (left) vs. after (right)

10. Achievement Badge
  • Feedback by AI:

✅ Strengths

  1. Clear feedback is provided through a celebratory message that reinforces progress.

  2. Visual hierarchy is effective, with icon, title, and message arranged in a logical top-down flow.

  3. The use of an icon personalizes the achievement, making the recognition feel more tangible.

  4. The “Share” button is clearly labeled, inviting social engagement without confusion.

  5. Bottom navigation is consistent, helping users orient themselves within the app.

🔧 Suggestions for Improvement

  1. Make the “Share” button more prominent using color or iconography to increase tap motivation.

  2. Add a small animation or confetti effect to reinforce the feeling of accomplishment.


  • Improvements:
Colors were updated in this page.

Fig 2.16 Achievement badge page before (left) vs. after (right)

11. Community Forum
  • Feedback by AI:

✅ What Works Well

1. Clean, Scrollable Card Layout

  • Each forum post is presented in a well-structured card format, making it easy to browse multiple discussions quickly.

  • Good vertical spacing between cards prevents visual crowding and supports scanability.

2. Familiar Social Pattern

  • The structure of each post (title, author, timestamp, comment/like icons) follows common social media/forum conventions, making it familiar and intuitive for users.

3. Accent Color Usage

  • The active tab ("Discussion") is clearly marked using the app’s accent color, which improves navigation and visual focus.

4. Consistent Typography

  • Post titles and meta information (author, time) are cleanly aligned, and the font sizes are readable.

🔧 Suggestions for Improvement

1. Post Title Hierarchy: Increase the font size and weight of post titles while making author and time details smaller and lighter to improve visual hierarchy.

2. Card Interactivity: Add a right arrow icon or subtle visual cues like border highlights or elevation to clearly indicate tappable cards.

3. Engagement Icons (Like/Comment): Increase padding or spacing around icons and optionally show counts to better reflect user activity and popularity.


  • Improvements
In this page, I updated the color for the buttons. The post title hierarchy is already in the current design as the name and date were smaller in size and appears with grey color. Additionally, the icons are not considered to be added into the design as I want it to be clean and minimal.

Fig 2.17 Community page before (left) vs. after (right)

12. Profile Page

  • Feedback by AI:

✅Strengths:

1. Clean Layout: The design is minimalistic and uncluttered, making it easy to navigate.

2. Key Metrics Display: The follower, following, and XP totals are prominently displayed, which is useful for a coding platform.

3. Progress Tracking: The "Latest Learn" section with a progress bar (20% Java) is a nice touch for motivation.

4. Clear Sections: The tabs (Home, Challenges, Progress, Community, Profile) are well-organized.


🔧Areas for Improvement:

1. Visual Hierarchy: Make the user’s name and role more prominent with larger or bold fonts, and place clear labels like “Followers,” “Following,” and “XP” near their respective metrics.

2. Edit Profile: Move the “Edit Profile” option closer to the user’s name or avatar for easier access and discoverability.

3. Achievement Badges: If space permits, display 1-2 achievement badges to encourage and reward user progress.

4. Progress Section: Make the “Continue” button visually distinct with color and add a time estimate like “10 mins left” to motivate users to complete the course.

  • Improvements
I updated the colors and done some minor adjustments based on the feedback by AI on the profile page.

Fig 2.18 Profile page before (left) vs. after (right)


Final Outcome

Fig 3.1 Previous design screens

Fig 3.2 Final design screens

Fig 3.3 Final design with prototype flow





Reflection

Designing the Encode app in App Design 1 has been a valuable learning journey that helped me better understand the balance between usability, visual design, and user-centered thinking. The goal was to create a mobile learning experience that motivates users to develop coding skills through structured lessons, challenges, and community engagement. From the beginning, I focused on building a clean and consistent dark-themed interface that would support clarity, reduce visual strain, and align with modern mobile UI trends.

Throughout the design process, I experimented with typography hierarchy, card-based layouts, and section structuring to support scanability and ease of use. One of the key improvements I made was introducing an accent color that was applied selectively to call-to-action buttons, progress indicators, and active tabs. This helped establish a stronger visual hierarchy and improved the clarity of primary user actions. I also explored the use of iconography and minimal animations to enhance engagement while keeping the interface clean and intuitive.

Overall, this task helped me grow in my ability to evaluate and iterate on interface decisions. It also set a strong foundation for the next stage, where I’ll begin building the MVP in FlutterFlow. The reflection process reminded me that great design is not about adding more—it's about making each element meaningful and purposeful.



Comments

Post a Comment