INSTRUCTIONS
<iframe
src="https://drive.google.com/file/d/16bRDQ2MYICukbgm9S20tULOMcRedVvyr/preview"
width="640" height="480"
allow="autoplay"></iframe>
Recent Design Overview
Identified Issues
Recent Design Overview
Identified Issues
I then compiled all the refined tasks in order —
Let’s take a look. I would also like to mention that I
won’t be changing everything according to the chat, as
some functions don’t need any modifications to avoid
misleading our customer.
1. Design Improvements
-
Photo popups: Enlarge or enable swipe gestures for a more mobile-native feel.
-
Text size: Slightly increase size of small text (e.g., "21 stops", times) for accessibility.
-
Contrast: Ensure text contrast meets WCAG guidelines, especially gray text on light backgrounds.
-
Photo popups: Enlarge or enable swipe gestures for a more mobile-native feel.
-
Text size: Slightly increase size of small text (e.g., "21 stops", times) for accessibility.
-
Contrast: Ensure text contrast meets WCAG guidelines, especially gray text on light backgrounds.
2. UX (User Experience) Enhancements
-
Micro interactions: Add loading animations or effects (e.g., while searching).
-
“Back to routes” button: Add an easy way to return to previous route options.
-
Micro interactions: Add loading animations or effects (e.g., while searching).
-
“Back to routes” button: Add an easy way to return to previous route options.
3. Interaction Flow Adjustments
-
Progress indicator: Add a “Step 1 of 3” or similar to guide users through the process.
-
Arrival confirmation: Show a simple “You have arrived!” message with options.
-
Clickable route sections: Make each journey segment (e.g., Bus, Train) expandable for more detail.
-
Progress indicator: Add a “Step 1 of 3” or similar to guide users through the process.
-
Arrival confirmation: Show a simple “You have arrived!” message with options.
-
Clickable route sections: Make each journey segment (e.g., Bus, Train) expandable for more detail.
4. Information Clarity Enhancements
-
Tappable clarity: Reword text like “21 stops” to “View all 21 stops”.
-
Photo labels: Add a small caption (e.g., “View of SJ360 LRT BK5”) under each stop photo.
-
ETA display: In addition to duration, show expected arrival time at the destination.
-
Tappable clarity: Reword text like “21 stops” to “View all 21 stops”.
-
Photo labels: Add a small caption (e.g., “View of SJ360 LRT BK5”) under each stop photo.
-
ETA display: In addition to duration, show expected arrival time at the destination.
5. Animation & Accessibility Suggestions
-
Micro interactions:
-
Animate route card expansion, dropdowns, and popups.
-
Add confirmation animations (e.g., flashing checkmark when a route is selected).
-
Accessibility:
-
All buttons should be at least 44x44 pixel.
-
Review color contrast and font sizes against WCAG 2.1 standards.
-
Micro interactions:
-
Animate route card expansion, dropdowns, and popups.
-
Add confirmation animations (e.g., flashing checkmark when a route is selected).
-
-
Accessibility:
-
All buttons should be at least 44x44 pixel.
-
Review color contrast and font sizes against WCAG 2.1 standards.
-
6. Performance & Responsiveness
-
Lazy load: Load photos and route data only when needed to speed up performance.
-
Asset caching: Cache icons, station data, and common elements locally for faster load times.
Refinement Process
New Design Showcase
REFLECTION
Experience
During this APP II design assignment, I found myself facing a
bottleneck. Most of the major usability and visual design
issues had already been addressed during APP I class, so I
struggled to identify what else could be improved. In search
of further enhancements, I consulted Chat to analyze potential
weak areas. The feedback mostly emphasized the importance of
animation and motion design in order to capture user attention
within the first 1–3 seconds. This made me realize that
interaction timing and visual feedback are areas where some
refinements can make a big impact, even when the layout is
already established.
Observations
Another observation came from evaluating the color
system of the app. Since the app deals with public
transport, I use a wide range of pre-defined route
colors. I asked Chat to evaluate the color contrast and
accessibility, and the results showed several contrast
issues on some of the buttons, especially under WCAG
guidelines. While I did a manual contrast check to
confirm this, I also recognized a limitation: these
colors represent official route codes and cannot be
altered. This tension between real-world constraints and
accessibility best practices reminded me that design
sometimes requires prioritizing context over perfection.
Still, this insight has made me more conscious of edge
cases and the importance of offering visual alternatives
when color limitations exist.
Findings
In class, some redesign exercises recall my
understanding of layout and usability. A task where we
had to redesign a flight ticket was especially
exciting, as I had worked on something similar during
my internship few years ago. It was a useful reminder
of how design is not only about aesthetics but also
about clarity and space efficiency. I also learned
about a new technique: the prototype flow chart.
Unlike traditional flowcharts, this format allowed us
to include thumbnail sketches of key screens at
decision points. This made the logic of the user
journey easier to understand and gave a more holistic
view of the app.
-
Lazy load: Load photos and route data only when needed to speed up performance.
-
Asset caching: Cache icons, station data, and common elements locally for faster load times.
New Design Showcase