PROJECT PART 3: CONCEPTUAL & PHYSICAL DESIGN
Subject: Human-Computer Interaction
(SECV2113)
Session: 2024/2025 Semester 2
Lecturer: Ts. Dr. Sarina binti
Sulaiman
From: Group 7 Powerpuff
Group leader: Shannon Toh Jia Ee
Member:
1.
Ng
Esther
2.
Kam
Kai Xin
3.
Chong
Wen Hui
A. Storyboard
Goal 1: Sort Waste into the Correct
Bin
 |
{Photo of storyboard for Task 1 – User 1 sorting waste using GreenSort bin}
Goal 2: Monitor Bin Fill Level via App
 |
{Photo of storyboard for Task 2 –User 2 using mobile
app to check bin status}
Goal 3: Generate Waste Report / View
Stats
 |
{Photo of storyboard for Task 3 – User 3 accessing
report dashboard}
- Alternative Designs
Alternative
Design 1 – Shannon Toh Jia Ee
 |
{Scan of Crazy 8 from Member 1}
Alternative
Design 2 – Ng Esther
 |
{Scan of Crazy 8 from Member 2}
Alternative
Design 3 – Kam Kai Xin
 |
{Scan of Crazy 8 from Member 3}
Alternative
Design 4 – Chong Wen Hui
 |
{Scan of Crazy 8 from Member 4}
C.
 |
Scan of voted design elements/layouts
D.
Wireframe Layout & Interface Design
Below are
simplified wireframe sketches representing the mobile app layout for each of
the three tasks in GreenSort:
Task 1: Sort Waste (Bin Interface)
Interface
Components:
o Camera window to scan item
o Animated indicator (light/audio)
o Auto-opening bin compartment
o AI Avatar with simple text instruction
Task 2: Monitor Bin Fill Level (Mobile
App)
Interface
Components:
o Map with bin status icons (Red = full, Green = empty)
o Tap-to-view bin status
o Route suggestion based on nearest available bin
o AI Avatar shows alerts
Task 3: Generate Report/View Stats
Interface
Components:
o Weekly waste summary card
o “Download” button for PDF report
o Gamified badge area (for user)
o Floor-wise breakdown bar chart (for admin)
o AI Avatar shows comparison vs. previous week
Justification of Interface Design
1.
Strive for Consistency
All screens
follow a uniform layout using consistent colors, fonts, and button placements.
Green always signals success or eco-feedback; red indicates warnings or full bins.
2.
Enable Frequent Users to Use Shortcuts
Users can
access “Quick View” or set shortcuts to most-used actions like generating
reports or viewing nearby bins.
3.
Offer Informative Feedback
Every user
action (e.g., scanning an item, submitting a report) gives immediate
visual/audio confirmation. AI Avatar also provides verbal summaries.
4.
Design Dialogs to Yield Closure
Tasks like
sorting waste or downloading reports have clear completion indicators (e.g.,
success pop-up, thank-you animation).
5.
Prevent Errors
Misclassification
is minimized by the AI confirming the material type before opening the correct
bin. Input fields are labeled with tips.
6.
Permit Easy Reversal of Actions
In-app
navigation always includes a back icon or cancel option. For reports, drafts
can be discarded or regenerated.
7.
Support Internal Locus of Control
Users feel in
control by being guided rather than restricted. User 2, for example, can choose
which bin to approach based on map data.
8.
Reduce Short-Term Memory Load
Icons and AI narration
help users remember steps without rechecking instructions. Previous actions are
stored briefly for quick reference.
E.
Reason or
Justification of the Design
The
design of the GreenSort system prioritizes clarity, accessibility, and eco-engagement
for users of varying backgrounds and technical skills. Our layout uses large,
high-contrast icons, color-coded indicators, and voice prompts to guide users
through waste sorting, reducing cognitive load. For example, bins light up in
real-time with green, red, or yellow indicators to signal availability or
status. The mobile app offers a clean, map-based interface that supports fast
decision-making, especially for users like Miss
Celeste who need to plan their
cleaning routes efficiently.
We
followed Shneiderman’s Golden
Rules by ensuring consistency
across all screens, immediate feedback, error prevention (e.g., confirmation
before sorting), and clear task closure (e.g., “thank you” animations after
correct disposal). The report generation flow is simplified using recognizable
dashboard structures to help admin users like Mrs Ng make
operational decisions quickly. The app also incorporates gamified elements to
engage users like Miss Rachel, who benefit from motivational statistics and
rewards. Together, the design reflects the functional needs identified in the
task analysis while encouraging environmentally responsible habits.
F.
Description
and Justification of Metaphors
The
GreenSort interface incorporates several intuitive interaction metaphors to
enhance user understanding and engagement:
i.
Traffic Light
Metaphor
Color-coded
status icons (green = available, yellow = nearly full, red = full) help users
instantly understand bin capacity. This metaphor is universally recognized and
reduces decision-making time.
ii.
Map Navigation
Metaphor
The app
uses a map-based layout, similar to navigation apps like Google Maps, allowing
users to view bin locations and statuses visually. This aids spatial
decision-making.
iii.
Gamification/Badge
Metaphor
Users
earn eco-badges for responsible sorting, similar to fitness or
language-learning apps. This encourages long-term habit formation through
motivation and positive reinforcement.
iv.
Voice Assistant
Metaphor
The AI
avatar interacts like Siri or Google Assistant—giving voice feedback, sorting
confirmations, and reminders. This makes the system feel supportive, especially
for new users.
v.
Digital Filing
Cabinet Metaphor
Reports
and recycling history are organized like digital folders. Admin users can
browse, select, and export data as if managing files on a desktop—making the
system familiar and efficient.
These metaphors make the system more relatable, reduce learning time, and enhance user confidence and satisfaction.
